ref: storage

.github/workflows/tests.yml

@@ -37,6 +37,6 @@ jobs:
       - name: Clean up
         run: |
           docker-compose -f docker-compose.test.yml down --volumes --remove-orphans
-          docker system prune --all --volumes --force
+          docker system prune --volumes --force
       
 

frontend-app/src/app.css

@@ -27,7 +27,6 @@
 h1 {
     color: var(--issBrand);
     font-size: 42px;
-    line-height: 0.75;
 }
 
 h3 {

frontend-app/src/components/AlertManager/index.jsx

@@ -17,7 +17,7 @@ const COLOR_MAP = {
  */
 export default function AlertManager({ maxOnScreen }) {
   const dispatch = useDispatch();
-  const alerts = useSelector((state) => state.activeAlerts);
+  const alerts = useSelector((state) => state.alerts.activeAlerts);
 
   return (
     <aside className="alertManager">

frontend-app/src/components/AppRouter/index.jsx

@@ -8,7 +8,7 @@ const SAFE_ROUTES = ["/login", "/registration"];
 /** @returns {ReactElement} */
 export default function AppRouter() {
   const [redirect, setRedirect] = useState(false);
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state) => state.user.user);
   const location = useLocation();
 
   useEffect(() => {

frontend-app/src/components/Header/index.jsx

@@ -3,19 +3,14 @@ import { ReactElement } from 'react';
 import { useDispatch, useSelector } from "react-redux";
 import { addAlert } from "../../slices/alerts";
 import { setUser } from "../../slices/users";
-import NavLinks from '../common/NavLinks';
+import TitleSwitch from "../common/TitleSwitch";
 import Logo from '../ui/Logo';
 import './styles.css';
 
-/** @type {{text: string, link: string}[]} */
-const LINK_SET = [
-  { text: 'Login', link: '/login' },
-  { text: 'Registration', link: '/registration' },
-];
-
 /** @returns {ReactElement} */
 export default function Header() {
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state) => state.user.user);
+  const head = useSelector((state) => state.head);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -29,19 +24,22 @@ export default function Header() {
   return (
     <header className='iss__header'>
       <Logo />
-      <div className="iss__header__user">
-        {
-          user
-          ? <>
-            <span className='iss__header__username'>{user.username}</span>
-            <button
-              onClick={logOutUser}
-              className='iss__header__logoutButton'
-            >Logout</button>
-          </>
-          : <NavLinks links={LINK_SET} />
-        }
-      </div>
+      <TitleSwitch
+        title={head.title}
+        links={head.nav}
+        currentRoute={head.current}
+        parent={head.parent}
+      />
+      {
+        user &&
+        <div className="iss__header__user">
+          <span className='iss__header__username'>{user.username}</span>
+          <button
+            onClick={logOutUser}
+            className='iss__header__logoutButton'
+          >Logout</button>
+        </div>
+      }
     </header>
   );
 }

frontend-app/src/components/Header/styles.css

@@ -1,41 +1,42 @@
 .iss__header {
-  padding: 12px 20px;
-  display: flex;
-  justify-content: space-between;
-  place-items: center;
-  position: sticky;
-  top: 0px;
-  background-color: white;
-  z-index: 10;
-  box-shadow: 0px 0px 4px 0px var(--issBrand);
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
+    padding: 12px 20px;
+    gap: 20px;
+    display: flex;
+    place-items: center;
+    position: sticky;
+    top: 0px;
+    background-color: white;
+    z-index: 10;
+    box-shadow: 0px 0px 4px 0px var(--issBrand);
 }
 .iss__header__user {
-  display: flex;
-  gap: 20px;
-  place-items: center;
-  color: var(--issBrand);
+    display: flex;
+    margin-left: auto;
+    gap: 12px;
+    place-items: center;
+    color: var(--issBrand);
 }
 .iss__header__logoutButton {
-  background: none;
-  border: 1px solid var(--issBrand);
-  cursor: pointer;
-  padding: 4px 8px;
-  transition: color 0.3s ease, background-color 0.3s ease;
+    background: none;
+    border: 1px solid var(--issBrand);
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 2px;
+    transition:
+        color 0.3s ease,
+        background-color 0.3s ease;
 }
-@media (hover:hover) {
-  .iss__header__logoutButton:hover {
-    background-color: var(--issBrand);
-    color: white;
-  }
+@media (hover: hover) {
+    .iss__header__logoutButton:hover {
+        background-color: var(--issBrand);
+        color: white;
+    }
 }
 @media (max-width: 575px) {
-  .iss__header {
-    padding: 10px;
-  }
-  .iss__brand {
-    gap: 4px;
-  }
-
+    .iss__header {
+        padding: 10px;
+    }
+    .iss__brand {
+        gap: 4px;
+    }
 }

frontend-app/src/components/common/ProjectCard/styles.css

@@ -1,32 +1,34 @@
 .iss__projectCard {
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-  background-color: white;
-  border-radius: 12px;
-  border: 1px solid var(--issBrand);
-  padding: 12px 20px;
-  box-shadow: 1px 1px 2px var(--issBrand);
-  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    background-color: white;
+    border: 1px solid var(--issBrand);
+    border-radius: 2px;
+    padding: 12px 20px;
+    transition:
+        background-color 0.3s ease,
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
 }
 .iss__projectCard__name {
-  color: var(--issBrand);
-  margin-bottom: 12px;
-  word-break: break-all;
+    color: var(--issBrand);
+    margin-bottom: 12px;
+    word-break: break-all;
 }
 .iss__projectCard__text {
-  font-size: 18px;
-  color: black;
-  margin-bottom: 20px;
+    font-size: 18px;
+    color: black;
+    margin-bottom: 20px;
 }
 .iss__projectCard__date {
-  font-size: 8px;
-  color: black;
-  text-align: right;
+    font-size: 8px;
+    color: black;
+    text-align: right;
+}
+@media (hover: hover) {
+    .iss__projectCard:hover {
+        transform: scale(1.03);
+        box-shadow: 1px 1px 4px var(--issBrand);
+    }
 }
-@media (hover:hover) {
-  .iss__projectCard:hover {
-    transform: scale(1.01) translate(-6px, -6px);
-    box-shadow: 6px 6px 10px var(--issBrand);
-  }
-}

frontend-app/src/components/common/TitleSwitch/index.jsx

@@ -12,7 +12,10 @@ import './styles.css';
 * @returns {ReactElement}
 */
 export default function TitleSwitch({ title, titleLink, links, currentRoute, parent }) {
-  var createLink = (link) => '/' + [parent, link].join('/');
+  var createLink = (link) =>  {
+    var set = [parent, link];
+    return '/' + set.filter((l) => l).join('/');
+  };
 
   return (
     <div className='iss__titleSwitch'>

frontend-app/src/components/common/TitleSwitch/styles.css

@@ -1,45 +1,36 @@
 .iss__titleSwitch {
     display: flex;
-    margin-bottom: 40px;
-    gap: 40px;
+    gap: 20px;
     width: fit-content;
-    flex-wrap: wrap;
-    border-bottom: 1px solid var(--issBrand);
-}
-.iss__titleSwitch__navWrap {
-    place-self: flex-end;
+    place-items: center;
 }
 .iss__titleSwitch__nav {
     display: flex;
     width: fit-content;
     list-style: none;
+    gap: 8px;
 }
 .iss__titleSwitch__navItem,
 .iss__titleSwitch__navItem--active {
-    display: block;
-    padding: 4px 8px;
-    outline: 1px solid #62abff00;
+    font-size: 14px;
+    text-decoration: none;
     transition:
         outline 0.3s ease,
         color 0.3s ease;
-    text-decoration: none;
 }
 .iss__titleSwitch__navItem--active {
     pointer-events: none;
-    outline: 1px solid var(--issBrand);
-    background-color: var(--issBrand);
-    color: white;
+    color: var(--issBrand);
+    text-decoration: underline;
+}
+.iss__titleSwitch__title {
+    font-size: 28px;
 }
 .iss__titleSwitch__title > * {
     text-decoration: none;
     color: var(--issBrand);
     transition: color 0.3s ease;
-    font-size: 42px;
-}
-@media (max-width: 1024px) {
-    .iss__titleSwitch {
-        gap: 20px;
-    }
+    font-size: 28px;
 }
 @media (max-width: 768px) {
     .iss__titleSwitch__title > * {

frontend-app/src/components/ui/Logo/index.jsx

@@ -7,7 +7,7 @@ export default function Logo() {
   return (
     <Link to="/" className='iss__brand'>
       <img src='/images/iss_logo.svg' alt='iss_logo' className="iss__brand__logo"/>
-      <span className='iss__brand__name'>DataCollection Tool</span>
+      <span className='iss__brand__name'>Data Collection Tool</span>
     </Link>
   );
 }

frontend-app/src/components/ui/Logo/styles.css

@@ -1,20 +1,28 @@
 .iss__brand {
-  display: flex;
-  place-items: center;
-  gap: 12px;
-  text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    gap: 8px;
+    text-decoration: none;
+    padding-right: 8px;
+    border-right: 1px solid #62abff57;
+    transition: border-color 0.3s ease;
 }
 .iss__brand__logo {
-  width: 100px;
-  height: 60px;
+    width: 100px;
 }
 .iss__brand__name {
-  text-align: center;
-  color: var(--issBrand);
-  transition: opacity 0.3s ease;
+    font-size: 12px;
+    text-align: center;
+    color: var(--issBrand);
+    opacity: 0.4;
+    transition: opacity 0.3s ease;
+}
+@media (hover: hover) {
+    .iss__brand:hover {
+        border-color: var(--issBrand);
+    }
+    .iss__brand:hover .iss__brand__name {
+        opacity: 1;
+    }
 }
-@media (hover:hover) {
-  .iss__brand:hover .iss__brand__name {
-    opacity: 0.7;
-  }
-}