🎨 moved out styling to own component

equinor · Feb 2, 2024 · 16f3739 · 16f3739
1 parent 77f7dfa
commit 16f3739
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 73 deletions.
diff --git a/...nents/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationTemplate.style.ts b/...nents/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationTemplate.style.ts
@@ -0,0 +1,74 @@
+import { Button } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+
+import styled from 'styled-components';
+
+const { spacings, colors } = tokens;
+
+export const Wrapper = styled.div`
+  padding: ${spacings.comfortable.medium};
+  border-bottom: 1px solid ${colors.ui.background__medium.hex};
+  &:hover {
+    background: #f2f2f2;
+  }
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  grid-column: span 3;
+  padding: ${spacings.comfortable.small};
+  cursor: pointer;
+`;
+
+export const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  grid-gap: ${spacings.comfortable.medium_small};
+  align-items: center;
+`;
+
+export const Dot = styled.span`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: ${colors.infographic.substitute__blue_overcast.hex};
+  position: relative;
+`;
+
+export const TopContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: ${spacings.comfortable.medium_small};
+  justify-items: end;
+  grid-column: span 3;
+`;
+
+interface UserInformationProps {
+  $systemUser?: boolean;
+}
+
+export const UserInformation = styled.div<UserInformationProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: ${({ $systemUser }) => ($systemUser ? 'flex-start' : 'center')};
+  gap: ${spacings.comfortable.small};
+`;
+
+export const FooterContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${spacings.comfortable.medium_small};
+  grid-column: span 3;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 0 ${spacings.comfortable.small};
+`;
+export const DeleteButton = styled(Button)`
+  display: none;
+  ${GridContainer}:hover & {
+    display: initial;
+  }
+`;
diff --git a/...components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationTemplate.tsx b/...components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationTemplate.tsx
@@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
 
-import { Button, Icon, Typography } from '@equinor/eds-core-react';
+import { Icon, Typography } from '@equinor/eds-core-react';
 import { delete_to_trash } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 
@@ -26,80 +26,19 @@ import {
 import OptionalTooltip from 'src/components/DataDisplay/OptionalTooltip';
 import ApplicationIcon from 'src/components/Icons/ApplicationIcon/ApplicationIcon';
 import { ProfileAvatar } from 'src/components/index';
+import {
+  Content,
+  DeleteButton,
+  Dot,
+  FooterContainer,
+  GridContainer,
+  TopContainer,
+  UserInformation,
+  Wrapper,
+} from 'src/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationTemplate.style';
 import { date } from 'src/utils';
 
-import styled from 'styled-components';
-
-const { spacings, colors } = tokens;
-
-const Wrapper = styled.div`
-  padding: ${spacings.comfortable.medium};
-  border-bottom: 1px solid ${colors.ui.background__medium.hex};
-  &:hover {
-    background: #f2f2f2;
-  }
-`;
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  grid-column: span 3;
-  padding: ${spacings.comfortable.small};
-  cursor: pointer;
-`;
-
-const GridContainer = styled.div`
-  display: grid;
-  grid-template-columns: 10px 1fr;
-  grid-gap: ${spacings.comfortable.medium_small};
-  align-items: center;
-`;
-
-const Dot = styled.span`
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: ${colors.infographic.substitute__blue_overcast.hex};
-  position: relative;
-`;
-
-const TopContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  gap: ${spacings.comfortable.medium_small};
-  justify-items: end;
-  grid-column: span 3;
-`;
-
-interface UserInformationProps {
-  $systemUser?: boolean;
-}
-
-const UserInformation = styled.div<UserInformationProps>`
-  display: flex;
-  flex-direction: row;
-  align-items: ${({ $systemUser }) => ($systemUser ? 'flex-start' : 'center')};
-  gap: ${spacings.comfortable.small};
-`;
-
-const FooterContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${spacings.comfortable.medium_small};
-  grid-column: span 3;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  padding: 0 ${spacings.comfortable.small};
-`;
-const DeleteButton = styled(Button)`
-  display: none;
-  ${GridContainer}:hover & {
-    display: initial;
-  }
-`;
-
+const { colors } = tokens;
 const NotificationTemplate: FC<
   | ReadyToReportNotificationTypes
   | DefaultNotificationTypes