[GSW-31] fix: Token Details Improve UI

gnoswap-labs · Oct 23, 2023 · 66a211c · 66a211c
1 parent e6269c1
commit 66a211c
Show file tree

Hide file tree

Showing 41 changed files with 862 additions and 201 deletions.
diff --git a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts
@@ -7,7 +7,7 @@ export const wrapper = (theme: Theme) => css`
   ${fonts.p3};
   height: 26px;
   padding: 0px 8px;
-  background-color: ${theme.color.background06};
+  background-color: ${theme.color.backgroundOpacity3};
   color: ${theme.color.text04};
   border-radius: 2px;
 
@@ -18,7 +18,7 @@ export const wrapper = (theme: Theme) => css`
       color: ${theme.color.text02};
     }
     &:last-of-type {
-      color: ${theme.color.text05};
+      color: ${theme.color.text10};
     }
   }
 

diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts
@@ -1,20 +1,26 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 
 export const LineGraphWrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 180px;
+  height: 319px;
   overflow: visible;
-
+  ${media.mobile} {
+    height: 263px;
+  }
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 180px;
+    height: 319px;
     overflow: visible;
+    ${media.mobile} {
+      height: 263px;
+    }
   }
 `;
 
@@ -29,13 +35,14 @@ export const LineGraphTooltipWrapper = styled.div<LineGraphTooltipWrapperProps>`
   left: ${props => `${props.x}px`};
   display: flex;
   flex-direction: column;
-  width: 157px;
+  width: 148px;
   height: auto;
   padding: 6px 8px;
-  background: ${({ theme }) => theme.color.background05};
+  background: ${({ theme }) => theme.color.background02};
   border-radius: 4px;
   box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15);
   overflow: visible;
+  gap: 5px;
   ${fonts.p4};
 
   & .tooltip-header {
@@ -44,9 +51,17 @@ export const LineGraphTooltipWrapper = styled.div<LineGraphTooltipWrapperProps>`
     width: 100%;
     height: auto;
     justify-content: space-between;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 19px;
+    color: ${({ theme }) => theme.color.point};
   }
 
   & .tooltip-body {
-    color: ${({ theme }) => theme.color.point};
+    ${fonts.p4};
+    color: ${({ theme }) => theme.color.text04};
+    .date {
+      margin-right: 4px;
+    }
   }
 `;
diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx
@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles";
 
 function calculateSmoothing(pointA: Point, pointB: Point) {
@@ -61,6 +61,7 @@ export interface LineGraphProps {
   width?: number;
   height?: number;
   point?: boolean;
+  firstPointColor?: string;
 }
 
 interface Point {
@@ -97,6 +98,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
   width = VIEWPORT_DEFAULT_WIDTH,
   height = VIEWPORT_DEFAULT_HEIGHT,
   point,
+  firstPointColor,
 }) => {
   const COMPONENT_ID = (Math.random() * 100000).toString();
   const [activated, setActivated] = useState(false);
@@ -218,6 +220,13 @@ const LineGraph: React.FC<LineGraphProps> = ({
     [getGraphLine, height, width],
   );
 
+  const firstPoint = useMemo(() => {
+    if (points.length === 0) {
+      return { x: 0, y: 0};
+    }
+    return points[0];
+  }, [points]);
+
   return (
     <LineGraphWrapper
       className={className}
@@ -235,7 +244,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
             <stop offset="100%" stopColor={gradientEndColor} />
           </linearGradient>
         </defs>
-        <g>
+        <g width={width}>
           <path
             fill={`url(#gradient${COMPONENT_ID})`}
             stroke={color}
@@ -259,58 +268,62 @@ const LineGraph: React.FC<LineGraphProps> = ({
               />
             ))}
         </g>
-        {isFocus() && currentPoint && (
+        {
           <g>
             <line
-              stroke={color}
+              stroke={firstPointColor ? firstPointColor : color}
               strokeWidth={1}
               x1={0}
-              y1={currentPoint.y}
+              y1={firstPoint.y}
               x2={width}
-              y2={currentPoint.y}
-              strokeDasharray={3}
-            />
-            <line
-              stroke={color}
-              strokeWidth={1}
-              x1={currentPoint.x}
-              y1={0}
-              x2={currentPoint.x}
-              y2={height}
+              y2={firstPoint.y}
               strokeDasharray={3}
             />
-            <circle
-              cx={currentPoint.x}
-              cy={currentPoint.y}
-              r={3}
-              stroke={color}
-              fill={color}
-            />
+            {isFocus() && currentPoint && (
+              <line
+                stroke={color}
+                strokeWidth={1}
+                x1={currentPoint.x}
+                y1={0}
+                x2={currentPoint.x}
+                y2={height}
+                strokeDasharray={3}
+              />
+            )}
+            {isFocus() && currentPoint && (
+              <circle
+                cx={currentPoint.x}
+                cy={currentPoint.y}
+                r={3}
+                stroke={color}
+                fill={color}
+              />
+            )}
           </g>
-        )}
+        }
       </svg>
       {isFocus() && currentPointIndex > -1 && (
         <LineGraphTooltipWrapper
           x={
             currentPoint?.x && currentPoint?.x > width / 2
-              ? currentPoint?.x - 157
+              ? currentPoint?.x - 150
               : currentPoint?.x || 0
           }
           y={currentPoint?.y || 0}
         >
           <div className="tooltip-header">
+            <span className="value">{`$${BigNumber(
+              datas[currentPointIndex].value,
+            ).toString()}`}</span>
+          </div>
+          <div className="tooltip-body">
             <span className="date">
               {parseTime(datas[currentPointIndex].time).date}
             </span>
             <span className="time">
               {parseTime(datas[currentPointIndex].time).time}
             </span>
           </div>
-          <div className="tooltip-body">
-            <span className="value">{`$ ${BigNumber(
-              datas[currentPointIndex].value,
-            ).toString()}`}</span>
-          </div>
         </LineGraphTooltipWrapper>
       )}
     </LineGraphWrapper>

diff --git a/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts b/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts
@@ -14,4 +14,15 @@ export const wrapper = (theme: Theme) => css`
       fill: ${theme.color.icon03};
     }
   }
+  &:hover {
+    span {
+      color: ${theme.color.text03};
+    }
+    transition: all 0.3s ease;
+    svg {
+      * {
+        fill: ${theme.color.icon07};
+      }
+    }
+  }
 `;
diff --git a/packages/web/src/components/common/select-tab/SelectTab.tsx b/packages/web/src/components/common/select-tab/SelectTab.tsx
@@ -14,7 +14,7 @@ const SelectTab: React.FC<SelectTabProps> = ({
   buttonClassName,
 }) => {
   return (
-    <SelectTabWrapper>
+    <SelectTabWrapper className="select-tab-wrapper">
       {list.map((type, idx) => (
         <SelectButton
           key={idx}

diff --git a/packages/web/src/components/swap/setting-menu-modal/SettingMenuModal.tsx b/packages/web/src/components/swap/setting-menu-modal/SettingMenuModal.tsx
@@ -13,12 +13,14 @@ interface SettingMenuModalProps {
   slippage: number;
   changeSlippage: (value: string) => void;
   close: () => void;
+  className?: string;
 }
 
 const SettingMenuModal: React.FC<SettingMenuModalProps> = ({
   slippage,
   changeSlippage,
   close,
+  className,
 }) => {
   const settingMenuRef = useRef<HTMLDivElement | null>(null);
   useModalCloseEvent(settingMenuRef, close);
@@ -45,7 +47,7 @@ const SettingMenuModal: React.FC<SettingMenuModalProps> = ({
   }, [changeSlippage]);
 
   return (
-    <SettingMenuModalWrapper ref={settingMenuRef}>
+    <SettingMenuModalWrapper ref={settingMenuRef} className={className}>
       <div className="modal-body">
         <div className="modal-header">
           <span>Settings</span>

diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import { css, type Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
@@ -12,17 +13,21 @@ export const wrapper = (theme: Theme) => css`
     ${mixins.flexbox("row", "center", "space-between")};
     color: ${theme.color.text04};
     padding: 0px 24px;
+    gap: 8px;
+    min-width: max-content;
   }
   .pair {
-    width: 170px;
+    min-width: 170px;
+    @media (max-width: 768px) and (min-width: 400px) {
+      min-width: 130px;
+      max-width: 130px;
+    }
   }
   .tvl {
-    width: 90px;
-    margin-left: auto;
-    margin-right: 31px;
+    min-width: 90px;
   }
   .apr {
-    width: 60px;
+    min-width: 60px;
   }
   .tvl,
   .apr {
@@ -33,7 +38,17 @@ export const wrapper = (theme: Theme) => css`
     ${mixins.flexbox("column", "space-between", "center")};
     gap: 4px;
     li {
-      ${mixins.flexbox("row", "center", "flex-start")};
+      ${mixins.flexbox("row", "center", "space-between")};
+      gap: 8px;
+      > div {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        min-width: 170px;
+        @media (max-width: 768px) and (min-width: 400px) {
+          min-width: 130px;
+          max-width: 130px;
+        }
+      }
+      gap: 4px;
       width: 100%;
       height: 36px;
       padding: 0px 24px;
@@ -48,6 +63,19 @@ export const wrapper = (theme: Theme) => css`
       .fee-rate {
         color: ${theme.color.text04};
       }
+      ${media.mobile} {
+        gap: 8px;
+      }
+    }
+  }
+  @media (max-width: 1180px) {
+    .title-wrap {
+      padding: 0 16px;
+    }
+    ul {
+      li {
+        padding: 0 16px;
+      }
     }
   }
 `;
diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx
@@ -4,6 +4,7 @@ import { type BestPool } from "@containers/best-pools-container/BestPoolsContain
 import { tokenPairSymbolToOneCharacter } from "@utils/string-utils";
 import { wrapper } from "./BestPoolCardList.styles";
 import Link from "next/link";
+import { SwapFeeTierInfoMap } from "@constants/option.constant";
 
 interface BestPoolCardListProps {
   list: BestPool[];
@@ -25,15 +26,17 @@ const BestPoolCardList: React.FC<BestPoolCardListProps> = ({ list }) => {
         {list.map((info, idx) => (
           <Link href="/earn/pool/5" key={idx}>
             <li>
-              <DoubleLogo
-                left={info.tokenPair.tokenA.logoURI}
-                right={info.tokenPair.tokenB.logoURI}
-                size={20}
-              />
-              <span className="symbol">
-                {tokenPairSymbolToOneCharacter(info.tokenPair)}
-              </span>
-              <span className="fee-rate">{info.feeRate}%</span>
+              <div>
+                <DoubleLogo
+                  left={info.tokenPair.tokenA.logoURI}
+                  right={info.tokenPair.tokenB.logoURI}
+                  size={20}
+                />
+                <span className="symbol">
+                  {tokenPairSymbolToOneCharacter(info.tokenPair)}
+                </span>
+                <span className="fee-rate">{SwapFeeTierInfoMap[info.feeRate].rateStr}</span>
+              </div>
               <span className="tvl">{info.tvl}</span>
               <span className="apr">{info.apr}</span>
             </li>