Upgrade to SDS v2 (#938)

* Breaking changes fixed * Replace old color variables
stellar · Aug 11, 2023 · 8e2852b · 8e2852b
1 parent f6af798
commit 8e2852b
Show file tree

Hide file tree

Showing 121 changed files with 909 additions and 876 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -22,7 +22,7 @@
     "@shared/api": "1.0.0",
     "@shared/constants": "1.0.0",
     "@shared/helpers": "1.0.0",
-    "@stellar/design-system": "^0.8.1",
+    "@stellar/design-system": "^1.0.0-beta.14",
     "@stellar/wallet-sdk": "^0.8.0",
     "@testing-library/react": "^10.4.8",
     "@testing-library/user-event": "^7.1.2",

diff --git a/extension/public/index.html b/extension/public/index.html
@@ -14,7 +14,7 @@
     </style>
     <title>Freighter</title>
   </head>
-  <body class="dark-mode">
+  <body class="sds-theme-dark">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="modal-root"></div>

diff --git a/extension/src/popup/basics/Forms/styles.scss b/extension/src/popup/basics/Forms/styles.scss
@@ -9,7 +9,7 @@
 }
 
 .FormError {
-  color: var(--pal-error);
+  color: var(--color-red-60);
   font-size: 0.8125rem;
   padding: 0.25rem 0 0.75rem;
   line-height: 1;

diff --git a/extension/src/popup/basics/InfoBlock/index.tsx b/extension/src/popup/basics/InfoBlock/index.tsx
diff --git a/extension/src/popup/basics/InfoBlock/styles.scss b/extension/src/popup/basics/InfoBlock/styles.scss
diff --git a/extension/src/popup/basics/InfoTooltip/index.tsx b/extension/src/popup/basics/InfoTooltip/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { FloaterPlacement, Icon, Tooltip } from "@stellar/design-system";
+import "./styles.scss";
+
+interface InfoTooltipProps {
+  children: React.ReactNode;
+  infoText: React.ReactNode;
+  placement?: FloaterPlacement;
+}
+
+export const InfoTooltip = ({
+  children,
+  infoText,
+  placement = "right",
+}: InfoTooltipProps) => (
+  <div className="InfoTooltip">
+    {children}
+    <Tooltip
+      triggerEl={
+        <div className="InfoTooltip__button">
+          <Icon.Info />
+        </div>
+      }
+      placement={placement}
+    >
+      {infoText}
+    </Tooltip>
+  </div>
+);
diff --git a/extension/src/popup/basics/InfoTooltip/styles.scss b/extension/src/popup/basics/InfoTooltip/styles.scss
@@ -0,0 +1,33 @@
+.InfoTooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  position: relative;
+
+  // Make sure tooltip covers other info buttons
+  &:has(.trigger--active) {
+    z-index: var(--z-index-tooltip);
+  }
+
+  &__button {
+    width: 0.875rem;
+    height: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: var(--color-gray-60);
+
+    svg {
+      display: block;
+      width: 0.75rem;
+      height: 0.75rem;
+      fill: currentColor;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--color-gray-70);
+      }
+    }
+  }
+}
diff --git a/extension/src/popup/basics/ListNavLink/styles.scss b/extension/src/popup/basics/ListNavLink/styles.scss
@@ -3,7 +3,7 @@
 
   a {
     align-items: center;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     display: flex;
     justify-content: space-between;
   }

diff --git a/extension/src/popup/basics/LoadingBackground/styles.scss b/extension/src/popup/basics/LoadingBackground/styles.scss
@@ -10,7 +10,7 @@
   transition-delay: 0.1s;
 
   &--active {
-    background-color: rgba(var(--pal-shadow-rbg), 0.6);
+    background-color: rgba(var(--color-shadow-rgb), 0.6);
     opacity: 1;
     z-index: 1;
   }

diff --git a/extension/src/popup/basics/TransactionHeading/styles.scss b/extension/src/popup/basics/TransactionHeading/styles.scss
@@ -1,5 +1,5 @@
 .TransactionHeading {
-  border-bottom: 1px solid var(--pal-border-secondary);
+  border-bottom: 1px solid var(--color-gray-30);
   font-size: 0.875rem;
   font-weight: var(--font-weight-medium);
   line-height: 0.72rem;

diff --git a/extension/src/popup/basics/buttons/Button/index.tsx b/extension/src/popup/basics/buttons/Button/index.tsx
diff --git a/extension/src/popup/basics/buttons/Button/styles.scss b/extension/src/popup/basics/buttons/Button/styles.scss
diff --git a/extension/src/popup/basics/buttons/PillButton/index.tsx b/extension/src/popup/basics/buttons/PillButton/index.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { Button } from "@stellar/design-system";
 
-import "./styles.scss";
-
 interface PillButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
@@ -18,9 +16,11 @@ export const PillButton = ({
 }: PillButtonProps) => (
   <div className="PillButton">
     <Button
+      size="md"
       disabled={disabled}
       isLoading={isLoading}
-      variant={Button.variant.tertiary}
+      variant="secondary"
+      isPill
       {...props}
     >
       {children}

diff --git a/extension/src/popup/basics/buttons/PillButton/styles.scss b/extension/src/popup/basics/buttons/PillButton/styles.scss
diff --git a/extension/src/popup/components/AutoSave/index.tsx b/extension/src/popup/components/AutoSave/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useFormikContext } from "formik";
-import { StatusBar } from "@stellar/design-system";
+import { Banner } from "@stellar/design-system";
 import debounce from "lodash/debounce";
 
 import "./styles.scss";
@@ -55,7 +55,7 @@ export const AutoSaveFields = ({ debounceMs = 500 }: AutoSaveFieldsProps) => {
         didSaveFail ? "AutoSave--status--failed" : ""
       }`}
     >
-      <StatusBar variant={StatusBar.variant.error}>Save failed!</StatusBar>
+      <Banner variant="error">Save failed!</Banner>
     </div>
   );
 };
diff --git a/extension/src/popup/components/BottomNav/styles.scss b/extension/src/popup/components/BottomNav/styles.scss
@@ -1,5 +1,5 @@
 .BottomNav {
-  border-top: solid 1px var(--pal-example-details);
+  border-top: solid 1px var(--color-gray-40);
   display: flex;
   align-items: center;
   justify-content: space-between;

diff --git a/extension/src/popup/components/Header/styles.scss b/extension/src/popup/components/Header/styles.scss
@@ -1,5 +1,5 @@
 .Header {
-  border-bottom: 1px solid var(--pal-border-primary);
+  border-bottom: 1px solid var(--color-gray-30);
   padding: 1.5rem 0;
 
   &__popup {

diff --git a/extension/src/popup/components/ModalInfo/index.tsx b/extension/src/popup/components/ModalInfo/index.tsx
@@ -20,7 +20,7 @@ export const ModalInfo = ({
 }: ModalInfoProps) => (
   <>
     <div className="ModalInfo--card">
-      <Card variant={Card.variant.highlight}>
+      <Card variant="secondary">
         <PunycodedDomain domain={domain} domainTitle={domainTitle} />
         <div className="ModalInfo--subject">{subject}</div>
         {children}

diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss
@@ -1,7 +1,7 @@
 .ModalInfo {
   &--subject {
-    border-bottom: 1px solid var(--pal-border-secondary);
-    color: var(--pal-text-primary);
+    border-bottom: 1px solid var(--color-gray-30);
+    color: var(--color-gray-90);
     line-height: 1.5rem;
     margin-bottom: 1.5rem;
     padding-bottom: 1.5rem;

diff --git a/extension/src/popup/components/Onboarding/styles.scss b/extension/src/popup/components/Onboarding/styles.scss
@@ -11,7 +11,7 @@
 .OnboardingHeader {
   font-size: 2.5rem;
   line-height: 120%;
-  color: var(--pal-text-primary);
+  color: var(--color-gray-90);
 }
 
 .OnboardingScreen {

diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss
@@ -17,11 +17,11 @@
   }
 
   &__domain {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__title {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     font-size: 0.875rem;
   }
 

diff --git a/extension/src/popup/components/SlideupModal/styles.scss b/extension/src/popup/components/SlideupModal/styles.scss
@@ -1,5 +1,5 @@
 .SlideupModal {
-  background: var(--background-color);
+  background: var(--background-color--overlay);
   border-radius: 1.5rem 1.5rem 0 0;
   box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.24);
   position: absolute;

diff --git a/extension/src/popup/components/SubviewHeader/styles.scss b/extension/src/popup/components/SubviewHeader/styles.scss
@@ -1,6 +1,6 @@
 .SubviewHeader {
   align-items: center;
-  color: var(--pal-brand-primary-on);
+  color: var(--color-white);
   display: flex;
   height: var(--subview--header--height);
   padding-bottom: 2rem;