WildMeOrg · naknomum · Jun 11, 2024 · May 17, 2024 · May 27, 2024 · May 28, 2024
diff --git a/frontend/src/components/AuthenticatedAppHeader.jsx b/frontend/src/components/AuthenticatedAppHeader.jsx
@@ -8,20 +8,13 @@ import AvatarAndUserProfile from "./header/AvatarAndUserProfile";
 import { debounce } from "lodash";
 import Menu from "./header/Menu";
 import FooterVisibilityContext from "../FooterVisibilityContext";
+import Logo from "./svg/Logo";
 
 export default function AuthenticatedAppHeader({
   username,
   avatar,
   showAlert,
 }) {
-  const location = window.location;
-  const path = location.pathname.endsWith("/")
-    ? location.pathname
-    : location.pathname + "/";
-  const homePage = path === "/react/home/" || path === "/react/";
-  const [backgroundColor, setBackgroundColor] = useState(
-    homePage ? "transparent" : "#00a1b2",
-  );
   const { visible } = useContext(FooterVisibilityContext);
 
   const {
@@ -32,24 +25,14 @@ export default function AuthenticatedAppHeader({
     getAllNotifications,
   } = useContext(AuthContext);
 
-  useEffect(() => {
-    const handleScroll = debounce(() => {
-      const currentScrollY = window.scrollY;
-      setBackgroundColor(
-        homePage && currentScrollY > 40 ? "#00a1b2" : "transparent",
-      );
-    }, 200);
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
   return visible ? (
     <Navbar
       variant="dark"
       expand="lg"
       style={{
-        backgroundColor: backgroundColor,
-        height: "43px",
+        backgroundColor: "#303336",
+        maxHeight: "60px",
+        padding: 0,
         fontSize: "1rem",
         position: "fixed",
         top: showAlert ? 60 : 0,
@@ -61,7 +44,12 @@ export default function AuthenticatedAppHeader({
         paddingRight: "20px",
       }}
     >
-      <Navbar.Brand href="/" style={{ marginLeft: "1rem" }}>
+      <Navbar.Brand
+        className="d-flex flex-row align-items-center"
+        href="/"
+        style={{ marginLeft: "1rem", padding: 0 }}
+      >
+        <Logo />
         {process.env.SITE_NAME}
       </Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />

diff --git a/frontend/src/components/Avatar.jsx b/frontend/src/components/Avatar.jsx
@@ -1,22 +1,24 @@
-import React from 'react';
+import React from "react";
 
 export default function Avatar({ avatar }) {
-    return (
-        <div className="content col-1"
-            style={{
-                display: 'flex',
-                justifyContent: 'space-around',
-                alignItems: 'center'
-
-            }}
-        >
-            <img src={avatar} alt="img"
-                style={{
-                    width: '40px',
-                    height: '40px',
-                    borderRadius: '50%'
-                }}
-            />
-        </div>
-    );
-}
+  return (
+    <div
+      className="content"
+      style={{
+        display: "flex",
+        justifyContent: "space-around",
+        alignItems: "center",
+      }}
+    >
+      <img
+        src={avatar}
+        alt="img"
+        style={{
+          width: "35px",
+          height: "35px",
+          borderRadius: "50%",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/components/UnAuthenticatedAppHeader.jsx b/frontend/src/components/UnAuthenticatedAppHeader.jsx
@@ -8,16 +8,9 @@ import MultiLanguageDropdown from "./navBar/MultiLanguageDropdown";
 import { FormattedMessage } from "react-intl";
 import NotificationButton from "./navBar/NotificationButton";
 import FooterVisibilityContext from "../FooterVisibilityContext";
+import Logo from "./svg/Logo";
 
 export default function AuthenticatedAppHeader({ showAlert }) {
-  const location = window.location;
-  const path = location.pathname.endsWith("/")
-    ? location.pathname
-    : location.pathname + "/";
-  const homePage = path === "/react/home/" || path === "/react/";
-  const [backgroundColor, setBackgroundColor] = useState(
-    homePage ? "transparent" : "#00a1b2",
-  );
   const { visible } = useContext(FooterVisibilityContext);
 
   const [dropdownShows, setDropdownShows] = useState({
@@ -37,25 +30,14 @@ export default function AuthenticatedAppHeader({ showAlert }) {
     setDropdownBorder((prev) => ({ ...prev, [id]: "2px solid transparent" }));
   };
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      if (homePage && currentScrollY > 40) {
-        setBackgroundColor("#00a1b2");
-      } else if (homePage) {
-        setBackgroundColor("transparent");
-      }
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
   return visible ? (
     <Navbar
       variant="dark"
       expand="lg"
       style={{
-        backgroundColor: "#00a1b2",
-        height: "43px",
+        backgroundColor: "#303336",
+        maxHeight: "60px",
+        padding: 0,
         fontSize: "1rem",
         position: "fixed",
         top: showAlert ? 60 : 0,
@@ -66,7 +48,12 @@ export default function AuthenticatedAppHeader({ showAlert }) {
         width: "100%",
       }}
     >
-      <Navbar.Brand href="/" style={{ marginLeft: "1rem" }}>
+      <Navbar.Brand
+        className="d-flex flex-row align-items-center"
+        href="/"
+        style={{ marginLeft: "1rem" }}
+      >
+        <Logo />
         {process.env.SITE_NAME}
       </Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />

diff --git a/frontend/src/components/svg/Logo.jsx b/frontend/src/components/svg/Logo.jsx
@@ -1,18 +1,35 @@
-import React from 'react';
+import React from "react";
 
-export default function Logo({style}) {
-    return  <div style={style}>
-        <svg width="113" height="28" viewBox="0 0 451 113" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1.81748 13.3192H25.8082L56.8753 57.3022L44.7115 74.023L25.8082 101.285H0L32.8963 57.3022L1.81748 13.3192Z" fill="#00ACCE"/>
-            <path d="M63.976 11.5L48.3457 34.4002L61.4315 52.575L90.5112 11.5H63.976Z" fill="#00CC79"/>
-            <path d="M63.3322 101.5L47.7019 78.5998L60.7877 60.425L89.8674 101.5H63.3322Z" fill="#00CC79"/>
-            <mask id="path-4-outside-1_1_239" maskUnits="userSpaceOnUse" x="110.511" y="27.5" width="211" height="64" fill="black">
-            <rect fill="white" x="110.511" y="27.5" width="211" height="64"/>
-            <path d="M170.191 68.54L184.271 30.7H193.791L170.911 89.5H169.791L153.791 51.42L137.871 89.42H136.751L113.871 30.7H123.391L137.471 68.54L153.631 30.38H154.111L170.191 68.54ZM205.463 30.7H214.423V89.5H205.463V30.7ZM232.939 30.7H241.979V81.5H258.859V89.5H232.939V30.7ZM272.47 30.7H286.63C298.47 30.7 306.737 33.5 311.43 39.1C316.177 44.7 318.55 51.3667 318.55 59.1C318.55 64.4867 317.537 69.4733 315.51 74.06C313.483 78.5933 310.123 82.3 305.43 85.18C300.79 88.06 294.683 89.5 287.11 89.5H272.47V30.7ZM288.07 81.58C295.43 81.58 300.763 79.5 304.07 75.34C307.43 71.1267 309.11 65.8467 309.11 59.5C309.11 53.3133 307.43 48.2733 304.07 44.38C300.71 40.4867 295.377 38.54 288.07 38.54H281.43V81.58H288.07Z"/>
-            </mask>
-            <path d="M170.191 68.54L184.271 30.7H193.791L170.911 89.5H169.791L153.791 51.42L137.871 89.42H136.751L113.871 30.7H123.391L137.471 68.54L153.631 30.38H154.111L170.191 68.54ZM205.463 30.7H214.423V89.5H205.463V30.7ZM232.939 30.7H241.979V81.5H258.859V89.5H232.939V30.7ZM272.47 30.7H286.63C298.47 30.7 306.737 33.5 311.43 39.1C316.177 44.7 318.55 51.3667 318.55 59.1C318.55 64.4867 317.537 69.4733 315.51 74.06C313.483 78.5933 310.123 82.3 305.43 85.18C300.79 88.06 294.683 89.5 287.11 89.5H272.47V30.7ZM288.07 81.58C295.43 81.58 300.763 79.5 304.07 75.34C307.43 71.1267 309.11 65.8467 309.11 59.5C309.11 53.3133 307.43 48.2733 304.07 44.38C300.71 40.4867 295.377 38.54 288.07 38.54H281.43V81.58H288.07Z" fill="black"/>
-            <path d="M170.191 68.54L168.348 69.3166L170.307 73.9646L172.066 69.2375L170.191 68.54ZM184.271 30.7V28.7H182.881L182.397 30.0025L184.271 30.7ZM193.791 30.7L195.655 31.4253L196.716 28.7H193.791V30.7ZM170.911 89.5V91.5H172.279L172.775 90.2253L170.911 89.5ZM169.791 89.5L167.947 90.2747L168.462 91.5H169.791V89.5ZM153.791 51.42L155.635 50.6453L153.789 46.2505L151.947 50.6472L153.791 51.42ZM137.871 89.42V91.42H139.202L139.716 90.1928L137.871 89.42ZM136.751 89.42L134.888 90.1461L135.384 91.42H136.751V89.42ZM113.871 30.7V28.7H110.945L112.008 31.4261L113.871 30.7ZM123.391 30.7L125.266 30.0025L124.781 28.7H123.391V30.7ZM137.471 68.54L135.597 69.2375L137.351 73.9523L139.313 69.3199L137.471 68.54ZM153.631 30.38V28.38H152.306L151.79 29.6001L153.631 30.38ZM154.111 30.38L155.954 29.6034L155.439 28.38H154.111V30.38ZM172.066 69.2375L186.146 31.3975L182.397 30.0025L168.317 67.8425L172.066 69.2375ZM184.271 32.7H193.791V28.7H184.271V32.7ZM191.927 29.9747L169.047 88.7747L172.775 90.2253L195.655 31.4253L191.927 29.9747ZM170.911 87.5H169.791V91.5H170.911V87.5ZM171.635 88.7253L155.635 50.6453L151.947 52.1947L167.947 90.2747L171.635 88.7253ZM151.947 50.6472L136.027 88.6472L139.716 90.1928L155.636 52.1928L151.947 50.6472ZM137.871 87.42H136.751V91.42H137.871V87.42ZM138.615 88.6939L115.735 29.9739L112.008 31.4261L134.888 90.1461L138.615 88.6939ZM113.871 32.7H123.391V28.7H113.871V32.7ZM121.517 31.3975L135.597 69.2375L139.346 67.8425L125.266 30.0025L121.517 31.3975ZM139.313 69.3199L155.473 31.1599L151.79 29.6001L135.63 67.7601L139.313 69.3199ZM153.631 32.38H154.111V28.38H153.631V32.38ZM152.268 31.1566L168.348 69.3166L172.034 67.7634L155.954 29.6034L152.268 31.1566ZM205.463 30.7V28.7H203.463V30.7H205.463ZM214.423 30.7H216.423V28.7H214.423V30.7ZM214.423 89.5V91.5H216.423V89.5H214.423ZM205.463 89.5H203.463V91.5H205.463V89.5ZM205.463 32.7H214.423V28.7H205.463V32.7ZM212.423 30.7V89.5H216.423V30.7H212.423ZM214.423 87.5H205.463V91.5H214.423V87.5ZM207.463 89.5V30.7H203.463V89.5H207.463ZM232.939 30.7V28.7H230.939V30.7H232.939ZM241.979 30.7H243.979V28.7H241.979V30.7ZM241.979 81.5H239.979V83.5H241.979V81.5ZM258.859 81.5H260.859V79.5H258.859V81.5ZM258.859 89.5V91.5H260.859V89.5H258.859ZM232.939 89.5H230.939V91.5H232.939V89.5ZM232.939 32.7H241.979V28.7H232.939V32.7ZM239.979 30.7V81.5H243.979V30.7H239.979ZM241.979 83.5H258.859V79.5H241.979V83.5ZM256.859 81.5V89.5H260.859V81.5H256.859ZM258.859 87.5H232.939V91.5H258.859V87.5ZM234.939 89.5V30.7H230.939V89.5H234.939ZM272.47 30.7V28.7H270.47V30.7H272.47ZM311.43 39.1L309.897 40.3847L309.904 40.3932L311.43 39.1ZM315.51 74.06L317.336 74.8763L317.339 74.8683L315.51 74.06ZM305.43 85.18L304.384 83.4753L304.375 83.4807L305.43 85.18ZM272.47 89.5H270.47V91.5H272.47V89.5ZM304.07 75.34L302.506 74.093L302.504 74.0955L304.07 75.34ZM304.07 44.38L302.556 45.6867L304.07 44.38ZM281.43 38.54V36.54H279.43V38.54H281.43ZM281.43 81.58H279.43V83.58H281.43V81.58ZM272.47 32.7H286.63V28.7H272.47V32.7ZM286.63 32.7C298.24 32.7 305.767 35.4565 309.897 40.3847L312.963 37.8153C307.706 31.5435 298.7 28.7 286.63 28.7V32.7ZM309.904 40.3932C314.327 45.6115 316.55 51.8128 316.55 59.1H320.55C320.55 50.9205 318.026 43.7885 312.956 37.8068L309.904 40.3932ZM316.55 59.1C316.55 64.2292 315.587 68.9381 313.681 73.2517L317.339 74.8683C319.487 70.0085 320.55 64.7441 320.55 59.1H316.55ZM313.684 73.2437C311.84 77.3695 308.773 80.7822 304.384 83.4754L306.476 86.8846C311.474 83.8178 315.127 79.8172 317.336 74.8763L313.684 73.2437ZM304.375 83.4807C300.152 86.1021 294.449 87.5 287.11 87.5V91.5C294.918 91.5 301.428 90.0179 306.485 86.8793L304.375 83.4807ZM287.11 87.5H272.47V91.5H287.11V87.5ZM274.47 89.5V30.7H270.47V89.5H274.47ZM288.07 83.58C295.791 83.58 301.818 81.3873 305.636 76.5845L302.504 74.0955C299.709 77.6127 295.069 79.58 288.07 79.58V83.58ZM305.634 76.587C309.324 71.9589 311.11 66.2158 311.11 59.5H307.11C307.11 65.4775 305.536 70.2944 302.506 74.093L305.634 76.587ZM311.11 59.5C311.11 52.9355 309.318 47.4002 305.584 43.0733L302.556 45.6867C305.542 49.1465 307.11 53.6912 307.11 59.5H311.11ZM305.584 43.0733C301.705 38.5789 295.705 36.54 288.07 36.54V40.54C295.048 40.54 299.715 42.3945 302.556 45.6867L305.584 43.0733ZM288.07 36.54H281.43V40.54H288.07V36.54ZM279.43 38.54V81.58H283.43V38.54H279.43ZM281.43 83.58H288.07V79.58H281.43V83.58Z" fill="black" mask="url(#path-4-outside-1_1_239)"/>
-            <path d="M355.405 61.874L351.633 53.346L349.911 61.874L344.335 90H335.233L347.697 29.73H348.681L365.245 62.284L370.165 73.19L375.085 62.284L391.321 29.73H392.223L405.179 90H396.159L390.091 61.874L388.287 53.346L385.007 61.874L370.411 90H369.919L355.405 61.874ZM418.177 29.73H444.581V37.766H427.279V54.412H441.219V62.612H427.279V81.882H447.287V90H418.177V29.73Z" fill="black"/>
-        </svg>
+export default function Logo({ style }) {
+  return (
+    <div
+      style={{
+        maxWidth: "60px",
+        maxHeight: "60px",
+        overflow: "hidden",
+        ...style,
+      }}
+    >
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 92 90"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2.32871 1.81909H26.3194L57.3865 45.802L45.2227 62.5228L26.3194 89.785H0.51123L33.4076 45.802L2.32871 1.81909Z"
+          fill="white"
+        />
+        <path
+          d="M64.4872 0L48.8569 22.9002L61.9428 41.075L91.0224 0H64.4872Z"
+          fill="white"
+        />
+        <path
+          d="M63.8434 90L48.2131 67.0998L61.299 48.925L90.3786 90H63.8434Z"
+          fill="white"
+        />
+      </svg>
     </div>
-}
+  );
+}
diff --git a/src/main/java/org/ecocean/security/Collaboration.java b/src/main/java/org/ecocean/security/Collaboration.java
@@ -368,9 +368,9 @@ public static String getNotificationsWidgetHtml(HttpServletRequest request,
             // e.printStackTrace();
         }
         if (n > 0)
-            notif = "<div onClick=\"return showNotifications(this);\">" +
-                collabProps.getProperty("notifications") + " <span class=\"notification-pill\">" +
-                n + "</span></div>";
+            notif =
+                "<div class=\"notification-container\" onClick=\"return showNotifications(this);\">"
+                + " <span class=\"notification-pill\">" + n + "</span></div>";
         return notif;
     }