styling issues found on styled-components upgrade - temporarily downg…

…rading to previous working version v4.2 #556
impactoss · Sep 9, 2024 · 28d6206 · 28d6206
1 parent da064d5
commit 28d6206
Show file tree

Hide file tree

Showing 3 changed files with 270 additions and 287 deletions.
diff --git a/app/containers/App/index.js b/app/containers/App/index.js
@@ -12,8 +12,7 @@ import ReactModal from 'react-modal';
 import GlobalStyle from 'global-styles';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-import styled, { StyleSheetManager } from 'styled-components';
-import isPropValid from '@emotion/is-prop-valid';
+import styled from 'styled-components';
 import { palette } from 'styled-theme';
 import Header from 'components/Header';
 import SkipContent from 'components/styled/SkipContent';
@@ -225,93 +224,91 @@ class App extends React.PureComponent { // eslint-disable-line react/prefer-stat
     const hasSettings = settings && settings.some((val) => !!val.get('available'));
     return (
       <div>
-        <StyleSheetManager shouldForwardProp={isPropValid}>
-          <SkipContent
-            href="#main-content"
-            title={intl.formatMessage(messages.screenreader.skipToContent)}
-          >
-            <FormattedMessage {...messages.screenreader.skipToContent} />
-          </SkipContent>
-          <HelmetCanonical titleTemplate={`${title} - %s`} defaultTitle={title} />
-          <Header
-            isSignedIn={isUserSignedIn}
-            user={user}
-            pages={pages && this.preparePageMenuPages(pages)}
-            navItems={this.prepareMainMenuItems(
-              highestRole,
-              isUserSignedIn,
-              location.pathname,
+        <SkipContent
+          href="#main-content"
+          title={intl.formatMessage(messages.screenreader.skipToContent)}
+        >
+          <FormattedMessage {...messages.screenreader.skipToContent} />
+        </SkipContent>
+        <HelmetCanonical titleTemplate={`${title} - %s`} defaultTitle={title} />
+        <Header
+          isSignedIn={isUserSignedIn}
+          user={user}
+          pages={pages && this.preparePageMenuPages(pages)}
+          navItems={this.prepareMainMenuItems(
+            highestRole,
+            isUserSignedIn,
+            location.pathname,
+            currentFrameworkId,
+            viewRecommendationFramework,
+            intl,
+          )}
+          search={{
+            path: ROUTES.SEARCH,
+            title: intl.formatMessage(messages.nav.search),
+            active: location.pathname.startsWith(ROUTES.SEARCH),
+            icon: 'search',
+          }}
+          onPageLink={onPageLink}
+          isHome={isHome}
+          onSelectFramework={onSelectFramework}
+          frameworkOptions={frameworks && frameworks.size > 1
+            ? this.prepareFrameworkOptions(
+              frameworks,
               currentFrameworkId,
-              viewRecommendationFramework,
               intl,
-            )}
-            search={{
-              path: ROUTES.SEARCH,
-              title: intl.formatMessage(messages.nav.search),
-              active: location.pathname.startsWith(ROUTES.SEARCH),
-              icon: 'search',
-            }}
-            onPageLink={onPageLink}
-            isHome={isHome}
-            onSelectFramework={onSelectFramework}
-            frameworkOptions={frameworks && frameworks.size > 1
-              ? this.prepareFrameworkOptions(
-                frameworks,
-                currentFrameworkId,
-                intl,
-              )
-              : null}
-            currentPath={location.pathname}
-            fullPath={`${location.pathname}${location.search}`}
-            brandPath={ROUTES.OVERVIEW}
-            onShowSettings={() => onShowSettings(true)}
-            hasSettings={dataReady && hasSettings}
-          />
-          <Main isHome={isHome} role="main" id="main-content">
-            {React.Children.toArray(children)}
-          </Main>
-          {newEntityModal
-            && (
-              <ReactModal
-                isOpen
-                appElement={document.getElementById('app')}
-                contentLabel={newEntityModal.get('path')}
-                onRequestClose={this.props.onCloseModal}
-                className="new-entity-modal"
-                overlayClassName="new-entity-modal-overlay"
-                style={{
-                  overlay: { zIndex: 99999999 },
-                }}
-              >
-                <EntityNew
-                  path={newEntityModal.get('path')}
-                  attributes={newEntityModal.get('attributes')}
-                  onSaveSuccess={this.props.onCloseModal}
-                  onCancel={this.props.onCloseModal}
-                  inModal
-                />
-              </ReactModal>
             )
-          }
-          {showSettings && (
+            : null}
+          currentPath={location.pathname}
+          fullPath={`${location.pathname}${location.search}`}
+          brandPath={ROUTES.OVERVIEW}
+          onShowSettings={() => onShowSettings(true)}
+          hasSettings={dataReady && hasSettings}
+        />
+        <Main isHome={isHome} role="main" id="main-content">
+          {React.Children.toArray(children)}
+        </Main>
+        {newEntityModal
+          && (
             <ReactModal
               isOpen
               appElement={document.getElementById('app')}
-              contentLabel="Settings"
-              onRequestClose={() => onShowSettings(false)}
-              className="global-settings-modal"
-              overlayClassName="global-settings-modal-overlay"
+              contentLabel={newEntityModal.get('path')}
+              onRequestClose={this.props.onCloseModal}
+              className="new-entity-modal"
+              overlayClassName="new-entity-modal-overlay"
               style={{
                 overlay: { zIndex: 99999999 },
               }}
             >
-              <GlobalSettings
-                onClose={() => onShowSettings(false)}
+              <EntityNew
+                path={newEntityModal.get('path')}
+                attributes={newEntityModal.get('attributes')}
+                onSaveSuccess={this.props.onCloseModal}
+                onCancel={this.props.onCloseModal}
+                inModal
               />
             </ReactModal>
-          )}
-          <GlobalStyle />
-        </StyleSheetManager>
+          )
+        }
+        {showSettings && (
+          <ReactModal
+            isOpen
+            appElement={document.getElementById('app')}
+            contentLabel="Settings"
+            onRequestClose={() => onShowSettings(false)}
+            className="global-settings-modal"
+            overlayClassName="global-settings-modal-overlay"
+            style={{
+              overlay: { zIndex: 99999999 },
+            }}
+          >
+            <GlobalSettings
+              onClose={() => onShowSettings(false)}
+            />
+          </ReactModal>
+        )}
+        <GlobalStyle />
       </div>
     );
   }