UI tweaks (#932)

* Action button tooltip * Remove main nav link underline * Upgrade SDS * Use custom icon + CSS cleanup
stellar · Jul 29, 2024 · f583236 · f583236
1 parent d73194d
commit f583236
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@creit.tech/stellar-wallets-kit": "^0.8.2",
     "@ledgerhq/hw-app-str": "^6.28.6",
     "@ledgerhq/hw-transport-webusb": "^6.28.6",
-    "@stellar/design-system": "^2.0.0-beta.13",
+    "@stellar/design-system": "^2.0.0-beta.15",
     "@stellar/stellar-sdk": "^12.1.0",
     "@stellar/stellar-xdr-json-web": "^0.0.1",
     "@tanstack/react-query": "^5.45.1",

diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
@@ -39,4 +39,39 @@
     border-radius: pxToRem(8px);
     padding: pxToRem(16px);
   }
+
+  // TODO: temp fix until SDS is fixed (tooltip overlap)
+  // Adjusting form element z-index to fix "Copied" tooltip overlap
+  .Input {
+    // Keypair Generator response
+    &:has(#generate-keypair-publickey) {
+      z-index: 2;
+    }
+
+    &:has(#generate-keypair-secretkey) {
+      z-index: 1;
+    }
+
+    // Create Multiplexed Account main form
+    &:has(#muxed-public-key) {
+      z-index: 2;
+    }
+
+    &:has(#muxed-account-id) {
+      z-index: 1;
+    }
+
+    // Create Multiplexed Account results
+    &:has(#muxed-public-key-result) {
+      z-index: 3;
+    }
+
+    &:has(#muxed-account-id-result) {
+      z-index: 2;
+    }
+
+    &:has(#muxed-account-address-result) {
+      z-index: 1;
+    }
+  }
 }
diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
@@ -631,6 +631,8 @@ export default function Endpoints() {
                 }),
               );
             }}
+            showActionTooltip
+            actionTooltipText="Saved"
           ></Button>
         </div>
       </>

diff --git a/src/app/(sidebar)/transaction/saved/page.tsx b/src/app/(sidebar)/transaction/saved/page.tsx
@@ -163,11 +163,11 @@ export default function SavedTransactions() {
         </Card>
       </Box>
 
-      {/* TODO: use custom icon once SDS is updated */}
       <Alert
         variant="primary"
         title="Looking for your other saved transactions?"
         placement="inline"
+        icon={<Icon.Server06 />}
       >
         Switch your network in the top right to see your other saved
         transactions.

diff --git a/src/components/ExpandBox/styles.scss b/src/components/ExpandBox/styles.scss
@@ -45,4 +45,13 @@
   &__inset {
     overflow: hidden;
   }
+
+  // Allow tooltip, etc overflow
+  &[data-is-open="true"] {
+    &[data-is-expanded="true"] {
+      .ExpandBox__inset {
+        overflow: visible;
+      }
+    }
+  }
 }
diff --git a/src/components/NetworkSelector/styles.scss b/src/components/NetworkSelector/styles.scss
@@ -49,6 +49,7 @@
 
   // Floater
   &__floater {
+    z-index: 2;
     top: calc(100% + 0.5rem);
     right: 0;
     left: auto;
@@ -125,6 +126,23 @@
         border-radius: pxToRem(6px);
         border: 1px solid var(--sds-clr-gray-06);
         padding: pxToRem(12px);
+
+        // TODO: temp fix until SDS is fixed (tooltip overlap)
+        // Adjusting form element z-index to fix "Copied" tooltip overlap
+        & > * {
+          &:nth-child(1) {
+            z-index: 4;
+          }
+          &:nth-child(2) {
+            z-index: 3;
+          }
+          &:nth-child(3) {
+            z-index: 2;
+          }
+          &:nth-child(4) {
+            z-index: 1;
+          }
+        }
       }
     }
   }

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -18,16 +18,6 @@
   min-width: auto !important;
   min-height: auto !important;
   display: block !important;
-
-  // TODO: remove once fixed in SDS
-  select {
-    outline: none !important;
-
-    optgroup {
-      background-color: var(--Select-color-background-option);
-      color: var(--Select-color-text);
-    }
-  }
 }
 
 .LabLayout {
@@ -189,15 +179,13 @@
 
 .NavLink {
   --Nav-navLink-color: var(--sds-clr-gray-11);
-  --Nav-navLink-border-color: transparent;
 
   color: var(--Nav-navLink-color);
   text-decoration: none;
   padding: pxToRem(12px) 0;
   transition:
     color var(--sds-anim-transition-default),
     border-color var(--sds-anim-transition-default);
-  border-bottom: 2px solid var(--Nav-navLink-border-color);
   white-space: nowrap;
 
   display: flex;
@@ -207,14 +195,12 @@
   @media (hover: hover) {
     &:hover {
       --Nav-navLink-color: var(--sds-clr-lilac-11);
-      --Nav-navLink-border-color: var(--sds-clr-lilac-09);
     }
   }
 
   &--active {
     cursor: default;
     --Nav-navLink-color: var(--sds-clr-lilac-11);
-    --Nav-navLink-border-color: var(--sds-clr-lilac-09);
     pointer-events: none;
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -1022,10 +1022,10 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
-"@stellar/design-system@^2.0.0-beta.13":
-  version "2.0.0-beta.13"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.13.tgz#7561005fbd81ebf81ef6fe27230854d3727a5bc1"
-  integrity sha512-ZF85piSatc+njPUO74JvqigE71zsbGaWS4/1a4V5i0U20DHY07VEndUiddGDAR5w42h2GUZ5NNQAQXHBXTQvjw==
+"@stellar/design-system@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.15.tgz#431976a02faf29fa6e671b78e7ddb6c8cc1d73f4"
+  integrity sha512-jISw5zR/WCvbQspFe+TyuipoHDYAO7PQdlfu6Wpqmc4Gvc6g5O2hhbthn6mtF+wlsv6X3oz0Un6+FWPFnUVKiQ==
   dependencies:
     "@floating-ui/dom" "^1.6.3"
     bignumber.js "^9.1.2"