From dc143b4c103c0b0f82d664a8422e800d28fa48b0 Mon Sep 17 00:00:00 2001
From: Przemek Wiktorski <przemyslaw.wiktorskii@gmail.com>
Date: Wed, 28 Feb 2024 10:52:37 +0100
Subject: [PATCH] notifications (#323)

* notifications

* notifications

---------

Co-authored-by: Przemek <przemek.wiktorski@escola.pl>
---
 .../Icon/_components/IconsDictionary.tsx      |  13 ++
 .../molecules/Notification/Notification.tsx   | 112 +++++++-----------
 2 files changed, 59 insertions(+), 66 deletions(-)

diff --git a/src/components/atoms/Icon/_components/IconsDictionary.tsx b/src/components/atoms/Icon/_components/IconsDictionary.tsx
index 9a2dda9a..7392aecc 100644
--- a/src/components/atoms/Icon/_components/IconsDictionary.tsx
+++ b/src/components/atoms/Icon/_components/IconsDictionary.tsx
@@ -15,6 +15,18 @@ const Chevron: React.FC = () => (
   </svg>
 );
 
+const Close = () => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0.699143 0.462083C1.08967 0.0715584 1.72283 0.0715584 2.11336 0.462083L7.40625 5.75498L12.6991 0.462083C13.0897 0.0715584 13.7228 0.0715584 14.1134 0.462083C14.5039 0.852607 14.5039 1.48577 14.1134 1.8763L8.82046 7.16919L14.1134 12.4621C14.5039 12.8526 14.5039 13.4858 14.1134 13.8763C13.7228 14.2668 13.0897 14.2668 12.6991 13.8763L7.40625 8.5834L2.11336 13.8763C1.72283 14.2668 1.08967 14.2668 0.699143 13.8763C0.308619 13.4858 0.308619 12.8526 0.699143 12.4621L5.99204 7.16919L0.699143 1.8763C0.308619 1.48577 0.308619 0.852607 0.699143 0.462083Z" />
+  </svg>
+);
+
 const Hamburger: React.FC = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -155,4 +167,5 @@ export const ICONS_DICTIONARY = {
   copy: Copy,
   note: Note,
   hamburger: Hamburger,
+  close: Close,
 } as const;
diff --git a/src/components/molecules/Notification/Notification.tsx b/src/components/molecules/Notification/Notification.tsx
index 391c4546..2125c21d 100644
--- a/src/components/molecules/Notification/Notification.tsx
+++ b/src/components/molecules/Notification/Notification.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import styled, { withTheme, css } from "styled-components";
+import styled, { withTheme } from "styled-components";
 import format from "date-fns/format";
 import isToday from "date-fns/isToday";
-import { Title, Text } from "../../../";
+import { Icon, Text } from "../../../";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
 import { ExtendableStyledComponent } from "types/component";
 
@@ -21,7 +21,7 @@ export interface NotificationProps {
   dateTime: Date;
 }
 
-const StyledNotification = styled.section<{
+const StyledNotification = styled.div<{
   unread: boolean;
   modularView: boolean;
 }>`
@@ -31,61 +31,38 @@ const StyledNotification = styled.section<{
     getStylesBasedOnTheme(
       theme.mode,
       theme.dm__cardBackgroundColor,
-      theme.cardBackgroundColor
+      theme.white
     )};
   display: flex;
-  width: 100%;
+  flex-direction: column;
   align-items: flex-start;
   border-radius: ${({ theme }) => theme.cardRadius}px;
-  padding: ${({ modularView }) => (modularView ? "0" : "23px 68px 24px 17px")};
-  justify-content: ${(props) =>
-    props.modularView ? "space-between" : "flex-start"};
-  ${(props) =>
-    props.unread &&
-    css`
-      &:before {
-        content: "";
-        display: block;
-        width: 11px;
-        height: 11px;
-        margin-top: 3px;
-        line-height: 19px;
-        border-radius: 100%;
-        background-color: ${({ theme }) =>
-          getStylesBasedOnTheme(
-            theme.mode,
-            theme.dm__primaryColor,
-            theme.primaryColor,
-            theme.primaryColor
-          )};
-        margin-right: 12px;
-      }
-    `}
-  ${(props) =>
-    props.modularView &&
-    props.unread &&
-    css`
-      &:before {
-        content: "";
-        display: block;
-        width: 11px;
-        height: 11px;
-        line-height: 19px;
-        border-radius: 100%;
-        position: absolute;
-        background-color: ${({ theme }) =>
-          getStylesBasedOnTheme(
-            theme.mode,
-            theme.dm__primaryColor,
-            theme.primaryColor,
-            theme.primaryColor
-          )};
-        top: 4px;
-        margin-top: 0;
-        left: -23px;
+  padding: 7px 12px;
+  justify-content: flex-start;
+  p {
+    margin: 0;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 5px;
+    button {
+      all: unset;
+      cursor: pointer;
+      svg {
+        width: 10px;
+        height: 10px;
+
+        path {
+          fill: ${({ theme }) => theme.textColor};
+        }
       }
-    `}
-    
+    }
+    p {
+      margin: 0;
+    }
+  }
   .date {
     display: inline-block;
     opacity: 0.8;
@@ -93,6 +70,11 @@ const StyledNotification = styled.section<{
     text-align: left;
     margin-left: ${({ modularView }) => (modularView ? "38px" : "auto")};
   }
+  .content {
+    * {
+      word-break: break-word;
+    }
+  }
 `;
 
 export const Notification: React.FC<ComponentProps> = ({
@@ -109,27 +91,25 @@ export const Notification: React.FC<ComponentProps> = ({
       className={`wellms-component ${className}`}
       unread={unread}
       modularView={modularView}
-      onClick={onClick}
     >
-      <div>
-        <Title
-          style={{
-            marginBottom: "6px",
-          }}
-          level={5}
-          as="h1"
-        >
+      <div className="header">
+        <Text size={"12"} className={"date"}>
+          {format(dateTime, isToday(dateTime) ? "hh:mm" : "dd.MM.yyyy")}
+        </Text>
+        <button onClick={onClick} title={"notification-read"}>
+          <Icon name="close" />
+        </button>
+      </div>
+      <div className="content">
+        <Text size="13" bold={unread}>
           {title}
-        </Title>
+        </Text>
         <Text size={"14"} noMargin>
           {maxLengthDesc && description.length > maxLengthDesc
             ? `${description.substring(0, maxLengthDesc)}...`
             : description}
         </Text>
       </div>
-      <Text size={"12"} className={"date"}>
-        {format(dateTime, isToday(dateTime) ? "hh:mm" : "dd.MM.yyyy")}
-      </Text>
     </StyledNotification>
   );
 };