From a282268d10d873e4024fe6a7ccf9a64627a1acff Mon Sep 17 00:00:00 2001
From: Kamil Matuszewski <kamil.matuszewski@fingo.pl>
Date: Thu, 18 Jan 2024 08:46:18 +0100
Subject: [PATCH] Add Badge (#235)

---
 view.react/src/components/sidebar/Sidebar.jsx | 36 ++++----
 .../components/sidebar/Sidebar.module.scss    | 84 +++++++++----------
 2 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/view.react/src/components/sidebar/Sidebar.jsx b/view.react/src/components/sidebar/Sidebar.jsx
index d64e3a10..0aad9593 100644
--- a/view.react/src/components/sidebar/Sidebar.jsx
+++ b/view.react/src/components/sidebar/Sidebar.jsx
@@ -8,6 +8,7 @@ import GroupAddOutlinedIcon from '@mui/icons-material/GroupAddOutlined';
 import PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';
 import WatchLaterRoundedIcon from '@mui/icons-material/WatchLaterRounded';
 import WorkHistoryOutlinedIcon from '@mui/icons-material/WorkHistoryOutlined';
+import { Badge } from '@mui/material';
 import classNames from "classnames";
 import PropTypes from 'prop-types';
 import {useState} from "react";
@@ -47,7 +48,7 @@ export const Sidebar = ({acceptancesPresent}) => {
                         to="/calendar"
                     >
                         <CalendarMonthSharpIcon />
-                        <span>Kalendarz</span>
+                        <span className={styles['text']}>Kalendarz</span>
                     </Link>
                     <Link
                         testId="RequestsLink"
@@ -55,12 +56,19 @@ export const Sidebar = ({acceptancesPresent}) => {
                         activeClassName="active"
                         to="/requests"
                     >
-                        <EmailRoundedIcon />
-                        <TextWithIcon
-                            text={isUserEC ? "Wnioski urlopowe" : "Wnioski o przerwę"}
-                            icon={<AttentionIcon />}
-                            showIcon={acceptancesPresent}
-                        />
+                        <Badge 
+                            invisible={acceptancesPresent}
+                            anchorOrigin={{
+                                vertical: "top",
+                                horizontal: "left",
+                            }} 
+                            variant="dot"
+                            size="small"
+                            color="warning"
+                        >
+                            <EmailRoundedIcon />
+                        </Badge>
+                        <span className={styles['text']}>{isUserEC ? "Wnioski urlopowe" : "Wnioski o przerwę"}</span>
                     </Link>
                     <Link
                         testId="UsersHistoryLink"
@@ -69,35 +77,35 @@ export const Sidebar = ({acceptancesPresent}) => {
                         to="/history"
                     >
                         <WatchLaterRoundedIcon />
-                        <span>Historia użytkownika</span>
+                        <span className={styles['text']}>Historia użytkownika</span>
                     </Link>
                     {isUserALeader &&
                         <Link to="/acceptances/history">
                             <WorkHistoryOutlinedIcon />
-                            <span>Historia akceptacji</span>
+                            <span className={styles['text']}>Historia akceptacji</span>
                         </Link>
                     }
                     {isUserAnAdmin && (
                         <>
                             <Link to="/associates" testId="ContractorsLink">
                             <PeopleOutlineRoundedIcon />
-                                <span>Współpracownicy</span>
+                                <span className={styles['text']}>Współpracownicy</span>
                             </Link>
                             <Link to="/workers" testId="EmployeesLink">
                                 <GroupAddOutlinedIcon />
-                                <span>Pracownicy</span>
+                                <span className={styles['text']}>Pracownicy</span>
                             </Link>
                             <Link to="/holidays" testId="HolidaysLink">
                                 <EventAvailableOutlinedIcon />
-                                <span>Dni świąteczne</span>
+                                <span className={styles['text']}>Dni świąteczne</span>
                             </Link>
                             <Link to="/reports" testId="ReportsLink">
                                 <BarChartOutlinedIcon />
-                                <span>Raporty</span>
+                                <span className={styles['text']}>Raporty</span>
                             </Link>
                             <Link to="/automaticVacationDays">
                                 <EventRepeatOutlinedIcon />
-                                <span>Dni na nowy rok</span>
+                                <span className={styles['text']}>Dni na nowy rok</span>
                             </Link>
                         </>
                     )}
diff --git a/view.react/src/components/sidebar/Sidebar.module.scss b/view.react/src/components/sidebar/Sidebar.module.scss
index cebf6954..eec1dbce 100644
--- a/view.react/src/components/sidebar/Sidebar.module.scss
+++ b/view.react/src/components/sidebar/Sidebar.module.scss
@@ -1,5 +1,5 @@
 @import "src/global-styles/color-variables";
-@import 'src/global-styles/bootstrap-breakpoints.scss';
+@import "src/global-styles/bootstrap-breakpoints.scss";
 
 .main {
   z-index: 6;
@@ -17,43 +17,43 @@
 }
 
 .nav {
-    flex-direction: column;
-    white-space: nowrap;
-    text-transform: uppercase;
-    margin-left: 2rem;
+  flex-direction: column;
+  white-space: nowrap;
+  text-transform: uppercase;
+  margin-left: 2rem;
+
+  button {
+    width: fit-content;
+    background-color: transparent;
+    border: none;
+    position: relative;
+    transition: transform 0.3s ease-in-out;
+    transform: translateX(0);
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-    button {
-      width: fit-content;
-      background-color: transparent;
-      border: none;
-      position: relative;
-      transition: transform 0.3s ease-in-out;
-      transform: translateX(0);
-      padding: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:before {
-        content: "";
-        position: absolute;
-        z-index: -1;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid #9CD71E;
-        border-radius: 50px;
-        transform: scale(0);
-        transition-property: transform;
-        transition-duration: 0.3s;
-        transition-timing-function: ease-in-out;
-      }
+    &:before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid #9cd71e;
+      border-radius: 50px;
+      transform: scale(0);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: ease-in-out;
+    }
 
-      &:hover:before {
-        transform: scale(1);
-      }
+    &:hover:before {
+      transform: scale(1);
     }
+  }
 
   &--open {
     button {
@@ -63,7 +63,7 @@
     }
 
     a {
-      span {
+      .text {
         width: 100%;
         padding-left: 12px;
         opacity: 1;
@@ -71,7 +71,7 @@
     }
   }
 
-  span {
+  .text {
     transition: opacity 0.3s ease-in-out;
     overflow: hidden;
     margin-left: 0px;
@@ -96,11 +96,11 @@
       height: 3px;
       top: 100%;
       left: 0;
-      background: #78A612;
+      background: #78a612;
       visibility: hidden;
       border-radius: 5px;
       transform: scaleX(0);
-      transition: .3s linear;
+      transition: 0.3s linear;
     }
 
     &:hover::before,
@@ -112,14 +112,14 @@
     &:hover {
       svg {
         transform: scale(1.2);
-        transition: .3s linear;
+        transition: 0.3s linear;
       }
     }
 
     &:not(:hover) {
       svg {
         transform: scale(1);
-        transition: .2s linear;
+        transition: 0.2s linear;
       }
     }
   }
@@ -142,7 +142,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
 }