Merge pull request #367 from Emurgo/vsubhuman/ch121/replace-ledger-logo

Replace Ledger logo
Emurgo · Mar 27, 2019 · 00937bd · 00937bd
2 parents 1bff3a8 + 62c5529
commit 00937bd
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 73 deletions.
diff --git a/app/assets/images/top-bar/with-ledger-nano-s-logo-white.inline.svg b/app/assets/images/top-bar/with-ledger-nano-s-logo-white.inline.svg
diff --git a/app/assets/images/top-bar/with-ledger-nano-s-logo.inline.svg b/app/assets/images/top-bar/with-ledger-nano-s-logo.inline.svg
diff --git a/app/components/topbar/TopBarCategory.js b/app/components/topbar/TopBarCategory.js
@@ -22,10 +22,10 @@ export default class TopBarCategory extends Component<Props> {
       className
     ]);
 
-    const isWithHW = (className === 'with-trezor-t' || className === 'with-ledger-nano-s');
     const iconStyles = classNames([
       className === 'wallets' ? styles.walletsIcon : null,
-      isWithHW ? styles.withHardwareWalletIcon : null,
+      className === 'with-ledger-nano-s' ? styles.withLedgerNanoSIcon : null,
+      className === 'with-trezor-t' ? styles.withTrezorTIcon : null,
       styles.icon
     ]);
 

diff --git a/app/components/topbar/TopBarCategory.scss b/app/components/topbar/TopBarCategory.scss
@@ -15,32 +15,47 @@
 }
 
 .active {
-  .icon:not(.withHardwareWalletIcon) path {
+  .icon:not(.withLedgerNanoSIcon):not(.withTrezorTIcon) path {
     stroke: var(--theme-button-primary-background-color);
     fill: var(--theme-button-primary-background-color);
   }
 
-  .icon:not(.walletsIcon):not(.withHardwareWalletIcon) path {
+  .icon:not(.walletsIcon):not(.withLedgerNanoSIcon):not(.withTrezorTIcon) path {
     fill: var(--theme-button-primary-background-color);
   }
 
-  .icon:not(.walletsIcon):not(.withHardwareWalletIcon) polygon {
+  .icon:not(.walletsIcon):not(.withLedgerNanoSIcon):not(.withTrezorTIcon) polygon {
     fill: var(--theme-button-primary-background-color);
   }
 
-  .withHardwareWalletIcon {
+  .withLedgerNanoSIcon {
     & > svg {
       // plus-logo
       & > g > g:nth-child(1) {
         stroke: none;
         fill: var(--theme-button-primary-background-color);
       }
-      // hardware wallet (trezor/ledger)
+      // Ledger Nano S icon
+      & > g > g:nth-child(2) path {
+        stroke: none;
+        fill: var(--theme-button-primary-background-color);
+      }
+    }
+  }  
+
+  .withTrezorTIcon {
+    & > svg {
+      // plus-logo
+      & > g > g:nth-child(1) {
+        stroke: none;
+        fill: var(--theme-button-primary-background-color);
+      }
+      // Trezor Model T icon
       & > g > g:nth-child(2) {
         stroke: var(--theme-button-primary-background-color);
       }
     }
-  }  
+  }
 
   &:hover {
     cursor: default;
@@ -68,7 +83,25 @@
   }
 }
 
-.withHardwareWalletIcon {
+.withLedgerNanoSIcon {
+  flex-shrink: 0;
+  & > svg {
+    width: 64px;
+    height: 42.5px;
+    // plus-logo
+    & > g > g:nth-child(1) {
+      stroke: none;
+      fill: var(--theme-icon-topbar-color);
+    }
+    // Ledger Nano S icon
+    & > g > g:nth-child(2) {
+      stroke: none;
+      fill: var(--theme-icon-topbar-color);
+    }    
+  }
+}
+
+.withTrezorTIcon {
   flex-shrink: 0;
   & > svg {
     width: 64px;
@@ -78,7 +111,7 @@
       stroke: none;
       fill: var(--theme-icon-topbar-color);
     }
-    // hardware wallet (trezor/ledger)
+    // Ledger Nano S icon
     & > g > g:nth-child(2) {
       stroke: var(--theme-icon-topbar-color);
     }    

diff --git a/app/config/topbarConfig.js b/app/config/topbarConfig.js
@@ -1,7 +1,7 @@
 // @flow
 import { ROUTES } from '../routes-config';
 import walletsIcon from '../assets/images/yoroi-logo-shape-white.inline.svg';
-import withLedgerNanoSIcon from '../assets/images/top-bar/with-ledger-nano-s-logo-white.inline.svg';
+import withLedgerNanoSIcon from '../assets/images/top-bar/with-ledger-nano-s-logo.inline.svg';
 import withTrezorTIcon from '../assets/images/top-bar/with-trezor-t-logo-white.inline.svg';
 import settingsIcon from '../assets/images/top-bar/setting-active.inline.svg';
 import daedalusTransferIcon from '../assets/images/top-bar/daedalus-migration-active.inline.svg';