stellar · quietbits · Sep 13, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/extension/src/popup/assets/logo-freighter.svg b/extension/src/popup/assets/logo-freighter.svg
diff --git a/extension/src/popup/basics/ListNavLink/styles.scss b/extension/src/popup/basics/ListNavLink/styles.scss
@@ -11,7 +11,7 @@
   &__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 0.75rem;
   }
 
   &__icon {

diff --git a/extension/src/popup/components/Header/index.tsx b/extension/src/popup/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import FreighterLogoLockup from "popup/assets/logo-lockup-freighter.svg";
+import FreighterLogo from "popup/assets/logo-freighter.svg";
 
 import "./styles.scss";
 
@@ -11,7 +11,7 @@ interface HeaderProps {
 export const Header = ({ isPopupView = false }: HeaderProps) => (
   <header className={`Header ${isPopupView ? "Header__popup" : ""}`}>
     <div className={isPopupView ? "" : "Header__fullscreen"}>
-      <img alt="Freighter logo" src={FreighterLogoLockup} />
+      <img alt="Freighter logo" src={FreighterLogo} />
     </div>
   </header>
 );
diff --git a/extension/src/popup/components/Onboarding/styles.scss b/extension/src/popup/components/Onboarding/styles.scss
@@ -12,6 +12,7 @@
   font-size: 2.5rem;
   line-height: 120%;
   color: var(--color-gray-90);
+  font-weight: var(--font-weight-medium);
 }
 
 .OnboardingScreen {

diff --git a/extension/src/popup/components/SubviewHeader/index.tsx b/extension/src/popup/components/SubviewHeader/index.tsx
@@ -27,6 +27,7 @@ export const SubviewHeader = ({
       />
     ) : null}
     <div className="SubviewHeader--title">{title}</div>
-    {rightButton || <div className="SubviewHeader--spacer"></div>}
+    {rightButton ||
+      (hasBackButton ? <div className="SubviewHeader--spacer"></div> : null)}
   </header>
 );
diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx
@@ -236,7 +236,7 @@ export const BackupPhraseWarningMessage = () => {
       <div className="WarningMessage__infoBlock">
         <div className="WarningMessage__header">
           <Icon.Warning className="WarningMessage__icon" />
-          <div>{t("IMPORTANT")}</div>
+          <div>{t("Important")}</div>
         </div>
 
         <p>

diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
@@ -61,7 +61,6 @@
     font-weight: var(--font-weight-medium);
     display: flex;
     gap: 0.625rem;
-    text-transform: uppercase;
   }
 
   &__icon {

diff --git a/extension/src/popup/components/account/AccountAssets/styles.scss b/extension/src/popup/components/account/AccountAssets/styles.scss
@@ -96,7 +96,7 @@ $loader-light-color: #444961;
   &__copy-right {
     flex: 4;
     min-width: 0;
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-regular);
 
     .asset-amount {
       text-align: right;

diff --git a/extension/src/popup/components/account/AccountHeader/styles.scss b/extension/src/popup/components/account/AccountHeader/styles.scss
@@ -16,18 +16,19 @@
 
   &__network-wrapper {
     cursor: pointer;
-    width: 6.25rem;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: right;
+    border: 1px solid var(--color-gray-30);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
   }
 
   &__network-copy {
     font-size: 0.875rem;
     line-height: 1.5rem;
     font-weight: var(--font-weight-medium);
-    text-transform: uppercase;
     white-space: nowrap;
   }
 
@@ -64,7 +65,7 @@
     padding-bottom: 0.5rem;
 
     &__link {
-      color: var(--color-gray-60);
+      color: var(--color-gray-90);
       display: flex;
       align-items: center;
     }

diff --git a/extension/src/popup/components/account/AssetDetail/styles.scss b/extension/src/popup/components/account/AssetDetail/styles.scss
@@ -1,6 +1,6 @@
 .AssetDetail {
   height: var(--popup--height);
-  overflow-x: hidden;
+  overflow: hidden;
   position: relative;
 
   &__wrapper {
@@ -9,6 +9,7 @@
 
   .SubviewHeader {
     padding-bottom: 0.25rem;
+    height: auto;
   }
 
   &__available {

diff --git a/extension/src/popup/components/account/NotFundedMessage/styles.scss b/extension/src/popup/components/account/NotFundedMessage/styles.scss
@@ -11,7 +11,6 @@
     font-size: 0.875rem;
     line-height: 1.5rem;
     font-weight: var(--font-weight-medium);
-    text-transform: uppercase;
     padding-bottom: 0.25rem;
 
     svg {

diff --git a/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss b/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss
@@ -37,6 +37,10 @@
       div:nth-child(2) {
         color: var(--color-white);
       }
+
+      &:empty {
+        display: none;
+      }
     }
   }
 }
diff --git a/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss b/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss
@@ -21,7 +21,7 @@
 
   &__assets {
     flex-grow: 1;
-    height: 27.75rem;
+    height: 28.75rem;
 
     &--short {
       flex-grow: 1;

diff --git a/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss b/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss
@@ -1,6 +1,5 @@
 .ManageAssetRows {
   &__scrollbar {
-    padding-right: var(--popup--side-padding);
     width: calc(
       var(--popup--width) - var(--popup--side-padding) -
         var(--popup--side-padding)

diff --git a/extension/src/popup/components/manageAssets/SearchAsset/styles.scss b/extension/src/popup/components/manageAssets/SearchAsset/styles.scss
@@ -32,7 +32,7 @@
 
   &__results {
     flex-grow: 1;
-    height: 21.4rem;
+    height: 22.4rem;
 
     &--active {
       height: 26.1rem;

diff --git a/extension/src/popup/components/manageNetwork/NetworkSettings/styles.scss b/extension/src/popup/components/manageNetwork/NetworkSettings/styles.scss
@@ -11,7 +11,6 @@ $activeColor: rgba(61, 204, 152, 1);
     font-size: 0.875rem;
     font-weight: var(--font-weight-medium);
     margin-bottom: 1rem;
-    text-transform: uppercase;
   }
 
   &__scrollbar {
@@ -25,7 +24,6 @@ $activeColor: rgba(61, 204, 152, 1);
     display: flex;
     font-size: 0.875rem;
     font-weight: var(--font-weight-medium);
-    text-transform: uppercase;
 
     &--active {
       color: $activeColor;

diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx
@@ -118,7 +118,7 @@ export const ConfirmMnemonicPhrase = ({
                   disabled={!dirty && !!joinSelectedWords().length}
                   isLoading={isSubmitting}
                 >
-                  {t("NEXT")}
+                  {t("Next")}
                 </Button>
               </SubmitButtonWrapper>
             </Form>

diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
@@ -12,7 +12,7 @@
     margin: 1.5rem 0;
     font-size: 1rem;
     line-height: 1.5rem;
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-regular);
     color: var(--color-gray-60);
     text-align: center;
 

diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
@@ -49,7 +49,7 @@ export const DisplayMnemonicPhrase = ({
         <OnboardingHalfScreen className="DisplayMnemonicPhrase__half-screen">
           <Notification
             variant="warning"
-            title={t("IMPORTANT WARNING")}
+            title={t("Important Warning")}
             icon={<Icon.Warning />}
           >
             {t("Never disclose your recovery phrase")}!

diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss
@@ -7,7 +7,7 @@
     margin-top: 1.5rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-regular);
 
     p {
       color: rgba(255, 255, 255, 0.6);

diff --git a/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss b/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss
@@ -34,7 +34,7 @@
   &__light-copy {
     font-size: 0.875rem;
     line-height: 1rem;
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-regular);
     color: var(--color-gray-60);
 
     &__label {

diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
@@ -448,7 +448,7 @@ export const TransactionDetails = ({ goBack }: { goBack: () => void }) => {
           )
         }
       >
-        {t("View on")} Stellar.expert
+        {t("View on")} stellar.expert
       </Button>
     ) : null;
 

diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss
@@ -105,12 +105,13 @@
     }
 
     &__copy {
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
       line-height: 1.375rem;
       min-height: 1.375rem;
       margin-bottom: 1rem;
       align-items: center;
       text-align: center;
+      justify-content: center;
     }
   }
 }

diff --git a/extension/src/popup/components/sendPayment/styles.scss b/extension/src/popup/components/sendPayment/styles.scss
@@ -1,7 +1,7 @@
 :root {
   --bottom-btn-margin: 24px;
 
-  --continue-btn-height: 3.7rem;
+  --continue-btn-height: 2.625rem;
 }
 
 .SendPayment {
@@ -17,8 +17,7 @@
 }
 
 .SendAmount {
-  padding: var(--popup-vertical-padding) var(--account-view-padding-side) 1rem
-    var(--account-view-padding-side);
+  padding: var(--popup-vertical-padding) var(--account-view-padding-side);
   height: var(--popup--height);
   display: flex;
   flex-direction: column;
@@ -256,6 +255,10 @@
   &__clickable {
     cursor: pointer;
   }
+
+  .FormRows {
+    gap: 0.75rem;
+  }
 }
 
 .SendConfirm {

diff --git a/extension/src/popup/styles/global.scss b/extension/src/popup/styles/global.scss
@@ -44,6 +44,10 @@ a {
 #root {
   position: relative;
   height: 100%;
+  // TODO: update in SDS?
+  min-height: auto !important;
+  min-width: auto !important;
+  display: block !important;
 
   // TODO: fix in SDS
   ul {
@@ -69,6 +73,24 @@ a {
   background: var(--color-gray-40);
 }
 
+// Form layout
+.FormLayoutView {
+  height: 100%;
+
+  .FormRows {
+    height: 100%;
+  }
+
+  .SubmitButtonWrapper {
+    margin-top: auto;
+  }
+}
+
+// TODO: fix in SDS
+.Notification {
+  border-radius: 0.25rem;
+}
+
 // TODO: Update in SDS
 .Tooltip__content__container {
   padding: 0.5rem !important;

diff --git a/extension/src/popup/views/About/index.tsx b/extension/src/popup/views/About/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { SubviewHeader } from "popup/components/SubviewHeader";
 
-import FreighterLogoLockup from "popup/assets/logo-lockup-freighter.svg";
+import FreighterLogo from "popup/assets/logo-freighter.svg";
 
 import "./styles.scss";
 
@@ -30,7 +30,7 @@ export const About = () => {
     <div className="About">
       <SubviewHeader title="About" />
       <div>
-        <img alt="Freighter logo" src={FreighterLogoLockup} />
+        <img alt="Freighter logo" src={FreighterLogo} />
       </div>
       <div className="About__body">
         <div className="About__info">

diff --git a/extension/src/popup/views/Account/index.tsx b/extension/src/popup/views/Account/index.tsx
@@ -234,17 +234,18 @@ export const Account = () => {
             />
           )}
           {isFunded ? (
-            <Button
-              size="md"
-              isFullWidth
-              variant="secondary"
-              onClick={() => {
-                dispatch(saveAssetSelectType(AssetSelectType.MANAGE));
-                navigateTo(ROUTES.manageAssets);
-              }}
-            >
-              {t("Manage Assets")}
-            </Button>
+            <div className="AccountView__assets-button">
+              <Button
+                size="md"
+                variant="secondary"
+                onClick={() => {
+                  dispatch(saveAssetSelectType(AssetSelectType.MANAGE));
+                  navigateTo(ROUTES.manageAssets);
+                }}
+              >
+                {t("Manage Assets")}
+              </Button>
+            </div>
           ) : null}
         </div>
       )}

diff --git a/extension/src/popup/views/Account/styles.scss b/extension/src/popup/views/Account/styles.scss
@@ -17,6 +17,10 @@
     width: 67%;
     font-size: 0.875rem;
     line-height: 1.375rem;
+
+    .Tooltip {
+      padding: 0.125rem 0.375rem;
+    }
   }
 
   &__send-receive-display {
@@ -74,4 +78,9 @@
       margin: 2rem 0;
     }
   }
+
+  &__assets-button {
+    display: flex;
+    justify-content: center;
+  }
 }