chore(suite): update NotificationDropdown

Author: seibei-iguchi

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NotificationDropdown.tsx

@@ -2,8 +2,8 @@ import { useRef, useCallback } from 'react';
 
 import styled, { css } from 'styled-components';
 
-import { breakpointMediaQueries } from '@trezor/styles';
-import { DropdownRef, Dropdown } from '@trezor/components';
+import { DropdownRef, Dropdown, Box, useMediaQuery, variables } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 import { analytics, EventType } from '@trezor/suite-analytics';
 import { notificationsActions } from '@suite-common/toast-notifications';
 
@@ -12,15 +12,6 @@ import { useDispatch } from 'src/hooks/suite';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 
-const NotificationsWrapper = styled.div`
-    width: 450px;
-    cursor: default;
-
-    ${breakpointMediaQueries.below_lg} {
-        width: 330px;
-    }
-`;
-
 const StyledNavigationItem = styled(NavigationItem)`
     ${({ theme, isActive }) =>
         isActive &&
@@ -31,8 +22,8 @@ const StyledNavigationItem = styled(NavigationItem)`
 `;
 
 export const NotificationDropdown = (props: NavigationItemProps) => {
+    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
     const dropdownRef = useRef<DropdownRef>();
-
     const dispatch = useDispatch();
 
     const handleToggleChange = useCallback(
@@ -59,9 +50,9 @@ export const NotificationDropdown = (props: NavigationItemProps) => {
             alignMenu="right-top"
             offsetY={-12}
             content={
-                <NotificationsWrapper>
+                <Box width={isBelowLaptop ? 330 : 450} margin={spacings.xs}>
                     <Notifications onCancel={() => dropdownRef.current!.close()} />
-                </NotificationsWrapper>
+                </Box>
             }
         >
             {isToggled => <StyledNavigationItem {...props} isActive={isToggled} />}

packages/suite/src/components/suite/notifications/Notifications/NotificationGroup/NotificationGroup.tsx

@@ -20,7 +20,7 @@ export const NotificationGroup = (props: NotificationGroupProps) => {
 
     if (unseenCount === 0 && seenCount === 0) {
         return (
-            <Column gap={spacings.xs}>
+            <Column gap={spacings.xxs}>
                 <H4>
                     <Translation id="NOTIFICATIONS_EMPTY_TITLE" />
                 </H4>
@@ -34,7 +34,7 @@ export const NotificationGroup = (props: NotificationGroupProps) => {
     return (
         <Column gap={spacings.xl}>
             {unseenCount > 0 && (
-                <Column gap={spacings.md}>
+                <Column gap={spacings.sm}>
                     <H4>
                         <Translation
                             id="NOTIFICATIONS_UNSEEN_TITLE"
@@ -46,7 +46,7 @@ export const NotificationGroup = (props: NotificationGroupProps) => {
             )}
 
             {seenCount > 0 && (
-                <Column gap={spacings.md}>
+                <Column gap={spacings.sm}>
                     <H4>
                         <Translation id="NOTIFICATIONS_SEEN_TITLE" />
                     </H4>