Fix: Dashboard Responsive Web Develop

gnoswap-labs · Aug 22, 2023 · 0903300 · 0903300
1 parent fd4fb0a
commit 0903300
Show file tree

Hide file tree

Showing 32 changed files with 216 additions and 158 deletions.
diff --git a/packages/web/src/components/common/bar-graph/BarGraph.styles.ts b/packages/web/src/components/common/bar-graph/BarGraph.styles.ts
@@ -11,14 +11,14 @@ export const BarGraphWrapper = styled.div<BarGraphWrapperProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: auto;
+  height: 180px;
   overflow: visible;
 
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: auto;
+    height: 180px;
     overflow: visible;
 
     line {

diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts
@@ -6,14 +6,14 @@ export const LineGraphWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: auto;
+  height: 180px;
   overflow: visible;
 
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: auto;
+    height: 180px;
     overflow: visible;
   }
 `;

diff --git a/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts b/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts
@@ -1,7 +1,7 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
 import mixins from "@styles/mixins";
-import { media } from "@styles/media";
+import { ContainerWidth, media } from "@styles/media";
 
 export const ActivityListHeaderwrapper = styled.div`
   ${mixins.flexbox("row", "center", "flex-start")};
@@ -22,7 +22,7 @@ export const ActivityListHeaderwrapper = styled.div`
   }
   .overflow-tab {
     ${media.mobile} {
-      max-width: 324px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
       width: 100%;
       overflow-x: auto;
     }

diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx
@@ -3,13 +3,15 @@ import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import ActivityListTable from "./ActivityListTable";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("ActivityListTable Component", () => {
   it("ActivityListTable render", () => {
     const mockProps = {
       activities: dummyTokenList,
       isFetched: true,
       isSortOption: () => true,
+      breakpoint: DEVICE_TYPE.WEB,
       sort: () => {
         return;
       },

diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
 import ActivityListTable from "./ActivityListTable";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/ActivityListTable",
@@ -19,6 +20,7 @@ Default.args = {
   isFetched: true,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 export const Skeleton = Template.bind({});
@@ -27,6 +29,7 @@ Skeleton.args = {
   isFetched: false,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 export const NotFount = Template.bind({});
@@ -35,4 +38,5 @@ NotFount.args = {
   isFetched: true,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx
@@ -23,15 +23,15 @@ import {
 } from "@constants/skeleton.constant";
 import IconTriangleArrowDown from "@components/common/icons/IconTriangleArrowDown";
 import IconTriangleArrowUp from "@components/common/icons/IconTriangleArrowUp";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface ActivityListTableProps {
   activities: Activity[];
   isFetched: boolean;
   isSortOption: (head: TABLE_HEAD) => boolean;
   sortOption?: SortOption;
   sort: (head: TABLE_HEAD) => void;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const ActivityListTable: React.FC<ActivityListTableProps> = ({
@@ -40,7 +40,7 @@ const ActivityListTable: React.FC<ActivityListTableProps> = ({
   isSortOption,
   sort,
   isFetched,
-  windowSize,
+  breakpoint,
 }) => {
   const isAscendingOption = useCallback(
     (head: TABLE_HEAD) => {
@@ -67,7 +67,7 @@ const ActivityListTable: React.FC<ActivityListTableProps> = ({
     return TABLE_HEAD.ACTION === head;
   };
 
-  return windowSize > DeviceSize.mobile ? (
+  return breakpoint !== DEVICE_TYPE.MOBILE ? (
     <TableWrapper>
       <div className="scroll-wrapper">
         <div className="activity-list-head">

diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx
@@ -6,6 +6,7 @@ import {
   ACTIVITY_TYPE,
   dummyTokenList,
 } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("ActivityList Component", () => {
   it("ActivityList render", () => {
@@ -19,6 +20,7 @@ describe("ActivityList Component", () => {
       totalPage: 10,
       movePage: () => {},
       isSortOption: () => true,
+      breakpoint: DEVICE_TYPE.WEB,
       sort: () => {
         return;
       },

diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx
@@ -4,6 +4,7 @@ import ActivityList from "./ActivityList";
 import { css, Theme } from "@emotion/react";
 import { action } from "@storybook/addon-actions";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/ActivityList",
@@ -28,6 +29,7 @@ Default.args = {
   movePage: action("movePage"),
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`

diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.tsx
@@ -11,7 +11,7 @@ import ActivityListHeader from "@components/dashboard/activity-list-header/Activ
 import ActivityListTable from "@components/dashboard/activity-list-table/ActivityListTable";
 import Pagination from "@components/common/pagination/Pagination";
 import { ActivityListWrapper } from "./ActivityList.styles";
-import { DeviceSize } from "@styles/media";
+import { DeviceSize, DEVICE_TYPE } from "@styles/media";
 interface ActivityItem {
   activities: Activity[];
   isFetched: boolean;
@@ -24,7 +24,7 @@ interface ActivityItem {
   movePage: (page: number) => void;
   isSortOption: (item: TABLE_HEAD) => boolean;
   sort: (item: TABLE_HEAD) => void;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const ActivityList: React.FC<ActivityItem> = ({
@@ -39,7 +39,7 @@ const ActivityList: React.FC<ActivityItem> = ({
   movePage,
   isSortOption,
   sort,
-  windowSize,
+  breakpoint,
 }) => {
   return (
     <ActivityListWrapper>
@@ -53,13 +53,13 @@ const ActivityList: React.FC<ActivityItem> = ({
         sortOption={sortOption}
         isSortOption={isSortOption}
         sort={sort}
-        windowSize={windowSize}
+        breakpoint={breakpoint}
       />
       <Pagination
         currentPage={currentPage}
         totalPage={totalPage}
         onPageChange={movePage}
-        siblingCount={windowSize > DeviceSize.mobile ? 2 : 1}
+        siblingCount={breakpoint !== DEVICE_TYPE.MOBILE ? 2 : 1}
       />
     </ActivityListWrapper>
   );

diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardInfoTitle from "./DashboardInfoTitle";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardInfoTitle Component", () => {
   it("DashboardInfoTitle render", () => {
@@ -10,6 +11,7 @@ describe("DashboardInfoTitle Component", () => {
         gnosAmount: "$0.7425",
         gnotAmount: "$1.8852",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(

diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardInfoTitle from "./DashboardInfoTitle";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardInfoTitle",
@@ -20,6 +21,7 @@ Default.args = {
     gnosAmount: "$0.7425",
     gnotAmount: "$1.8852",
   },
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`

diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
@@ -7,16 +7,16 @@ import {
 } from "./DashboardInfoTitle.styles";
 import IconLogoWhite from "../../common/icons/IconLogoWhite";
 import { DashboardTokenInfo } from "@containers/dashboard-info-container/DashboardInfoContainer";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface DashboardInfoTitleProps {
   dashboardTokenInfo: DashboardTokenInfo;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const DashboardInfoTitle: React.FC<DashboardInfoTitleProps> = ({
   dashboardTokenInfo,
-  windowSize,
+  breakpoint,
 }) => (
   <DashboardInfoTitleWrapper>
     <TokenWrapper>
@@ -28,7 +28,7 @@ const DashboardInfoTitle: React.FC<DashboardInfoTitleProps> = ({
       </GnosLogoWrapper>
       <div>{dashboardTokenInfo.gnosAmount}</div>
     </TokenWrapper>
-    {windowSize > DeviceSize.mobile && <TitleDivider />}
+    {breakpoint !== DEVICE_TYPE.MOBILE && <TitleDivider />}
     <TokenWrapper>
       <GnotLogoWrapper>
         <div className="gnot-image-wrapper">

diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardInfo from "./DashboardInfo";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardInfo Component", () => {
   it("DashboardInfo render", () => {
@@ -25,6 +26,7 @@ describe("DashboardInfo Component", () => {
         activeProposals: "2",
         communityPool: "2,412,148 GNOS",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(

diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardInfo from "./DashboardInfo";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardInfo",
@@ -35,6 +36,7 @@ Default.args = {
     activeProposals: "2",
     communityPool: "2,412,148 GNOS",
   },
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`

diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts
@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
-import { media } from "@styles/media";
+import { ContainerWidth, media } from "@styles/media";
 
 import mixins from "@styles/mixins";
 
 export const DashboardInfoWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
-  max-width: 1360px;
+  max-width: ${ContainerWidth.WEB_CONTAINER};
   width: 100%;
   padding: 24px;
   gap: 24px;
@@ -14,10 +14,10 @@ export const DashboardInfoWrapper = styled.div`
   border-radius: 10px;
   box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
   ${media.tablet} {
-    max-width: 1100px;
+    max-width: ${ContainerWidth.TABLET_CONTAINER};
   }
   ${media.mobile} {
-    max-width: 328px;
+    max-width: ${ContainerWidth.MOBILE_CONTAINER};
     padding: 0px;
     gap: 0px;
   }

diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx
@@ -6,29 +6,30 @@ import {
   GovernenceOverviewInfo,
   SupplyOverviewInfo,
 } from "@containers/dashboard-info-container/DashboardInfoContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface DashboardInfoProps {
   dashboardTokenInfo: DashboardTokenInfo;
   supplyOverviewInfo: SupplyOverviewInfo;
   governenceOverviewInfo: GovernenceOverviewInfo;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const DashboardInfo: React.FC<DashboardInfoProps> = ({
   dashboardTokenInfo,
   supplyOverviewInfo,
   governenceOverviewInfo,
-  windowSize,
+  breakpoint,
 }) => (
   <DashboardInfoWrapper>
     <DashboardInfoTitle
       dashboardTokenInfo={dashboardTokenInfo}
-      windowSize={windowSize}
+      breakpoint={breakpoint}
     />
     <DashboardOverview
       supplyOverviewInfo={supplyOverviewInfo}
       governenceOverviewInfo={governenceOverviewInfo}
-      windowSize={windowSize}
+      breakpoint={breakpoint}
     />
   </DashboardInfoWrapper>
 );

diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardOverview from "./DashboardOverview";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardOverview Component", () => {
   it("DashboardOverview render", () => {
@@ -21,6 +22,7 @@ describe("DashboardOverview Component", () => {
         activeProposals: "2",
         communityPool: "2,412,148 GNOS",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(

diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardOverview from "./DashboardOverview";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardOverview",
@@ -16,6 +17,7 @@ const Template: ComponentStory<typeof DashboardOverview> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
+  breakpoint: DEVICE_TYPE.WEB,
   supplyOverviewInfo: {
     totalSupply: "1,000,000,000 GNOS",
     circulatingSupply: "218,184,885 GNOS",