Merge pull request #106 from smswithoutborders/dev

added banner to infor of rebrand

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@headlessui/react": "^1.6.4",
     "@hookform/resolvers": "^2.8.5",
-    "@mui/material": "^5.12.2",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
     "@mui/styled-engine-sc": "^5.12.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@svgr/plugin-svgo": "^6.2.0",
@@ -16,7 +17,7 @@
     "bootstrap": "^5.2.3",
     "clsx": "^1.1.1",
     "css-select": "^4.2.1",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^11.2.10",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.3",
     "i18next-http-backend": "^1.4.0",

src/components/MainNavbar.js

@@ -8,6 +8,7 @@ import { NavLink, MobileNavLink, ExternalLink, DropDownLink } from "./NavLinks";
 import { useTranslation } from "react-i18next";
 import { useScroll, useLanguage } from "hooks";
 import clsx from "clsx";
+import MyAlert from "./MyAlert";
 
 export const MainNavbar = () => {
   const { t } = useTranslation();
@@ -226,6 +227,7 @@ export const MainNavbar = () => {
 
   return (
     <Fragment>
+      <MyAlert />
       {/* Desktop nav */}
       <nav
         className={clsx(

src/components/MainNavbar.spec.js

@@ -4,7 +4,8 @@ import { MainNavbar } from "./MainNavbar";
 
 describe("MainNavbar component", () => {
   it("Renders MainNavbar", async () => {
-    render(<MainNavbar />);
+    render( 
+    <MainNavbar />);
     expect(screen.getAllByRole("navigation")).toHaveLength(2);
   });
 });

src/components/MyAlert.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Box, Typography, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+const MyAlert = () => {
+  const [visible, setVisible] = useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  return visible ? (
+    <Box
+      sx={{
+        position: "sticky",
+        top: 0,
+        backgroundColor: "#f50057", // Adjust the color as needed
+        color: "white",
+        padding: "8px 16px",
+        textAlign: "center",
+        zIndex: 1000, // Ensure it stays above other elements
+      }}
+    >
+      <Typography variant="body1" component="span">
+        This is an important announcement!
+      </Typography>
+      <IconButton 
+        size="small" 
+        onClick={handleClose} 
+        sx={{ color: "white", marginLeft: "8px" }}
+      >
+        <CloseIcon />
+      </IconButton>
+    </Box>
+  ) : null;
+};
+
+export default MyAlert;