feat: update notifications style (#210)

decentraland · Jan 1, 2025 · bbfaf4c · bbfaf4c
1 parent 00630ee
commit bbfaf4c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/src/components/Modal/Modal.styled.ts b/src/components/Modal/Modal.styled.ts
@@ -27,7 +27,7 @@ const ModalContainer = styled(PaperMui)<StyledModalProps>((props) => {
     width,
     borderRadius: "12px",
     overflow: "hidden",
-    [theme!.breakpoints.down("xs")]: {
+    [theme.breakpoints.down("xs")]: {
       minWidth: "100vw",
       maxWidth: "100vw",
       minHeight: "100vh",

diff --git a/src/components/Navbar/SubMenu/SubMenu.styled.ts b/src/components/Navbar/SubMenu/SubMenu.styled.ts
@@ -37,7 +37,7 @@ const MenuItemContainer = styled(Box)<MenuItemContainerProps>((props) => {
     backgroundSize: "100% 100%",
     backgroundPosition: "0px 0px, 0px 0px",
     position: "fixed",
-    zIndex: 0,
+    zIndex: 1099,
     left: 0,
     paddingLeft: "370px",
     paddingRight: "48px",

diff --git a/src/components/Notifications/NotificationsFeed.styled.ts b/src/components/Notifications/NotificationsFeed.styled.ts
@@ -52,12 +52,24 @@ const LoadingContainer = styled("div")({
   alignItems: "center",
 })
 
-const NotificationFeedModal = styled(Modal)({
-  alignItems: "flex-end",
-  "& .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded": {
-    borderTopLeftRadius: "16px",
-    borderTopRightRadius: "16px",
-  },
+const NotificationFeedModal = styled(Modal)(({ theme }) => {
+  return {
+    alignItems: "flex-end",
+    "& .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded": {
+      borderTopLeftRadius: "8px",
+      borderTopRightRadius: "8px",
+      [theme.breakpoints.down("xs")]: {
+        minHeight: "calc(100vh - 70px)",
+        height: "calc(100vh - 70px)",
+      },
+      "& > *:nth-of-type(1)": {
+        padding: "24px 24px 0",
+      },
+      "& > *:nth-of-type(2)": {
+        padding: "0px",
+      },
+    },
+  }
 })
 
 const NotificationFeedModalContainer = styled(Box)({
@@ -67,7 +79,6 @@ const NotificationFeedModalContainer = styled(Box)({
 
 const NotificationFeedContainer = styled(Menu)({
   width: "484px",
-  height: "500px",
   pointerEvents: "visible",
   "& .MuiPaper-root": {
     borderRadius: "8px",

diff --git a/src/components/Notifications/NotificationsFeedTabs.styled.ts b/src/components/Notifications/NotificationsFeedTabs.styled.ts
@@ -6,7 +6,7 @@ const NotificationFeedTabsContainer = styled(Box)((props) => {
   const { theme } = props
   return {
     width: "384px",
-    [theme!.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("sm")]: {
       width: "100%",
     },
   }
@@ -40,8 +40,8 @@ const NotificationFeedTabsListContainer = styled(
     overflowX: "hidden",
     overflowY: "default",
     overscrollBehaviorY: "default",
-    width: "90vw",
-    height: "70vh",
+    width: "100vw",
+    height: "calc(100vh - 250px)",
   },
   (props) =>
     !props.isModal