Merge branch 'main' of github.com:EscolaLMS/components into feature/S…

…PRAW-64 # Conflicts: # src/components/atoms/Icon/_components/IconsDictionary.tsx
EscolaLMS · Feb 28, 2024 · 3d9920c · 3d9920c
2 parents 8a90983 + 32e333b
commit 3d9920c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@escolalms/components",
-  "version": "0.0.118",
+  "version": "0.0.119",
   "main": "lib/index.js",
   "license": "MIT",
   "scripts": {

diff --git 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"
@@ -216,4 +228,5 @@ export const ICONS_DICTIONARY = {
   current: Current,
   available: Available,
   lockTime: LockTime,
+  close: Close,
 } as const;
diff --git 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,68 +31,50 @@ 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;
     min-width: 60px;
     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>
   );
 };