[GSW-546] fix: Entire Improve UI

README.md

@@ -1,4 +1,4 @@
-# Gnoswap Interface 
+# Gnoswap Interface
 Welcome to the open source interface for Gnoswap, the first decentralized exchange (DEX) powered by Gnoland, designed to simplify concentrated liquidity experience and increase capital efficiency for traders.
 
 _Note: Gnoswap is in active development and not yet in production, and we welcome your contributions! Please check our [contribution guidelines](https://github.com/gnoswap-labs/gnoswap-interface#contributing--support) and the [latest release](https://github.com/gnoswap-labs/gnoswap-interface/releases) to see the current development status._

packages/web/src/common/utils/test-util.ts

@@ -61,7 +61,7 @@ export const generateToken0 = () => {
 export const generateToken1 = () => {
   return {
     token_id: `${generateAddress()}`,
-    name: "GNOS",
+    name: "GNS",
     symbol: "GNOSWAP",
     amount: {
       value: generateNumberPlus(),
@@ -106,7 +106,7 @@ export const generateTokenMetas = () => {
     "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xB98d4C97425d9908E66E53A6fDf673ACcA0BE986/logo.png";
   return {
     images: [image0, image1],
-    names: ["GNOT", "GNOS"],
+    names: ["GNOT", "GNS"],
   };
 };
 

packages/web/src/components/common/bar-graph/BarGraph.styles.ts

@@ -17,8 +17,8 @@ export const BarGraphWrapper = styled.div<BarGraphWrapperProps>`
   width: 100%;
   height: auto;
   overflow: visible;
-  pointer-events: none;
   & > svg {
+    transform: translateY(24px);
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -28,8 +28,13 @@ export const BarGraphWrapper = styled.div<BarGraphWrapperProps>`
       pointer-events: auto;
       &:hover {
         fill: ${(props) =>
-          props.svgColor === "default" ? ({ theme }) => theme.color.point : ""};
+          props.svgColor === "default" ? ({ hoverColor }) => hoverColor : ""};
         opacity: ${(props) => (props.svgColor === "incentivized" ? 0.4 : 1)};
+        + path {
+          fill: ${(props) =>
+            props.svgColor === "default" ? ({ hoverColor }) => hoverColor : ""};
+          opacity: ${(props) => (props.svgColor === "incentivized" ? 0.4 : 1)};
+        }
       }
     }
   }
@@ -43,26 +48,15 @@ export const BarLineWrapper = styled.line`
   }
 `;
 
-interface BarGraphTooltipWrapperProps {
-  x: number;
-  y: number;
-}
-
-export const BarGraphTooltipWrapper = styled.div<BarGraphTooltipWrapperProps>`
-  position: absolute;
-  top: ${(props) => `${props.y - 51}px`};
-  left: ${(props) => `${props.x}px`};
+export const BarGraphTooltipWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  min-width: 220px;
+  min-width: 126px;
   height: auto;
-  padding: 6px 8px;
   background: ${({ theme }) => theme.color.background02};
   border-radius: 4px;
-  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15);
-  overflow: visible;
-  gap: 5px;
-  transform: translateX(-48%);
+  gap: 8px;
+
   ${fonts.p4};
 
   & .tooltip-header {
@@ -71,33 +65,27 @@ export const BarGraphTooltipWrapper = styled.div<BarGraphTooltipWrapperProps>`
     width: 100%;
     height: auto;
     justify-content: space-between;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 19px;
-    color: ${({ theme }) => theme.color.point};
+    ${fonts.body9}
+    color: ${({ theme }) => theme.color.text02};
   }
 
   & .tooltip-body {
-    ${fonts.p4};
+    ${fonts.body12};
     color: ${({ theme }) => theme.color.text04};
-    .date {
-      margin-right: 3px;
+    .time {
+      margin-left: 40px;
+      ${media.tablet} {
+        display: none;
+      }
     }
   }
 `;
 
-export const IncentivizeGraphTooltipWrapper = styled.div<BarGraphTooltipWrapperProps>`
+export const IncentivizeGraphTooltipWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
-  position: absolute;
-  top: ${(props) => `${props.y - 140}px`};
-  left: ${(props) => `${props.x}px`};
-  padding: 16px;
   background: ${({ theme }) => theme.color.background02};
-  border-radius: 8px;
-  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.2);
   gap: 8px;
   z-index: ${Z_INDEX.modalTooltip};
-  transform: translateX(-50%);
   .row {
     ${mixins.flexbox("row", "flex-start", "flex-start")};
     .token,