diff --git a/extension/src/popup/assets/logo-freighter.svg b/extension/src/popup/assets/logo-freighter.svg
new file mode 100644
index 0000000000..41d7519de9
--- /dev/null
+++ b/extension/src/popup/assets/logo-freighter.svg
@@ -0,0 +1,12 @@
+
diff --git a/extension/src/popup/basics/ListNavLink/styles.scss b/extension/src/popup/basics/ListNavLink/styles.scss
index 267e8d3149..b520be569c 100644
--- 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
index f28fcbac12..8371b4db99 100644
--- 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) => (
-
+
);
diff --git a/extension/src/popup/components/Onboarding/styles.scss b/extension/src/popup/components/Onboarding/styles.scss
index 80536f763f..b1005f63cc 100644
--- 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
index dc0882a0c0..b50892c60c 100644
--- a/extension/src/popup/components/SubviewHeader/index.tsx
+++ b/extension/src/popup/components/SubviewHeader/index.tsx
@@ -27,6 +27,7 @@ export const SubviewHeader = ({
/>
) : null}
-
{t("IMPORTANT")}
+
{t("Important")}
diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
index 3883f6d1ff..34eaf3d917 100644
--- 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
index f5472bbb62..0bbb91f3de 100644
--- 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
index f9bd3f904b..cc555b0fc8 100644
--- 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
index ee1754fd8a..cdff5122d1 100644
--- 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
index 8c33ee4873..8ff683a2b1 100644
--- 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
index 80ffbabc12..dd85c75e4a 100644
--- 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
index 904b9d4fb1..0cc844397b 100644
--- 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
index 6dd3eb3661..08267741f8 100644
--- 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
index a8499a9d26..b81bdd11c3 100644
--- 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
index 276a52bbeb..c051b773b4 100644
--- 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
index e6e82a0c39..7ec5b5f719 100644
--- 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")}
diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
index d445e804e8..4f0cf6a0ca 100644
--- 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
index 7589e06bdd..8a4998f716 100644
--- 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 = ({
}
>
{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
index e93adeaded..f993a026a7 100644
--- 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
index b2fdbb7f1f..7bff09df63 100644
--- 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
index 4a0c08b526..a9d6fe6617 100644
--- 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
) : null;
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss
index 764079b8c5..a1c014b94b 100644
--- 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
index e601cfcbd5..ec468438ba 100644
--- 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
index 24b229e170..7cd3132d51 100644
--- 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
index 5514b428e5..b27799c006 100644
--- 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 = () => {
-
+
diff --git a/extension/src/popup/views/Account/index.tsx b/extension/src/popup/views/Account/index.tsx
index 0e38074e60..09963b28f2 100644
--- a/extension/src/popup/views/Account/index.tsx
+++ b/extension/src/popup/views/Account/index.tsx
@@ -234,17 +234,18 @@ export const Account = () => {
/>
)}
{isFunded ? (
-
+
+
+
) : null}
)}
diff --git a/extension/src/popup/views/Account/styles.scss b/extension/src/popup/views/Account/styles.scss
index e3477d8382..ea7516c2c3 100644
--- 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;
+ }
}
diff --git a/extension/src/popup/views/AccountCreator/index.tsx b/extension/src/popup/views/AccountCreator/index.tsx
index a4437919ef..844af56a1a 100644
--- a/extension/src/popup/views/AccountCreator/index.tsx
+++ b/extension/src/popup/views/AccountCreator/index.tsx
@@ -155,7 +155,7 @@ export const AccountCreator = () => {
isLoading={isSubmitting}
disabled={!(dirty && isValid)}
>
- {t("CONFIRM")}
+ {t("Confirm")}
diff --git a/extension/src/popup/views/AddAccount/AddAccount/index.tsx b/extension/src/popup/views/AddAccount/AddAccount/index.tsx
index 0c85e3aee3..3dcc867b18 100644
--- a/extension/src/popup/views/AddAccount/AddAccount/index.tsx
+++ b/extension/src/popup/views/AddAccount/AddAccount/index.tsx
@@ -59,7 +59,7 @@ export const AddAccount = () => {
{({ dirty, isSubmitting, isValid, errors, touched }) => (
-
diff --git a/extension/src/popup/views/RecoverAccount/styles.scss b/extension/src/popup/views/RecoverAccount/styles.scss
index db70580979..9722c742bb 100644
--- a/extension/src/popup/views/RecoverAccount/styles.scss
+++ b/extension/src/popup/views/RecoverAccount/styles.scss
@@ -7,7 +7,7 @@
&__header {
font-size: 2.5rem;
line-height: 3rem;
- font-weight: var(--font-weight-normal);
+ font-weight: var(--font-weight-medium);
color: var(--color-gray-90);
text-align: left;
margin-bottom: 1.5rem;
diff --git a/extension/src/popup/views/Settings/index.tsx b/extension/src/popup/views/Settings/index.tsx
index 59b6083484..de6187d59d 100644
--- a/extension/src/popup/views/Settings/index.tsx
+++ b/extension/src/popup/views/Settings/index.tsx
@@ -44,7 +44,7 @@ export const Settings = () => {
{t("Preferences")}
{t("Security")}
-
+
{t("Help")}
diff --git a/extension/src/popup/views/UnlockAccount/index.tsx b/extension/src/popup/views/UnlockAccount/index.tsx
index 685c5a9f34..83b141da02 100644
--- a/extension/src/popup/views/UnlockAccount/index.tsx
+++ b/extension/src/popup/views/UnlockAccount/index.tsx
@@ -82,7 +82,7 @@ export const UnlockAccount = () => {
isLoading={isSubmitting}
disabled={!(dirty && isValid)}
>
- {t("LOG IN")}
+ {t("Log In")}
diff --git a/extension/src/popup/views/UnlockAccount/styles.scss b/extension/src/popup/views/UnlockAccount/styles.scss
index 69373c8830..6e0682f222 100644
--- a/extension/src/popup/views/UnlockAccount/styles.scss
+++ b/extension/src/popup/views/UnlockAccount/styles.scss
@@ -11,6 +11,7 @@
line-height: 2.4rem;
color: var(--color-gray-90);
max-width: 17rem;
+ font-weight: var(--font-weight-medium);
}
&__import-account {
@@ -19,6 +20,6 @@
text-align: center;
font-size: 1rem;
line-height: 1.5rem;
- font-weight: var(--font-weight-normal);
+ font-weight: var(--font-weight-regular);
}
}
diff --git a/extension/src/popup/views/Welcome/index.tsx b/extension/src/popup/views/Welcome/index.tsx
index 2d5e310b2e..8dcebde708 100644
--- a/extension/src/popup/views/Welcome/index.tsx
+++ b/extension/src/popup/views/Welcome/index.tsx
@@ -36,7 +36,7 @@ export const Welcome = () => {
variant="primary"
onClick={() => navigateTo(ROUTES.accountCreator)}
>
- {t("CREATE WALLET")}
+ {t("Create Wallet")}
@@ -56,7 +56,7 @@ export const Welcome = () => {
variant="secondary"
onClick={() => navigateTo(ROUTES.recoverAccount)}
>
- {t("IMPORT WALLET")}
+ {t("Import Wallet")}
diff --git a/extension/src/popup/views/Welcome/styles.scss b/extension/src/popup/views/Welcome/styles.scss
index 44c7405f96..08e9cbf64d 100644
--- a/extension/src/popup/views/Welcome/styles.scss
+++ b/extension/src/popup/views/Welcome/styles.scss
@@ -30,6 +30,7 @@
margin-bottom: 2.5rem;
text-align: center;
max-width: 36rem;
+ font-weight: var(--font-weight-medium);
}
&--small {
@@ -52,7 +53,6 @@
justify-content: center;
padding: 0;
width: 24rem;
- height: 13.25rem;
}
&__import {