reskin of wallet color thematic

back button onhover styling
PelagusWallet · Sep 5, 2023 · b906bf6 · b906bf6
1 parent 90f2768
commit b906bf6
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 59 deletions.
diff --git a/ui/components/AccountItem/AccountItemOptionsMenu.tsx b/ui/components/AccountItem/AccountItemOptionsMenu.tsx
@@ -86,7 +86,7 @@ export default function AccountItemOptionsMenu({
       </SharedSlideUpMenu>
       <SharedSlideUpMenu
         size="custom"
-        customSize="336px"
+        customSize="130px"
         isOpen={showExportPrivateKey}
         close={(e) => {
           e?.stopPropagation()
@@ -95,9 +95,9 @@ export default function AccountItemOptionsMenu({
         }}
       >
         <li className="account_container">
-        <div className="item-summary standard_width">
+        <div className="item-summary ">
         <div title="Private Key" className="address_name">Private Key</div>
-        {key}
+        <text>{key}</text>
         </div>
         </li>
         <button
@@ -185,20 +185,23 @@ export default function AccountItemOptionsMenu({
             background-color: var(--green-40);
           }
           .address_name {
-            color: #fff;
+            color: var(--trophy-gold);
             font-size: 18px;
             font-weight: 600;
             overflow: auto;
             text-overflow: ellipsis;
           }
           .item-summary {
+            overflow-wrap: break-word;
+            word-break: break-all;
             display: flex;
             justify-content: flex-start;
             flex-direction: column;
             align-items: flex-start;
             margin: 0 auto;
             min-width: 0; // Allow collapsing if account name is too long.
             overflow: auto;
+            padding: 2px;
           }
           li {
             display: flex;
@@ -207,7 +210,7 @@ export default function AccountItemOptionsMenu({
             flex-direction: column;
             margin: 0 auto;
             width: 336px;
-            height: 52px;
+            height: 75px;
           }
           .account_container {
             margin-top: -10px;

diff --git a/ui/components/Shared/SharedAccountItemSummary.tsx b/ui/components/Shared/SharedAccountItemSummary.tsx
@@ -115,7 +115,7 @@ export default function SharedAccountItemSummary(props: Props): ReactElement {
           overflow: hidden;
         }
         .address_name {
-          color: #fff;
+          color: var(--trophy-gold);
           font-size: 18px;
           font-weight: 600;
           overflow: hidden;

diff --git a/ui/components/Shared/SharedAssetIcon.tsx b/ui/components/Shared/SharedAssetIcon.tsx
@@ -158,6 +158,7 @@ export default function SharedAssetIcon(props: Props): ReactElement {
             width: 40px;
             height: 40px;
             border-radius: 80px;
+            border: 1px solid var(--disabled);
             overflow: hidden;
             background-color: var(--castle-black);
             flex-shrink: 0;

diff --git a/ui/components/Shared/SharedAssetInput.tsx b/ui/components/Shared/SharedAssetInput.tsx
@@ -376,7 +376,7 @@ function SelectedAssetButton(props: SelectedAssetButtonProps): ReactElement {
         button {
           display: flex;
           align-items: center;
-          color: #fff;
+          color: var(--green-40);
           font-size: 16px;
           font-weight: 500;
           line-height: 24px;
@@ -764,7 +764,7 @@ export default function SharedAssetInput<T extends AnyAsset>(
           .input_amount {
             max-width: 125px;
             height: 32px;
-            color: #ffffff;
+            color: var(--green-40);
             font-size: 22px;
             font-weight: 500;
             line-height: 32px;

diff --git a/ui/components/Shared/SharedBackButton.tsx b/ui/components/Shared/SharedBackButton.tsx
@@ -62,7 +62,7 @@ export default function SharedBackButton({
         }
 
         button:hover {
-          color: #fff;
+          color: var(--green-20);
         }
 
         button.round {
@@ -84,7 +84,7 @@ export default function SharedBackButton({
         }
 
         button:hover .icon {
-          background-color: #fff;
+          background-color: var(--green-20);
         }
       `}</style>
     </button>

diff --git a/ui/components/Shared/SharedButton.tsx b/ui/components/Shared/SharedButton.tsx
@@ -217,13 +217,13 @@ export default function SharedButton(
             background-color: var(--trophy-gold);
           }
           .disabled {
-            background-color: var(--green-60);
+            background-color: var(--disabled);
             border-color: var(--green-60);
-            color: var(--green-80);
+            color: var(--gold-5);
             pointer-events: none;
           }
           .disabled .icon_button {
-            background-color: var(--green-80);
+            background-color: var(--gold-5);
           }
           .disabled:hover {
             background-color: var(--green-60);

diff --git a/ui/components/Shared/SharedIconRouterLink.tsx b/ui/components/Shared/SharedIconRouterLink.tsx
@@ -49,16 +49,16 @@ export default function SharedIconRouterLink(props: Props): ReactElement {
         }
         .disabled_asset_icon {
           mask-size: cover;
-          background-color: var(--green-60);
+          background-color: var(--disabled);
           width: 12px;
           height: 12px;
         }
         .router_link_container:hover {
-          background-color: var(--hunter-green);
-          color: var(--trophy-gold);
+          background-color: var(--green-120);
+          color: #FFFFFF;
         }
         .router_link_container:hover .asset_icon {
-          background-color: var(--trophy-gold);
+          background-color: #FFFFFF;
         }
       `}</style>
     </Link>

diff --git a/ui/components/Shared/SharedSlideUpMenu.tsx b/ui/components/Shared/SharedSlideUpMenu.tsx
@@ -104,7 +104,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement {
             overflow-x: hidden;
             overflow-y: ${isScrollable ? "auto" : "hidden"};
             border-radius: ${isFullScreen ? "0" : "16px 16px 0 0"};
-            background-color: var(--green-95);
+            background-color: #FFFFFF;
             position: fixed;
             left: 0px;
             right: 0px;

diff --git a/ui/components/Shared/SharedSquareButton.tsx b/ui/components/Shared/SharedSquareButton.tsx
@@ -37,7 +37,7 @@ export default function SharedSquareButton(props: Props): ReactElement {
   return (
     <button
       type="button"
-      className={!disabled ? "hoverable" : undefined}
+      className={!disabled ? "hoverable" : 'disabled'}
       aria-label={ariaLabel}
       onClick={onClick}
     >
@@ -63,6 +63,10 @@ export default function SharedSquareButton(props: Props): ReactElement {
           .hoverable:hover {
             color: ${textColor.hoverColor};
           }
+          .disabled{
+            color: var(--disabled);
+            cursor: default;
+          }
           .content_wrap {
             display: flex;
             flex-direction: column;
@@ -73,7 +77,7 @@ export default function SharedSquareButton(props: Props): ReactElement {
             border-radius: 12px;
             width: ${size}px;
             height: ${size}px;
-            background-color: ${iconColor.color};
+            background-color: ${disabled ? 'var(--disabled)' : 'var(--trophy-gold)'};
             transition: background-color 0.2s;
           }
           .hoverable:hover .icon_wrap {

diff --git a/ui/components/Shared/SharedToggleButton.tsx b/ui/components/Shared/SharedToggleButton.tsx
@@ -66,14 +66,14 @@ export default function SharedToggleButton({
             width: 16px;
             height: 16px;
             border-radius: 20px;
-            background-color: ${offColor ?? "var(--green-40)"};
+            background-color: ${offColor ?? "var(--hunter-green)"};
             transition: 0.2s ease-in-out;
 
             box-shadow: 0px 1px 1px rgba(0, 20, 19, 0.3);
           }
           .is_active .bulb {
             transform: translateX(16px);
-            background-color: ${onColor ?? "var(--trophy-gold)"};
+            background-color: ${onColor ?? "var(--gold-60)"};
           }
         `}
       </style>

diff --git a/ui/components/TabBar/TabBarIconButton.tsx b/ui/components/TabBar/TabBarIconButton.tsx
@@ -45,7 +45,7 @@ export default function TabBarIconButton(
             width: 24px;
             height: 24px;
             cursor: pointer;
-            background-color: ${disabled ? "#3A4565" : "var(--green-40)"};
+            background-color: ${disabled ? "var(--disabled)" : "var(--green-40)"};
             transition: transform 0.1s ease;
           }
           span {
@@ -69,14 +69,14 @@ export default function TabBarIconButton(
           }
           .tab_bar_icon_wrap:hover:not(.active) span,
           .active span {
-            color: var(--green-20);
+            color: ${disabled ? "var(--disabled)" : "var(--green-40)"};
           }
           .tab_bar_icon_wrap:hover,
           .active {
             transform: translateY(-8px) translateZ(0);
           }
           .tab_bar_icon_wrap:hover:not(.active) .icon {
-            background-color: ${disabled ? "#3A4565" : "var(--green-20)"};
+            background-color: ${disabled ? "var(--disabled)" : "var(--green-40)"};
           }
           .active span {
             color: var(--trophy-gold);

diff --git a/ui/components/TopMenu/TopMenuProtocolSwitcher.tsx b/ui/components/TopMenu/TopMenuProtocolSwitcher.tsx
@@ -39,7 +39,7 @@ export default function TopMenuProtocolSwitcher({
             max-width: 60%;
           }
           button:hover {
-            color: #fff;
+            color: var(--green-20);
           }
           .icon_chevron_down {
             flex-shrink: 0;
@@ -52,7 +52,7 @@ export default function TopMenuProtocolSwitcher({
             background-color: var(--green-40);
           }
           button:hover .icon_chevron_down {
-            background-color: #fff;
+            background-color: var(--green-20);
           }
           .icon_wrap {
             width: 24px;
@@ -64,9 +64,6 @@ export default function TopMenuProtocolSwitcher({
             justify-content: center;
             margin-right: 5px;
           }
-          button:hover .icon_wrap {
-            background-color: var(--green-80) !important;
-          }
         `}
       </style>
     </button>

diff --git a/ui/components/Wallet/AssetListItem/styles.ts b/ui/components/Wallet/AssetListItem/styles.ts
@@ -31,7 +31,7 @@ export default `
   }
   .asset_amount {
     height: 17px;
-    color: #fefefc;
+    color: var(--green-20);
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 0.42px;
@@ -42,15 +42,21 @@ export default `
     overflow-wrap: anywhere;
     word-break: break-all;
   }
+  .asset_list_item:hover .asset_amount{
+    color: #FFFFFF
+  }
   .bold_amount_count {
     width: 70px;
     height: 24px;
-    color: #fefefc;
+    color: var(--green-20);
     font-size: 18px;
     font-weight: 600;
     line-height: 24px;
     margin-right: 4px;
   }
+  .asset_list_item:hover .bold_amount_count{
+    color: #FFFFFF;
+  }
   .verify_asset {
     display: flex;
     align-items: center;

diff --git a/ui/components/Wallet/WalletAccountBalanceControl.tsx b/ui/components/Wallet/WalletAccountBalanceControl.tsx
@@ -212,7 +212,7 @@ export default function WalletAccountBalanceControl(
             height: 48px;
           }
           .balance {
-            color: #ffffff;
+            color: var(--green-20);
             font-size: 36px;
             font-weight: 500;
             line-height: 48px;

diff --git a/ui/components/Wallet/WalletActivityListItem.tsx b/ui/components/Wallet/WalletActivityListItem.tsx
@@ -198,7 +198,7 @@ export default function WalletActivityListItem(props: Props): ReactElement {
             transform: scale(0.8);
           }
           .amount {
-            color: #fefefc;
+            color: var(--green-40);
             font-size: 14px;
             font-weight: 400;
             letter-spacing: 0.42px;
@@ -211,7 +211,7 @@ export default function WalletActivityListItem(props: Props): ReactElement {
           }
           .bold_amount_count {
             height: 24px;
-            color: #fefefc;
+            color: var(--trophy-gold);
             font-size: 18px;
             font-weight: 600;
             line-height: 24px;

diff --git a/ui/components/Wallet/WalletAssetListItem.tsx b/ui/components/Wallet/WalletAssetListItem.tsx
@@ -46,7 +46,7 @@ export default function WalletAssetListItem(props: Props): ReactElement {
             height: 12px;
           }
           .asset_list_item:hover .asset_icon:not(:hover) {
-            background-color: var(--green-40);
+            background-color: #FFFFFF;
           }
           .asset_icon:hover {
             background-color: var(--trophy-gold);

diff --git a/ui/pages/Receive.tsx b/ui/pages/Receive.tsx
@@ -56,7 +56,7 @@ export default function Receive(): ReactElement {
           }
           h1 {
             height: 32px;
-            color: #ffffff;
+            color: var(--trophy-gold);
             font-size: 22px;
             font-weight: 500;
             line-height: 32px;

diff --git a/ui/pages/Send.tsx b/ui/pages/Send.tsx
@@ -392,7 +392,7 @@ export default function Send(): ReactElement {
           .title {
             flex-grow: 1;
             height: 32px;
-            color: #ffffff;
+            color: var(--trophy-gold);
             font-size: 22px;
             font-weight: 500;
             line-height: 32px;
@@ -451,7 +451,7 @@ export default function Send(): ReactElement {
             font-size: 22px;
             font-weight: 500;
             line-height: 72px;
-            color: #fff;
+            color: var(--green-40);
 
             border-radius: 4px;
             background-color: var(--green-95);

diff --git a/ui/pages/Settings.tsx b/ui/pages/Settings.tsx
@@ -413,7 +413,7 @@ export default function Settings(): ReactElement {
             flex-direction: column;
           }
           h1 {
-            color: #fff;
+            color: var(--green-20);
             font-size: 22px;
             font-weight: 500;
             line-height: 32px;

diff --git a/ui/pages/SingleAsset.tsx b/ui/pages/SingleAsset.tsx
@@ -290,7 +290,7 @@ export default function SingleAsset(): ReactElement {
             gap: 16px;
           }
           .asset_name {
-            color: #fff;
+            color: var(--green-20);
             font-size: 22px;
             font-weight: 500;
             line-height: 32px;
@@ -303,7 +303,7 @@ export default function SingleAsset(): ReactElement {
             align-items: center;
           }
           .balance {
-            color: #fff;
+            color: var(--green-20);
             font-size: 36px;
             font-weight: 500;
             line-height: 48px;