faet: Modal component Responsive Web Develop

gnoswap-labs · Aug 24, 2023 · aea85b8 · aea85b8
1 parent 910c832
commit aea85b8
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 89 deletions.
diff --git a/packages/web/src/components/common/header/Header.spec.tsx b/packages/web/src/components/common/header/Header.spec.tsx
@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import { RecentdummyToken } from "@containers/header-container/HeaderContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("Header Component", () => {
   it("should render", () => {
@@ -18,6 +19,7 @@ describe("Header Component", () => {
       error: null,
       search: () => null,
       keyword: "",
+      breakpoint: DEVICE_TYPE.WEB,
     };
     render(
       <JotaiProvider>

diff --git a/packages/web/src/components/common/header/Header.stories.tsx b/packages/web/src/components/common/header/Header.stories.tsx
@@ -5,6 +5,7 @@ import { action } from "@storybook/addon-actions";
 
 import Header from "./Header";
 import { RecentdummyToken } from "@containers/header-container/HeaderContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "common/Header",
@@ -30,6 +31,7 @@ Default.args = {
   error: null,
   search: action("search"),
   keyword: "",
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`

diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -19,7 +19,7 @@ import NotificationButton from "@components/common/notification-button/Notificat
 import { HEADER_NAV } from "@constants/header.constant";
 import WalletConnectorButton from "@components/common/wallet-connector-button/WalletConnectorButton";
 import { Token } from "@containers/header-container/HeaderContainer";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 import SubMenuButton from "../sub-menu-button/SubMenuButton";
 import SearchMenuModal from "../search-menu-modal/SearchMenuModal";
 
@@ -35,7 +35,7 @@ interface HeaderProps {
   error: Error | null;
   search: (e: React.ChangeEvent<HTMLInputElement>) => void;
   keyword: string;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -49,7 +49,7 @@ const Header: React.FC<HeaderProps> = ({
   isFetched,
   search,
   keyword,
-  windowSize,
+  breakpoint,
 }) => {
   return (
     <>
@@ -62,7 +62,7 @@ const Header: React.FC<HeaderProps> = ({
               </LogoLink>
             </Link>
             <Navigation>
-              {windowSize > DeviceSize.mobile && (
+              {breakpoint !== DEVICE_TYPE.MOBILE && (
                 <>
                   <ul>
                     {HEADER_NAV.map(item => (
@@ -89,10 +89,10 @@ const Header: React.FC<HeaderProps> = ({
               </SearchButton>
               <WalletConnectorButton isConnected={isConnected} />
             </SearchContainer>
-            <NotificationButton />
+            <NotificationButton breakpoint={breakpoint} />
           </RightSection>
         </HeaderContainer>
-        {windowSize <= DeviceSize.mobile && (
+        {breakpoint === DEVICE_TYPE.MOBILE && (
           <BottomNavWrapper>
             <BottomNavContainer>
               {HEADER_NAV.map(item => (

diff --git a/packages/web/src/components/common/notification-button/NotificationButton.spec.tsx b/packages/web/src/components/common/notification-button/NotificationButton.spec.tsx
@@ -2,13 +2,18 @@ import NotificationButton from "./NotificationButton";
 import { render } from "@testing-library/react";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import { Provider as JotaiProvider } from "jotai";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("NotificationButton Component", () => {
   it("Notification button", () => {
+    const mockProps = {
+      breakpoint: DEVICE_TYPE.WEB,
+    };
+
     render(
       <JotaiProvider>
         <GnoswapThemeProvider>
-          <NotificationButton />
+          <NotificationButton {...mockProps} />
         </GnoswapThemeProvider>
       </JotaiProvider>,
     );

diff --git a/packages/web/src/components/common/notification-button/NotificationButton.stories.tsx b/packages/web/src/components/common/notification-button/NotificationButton.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import NotificationButton from "./NotificationButton";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "common/NotificationButton",
@@ -22,9 +23,11 @@ export default {
   ],
 } as ComponentMeta<typeof NotificationButton>;
 
-const Template: ComponentStory<typeof NotificationButton> = () => (
-  <NotificationButton />
+const Template: ComponentStory<typeof NotificationButton> = args => (
+  <NotificationButton {...args} />
 );
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  breakpoint: DEVICE_TYPE.WEB,
+};
diff --git a/packages/web/src/components/common/notification-button/NotificationButton.tsx b/packages/web/src/components/common/notification-button/NotificationButton.tsx
@@ -9,13 +9,14 @@ import NotificationList from "@components/common/notification-list/NotificationL
 import { AlertButton, NotificationWrapper } from "./NotificationButton.styles";
 import { useAtom } from "jotai";
 import { CommonState } from "@states/index";
+import { DEVICE_TYPE } from "@styles/media";
 
 export interface TransactionGroupsType {
   title: string;
   txs: Array<TransactionModel>;
 }
 
-const NotificationButton = () => {
+const NotificationButton = ({ breakpoint }: { breakpoint: DEVICE_TYPE }) => {
   const [toggle, setToggle] = useAtom(CommonState.headerToggle);
 
   const onListToggle = () => {
@@ -42,6 +43,7 @@ const NotificationButton = () => {
         <NotificationList
           txsGroupsInformation={txsGroupsInformation}
           onListToggle={onListToggle}
+          breakpoint={breakpoint}
         />
       )}
     </NotificationWrapper>

diff --git a/packages/web/src/components/common/notification-list/NotificationList.styles.ts b/packages/web/src/components/common/notification-list/NotificationList.styles.ts
@@ -2,6 +2,7 @@ import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
 import { media } from "@styles/media";
 import mixins from "@styles/mixins";
+import { Z_INDEX } from "@styles/zIndex";
 
 export interface NotificationProps {
   width?: number;
@@ -10,30 +11,56 @@ export interface NotificationProps {
 export const NotificationListWrapper = styled.div<NotificationProps>`
   position: absolute;
   top: 53px;
+  width: 320px;
+  max-height: 442px;
+  overflow-y: auto;
+  padding: 20px 0px;
+  background-color: ${({ theme }) => theme.color.background06};
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
   right: ${({ width }) => {
     return width && width > 1680 ? "-150px" : "0px";
   }};
+  left: ${({ width }) => {
+    return width && width < 768 && "0px";
+  }};
   ${media.tablet} {
     top: 46px;
     right: 0px;
   }
   ${media.mobile} {
-    top: 42px;
+    ${mixins.flexbox("column", "center", "flex-start")};
+    position: fixed;
+    width: 100%;
+    height: 426px;
+    top: calc(100vh - 426px);
+    z-index: ${Z_INDEX.modal};
+    padding: 24px 0px;
+    min-width: 360px;
+  }
+  .list-container {
+    ${media.mobile} {
+      ${mixins.flexbox("column", "center", "flex-start")};
+      width: 90%;
+    }
+    .list-content {
+      ${media.mobile} {
+        ${mixins.flexbox("column", "flex-start", "flex-start")};
+        width: 100%;
+      }
+    }
   }
-  width: 320px;
-  max-height: 442px;
-  overflow-y: auto;
-  padding: 20px 0px;
-  background-color: ${({ theme }) => theme.color.background06};
-  border: 1px solid ${({ theme }) => theme.color.border02};
-  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
 `;
 
 export const NotificationHeader = styled.div`
   ${mixins.flexbox("row", "center", "space-between")};
   width: 100%;
   padding: 0px 24px 16px;
+  ${media.mobile} {
+    width: 90%;
+    padding: 0px 0px 16px 0px;
+  }
   .notification-title {
     ${fonts.body9};
     color: ${({ theme }) => theme.color.text02};
@@ -46,13 +73,14 @@ export const ClearButton = styled.button`
 `;
 
 export const TxsListItem = styled.div`
+  width: 100%;
   & + & {
     :before {
       content: "";
       display: block;
       width: 100%;
       height: 1px;
-      background-color: ${({ theme }) => theme.color.background02};
+      background-color: ${({ theme }) => theme.color.background05};
       margin: 4px 0px;
     }
   }
@@ -65,18 +93,21 @@ export const TxsDateAgoTitle = styled.span`
   width: 100%;
   height: 34px;
   padding: 0px 24px;
+  ${media.mobile} {
+    padding: 0px;
+  }
 `;
 
 export const TxsSummaryItem = styled.div`
   ${mixins.flexbox("row", "center", "space-between")};
-  ${fonts.body12};
-  color: ${({ theme }) => theme.color.text02};
   position: relative;
   width: 100%;
   min-height: 40px;
   padding: 8px 24px;
   height: auto;
   cursor: pointer;
+  ${fonts.body12};
+  color: ${({ theme }) => theme.color.text02};
   &:hover {
     background-color: ${({ theme }) => theme.color.hover02};
   }
@@ -118,3 +149,42 @@ export const NoDataText = styled.span`
   width: 100%;
   height: 34px;
 `;
+
+export const TransactionItemsWrap = styled.div`
+  ${mixins.flexbox("row", "center", "space-between")};
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.hover02};
+  }
+  .list {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    padding: 8px 0px;
+    .coin-info {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      gap: 20px;
+      ${fonts.body12};
+      color: ${({ theme }) => theme.color.text02};
+    }
+  }
+  .success-icon * {
+    fill: ${({ theme }) => theme.color.point};
+  }
+  .failed-icon * {
+    fill: ${({ theme }) => theme.color.icon03};
+  }
+  .pending-icon * {
+    fill: ${({ theme }) => theme.color.icon06};
+  }
+`;
+
+export const LogoWrap = styled.div`
+  ${mixins.flexbox("row", "center", "center")};
+  border-radius: 50%;
+  img {
+    border-radius: 50%;
+  }
+  .right-logo {
+    margin-left: -12px;
+  }
+`;
diff --git a/packages/web/src/components/common/notification-list/NotificationList.tsx b/packages/web/src/components/common/notification-list/NotificationList.tsx
@@ -7,15 +7,18 @@ import {
 } from "./NotificationList.styles";
 import TransactionItems from "./TransactionItems";
 import { TransactionGroupsType } from "@components/common/notification-button/NotificationButton";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface NotificationListProps {
   txsGroupsInformation: TransactionGroupsType[];
   onListToggle: () => void;
+  breakpoint: DEVICE_TYPE;
 }
 
 const NotificationList: React.FC<NotificationListProps> = ({
   txsGroupsInformation,
   onListToggle,
+  breakpoint,
 }) => {
   const listRef = useRef<HTMLDivElement | null>(null);
 
@@ -43,11 +46,17 @@ const NotificationList: React.FC<NotificationListProps> = ({
         )}
       </NotificationHeader>
       {txsGroupsInformation && txsGroupsInformation.length > 0 ? (
-        <>
-          {txsGroupsInformation.map(groups => (
-            <TransactionItems key={groups.title} groups={groups} />
-          ))}
-        </>
+        <div className="list-container">
+          <div className="list-content">
+            {txsGroupsInformation.map(groups => (
+              <TransactionItems
+                key={groups.title}
+                groups={groups}
+                breakpoint={breakpoint}
+              />
+            ))}
+          </div>
+        </div>
       ) : (
         <>
           <NoDataText>No notifications found</NoDataText>