Aidy/add test for icon in header

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "window.autoDetectColorScheme": true
+}

client-side/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', { targets: { node: 'current' } }],
+      '@babel/preset-react',
+    ],
+  };
+

client-side/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
+    "@mui/base": "^5.0.0-beta.40",
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
@@ -17,11 +18,10 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/redux": "^3.6.31",
     "axios": "^1.7.2",
-  "formik": "^2.4.6",
-
-    "jest": "^29.7.0",
+    "formik": "^2.4.6",
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",
+    "jest": "^29.7.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.2",
     "react": "^18.3.1",
@@ -38,7 +38,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -63,6 +63,8 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
     "@chromatic-com/storybook": "^1.6.0",
     "@eslint/compat": "^1.1.0",
     "@eslint/js": "^9.6.0",

client-side/src/stories/GenericInput/genericInput.scss

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
-@import './style.scss';
+@import '../variables.scss';
 
 .generic-input {
   .MuiOutlinedInput-root {
@@ -24,12 +24,12 @@
     }
 
     &.Mui-disabled {
-      opacity: 0.7; 
-      cursor: not-allowed; 
+      opacity: 0.7;
+      cursor: not-allowed;
 
       input {
-        color: rgba($color-black, 0.7); 
-        pointer-events: none; 
+        color: rgba($color-black, 0.7);
+        pointer-events: none;
       }
     }
 
@@ -69,4 +69,4 @@
       color: $color-error;
     }
   }
-}
+}

client-side/src/stories/header/header.scss

@@ -1,6 +1,5 @@
 @import '../variables.scss';
-.arooundDiv{
-  .navbar{
+.navbar{
     background-color: $primary-color  ;
     color: $secondary-color  ;
   }
@@ -31,4 +30,3 @@
           display: flex;
         }
   }
-}

client-side/src/stories/popup/popup.jsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Unstable_Popup as BasePopup } from '@mui/base/Unstable_Popup';
+import GenericButton from '../Button/GenericButton';
+import './popup.scss';
+
+export default function SimplePopup({message='',labelButtonOutThePopup='open message',iconInButton,labelButtonInThePopup='delete message',onClick}) {
+  const [anchor, setAnchor] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchor(anchor ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchor);
+  const id = open ? 'simple-popup' : undefined;
+
+  return (
+    <div>
+      <GenericButton className="secondary" label={labelButtonOutThePopup} aria-describedby={id} type="button" onClick={handleClick} />
+      <BasePopup id={id} open={open} anchor={anchor}>
+        <div className='popup-body'>
+            <div className='massage'>{message}</div>
+            <GenericButton icon={iconInButton} className="secondary" onClick={onClick} label={labelButtonInThePopup}/>
+        </div>
+       </BasePopup>
+    </div>
+  );
+}
+