Merge pull request #220 from gnoswap-labs/GSW-31_token-detail-ui

gnoswap-labs · Oct 23, 2023 · 659e43c · 659e43c
2 parents 378073b + 66a211c
commit 659e43c
Show file tree

Hide file tree

Showing 49 changed files with 1,073 additions and 260 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,7 @@
 
 node_modules
 .vscode
+
+.pnp.cjs
+.pnp.loader.mjs
+
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};
     }
   }
 
@@ -30,4 +30,7 @@ export const wrapper = (theme: Theme) => css`
       fill: ${theme.color.icon03};
     }
   }
+  @media (max-width: 1180px) {
+    height: 24px;
+  }
 `;
diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -73,7 +73,12 @@ const Header: React.FC<HeaderProps> = ({
                     {HEADER_NAV.map(item => (
                       <li
                         key={item.title}
-                        className={pathname === item.path ? "selected" : ""}
+                        className={
+                          pathname === item.path ||
+                          (item.subPath || []).some(_ => pathname.includes(_))
+                            ? "selected"
+                            : ""
+                        }
                       >
                         <Link href={item.path}>{item.title}</Link>
                       </li>

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,21 +38,44 @@ 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;
       transition: background-color 0.3s ease;
       cursor: pointer;
       &:hover {
-        background-color: ${theme.color.background06};
+        background-color: ${theme.color.hover04};
       }
       .symbol {
         margin: 0px 8px;
       }
       .fee-rate {
         color: ${theme.color.text04};
       }
+      ${media.mobile} {
+        gap: 8px;
+      }
+    }
+  }
+  @media (max-width: 1180px) {
+    .title-wrap {
+      padding: 0 16px;
+    }
+    ul {
+      li {
+        padding: 0 16px;
+      }
     }
   }
 `;