feature: fix reskin button design (#2007)

* Fixes dark theme primary disabled button styles * Fix font loading bugs and input color on dark theme * remove dead fonts * create and implement secondary elevated button * Updates button styles * Remove commented code
CityOfZion · Nov 5, 2020 · a020be8 · a020be8
1 parent c592270
commit a020be8
Show file tree

Hide file tree

Showing 45 changed files with 80 additions and 68 deletions.
diff --git a/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap b/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap
@@ -91,6 +91,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
               "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
               "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
               "--button-primary-disabled-background-color": "#E0E9EF",
+              "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
               "--button-primary-disabled-text-color": "#acbbc4",
               "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
               "--button-primary-text": "#394152",
@@ -205,6 +206,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
               "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
               "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
               "--button-primary-disabled-background-color": "#E0E9EF",
+              "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
               "--button-primary-disabled-text-color": "#acbbc4",
               "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
               "--button-primary-text": "#394152",
@@ -331,7 +333,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                           </span>
                         </button>
                         <button
-                          class="button secondary"
+                          class="button primary secondaryRaised"
                           id="cancel"
                           type="button"
                         >
@@ -411,6 +413,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                   "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                   "--button-primary-disabled-background-color": "#E0E9EF",
+                  "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                   "--button-primary-disabled-text-color": "#acbbc4",
                   "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                   "--button-primary-text": "#394152",
@@ -525,6 +528,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                   "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                   "--button-primary-disabled-background-color": "#E0E9EF",
+                  "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                   "--button-primary-disabled-text-color": "#acbbc4",
                   "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                   "--button-primary-text": "#394152",
@@ -639,6 +643,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                   "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                   "--button-primary-disabled-background-color": "#E0E9EF",
+                  "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                   "--button-primary-disabled-text-color": "#acbbc4",
                   "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                   "--button-primary-text": "#394152",
@@ -758,6 +763,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                     "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                     "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                     "--button-primary-disabled-background-color": "#E0E9EF",
+                    "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                     "--button-primary-disabled-text-color": "#acbbc4",
                     "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                     "--button-primary-text": "#394152",
@@ -886,6 +892,7 @@ exports[`ConfirmModal should render without crashing 1`] = `
                       "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                       "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                       "--button-primary-disabled-background-color": "#E0E9EF",
+                      "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                       "--button-primary-disabled-text-color": "#acbbc4",
                       "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                       "--button-primary-text": "#394152",
@@ -1007,14 +1014,15 @@ exports[`ConfirmModal should render without crashing 1`] = `
                         </button>
                       </Button>
                       <Button
+                        elevated={true}
                         id="cancel"
                         onClick={[Function]}
                         primary={false}
                         shouldCenterButtonLabelText={false}
                         type="button"
                       >
                         <button
-                          className="button secondary"
+                          className="button primary secondaryRaised"
                           id="cancel"
                           onClick={[Function]}
                           type="button"

diff --git a/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap b/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap
@@ -1004,6 +1004,7 @@ exports[`Sidebar renders without crashing 1`] = `
                                             "--button-primary-background-image": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)",
                                             "--button-primary-box-shadow": "-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF",
                                             "--button-primary-disabled-background-color": "#E0E9EF",
+                                            "--button-primary-disabled-box-shadow": " -17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1",
                                             "--button-primary-disabled-text-color": "#acbbc4",
                                             "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)",
                                             "--button-primary-text": "#394152",
@@ -1244,13 +1245,14 @@ exports[`Sidebar renders without crashing 1`] = `
                                                     onClick={[Function]}
                                                   >
                                                     <Button
+                                                      elevated={true}
                                                       primary={false}
                                                       renderIcon={[Function]}
                                                       shouldCenterButtonLabelText={true}
                                                       type="button"
                                                     >
                                                       <button
-                                                        className="button secondary"
+                                                        className="button primary secondaryRaised"
                                                         type="button"
                                                       >
                                                         <span

diff --git a/app/assets/fonts/Gotham-Black.woff b/app/assets/fonts/Gotham-Black.woff
diff --git a/app/assets/fonts/Gotham-Bold.woff b/app/assets/fonts/Gotham-Bold.woff
diff --git a/app/assets/fonts/Gotham-Book.woff b/app/assets/fonts/Gotham-Book.woff
diff --git a/app/assets/fonts/Gotham-BookItalic.woff b/app/assets/fonts/Gotham-BookItalic.woff
diff --git a/app/assets/fonts/Gotham-Light.woff b/app/assets/fonts/Gotham-Light.woff
diff --git a/app/assets/fonts/Gotham-LightItalic.woff b/app/assets/fonts/Gotham-LightItalic.woff
diff --git a/app/assets/fonts/Gotham-Medium.woff b/app/assets/fonts/Gotham-Medium.woff
diff --git a/app/assets/fonts/Gotham-MediumItalic.woff b/app/assets/fonts/Gotham-MediumItalic.woff
diff --git a/app/assets/fonts/Gotham-Thin.woff b/app/assets/fonts/Gotham-Thin.woff
diff --git a/app/assets/fonts/Gotham-ThinItalic.woff b/app/assets/fonts/Gotham-ThinItalic.woff
diff --git a/app/assets/fonts/Gotham-UltraItalic.woff b/app/assets/fonts/Gotham-UltraItalic.woff
diff --git a/app/assets/fonts/Gotham-XLight.woff b/app/assets/fonts/Gotham-XLight.woff
diff --git a/app/assets/fonts/Gotham-XLightItalic.woff b/app/assets/fonts/Gotham-XLightItalic.woff
diff --git a/app/assets/fonts/SofiaProBold.ttf b/app/assets/fonts/SofiaProBold.ttf
diff --git a/app/assets/fonts/SofiaProExtraLight.ttf b/app/assets/fonts/SofiaProExtraLight.ttf
diff --git a/app/assets/fonts/SofiaProLight.ttf b/app/assets/fonts/SofiaProLight.ttf
diff --git a/app/assets/fonts/SofiaProMedium.ttf b/app/assets/fonts/SofiaProMedium.ttf
diff --git a/app/assets/fonts/SofiaProRegular-Italic.ttf b/app/assets/fonts/SofiaProRegular-Italic.ttf
diff --git a/app/assets/fonts/SofiaProRegular.ttf b/app/assets/fonts/SofiaProRegular.ttf
diff --git a/app/assets/fonts/SofiaProSemiBold (1).ttf b/app/assets/fonts/SofiaProSemiBold (1).ttf
diff --git a/app/assets/fonts/SofiaProSemiBold.ttf b/app/assets/fonts/SofiaProSemiBold.ttf
diff --git a/app/assets/fonts/SofiaProUltraLight-Italic.ttf b/app/assets/fonts/SofiaProUltraLight-Italic.ttf
diff --git a/app/assets/fonts/SofiaProUltraLight.ttf b/app/assets/fonts/SofiaProUltraLight.ttf
diff --git a/app/assets/fonts/sofiapro-bold-webfont.woff b/app/assets/fonts/sofiapro-bold-webfont.woff
diff --git a/app/assets/fonts/sofiapro-light-webfont.woff b/app/assets/fonts/sofiapro-light-webfont.woff
diff --git a/app/assets/fonts/sofiapro-regular-webfont.woff b/app/assets/fonts/sofiapro-regular-webfont.woff
diff --git a/app/assets/fonts/sofiapro-regularitalic-webfont.woff b/app/assets/fonts/sofiapro-regularitalic-webfont.woff
diff --git a/app/components/Blockchain/Transaction/Transaction.scss b/app/components/Blockchain/Transaction/Transaction.scss
@@ -89,6 +89,7 @@
 
   button[disabled] {
     background: transparent !important;
+    opacity: 0.3;
   }
 }
 

diff --git a/app/components/Button/Button.jsx b/app/components/Button/Button.jsx
@@ -14,6 +14,7 @@ type Props = {
   // will center label if rendered with icon
   shouldCenterButtonLabelText: boolean,
   children: React$Node,
+  elevated?: boolean,
 }
 
 class Button extends React.Component<Props> {
@@ -31,6 +32,7 @@ class Button extends React.Component<Props> {
       'renderIcon',
       'active',
       'shouldCenterButtonLabelText',
+      'elevated',
     )
 
     return (
@@ -41,6 +43,7 @@ class Button extends React.Component<Props> {
           className,
           this.getActiveButtonStyle(),
           this.getButtonStyle(),
+          this.getElevatedSecondaryStyle(),
         )}
       >
         {this.renderIcon()}
@@ -70,8 +73,13 @@ class Button extends React.Component<Props> {
 
   getActiveButtonStyle = () => (this.props.active ? styles.active : undefined)
 
+  getElevatedSecondaryStyle = () =>
+    this.props.elevated ? styles.secondaryRaised : undefined
+
   getButtonStyle = () =>
-    this.props.primary ? styles.primary : styles.secondary
+    this.props.primary || this.props.elevated
+      ? styles.primary
+      : styles.secondary
 
   getIconStyle = () => (this.props.primary ? styles.primary : styles.secondary)
 }

diff --git a/app/components/Button/Button.scss b/app/components/Button/Button.scss
@@ -26,7 +26,7 @@
   height: 50px;
 
   &[disabled] {
-    opacity: 0.6;
+    opacity: 1;
   }
 
   &:not([disabled]) {
@@ -36,8 +36,8 @@
   &.primary {
     &[disabled] {
       background-color: var(--button-primary-disabled-background-color);
-      background-image: var(--button-primary-disabled-background-color);
-      box-shadow: none;
+      background-image: var(--button-primary-disabled-background-image);
+      box-shadow: var(--button-primary-disabled-box-shadow);
       color: var(--button-primary-disabled-text-color);
       path {
         fill: var(--button-primary-disabled-text-color);
@@ -59,6 +59,24 @@
     }
   }
 
+  &.secondaryRaised {
+    color: var(--base-text);
+
+    path {
+      fill: var(--base-text);
+    }
+
+    &[disabled] {
+      background-color: var(--button-primary-disabled-background-color);
+      background-image: var(--button-primary-disabled-background-image);
+      box-shadow: var(--button-primary-disabled-box-shadow);
+      color: var(--button-primary-disabled-text-color);
+      path {
+        fill: var(--button-primary-disabled-text-color);
+      }
+    }
+  }
+
   &.secondary {
     border: solid;
     border-width: 2px;

diff --git a/app/components/CreateImportWalletForm/CreateImportWalletForm.jsx b/app/components/CreateImportWalletForm/CreateImportWalletForm.jsx
@@ -36,8 +36,8 @@ type State = {
 const PASS_MIN_LENGTH = 4
 
 const LOOKUP_KEY = {
-  WIF: 'privateKeyLabel',
-  ENCRYPTED_WIF: 'encryptedKeyLabel',
+  WIF: 'privateKey',
+  ENCRYPTED_WIF: 'inputEncryptedPlaceholder',
 }
 
 class CreateImportWalletForm extends React.Component<Props, State> {

diff --git a/app/components/Inputs/StyledReactSelect/StyledReactSelect.jsx b/app/components/Inputs/StyledReactSelect/StyledReactSelect.jsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'
 
 const returnDropdownIndicatorColor = props => {
   if (props.selectProps.settingsSelect) return 'var(--settings-link-text)'
-  if (props.isFocused && !props.selectProps.hideHighlight) return '#6bdaf6'
+  if (props.isFocused && !props.selectProps.hideHighlight) return '#66eb8e'
   return 'var(--input-icon)'
 }
 

diff --git a/app/components/Modals/ConfirmModal/ConfirmModal.jsx b/app/components/Modals/ConfirmModal/ConfirmModal.jsx
@@ -52,6 +52,7 @@ const ConfirmModal = ({
           <FormattedMessage id="modalActionConfirm" />
         </Button>
         <Button
+          elevated
           id="cancel"
           onClick={() => {
             hideModal()

diff --git a/app/components/NetworkConfigurationTooltip/NetworkConfigurationTooltip.jsx b/app/components/NetworkConfigurationTooltip/NetworkConfigurationTooltip.jsx
@@ -110,6 +110,7 @@ export default class NetworkConfigurationTooltip extends React.Component<
               <Link to={ROUTES.NETWORK_CONFIGURATION}>
                 <Button
                   shouldCenterButtonLabelText
+                  elevated
                   renderIcon={() => <CogIcon />}
                 >
                   {intl.formatMessage({

diff --git a/app/components/NetworkConfigurationTooltip/NetworkConfigurationTooltip.scss b/app/components/NetworkConfigurationTooltip/NetworkConfigurationTooltip.scss
@@ -68,13 +68,5 @@
     span {
       text-align: center;
     }
-
-    svg {
-      g {
-        path {
-          fill: var(--button-icon-color) !important;
-        }
-      }
-    }
   }
 }
diff --git a/app/components/Panel/FullHeightPanel/FullHeightPanel.scss b/app/components/Panel/FullHeightPanel/FullHeightPanel.scss
@@ -20,7 +20,7 @@
   }
 
   .header {
-    margin-top: 50px;
+    margin-top: 30px;
     display: flex;
     align-items: center;
     font-weight: 500;

diff --git a/app/containers/CreateImportWallet/ImportWallet/ImportWallet.scss b/app/containers/CreateImportWallet/ImportWallet/ImportWallet.scss
@@ -14,7 +14,6 @@
 
 .buttonContainer {
   height: 200px;
-  margin-bottom: 260px;
 }
 
 .importRecoveryInstructions {

diff --git a/app/containers/Home/Home.jsx b/app/containers/Home/Home.jsx
@@ -92,14 +92,14 @@ export default class Home extends React.Component<Props, State> {
           <div className={styles.buttonRow}>
             <div className={styles.buttonContainer}>
               <Link to={ROUTES.CREATE_WALLET}>
-                <Button disabled={loading} renderIcon={AddIcon}>
+                <Button elevated disabled={loading} renderIcon={AddIcon}>
                   <FormattedMessage id="authCreateWallet" />
                 </Button>
               </Link>
             </div>
             <div className={styles.buttonContainer}>
               <Link to={ROUTES.IMPORT_WALLET}>
-                <Button disabled={loading} renderIcon={ImportIcon}>
+                <Button elevated disabled={loading} renderIcon={ImportIcon}>
                   <FormattedMessage id="authImportWallet" />
                 </Button>
               </Link>

diff --git a/app/containers/Home/Home.scss b/app/containers/Home/Home.scss
@@ -154,9 +154,9 @@ $navigation-margin: 20px;
 
 .ledgerStageActive {
   opacity: 1;
-  border-color: #66eb8e #6bdaf6 #6bdaf6 #66eb8e;
+  border-color: #66eb8e;
   &:first-child {
-    border-bottom-color: #6bdaf6;
+    border-bottom-color: #66eb8e;
   }
 
   .ledgerStageIcon {
@@ -206,18 +206,6 @@ $navigation-margin: 20px;
   margin-top: 15px;
   margin-bottom: 30px;
   flex: 1;
-
-  button {
-    background: var(--auth-secondary-button-background) !important;
-  }
-
-  button:hover {
-    background: var(--button-secondary-hover) !important;
-  }
-
-  button:disabled {
-    background: transparent !important;
-  }
 }
 
 .buttonContainer {

diff --git a/app/styles/main.global.scss b/app/styles/main.global.scss
@@ -2,46 +2,36 @@
 
 @font-face {
   font-family: 'SofiaPro';
-  src: url('../assets/fonts/SofiaProRegular.ttf') format('ttf');
+  src: url('../assets/fonts/sofiapro-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
+
 @font-face {
   font-family: 'SofiaPro';
-  src: url('../assets/fonts/SofiaProBold.ttf') format('ttf');
-  font-weight: bold;
-  font-style: normal;
+  src: url('../assets/fonts/sofiapro-regularitalic-webfont.woff') format('woff');
+  font-style: italic;
 }
 
-@font-face {
-  font-family: 'SofiaPro-Medium';
-  src: url('../assets/fonts/SofiaProMedium.ttf') format('ttf');
-}
-@font-face {
-  font-family: 'SofiaPro-Bold';
-  src: url('../assets/fonts/SofiaProBold.ttf') format('ttf');
-}
 @font-face {
   font-family: 'SofiaPro-Light';
-  src: url('../assets/fonts/SofiaProLight.ttf') format('ttf');
+  font-weight: lighter;
+  src: url('../assets/fonts/sofiapro-light-webfont.woff') format('woff');
 }
 @font-face {
-  font-family: 'SofiaPro-Thin';
-  src: url('../assets/fonts/SofiaProUltraLight.ttf') format('ttf');
-}
-@font-face {
-  font-family: 'SofiaPro-Book';
-  src: url('../assets/fonts/SofiaProBold.ttf') format('ttf');
+  font-family: 'SofiaPro-Bold';
+  font-weight: bolder;
+  src: url('../assets/fonts/sofiapro-bold-webfont.woff') format('woff');
 }
 
 :root {
   --font-fallback: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   --font-gotham: 'SofiaPro', var(--font-fallback);
-  --font-gotham-medium: 'SofiaPro-Medium', var(--font-fallback);
+  --font-gotham-medium: 'SofiaPro', var(--font-fallback);
   --font-gotham-bold: 'SofiaPro-Bold', var(--font-fallback);
-  --font-gotham-thin: 'SofiaPro-Thin', var(--font-fallback);
+  --font-gotham-thin: 'SofiaPro-Light', var(--font-fallback);
   --font-gotham-light: 'SofiaPro-Light', var(--font-fallback);
-  --font-gotham-book: 'SofiaPro-Book', var(--font-fallback);
+  --font-gotham-book: 'SofiaPro-Bold', var(--font-fallback);
 }
 
 @media print {
@@ -259,6 +249,7 @@ a {
 
 .tippy-popper {
   max-width: none;
+  margin-left: -5px;
 }
 
 .tippy-tooltip.network-settings-theme {

diff --git a/app/styles/variables.scss b/app/styles/variables.scss
@@ -11,7 +11,7 @@ $text-input-font-size: 14px;
       var(--input-background),
       var(--input-background)
     ),
-    radial-gradient(circle at top left, #66eb8e, #6bdaf6);
+    radial-gradient(circle at top left, #66eb8e, #66eb8e);
   background-origin: border-box;
   background-clip: content-box, border-box;
 }