feat: Modal component Responsive Web Develop

gnoswap-labs · Aug 23, 2023 · c253b6b · c253b6b
1 parent ca089b4
commit c253b6b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/web/src/components/common/notification-list/NotificationList.styles.ts b/packages/web/src/components/common/notification-list/NotificationList.styles.ts
@@ -3,10 +3,16 @@ import styled from "@emotion/styled";
 import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
-export const NotificationListWrapper = styled.div`
+export interface NotificationProps {
+  width?: number;
+}
+
+export const NotificationListWrapper = styled.div<NotificationProps>`
   position: absolute;
   top: 53px;
-  right: -150px;
+  right: ${({ width }) => {
+    return width && width > 1680 ? "-150px" : "0px";
+  }};
   ${media.tablet} {
     top: 46px;
     right: 0px;

diff --git a/packages/web/src/components/common/notification-list/NotificationList.tsx b/packages/web/src/components/common/notification-list/NotificationList.tsx
@@ -35,7 +35,7 @@ const NotificationList: React.FC<NotificationListProps> = ({
   }, [listRef, onListToggle]);
 
   return (
-    <NotificationListWrapper ref={listRef}>
+    <NotificationListWrapper ref={listRef} width={window?.innerWidth}>
       <NotificationHeader>
         <span className="notification-title">Notification</span>
         {txsGroupsInformation.length > 0 && (

diff --git a/packages/web/src/components/common/wallet-connector-menu/WalletConnectorMenu.styles.ts b/packages/web/src/components/common/wallet-connector-menu/WalletConnectorMenu.styles.ts
@@ -4,10 +4,17 @@ import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 import { Z_INDEX } from "@styles/zIndex";
 
-export const WalletConnectorMenuWrapper = styled.div`
+export interface WalletMenuProps {
+  width?: number;
+}
+
+export const WalletConnectorMenuWrapper = styled.div<WalletMenuProps>`
   position: absolute;
   width: 280px;
   top: 54px;
+  right: ${({ width }) => {
+    return width && width < 1521 && "0px";
+  }};
   ${media.tablet} {
     top: 49px;
     right: 0px;

diff --git a/packages/web/src/components/common/wallet-connector-menu/WalletConnectorMenu.tsx b/packages/web/src/components/common/wallet-connector-menu/WalletConnectorMenu.tsx
@@ -84,7 +84,7 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
   }, [menuRef, onMenuToggle]);
 
   return (
-    <WalletConnectorMenuWrapper ref={menuRef}>
+    <WalletConnectorMenuWrapper ref={menuRef} width={window?.innerWidth}>
       {isConnected ? (
         <div className="button-container">
           <MenuHeader>