From 5f3f46790cb3d4760eff5f70aa0b3911d6ea79f6 Mon Sep 17 00:00:00 2001 From: Vins Date: Mon, 22 Jul 2024 10:04:00 +0200 Subject: [PATCH] Notifications + things --- .../DesignSystem/Button/classes.module.scss | 127 +++++++++++------- .../DesignSystem/Header/Navigation/index.tsx | 1 + .../NotificationModal/classes.module.scss | 4 + .../ToastElement/classes.module.scss | 21 ++- .../ToastsContainer/ToastElement/index.tsx | 17 ++- .../ToastsContainer/classes.module.scss | 1 + src/front/Stores/Toasts.tsx | 2 + 7 files changed, 116 insertions(+), 57 deletions(-) diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index 20b31af3..7e91bc16 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -26,17 +26,17 @@ */ &[variant="primary"] { - color: var(--color-primary-500); - background: var(--button-contained-primary-default-background, #005bcb); - border-color: var(--button-contained-primary-default-border); + color: var(--button-contained-primary-hovered-contrast); + border: 1px solid var(--button-contained-primary-default-border); + background: var(--button-contained-primary-default-background); svg { stroke: var(--button-contained-primary-default-contrast); } &:hover { - border-color: var(--button-contained-primary-hovered-border); - background: var(--button-contained-primary-hovered-background, #0040a4); + border: 1px solid var(--button-contained-primary-hovered-border); + background: var(--button-contained-primary-hovered-background); svg { stroke: var(--button-contained-primary-hovered-contrast); @@ -45,8 +45,9 @@ &:focus, &:active { - border-color: var(--button-contained-primary-pressed-border); - background: var(--button-contained-primary-pressed-background, #013391); + color: var(--button-contained-primary-default-contrast); + border: 1px solid var(--button-contained-primary-pressed-border); + background: var(--button-contained-primary-pressed-background); svg { stroke: var(--button-contained-primary-pressed-contrast); @@ -54,15 +55,17 @@ } &[styletype="outlined"] { - border-color: var(--button-outlined-primary-default-border); + color: var(--button-outlined-primary-default-contrast); + border: 1px solid var(--button-outlined-primary-default-border); + background: var(--button-outlined-primary-default-background); svg { stroke: var(--button-outlined-primary-default-contrast); } &:hover { - background-color: var(--color-primary-50); - border-color: var(--button-outlined-primary-hovered-border); + border: 1px solid var(--button-outlined-primary-hovered-border); + background: var(--button-outlined-primary-hovered-background); svg { stroke: var(--button-outlined-primary-hovered-contrast); @@ -71,9 +74,9 @@ &:focus, &:active { - background-color: var(--color-primary-100); - color: var(--color-primary-700); - border-color: var(--button-outlined-primary-pressed-border); + color: var(--button-outlined-primary-pressed-contrast); + border: 1px solid var(--button-outlined-primary-pressed-border); + background: var(--button-outlined-primary-pressed-background); svg { stroke: var(--button-outlined-primary-pressed-contrast); @@ -82,13 +85,17 @@ } &[styletype="text"] { + color: var(--button-text-primary-default-contrast); + border-bottom: 1px solid var(--button-text-primary-default-border); + background: var(--button-text-primary-default-background); + svg { stroke: var(--button-text-primary-default-contrast); } &:hover { - background-color: transparent; - border-color: var(--button-outlined-primary-hovered-border); + border-bottom: 1px solid var(--button-outlined-primary-hovered-border); + background: var(--button-outlined-primary-default-background); svg { stroke: var(--button-text-primary-hovered-contrast); @@ -97,9 +104,9 @@ &:focus, &:active { - background-color: transparent; color: var(--color-primary-800); - border-color: var(--color-primary-800); + background: var(--button-outlined-primary-default-background); + border-bottom: 1px solid var(--color-primary-800); svg { stroke: var(--button-text-primary-pressed-contrast); @@ -109,17 +116,18 @@ } &[variant="secondary"] { - color: var(--color-secondary-500); - background: var(--color-secondary-500); - border-color: var(--color-secondary-500); + color: var(--button-contained-secondary-default-contrast); + background: var(--button-contained-secondary-default-background); + border-color: var(--button-contained-secondary-default-border); svg { stroke: var(--button-contained-secondary-default-contrast); } &:hover { - background: var(--color-secondary-700); - border-color: var(--color-secondary-700); + color: var(--button-contained-secondary-hovered-contrast); + background: var(--button-contained-secondary-hovered-background); + border-color: var(--button-contained-secondary-hovered-border); svg { stroke: var(--button-contained-secondary-hovered-contrast); @@ -128,8 +136,9 @@ &:focus, &:active { - background: var(--color-secondary-800); - border-color: var(--color-secondary-800); + color: var(--button-contained-secondary-pressed-contrast); + background: var(--button-contained-secondary-pressed-background); + border-color: var(--button-contained-secondary-pressed-border); svg { stroke: var(--button-contained-secondary-pressed-contrast); @@ -137,12 +146,16 @@ } &[styletype="outlined"] { + color: var(--button-outlined-secondary-default-contrast); + border: 1px solid var(--button-outlined-secondary-default-border); + background: var(--button-outlined-secondary-default-background); + svg { stroke: var(--button-outlined-secondary-default-contrast); } - &:hover { - background-color: var(--color-secondary-50); + border: 1px solid var(--button-outlined-secondary-hovered-border); + background: var(--button-outlined-secondary-hovered-background); svg { stroke: var(--button-outlined-secondary-hovered-contrast); @@ -151,9 +164,9 @@ &:focus, &:active { - background-color: var(--color-secondary-100); - color: var(--color-secondary-700); - border-color: var(--color-secondary-700); + color: var(--button-outlined-secondary-pressed-contrast); + border: 1px solid var(--button-outlined-secondary-pressed-border); + background: var(--button-outlined-secondary-pressed-background); svg { stroke: var(--button-outlined-secondary-pressed-contrast); @@ -162,12 +175,16 @@ } &[styletype="text"] { + color: var(--button-text-secondary-default-contrast); + border-bottom: 1px solid var(--button-text-secondary-default-border); + background: var(--button-text-secondary-default-background); + svg { stroke: var(--button-text-secondary-default-contrast); } - &:hover { - background-color: transparent; + border-bottom: 1px solid var(--button-outlined-secondary-hovered-border); + background: var(--button-outlined-secondary-default-background); svg { stroke: var(--button-text-secondary-hovered-contrast); @@ -176,9 +193,9 @@ &:focus, &:active { - background-color: transparent; - color: var(--color-secondary-800); - border-color: var(--color-secondary-800); + color: var(--button-outlined-secondary-pressed-contrast); + border-bottom: 1px solid var(--button-outlined-secondary-pressed-border); + background: var(--button-outlined-secondary-pressed-background); svg { stroke: var(--button-text-secondary-pressed-contrast); @@ -188,17 +205,17 @@ } &[variant="neutral"] { - color: var(--color-neutral-500); - background: var(--color-neutral-500); - border-color: var(--color-neutral-500); + color: var(--button-contained-neutral-hovered-contrast); + border: 1px solid var(--button-contained-neutral-default-border); + background: var(--button-contained-neutral-default-background); svg { stroke: var(--button-contained-neutral-default-contrast); } &:hover { - background: var(--color-neutral-700); - border-color: var(--color-neutral-700); + border: 1px solid var(--button-contained-neutral-hovered-border); + background: var(--button-contained-neutral-hovered-background); svg { stroke: var(--button-contained-neutral-hovered-contrast); @@ -207,8 +224,9 @@ &:focus, &:active { - background: var(--color-neutral-800); - border-color: var(--color-neutral-800); + color: var(--button-contained-neutral-default-contrast); + border: 1px solid var(--button-contained-neutral-pressed-border); + background: var(--button-contained-neutral-pressed-background); svg { stroke: var(--button-contained-neutral-pressed-contrast); @@ -216,13 +234,16 @@ } &[styletype="outlined"] { + color: var(--button-outlined-neutral-default-contrast); + border: 1px solid var(--button-outlined-neutral-default-border); + background: var(--button-outlined-neutral-default-background); + svg { stroke: var(--button-outlined-neutral-default-contrast); } - &:hover { - background-color: var(--color-neutral-50); - + border: 1px solid var(--button-outlined-neutral-hovered-border); + background: var(--button-outlined-neutral-hovered-background); svg { stroke: var(--button-outlined-neutral-hovered-contrast); } @@ -230,9 +251,9 @@ &:focus, &:active { - background-color: var(--color-neutral-100); - color: var(--color-neutral-700); - border-color: var(--color-neutral-700); + color: var(--button-outlined-neutral-pressed-contrast); + border: 1px solid var(--button-outlined-neutral-pressed-border); + background: var(--button-outlined-neutral-pressed-background); svg { stroke: var(--button-outlined-neutral-pressed-contrast); @@ -241,12 +262,16 @@ } &[styletype="text"] { + color: var(--button-text-neutral-default-contrast); + border-bottom: 1px solid var(--button-text-neutral-default-border); + background: var(--button-text-neutral-default-background); svg { stroke: var(--button-text-neutral-default-contrast); } &:hover { - background-color: transparent; + border-bottom: 1px solid var(--button-outlined-neutral-hovered-border); + background: var(--button-outlined-neutral-default-background); svg { stroke: var(--button-text-neutral-hovered-contrast); @@ -255,9 +280,9 @@ &:focus, &:active { - background-color: transparent; - color: var(--color-neutral-800); - border-color: var(--color-neutral-800); + color: var(--color-primary-800); + background: var(--button-outlined-neutral-default-background); + border-bottom: 1px solid var(--color-primary-800); svg { stroke: var(--button-text-neutral-pressed-contrast); diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx index e5cd1b3e..e98b6a9e 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx +++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx @@ -52,6 +52,7 @@ export default function Navigation() { title: notification.notification.message, uid: notification.uid, redirectUrl: notification.notification.redirection_url, + created_at: notification.notification.created_at, }); }); }, []); diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss index f2c81a9c..4f2ba6cb 100644 --- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss @@ -45,6 +45,10 @@ margin-top: 24px; overflow: hidden; overflow-y: auto; + cursor: pointer; + &hover { + background: var(--notification-unread-hovered, #ffe4d4); + } .missing-notification { padding: var(--spacing-3); diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss index f9a0c403..3247b988 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss @@ -25,10 +25,13 @@ .root { pointer-events: all; position: relative; - padding: 24px; - background: var(--color-warning-500-soft); + padding: var(--spacing-2); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); - border-radius: 5px; + border-radius: 8px; + background: var(--notification-unread-default, #fff3ed); + &:hover { + background: var(--notification-unread-hovered, #ffe4d4); + } animation-name: slide-left; animation-duration: 300ms; @@ -88,6 +91,18 @@ } } + .notif-unread { + display: flex; + align-items: center; + gap: 8px; + .notif-unread-dot { + width: 12px; + height: 12px; + background-color: var(--notification-text-contrast, #ff4617); + border-radius: 100px; + } + } + .text-container { font-family: var(--font-text-family); font-style: normal; diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx index 74ce2d59..896f0894 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx @@ -8,8 +8,8 @@ import React from "react"; import classes from "./classes.module.scss"; import Toasts, { IToast } from "@Front/Stores/Toasts"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; -import CheckIcon from "@Assets/Icons/check.svg"; -import Image from "next/image"; +// import CheckIcon from "@Assets/Icons/check.svg"; +// import Image from "next/image"; import { NextRouter, useRouter } from "next/router"; type IProps = { @@ -39,6 +39,8 @@ class ToastElementClass extends React.Component { public override render(): JSX.Element { const toast = this.props.toast; + console.log(toast); + const style = { "--data-duration": `${toast.time}ms`, } as React.CSSProperties; @@ -55,9 +57,13 @@ class ToastElementClass extends React.Component {
{this.getToastTitle(toast.title)} {this.getToastText(toast.text)} + {this.getToastDate(toast.created_at)}
- {toast.closable && Document check} +
+
+
+ {/* {toast.closable && Document check} */}
{toast.button} @@ -79,6 +85,11 @@ class ToastElementClass extends React.Component { return title; } + private getToastDate(date: Date | null | undefined) { + const tempDate = new Date(date!); + return tempDate.toDateString(); + } + private getToastText(text: React.ReactNode) { if (typeof text === "string") { return ( diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss b/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss index 35e9428e..0b0b94ab 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss @@ -5,6 +5,7 @@ flex-direction: column; overflow-y: auto; overflow-x: hidden; + border-radius: 8px; & > *:not(:first-child) { margin-top: 16px; diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx index eafe0cb3..d8b0d779 100644 --- a/src/front/Stores/Toasts.tsx +++ b/src/front/Stores/Toasts.tsx @@ -18,6 +18,7 @@ export interface IToast { time?: number; closable?: boolean; priority?: EToastPriority; + created_at?: Date | null; } export default class Toasts { @@ -61,6 +62,7 @@ export default class Toasts { toast.time = toast.time ?? this.defaultTime; toast.closable = toast.closable ?? this.defaultClosable; toast.priority = toast.priority ?? this.defaultPriority; + toast.created_at = toast.created_at; const highToasts = this.toastList.filter((toast) => { return toast.priority === EToastPriority.HIGH;