From d1533abc5fc51f52961fa503805e71c207c1d5ef Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Fri, 10 May 2024 22:24:23 +0330 Subject: [PATCH] Announcements are implemented --- Client/src/App.jsx | 2 - .../AnnouncementUpdateSubscription.jsx | 40 +++++++ .../announcementUpdateSubscription.css | 100 ++++++++++++++++++ .../AnnouncementsDualButton.jsx | 25 +++++ .../announcementsDualButton.css | 38 +++++++ .../AnnouncementsDualButtonWithIcon.tsx | 36 +++++++ .../announcementsDualButtonWithIcon.css | 70 ++++++++++++ .../AnnouncementsMessageBar.jsx | 18 ++++ .../announcementsMessageBar.css | 14 +++ .../Icons/ComplexAlert/ComplexAlert.jsx | 25 +++++ .../Icons/ComplexAlert/complexAlert.css | 44 ++++++++ .../PlayGround/PlayGround-announcements.jsx | 72 +++++++++++++ 12 files changed, 482 insertions(+), 2 deletions(-) create mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx create mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css create mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx create mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css create mode 100644 Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx create mode 100644 Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css create mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx create mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css create mode 100644 Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx create mode 100644 Client/src/components/Icons/ComplexAlert/complexAlert.css create mode 100644 Client/src/screens/PlayGround/PlayGround-announcements.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 4cc9d45a4..519f2fc59 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,5 +1,3 @@ -import PlayGroundTooltips from "./screens/PlayGround/PlayGround-Tooltips"; - function App() { return ( <> diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx new file mode 100644 index 000000000..daa6231f3 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx @@ -0,0 +1,40 @@ +import "./announcementUpdateSubscription.css"; +import React from "react"; + +function AnnouncementUpdateSubscription({ + title, + text, + cancel, + positive, + header, + button, +}) { + return ( +
+
+
{title}
+
+
{text}
+
+
+ + +
+
+
+
+
{header}
+
+ + +
+
+
+ ); +} + +export default AnnouncementUpdateSubscription; diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css new file mode 100644 index 000000000..5ee74a6a7 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css @@ -0,0 +1,100 @@ +:root { + --update-subscription-font-family: "Roboto", "Helvetica", "Arial", sans-serif; + --update-subscription-color-0: #101828; + --update-subscription-color-1: #475467; + --update-subscription-color-2: #fff; + --update-subscription-color-3: #eaecf0; + --update-subscription-color-4: #7f56d9; + --update-subscription-color-5: #1570ef; + --update-subscription-color-6: #344054; + --update-subscription-color-7: #d0d5dd; + --update-subscription-padding-0: 12px 16px; + --update-subscription-margin-right: 12px; + --update-subscription-radius-0: 4px; + --spacing-1: 16px; + --spacing-2: 20px; +} + +.update-subscription, +.update-subscription-dialog { + font-family: var(--update-subscription-font-family); + max-width: 770px; + border-radius: 4px; + border: 1px solid #eaecf0; +} + +.update-subscription-dialog { + padding: 15px 30px; +} + +.subscription-dialog-title { + font-size: 1rem; + font-family: var(--update-subscription-font-family); + font-weight: 900; + color: var(--update-subscription-color-0); +} + +.v-spacing-small { + height: 10px; +} + +.v-spacing-medium { + height: 15px; +} + +.subscription-dialog-text { + font-size: 13px; + font-family: var(--update-subscription-font-family); + color: var(--update-subscription-color-1); +} + +.subscription-dialog-controls { + display: flex; +} + +.controls-negative { + padding: var(--update-subscription-padding-0); + margin-right: var(--update-subscription-margin-right); + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-3); + background-color: var(--update-subscription-color-2); +} + +.controls-positive, +.subscribe-button { + padding: var(--update-subscription-padding-0); + margin-right: var(--update-subscription-margin-right); + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-4); + background-color: var(--update-subscription-color-5); + color: var(--update-subscription-color-2); +} + +.update-subscription-title { + color: var(--update-subscription-color-6); + padding: 0 var(--spacing-2); + font-weight: 700; + font-size: 13px; + margin-bottom: 10px; +} + +.subscription-email { + display: flex; + padding: 0 var(--spacing-2); +} + +.subscription-email-field { + width: 290px; + height: 24px; + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-7); + box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); + padding: 5px 15px; + margin-right: var(--spacing-2); +} + +.subscribe-button { + width: 100px; + height: 34px; + padding: 2px 15px; +} diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx new file mode 100644 index 000000000..4a0fd3da8 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx @@ -0,0 +1,25 @@ +import "./announcementsDualButton.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; + +function AnnouncementsDualButton({ subject, body, esc, primary }) { + return ( +
+
+
{subject}
+
+
{body}
+
+
{esc}
+
{primary}
+
+
+
+
+ +
+
+ ); +} + +export default AnnouncementsDualButton; diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css new file mode 100644 index 000000000..8d310f5b0 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css @@ -0,0 +1,38 @@ +:root { + --announcement-border-color: #d0d5dd; + --announcement-border-radius: 4px; + --announcement-border-radius-2: 8px; + --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; + --announcement-font-size-0: 13px; + --announcement-font-color-0: #344054; + --announcement-font-color-1: #475467; + --announcement-font-color-2: #1570ef; + --announcement-padding: 16px; + --info-icon-frame-color: #eaecf0; +} + +.announcement-without-tile { + max-width: 343px; + width: fit-content; + display: flex; + border: 1px solid var(--announcement-border-color); + font-family: var(--announcement-font-family); + padding: var(--announcement-padding); + border-radius: var(--announcement-border-radius); +} + +.h-spacing { + width: 20px; +} + +.announcement-without-content-subject { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-0); + font-weight: 700; + margin-bottom: 10px; +} + +.announcement-without-content-body { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-1); +} diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx new file mode 100644 index 000000000..696e65bb2 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx @@ -0,0 +1,36 @@ +import "./announcementsDualButtonWithIcon.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; + +function AnnouncementsDualButtonWithIcon({ + icon, + subject, + body, + esc, + primary, +}) { + return ( +
+ {icon &&
{icon}
} +
+ {subject && ( +
{subject}
+ )} + {body &&
{body}
} + {(esc || primary) && ( +
+ {esc &&
{esc}
} + {primary && ( +
{primary}
+ )} +
+ )} +
+
+ +
+
+ ); +} + +export default AnnouncementsDualButtonWithIcon; diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css new file mode 100644 index 000000000..a0093c8d5 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css @@ -0,0 +1,70 @@ +:root { + --announcement-border-color: #d0d5dd; + --announcement-border-radius: 4px; + --announcement-border-radius-2: 8px; + --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; + --announcement-font-size-0: 13px; + --announcement-font-color-0: #344054; + --announcement-font-color-1: #475467; + --announcement-font-color-2: #1570ef; + --announcement-padding: 16px; + --info-icon-frame-color: #eaecf0; +} + +.announcement-tile { + width: fit-content; + display: flex; + border: 1px solid var(--announcement-border-color); + font-family: var(--announcement-font-family); + padding: var(--announcement-padding); + border-radius: var(--announcement-border-radius); +} + +.info-icon-frame { + display: flex; + width: 40px; + height: 40px; + border: 1px solid var(--info-icon-frame-color); + border-radius: var(--announcement-border-radius-2); + justify-content: center; + align-items: center; +} + +.announcement-content { + padding: 0 var(--announcement-padding); +} + +.announcement-content-subject { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-0); + font-weight: 700; + margin-bottom: 10px; +} + +.announcement-content-body { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-1); +} + +.announcement-content-controllers { + display: flex; + font-size: var(--announcement-font-size-0); + margin-top: 15px; +} + +.controllers-button-esc { + font-size: var(--announcement-font-size-0); + font-weight: 500; + margin-right: 12px; +} + +.controllers-button-primary { + font-size: var(--announcement-font-size-0); + font-weight: 500; + color: var(--announcement-font-color-2); +} + +.announcement-close { + width: 24px; + height: 24px; +} diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx new file mode 100644 index 000000000..d40bb31ba --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx @@ -0,0 +1,18 @@ +import "./announcementsMessageBar.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; + +function AnnouncementsMessageBar() { + return ( +
+
+ New employee created successfully +
+
+ +
+
+ ); +} + +export default AnnouncementsMessageBar; diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css new file mode 100644 index 000000000..9c01c4429 --- /dev/null +++ b/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css @@ -0,0 +1,14 @@ +:root { + --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; + --announcement-font-size-0: 13px; + --announcement-padding: 16px; +} + +.announcement-messagebar-body { + font-size: var(--announcement-font-size-0); + font-family: var(--announcement-font-family); + padding: 0 var(--announcement-padding) 0 0; + justify-content: center; + align-items: center; + margin: auto; +} diff --git a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx new file mode 100644 index 000000000..9adfef9f9 --- /dev/null +++ b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx @@ -0,0 +1,25 @@ +import "./complexAlert.css"; +import React from "react"; +import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; + +function ComplexAlert({ theme }) { + if (theme === "red") { + return ( +
+
+ +
+
+ ); + } else if (theme === "green") { + return ( +
+
+ +
+
+ ); + } +} + +export default ComplexAlert; diff --git a/Client/src/components/Icons/ComplexAlert/complexAlert.css b/Client/src/components/Icons/ComplexAlert/complexAlert.css new file mode 100644 index 000000000..ab3cea714 --- /dev/null +++ b/Client/src/components/Icons/ComplexAlert/complexAlert.css @@ -0,0 +1,44 @@ +.icon-holder-outer-red { + width: 38px; + height: 38px; + border-radius: 50%; + border: 2px solid #d92d2019; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-inner-red { + width: 28px; + height: 28px; + border-radius: 50%; + border: 2px solid #d92d204d; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-outer-green { + width: 38px; + height: 38px; + border-radius: 50%; + border: 2px solid #07945519; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-inner-green { + width: 28px; + height: 28px; + border-radius: 50%; + border: 2px solid #0794554d; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-core { + width: 20px; + height: 20px; +} diff --git a/Client/src/screens/PlayGround/PlayGround-announcements.jsx b/Client/src/screens/PlayGround/PlayGround-announcements.jsx new file mode 100644 index 000000000..1999b6430 --- /dev/null +++ b/Client/src/screens/PlayGround/PlayGround-announcements.jsx @@ -0,0 +1,72 @@ +import React from "react"; +import AnnouncementsDualButtonWithIcon from "../../components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; +import ComplexAlert from "../../components/Icons/ComplexAlert/ComplexAlert"; +import AnnouncementsMessageBar from "../../components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar"; +import AnnouncementsDualButton from "../../components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton"; +import AnnouncementUpdateSubscription from "../../components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription"; + +function PlayGroundAnnouncements() { + return ( +
+ + +
+ } + subject="We’ve just released a new feature" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="View changes" + /> +
+
+ } + subject="There was a problem with that action" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="Learn more" + /> +
+
+ } + subject="Successfully updated profile" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="Learn more" + /> +
+
+ +
+
+ +
+
+ +
+
+ + ); +} + +export default PlayGroundAnnouncements;