Merge pull request #3303 from Emurgo/fix/YOEXT-743/settings-radio-btns

fix(revamp): fix broken modern theme layout from adding new revamp layout
Emurgo · Oct 10, 2023 · 80ed012 · 80ed012
2 parents e53dfb1 + 78fb219
commit 80ed012
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js
@@ -42,6 +42,7 @@ function TopBarLayout({
   bgcolor,
 }: AllProps) {
   const isModern = currentTheme === THEMES.YOROI_MODERN;
+  const isRevamp = isRevampLayout && asModern !== true && !isModern;
 
   const getContentUnderBanner: void => Node = () => {
     const topbarComponent = <Box sx={{ zIndex: 2 }}>{topbar}</Box>;
@@ -52,15 +53,16 @@ function TopBarLayout({
         {navbar != null ? navbarComponent : null}
         {notification}
         <Box
+          id="inner-content-wrapper"
           sx={{
             position: 'relative',
             height: '100%',
             '&::-webkit-scrollbar-button': {
               height: '7px',
               display: 'block',
             },
-            boxShadow: !isRevampLayout && showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
-            borderRadius: !isRevampLayout && showAsCard === true && '8px',
+            boxShadow: !isRevamp && showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
+            borderRadius: !isRevamp && showAsCard === true && '8px',
             ...(showInContainer === true && {
               bgcolor: 'common.white',
               width: '100%',
@@ -70,10 +72,10 @@ function TopBarLayout({
               flex: '0 1 auto',
               height: '100%',
             }),
-            overflow: isRevampLayout && asModern !== true && !isModern ? 'auto' : '',
+            overflow: isRevamp ? 'auto' : 'unset',
           }}
         >
-          {isRevampLayout && asModern !== true && !isModern ? (
+          {isRevamp ? (
             <Box
               sx={{
                 bgcolor: bgcolor || 'common.white',
@@ -94,7 +96,8 @@ function TopBarLayout({
                   sx={{
                     height: '100%',
                     minHeight: '200px',
-                    padding: typeof withPadding === 'undefined' || withPadding === true ? '24px' : '0px',
+                    padding:
+                      typeof withPadding === 'undefined' || withPadding === true ? '24px' : '0px',
                     pb: 0,
                     bgcolor: bgcolor || 'common.white',
                   }}
@@ -104,16 +107,24 @@ function TopBarLayout({
               </Box>
             </Box>
           ) : (
-            <Box sx={{ height: '100%', minHeight: '200px' }}>{children}</Box>
+            <Box
+              sx={{
+                height: '100%',
+                minHeight: '200px',
+              }}
+            >
+              {children}
+            </Box>
           )}
         </Box>
       </>
     );
+
     if (showInContainer === true) {
       const boxProperties = {
         height: '100%',
         minHeight: '200px',
-        backgroundColor: 'grey.50',
+        backgroundColor: isRevamp ? 'common.white' : 'var(--yoroi-palette-gray-50)',
         maxWidth: '1295px',
         paddingLeft: '40px',
         paddingRight: '40px',
@@ -123,11 +134,11 @@ function TopBarLayout({
         display: 'flex',
         flexDirection: 'column',
         maxHeight: 'calc(100vh - 110px)',
+        overflow: isRevamp ? 'unset' : 'hidden',
+        pb: isRevamp ? '0px' : '100px',
       };
-      if (isRevampLayout && asModern !== true && !isModern) {
-        boxProperties.backgroundColor = 'common.white';
-      }
-      return isRevampLayout && asModern !== true && !isModern ? (
+
+      return isRevamp ? (
         <Box
           sx={{
             maxWidth: '100%',
@@ -142,11 +153,7 @@ function TopBarLayout({
           {content}
         </Box>
       ) : (
-        <Box
-          sx={boxProperties}
-        >
-          {content}
-        </Box>
+        <Box sx={boxProperties}>{content}</Box>
       );
     }
     return content;
@@ -185,7 +192,7 @@ function TopBarLayout({
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            backgroundColor: isRevampLayout && asModern !== true && !isModern ? 'common.white' : '',
+            backgroundColor: isRevamp ? 'common.white' : 'var(--yoroi-palette-gray-50)',
           }}
         >
           {banner}

diff --git a/.../yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js b/.../yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js
@@ -61,7 +61,7 @@ const messages = defineMessages({
   },
   currentVersion: {
     id: 'settings.theme.currentVersion',
-    defaultMessage: '!!!Yoroi current version',
+    defaultMessage: '!!!Yoroi old version',
   },
   newVersion: {
     id: 'settings.theme.newVersion',
@@ -138,15 +138,6 @@ export default class ThemeSettingsBlock extends Component<Props> {
               flexDirection: 'row',
             }}
           >
-            <FormControlLabel
-              value={OLD_THEME}
-              control={<Radio sx={{ color: 'primary.500' }} size="small" />}
-              label={intl.formatMessage(messages.currentVersion)}
-              id="switchToOldVersionButton"
-              sx={{
-                marginRight: '20px',
-              }}
-            />
             <FormControlLabel
               value={NEW_THEME}
               control={
@@ -160,6 +151,15 @@ export default class ThemeSettingsBlock extends Component<Props> {
               label={intl.formatMessage(messages.newVersion)}
               id="switchToNewVersionButton"
             />
+            <FormControlLabel
+              value={OLD_THEME}
+              control={<Radio sx={{ color: 'primary.500' }} size="small" />}
+              label={intl.formatMessage(messages.currentVersion)}
+              id="switchToOldVersionButton"
+              sx={{
+                marginRight: '20px',
+              }}
+            />
           </RadioGroup>
         </Box>
         {false && currentTheme === THEMES.YOROI_REVAMP && environment.isDev() && (

diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -382,7 +382,7 @@
   "settings.support.reportProblem.content": "If the FAQ does not solve the issue you are experiencing, please use our {supportRequestLink} feature.",
   "settings.support.reportProblem.link": "Support request",
   "settings.support.reportProblem.title": "Reporting a problem",
-  "settings.theme.currentVersion": "Yoroi current version",
+  "settings.theme.currentVersion": "Yoroi old version",
   "settings.theme.newVersion": "Yoroi new version",
   "settings.theme.selectColorTheme": "Select color theme for old version",
   "settings.theme.version": "Version",