[GSW-413] fix: Fix Wallet Improve UI

gnoswap-labs · Oct 30, 2023 · 2741c42 · 2741c42
1 parent ce56c3e
commit 2741c42
Show file tree

Hide file tree

Showing 57 changed files with 1,721 additions and 171 deletions.
diff --git a/packages/web/public/cosmos.svg b/packages/web/public/cosmos.svg
diff --git a/packages/web/src/components/common/button/Button.styles.ts b/packages/web/src/components/common/button/Button.styles.ts
@@ -19,6 +19,8 @@ export interface ButtonStyleProps {
   justify?: CSSProperties["justifyContent"];
   padding?: CSSProperties["padding"];
   minWidth?: CSSProperties["minWidth"];
+  hoverColor?: ThemeColorKeyTypes;
+  disabledColor?: ThemeColorKeyTypes;
 }
 
 export const ButtonWrapper = styled.button<ButtonStyleProps>`
@@ -53,7 +55,10 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
 
   &.selected,
   &:hover {
-    background-color: ${({ hierarchy, theme }) => {
+    background-color: ${({ hierarchy, theme, hoverColor }) => {
+      if (hoverColor) {
+        return hoverColor;
+      }
       if (hierarchy === ButtonHierarchy.Primary)
         return theme.color.background04Hover;
       if (hierarchy === ButtonHierarchy.Dark)
@@ -68,9 +73,12 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
     }
   }
   &:disabled {
-    background-color: ${({ hierarchy, theme }) => {
+    background-color: ${({ hierarchy, theme, disabledColor }) => {
+      if (disabledColor) {
+        return disabledColor;
+      }
       if (hierarchy === ButtonHierarchy.Primary)
-        return theme.color.background07;
+        return theme.color.background17;
       return;
     }};
   }

diff --git a/packages/web/src/components/common/header/Header.styles.ts b/packages/web/src/components/common/header/Header.styles.ts
@@ -44,7 +44,7 @@ export const BottomNavItem = styled.div`
   color: ${({ theme }) => theme.color.text04};
   &.selected,
   &:hover {
-    color: ${({ theme }) => theme.color.text03};
+    color: ${({ theme }) => theme.color.text16};
   }
 `;
 

diff --git a/packages/web/src/components/common/modal/Modal.styles.ts b/packages/web/src/components/common/modal/Modal.styles.ts
@@ -58,7 +58,7 @@ export const Overlay = styled.div`
   right: 0px;
   width: 100%;
   height: 100%;
-  background-color: ${({ theme }) => theme.color.backgroundOpacity};
+  background-color: rgba(10, 14, 23, 0.7);
   overflow: hidden;
   z-index: ${Z_INDEX.modalOverlay};
 `;
diff --git a/packages/web/src/components/common/modal/Modal.tsx b/packages/web/src/components/common/modal/Modal.tsx
@@ -1,8 +1,10 @@
+import { usePositionModal } from "@hooks/common/use-postion-modal";
 import {
   ModalStyleProps,
   ModalWrapper,
   Overlay,
 } from "./Modal.styles";
+import { useRef } from "react";
 
 interface ModalProps {
   hasLeftArrow?: boolean;
@@ -20,9 +22,12 @@ const Modal: React.FC<ModalProps> = ({
   style,
   children,
 }) => {
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  usePositionModal(modalRef);
+
   return (
     <>
-      <ModalWrapper {...style}>
+      <ModalWrapper ref={modalRef} {...style}>
         {children}
       </ModalWrapper>
       <Overlay onClick={exitClick} />

diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx
@@ -40,12 +40,13 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
           />
         ))}
     </GridWrapper>
-    {!mobile ? (
+    {!mobile && (
       loadMore &&
       onClickLoadMore && (
         <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
       )
-    ) : (
+    )} 
+    {(positions.length !== 0 && mobile &&
       <div className="box-indicator">
         <span className="current-page">{currentIndex}</span>
         <span>/</span>

diff --git a/packages/web/src/components/common/search-menu-modal/SearchMenuModal.styles.ts b/packages/web/src/components/common/search-menu-modal/SearchMenuModal.styles.ts
@@ -14,7 +14,6 @@ export const SearchModalBackground = styled.div`
   height: 100%;
   background: rgba(10, 14, 23, 0.7);
   z-index: ${Z_INDEX.modalOverlay};
-  backdrop-filter: blur(10px);
 `;
 
 export const SearchContainer = styled.div`

diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.styles.ts b/packages/web/src/components/common/select-pair-button/SelectPairButton.styles.ts
@@ -16,7 +16,7 @@ export const wrapper = (hasToken: boolean, disabled?: boolean) => (
     ${!disabled &&
     `
     transition: 0.2s;
-    &:hover { background-color: ${theme.color.hover01}; }
+    &:hover { background-color: ${theme.color.backgroundGradient}; }
     `};
 
     span {
@@ -30,6 +30,7 @@ export const wrapper = (hasToken: boolean, disabled?: boolean) => (
     .token-logo {
       width: 24px;
       height: 24px;
+      border-radius: 50%;
     }
     .arrow-icon {
       width: 16px;

diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx b/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx
@@ -9,22 +9,25 @@ interface SelectPairButtonProps {
   changeToken?: (token: TokenModel) => void;
   disabled?: boolean;
   hiddenModal?: boolean;
+  callback?: (value: boolean) => void; 
 }
 
 const SelectPairButton: React.FC<SelectPairButtonProps> = ({
   token,
   changeToken,
   disabled,
   hiddenModal,
+  callback,
 }) => {
-  const { openModal } = useSelectTokenModal({ changeToken });
+  const { openModal } = useSelectTokenModal({ changeToken, callback });
 
   const onClickButton = useCallback(() => {
     if (disabled || hiddenModal) {
       return;
     }
     openModal();
-  }, [disabled, openModal, hiddenModal]);
+    callback?.(false);
+  }, [disabled, openModal, hiddenModal, callback]);
 
   return (
     <div

diff --git a/packages/web/src/components/common/select-token/SelectToken.styles.ts b/packages/web/src/components/common/select-token/SelectToken.styles.ts
@@ -8,6 +8,7 @@ export const SelectTokenWrapper = styled.div`
   width: 460px;
   padding: 24px 0px 16px 0px;
   gap: 24px;
+  border-radius: 8px;
   background-color: ${({ theme }) => theme.color.background06};
   ${media.mobile} {
     width: 328px;
@@ -46,6 +47,11 @@ export const SelectTokenWrapper = styled.div`
           * {
             fill: ${({ theme }) => theme.color.icon01};
           }
+          &:hover {
+            * {
+              fill: ${({ theme }) => theme.color.icon07};
+            }
+          }
         }
       }
     }
@@ -65,15 +71,15 @@ export const SelectTokenWrapper = styled.div`
         border: 1px solid ${({ theme }) => theme.color.border03};
         color: ${({ theme }) => theme.color.text01};
         .search-icon * {
-          fill: ${({ theme }) => theme.color.icon03};
+          fill: ${({ theme }) => theme.color.icon05};
         }
       }
 
       &:not(:focus-within, .empty-status) {
-        border: 1px solid ${({ theme }) => theme.color.border11};
+        border: 1px solid ${({ theme }) => theme.color.border02};
         color: ${({ theme }) => theme.color.text01};
         .search-icon * {
-          fill: ${({ theme }) => theme.color.icon05};
+          fill: ${({ theme }) => theme.color.icon08};
         }
       }
 
@@ -91,31 +97,27 @@ export const SelectTokenWrapper = styled.div`
       height: 100%;
       margin-right: 16px;
       &::placeholder {
-        color: ${({ theme }) => theme.color.text04};
+        color: ${({ theme }) => theme.color.text17};
       }
     }
 
     .token-select {
-      display: grid;
+      ${mixins.flexbox("row", "flex-start", "flex-start")};
+      gap: 8px;
       width: 100%;
-      grid-template-rows: auto;
-      col-gap: 8px;
-      row-gap: 8px;
-      grid-template-columns: repeat(4, 1fr);
-
+      flex-wrap: wrap;
       ${media.mobile} {
-        grid-template-columns: repeat(3, 1fr);
+        gap: 4px;
       }
       .token-button {
         ${mixins.flexbox("row", "center", "flex-start")};
-        margin: 0 auto;
-        padding: 6px 12px 6px 6px;
+        padding: 5px 12px 5px 6px;
         gap: 8px;
         border-radius: 36px;
-        border: 1px solid ${({ theme }) => theme.color.border02};
+        border: 1px solid ${({ theme }) => theme.color.border12};
         background-color: ${({ theme }) => theme.color.background02};
         &:hover {
-          background-color: ${({ theme }) => theme.color.background09};
+          background-color: ${({ theme }) => theme.color.hover02};
         }
         cursor: pointer;
         span {
@@ -129,6 +131,9 @@ export const SelectTokenWrapper = styled.div`
           width: 24px;
           height: 24px;
         }
+        &.border-button-none {
+          border-color: transparent;
+        }
       }
     }
   }
@@ -137,12 +142,21 @@ export const SelectTokenWrapper = styled.div`
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     width: 100%;
     gap: 4px;
-    height: 292px;
+    max-height: 292px;
+    &.token-list-wrapper-auto-height {
+      height: auto;
+    }
     ${media.mobile} {
       height: 248px;
     }
     overflow-y: auto;
-
+    .no-data-found {
+      ${mixins.flexbox("row", "center", "center")};
+      color: ${({ theme }) => theme.color.text04};
+      ${fonts.body12};
+      width: 100%;
+      height: 120px;
+    }
     .list {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
@@ -152,7 +166,7 @@ export const SelectTokenWrapper = styled.div`
         padding: 12px;
       }
       &:hover {
-        background-color: ${({ theme }) => theme.color.background09};
+        background-color: ${({ theme }) => theme.color.hover02};
       }
       cursor: pointer;
       .token-logo {

diff --git a/packages/web/src/components/common/select-token/SelectToken.tsx b/packages/web/src/components/common/select-token/SelectToken.tsx
@@ -4,7 +4,6 @@ import IconSearch from "@components/common/icons/IconSearch";
 import IconClose from "@components/common/icons/IconCancel";
 import { TokenModel } from "@models/token/token-model";
 import BigNumber from "bignumber.js";
-
 export interface SelectTokenProps {
   keyword: string;
   defaultTokens: TokenModel[];
@@ -13,6 +12,7 @@ export interface SelectTokenProps {
   changeKeyword: (keyword: string) => void;
   changeToken: (token: TokenModel) => void;
   close: () => void;
+  themeKey: "dark" | "light";
 }
 
 const SelectToken: React.FC<SelectTokenProps> = ({
@@ -23,8 +23,8 @@ const SelectToken: React.FC<SelectTokenProps> = ({
   changeKeyword,
   changeToken,
   close,
+  themeKey,
 }) => {
-
   const getTokenPrice = useCallback((token: TokenModel) => {
     const tokenPrice = tokenPrices[token.priceId];
     if (tokenPrice === null || Number.isNaN(tokenPrice)) {
@@ -68,7 +68,9 @@ const SelectToken: React.FC<SelectTokenProps> = ({
         <div className="token-select">
           {defaultTokens.map((token, index) => (
             <div
-              className="token-button"
+              className={`token-button ${
+                themeKey === "dark" && "border-button-none"
+              }`}
               key={index}
               onClick={() => onClickToken(token)}
             >
@@ -78,24 +80,32 @@ const SelectToken: React.FC<SelectTokenProps> = ({
           ))}
         </div>
       </div>
-      <div className="token-list-wrapper">
-        {tokens.map((token, index) => (
-          <div
-            className="list"
-            key={index}
-            onClick={() => onClickToken(token)}
-          >
-            <div className="token-info">
-              <img src={token.logoURI} alt="logo" className="token-logo" />
-              <span className="token-name">{token.name}</span>
-              <span className="token-symbol">{token.symbol}</span>
+      <div
+        className={`token-list-wrapper ${
+          tokens.length === 0 ? "token-list-wrapper-auto-height" : ""
+        }`}
+      >
+        {tokens.length > 0 &&
+          tokens.map((token, index) => (
+            <div
+              className="list"
+              key={index}
+              onClick={() => onClickToken(token)}
+            >
+              <div className="token-info">
+                <img src={token.logoURI} alt="logo" className="token-logo" />
+                <span className="token-name">{token.name}</span>
+                <span className="token-symbol">{token.symbol}</span>
+              </div>
+              <span className="token-balance">{getTokenPrice(token)}</span>
             </div>
-            <span className="token-balance">{getTokenPrice(token)}</span>
-          </div>
-        ))}
+          ))}
+        {tokens.length === 0 && (
+          <div className="no-data-found">No data found</div>
+        )}
       </div>
     </SelectTokenWrapper>
   );
 };
 
-export default SelectToken;
+export default SelectToken;
diff --git a/packages/web/src/components/common/switch/Switch.styles.ts b/packages/web/src/components/common/switch/Switch.styles.ts
@@ -6,6 +6,9 @@ import mixins from "@styles/mixins";
 export const SwitchWrapper = styled.div`
   ${mixins.flexbox("row", "center", "center", false)};
   gap: 16px;
+  ${media.mobile} {
+    gap: 8px;
+  }
 `;
 
 export const SwitchLabel = styled.label`

diff --git a/packages/web/src/components/common/tooltip/Tooltip.styles.ts b/packages/web/src/components/common/tooltip/Tooltip.styles.ts
@@ -1,15 +1,21 @@
 import styled from "@emotion/styled";
 import { media } from "@styles/media";
 
-export const Content = styled.div`
+interface ContentToolTipProps {
+  themeKey: "dark" | "light";
+}
+
+export const Content = styled.div<ContentToolTipProps>`
   color: ${({ theme }) => theme.color.text02};
   background-color: ${({ theme }) => theme.color.background02};
   padding: 16px;
   border-radius: 8px;
   box-sizing: border-box;
   width: max-content;
   max-width: calc(100vw - 10px);
-  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: ${({ themeKey }) => {
+    return themeKey === "dark" ? "10px 14px 60px 0px rgba(0, 0, 0, 0.4)" : "10px 14px 48px 0px rgba(0, 0, 0, 0.12)";
+  }};
   ${media.mobile} {
     padding: 12px;
     gap: 4px;