fix: [GSW-2040] UI

gnoswap-labs · Jan 16, 2025 · 180f940 · 180f940
1 parent 349c881
commit 180f940
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 31 deletions.
diff --git a/...es/web/src/components/common/connected-social-wallet-modal/ConnectedSocialWalletModal.tsx b/...es/web/src/components/common/connected-social-wallet-modal/ConnectedSocialWalletModal.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import Link from "next/link";
 
+import { SOCIAL_WALLET_EXTERNAL_URL } from "@constants/external-url.contant";
+
 import { ConnectedSocialWalletModalWrapper } from "./ConnectedSocialWalletModal.styles";
 import Button, { ButtonHierarchy } from "../button/Button";
 import IconClose from "../icons/IconCancel";
@@ -14,11 +16,6 @@ interface Props {
   onDontShowAgain: () => void;
 }
 
-const EXTERNAL_URLS = {
-  ADENA_INSTALL_URL: "https://adena.app",
-  SOCIAL_WALLET_FAQ_URL: "https://docs.gnoswap.io/references/faq",
-} as const;
-
 const ConnectedSocialWalletModal = ({ close, onDontShowAgain }: Props) => {
   const handleConfirm = React.useCallback(() => close(), [close]);
 
@@ -57,12 +54,12 @@ const ConnectedSocialWalletModal = ({ close, onDontShowAgain }: Props) => {
             </div>
             <div className="link-wrapper">
               <div className="link">
-                <ExternalLink href={EXTERNAL_URLS.ADENA_INSTALL_URL}>
+                <ExternalLink href={SOCIAL_WALLET_EXTERNAL_URL.ADENA_INSTALL_URL}>
                   <div>Go to install Adena</div>
                 </ExternalLink>
               </div>
               <div className="link">
-                <ExternalLink href={EXTERNAL_URLS.SOCIAL_WALLET_FAQ_URL}>
+                <ExternalLink href={SOCIAL_WALLET_EXTERNAL_URL.SOCIAL_WALLET_FAQ_URL}>
                   <div>How does Social Wallets work?</div>
                 </ExternalLink>
               </div>

diff --git a/packages/web/src/components/common/header/wallet-connector-button/RenderWalletIcon.tsx b/packages/web/src/components/common/header/wallet-connector-button/RenderWalletIcon.tsx
@@ -14,22 +14,22 @@ interface RenderWalletIconProps {
 }
 
 const RenderWalletIcon = ({ isSwitchNetwork, walletType }: RenderWalletIconProps) => {
-  if (isSwitchNetwork) return <IconFailed className="fail-icon" />;
+  if (isSwitchNetwork) return <IconFailed className="fail-icon render-wallet-icon" />;
 
   if (walletType.type === "SOCIAL_WALLET") {
     switch (walletType.socialType) {
       case "email":
-        return <IconEmailLogo />;
+        return <IconEmailLogo className="render-wallet-icon" />;
       case "google":
-        return <IconGoogleLogo />;
+        return <IconGoogleLogo className="render-wallet-icon" />;
       case "twitter":
-        return <IconTwitterLogo />;
+        return <IconTwitterLogo className="render-wallet-icon" />;
       default:
         return null;
     }
   }
 
-  return <IconAdenaLogo />;
+  return <IconAdenaLogo className="render-wallet-icon" />;
 };
 
 export default RenderWalletIcon;
diff --git a/.../web/src/components/common/header/wallet-connector-button/WalletConnectorButton.styles.ts b/.../web/src/components/common/header/wallet-connector-button/WalletConnectorButton.styles.ts
@@ -4,13 +4,21 @@ import { media } from "@styles/media";
 
 export const WalletConnectorButtonWrapper = styled.div`
   position: relative;
+  button {
+    min-width: 0;
+  }
+
   .arrow-icon {
-    margin-left: 8px;
     width: 16px;
     height: 16px;
   }
   .connected-button {
     background-color: ${({ theme }) => theme.color.background13};
+    .render-wallet-icon {
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+    }
     &:hover {
       background-color: ${({ theme }) => theme.color.backgroundGradient};
     }

diff --git a/packages/web/src/components/common/header/wallet-connector-button/WalletConnectorButton.tsx b/packages/web/src/components/common/header/wallet-connector-button/WalletConnectorButton.tsx
@@ -141,7 +141,6 @@ const WalletConnectorButton: React.FC<WalletConnectProps> = ({
             textColor: "text19",
             arrowColor: "text18",
             padding: "10px 16px",
-            gap: "8px",
             height: 36,
           }}
           onClick={onMenuToggle}

diff --git a/...n/header/wallet-connector-button/wallet-connector-menu/SocialWalletNotification.styles.ts b/...n/header/wallet-connector-button/wallet-connector-menu/SocialWalletNotification.styles.ts
@@ -9,7 +9,7 @@ export const SocialWalletNotificationWrapper = styled.div`
   gap: 12px;
 
   margin: 16px 0;
-  padding: 12px 16px;
+  padding: 12px 15.5px;
   border-radius: 8px;
   border: 1px solid rgba(249, 115, 22, 0.1);
   background: rgba(249, 115, 22, 0.08);
@@ -30,4 +30,8 @@ export const SocialWalletNotificationWrapper = styled.div`
   .content {
     font-weight: 400;
   }
+
+  .margin-left {
+    margin-left: 2px;
+  }
 `;
diff --git a/.../common/header/wallet-connector-button/wallet-connector-menu/SocialWalletNotification.tsx b/.../common/header/wallet-connector-button/wallet-connector-menu/SocialWalletNotification.tsx
@@ -1,8 +1,11 @@
-import IconInfo from "@components/common/icons/IconInfo";
-import IconOpenLink from "@components/common/icons/IconOpenLink";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+
+import { SOCIAL_WALLET_EXTERNAL_URL } from "@constants/external-url.contant";
+
 import { SocialWalletNotificationWrapper } from "./SocialWalletNotification.styles";
+import IconInfo from "@components/common/icons/IconInfo";
+import IconOpenLink from "@components/common/icons/IconOpenLink";
 
 const ORANGE_COLOR = "#F97316";
 
@@ -18,15 +21,15 @@ const SocialWalletNotification = () => {
         To use the full wallet features, install
         <br />
         Adena
-        <Link href="/" target="_blank">
-          <IconOpenLink fill={ORANGE_COLOR} />
+        <Link href={SOCIAL_WALLET_EXTERNAL_URL.ADENA_INSTALL_URL} target="_blank">
+          <IconOpenLink fill={ORANGE_COLOR} className="margin-left" />
         </Link>
         & login with the same social.
       </div>
 
       <div className="guide">
         How does Social Wallets work?{" "}
-        <Link href="/" target="_blank">
+        <Link href={SOCIAL_WALLET_EXTERNAL_URL.SOCIAL_WALLET_FAQ_URL} target="_blank">
           <IconOpenLink fill={ORANGE_COLOR} />
         </Link>
       </div>

diff --git a/packages/web/src/components/common/icons/defaultIcon/IconEmailLogo.tsx b/packages/web/src/components/common/icons/defaultIcon/IconEmailLogo.tsx
@@ -1,6 +1,13 @@
-const IconEmailLogo = () => {
+const IconEmailLogo = ({ className }: { className?: string }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+    >
       <path d="M14.8574 3H1.14307V13H14.8574V3Z" stroke="#596782" stroke-linecap="round" stroke-linejoin="round" />
       <path
         d="M1.71436 3.03711L7.99951 8.66602L14.2858 3.03711"

diff --git a/packages/web/src/components/common/icons/defaultIcon/IconGoogleLogo.tsx b/packages/web/src/components/common/icons/defaultIcon/IconGoogleLogo.tsx
@@ -1,6 +1,13 @@
-const IconGoogleLogo = () => {
+const IconGoogleLogo = ({ className }: { className?: string }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      className={className}
+    >
       <path
         d="M19.3 10.707C19.3 10.057 19.2417 9.43203 19.1333 8.83203H10.5V12.382H15.4333C15.2167 13.5237 14.5667 14.4904 13.5917 15.1404V17.4487H16.5667C18.3 15.8487 19.3 13.4987 19.3 10.707Z"
         fill="#4285F4"

diff --git a/packages/web/src/components/common/icons/defaultIcon/IconTwitterLogo.tsx b/packages/web/src/components/common/icons/defaultIcon/IconTwitterLogo.tsx
@@ -1,6 +1,13 @@
-const IconTwitterLogo = ({ fill }: { fill?: string }) => {
+const IconTwitterLogo = ({ fill, className }: { fill?: string; className?: string }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      className={className}
+    >
       <path
         d="M3.01318 3.5L9.81885 13.707L3.25195 21.5H5.21338L10.6846 15.0078L15.0132 21.5H15.4146H21.0117L14.0347 11.0322L20.3818 3.5H18.4204L13.1689 9.73291L9.01318 3.5H3.01318ZM5.81689 5H8.21045L18.2095 20H15.8159L5.81689 5Z"
         fill={fill ? fill : "white"}

diff --git a/packages/web/src/components/common/transaction-approval-modal/TransactionApprovalModal.tsx b/packages/web/src/components/common/transaction-approval-modal/TransactionApprovalModal.tsx
@@ -99,7 +99,7 @@ const TransactionApprovalModal = ({
           </TransactionApprovalSummary>
           <TransactionApprovalDetails>
             <button onClick={() => setIsExpanded(prev => !prev)} aria-expanded={isExpanded}>
-              View Transaction Data {isExpanded ? <IconArrowDown /> : <IconArrowUp />}
+              View Transaction Data {!isExpanded ? <IconArrowDown /> : <IconArrowUp />}
             </button>
 
             <div

diff --git a/packages/web/src/constants/external-url.contant.ts b/packages/web/src/constants/external-url.contant.ts
@@ -28,3 +28,8 @@ export const EXT_URL = {
   },
   AUDIT: "https://github.com/gnoswap-labs/gnoswap/tree/main/audits",
 } as const;
+
+export const SOCIAL_WALLET_EXTERNAL_URL = {
+  ADENA_INSTALL_URL: "https://adena.app",
+  SOCIAL_WALLET_FAQ_URL: "https://docs.gnoswap.io/references/faq",
+} as const;
diff --git a/...web/src/layouts/governance/components/proposals-list/proposal-card/ProposalCard.styles.ts b/...web/src/layouts/governance/components/proposals-list/proposal-card/ProposalCard.styles.ts
@@ -56,7 +56,7 @@ export const ProposalDetailWrapper = styled.div`
       flex-wrap: nowrap;
       gap: 12px;
       .proposer {
-        ${mixins.flexbox("row", "center", "center")};\
+        ${mixins.flexbox("row", "center", "center")};
         gap: 4px;
         ${fonts.p4};
         white-space: nowrap;

diff --git a/...ts/wallet/components/wallet-balance/wallet-balance-summary/WalletBalanceSummary.styles.ts b/...ts/wallet/components/wallet-balance/wallet-balance-summary/WalletBalanceSummary.styles.ts
@@ -30,7 +30,7 @@ export const WalletBalanceSummaryWrapper = styled.div`
 
       border-radius: 4px;
       border: 1px solid ${({ theme }) => theme.color.border03};
-      color: ${({ theme }) => theme.color.text03};
+      /* color: ${({ theme }) => theme.color.text03}; */
       font-size: 12px;
       font-weight: 500;
     }

diff --git a/.../layouts/wallet/components/wallet-balance/wallet-balance-summary/WalletBalanceSummary.tsx b/.../layouts/wallet/components/wallet-balance/wallet-balance-summary/WalletBalanceSummary.tsx
@@ -10,6 +10,7 @@ import WalletBalanceSummaryInfo, { BalanceSummaryInfo } from "./wallet-balance-s
 
 import { WalletBalanceSummaryWrapper } from "./WalletBalanceSummary.styles";
 import { WalletTypeState } from "src/types/wallet.types";
+import Badge from "@components/common/badge/Badge";
 
 interface WalletBalanceSummaryProps {
   connected: boolean;
@@ -38,7 +39,7 @@ const WalletBalanceSummary: React.FC<WalletBalanceSummaryProps> = ({
     <WalletBalanceSummaryWrapper>
       <div className="total-balance-title-wrapper">
         <span className="total-balance-title">{t("Wallet:overral.totalBal")}</span>
-        {isConnectSocialWallet && <div className="badge">Social Account Wallet</div>}
+        {isConnectSocialWallet && <Badge text="Social Account Wallet" type="darkDefault" className="badge" />}
       </div>
       <div className="container">
         <WalletBalanceSummaryInfo balanceSummaryInfo={balanceSummaryInfo} connected={connected} />