Merge branch 'main' into lovretomic/profile-page

apps/app/package.json

@@ -13,10 +13,11 @@
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^6.14.1"
   },
   "devDependencies": {
-    "@ddays-app/types": "1.0.0",
+    "@ddays-app/types": "*",
     "@eslint/js": "^9.13.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

apps/app/src/App.scss

@@ -9,6 +9,15 @@ p {
   margin: 0px;
 }
 
+body {
+  position: relative;
+  overflow-x: hidden;
+}
+
+html{
+  overflow-x: hidden;
+}
+
 * {
   box-sizing: border-box;
   -moz-box-sizing: border-box;

apps/app/src/App.tsx

@@ -1,7 +1,13 @@
 import { Router } from './router/Router';
+import { MessageToast } from './components/MessageToast';
 
 function App() {
-  return <Router />;
+  return (
+    <>
+      <MessageToast />
+      <Router />
+    </>
+  );
 }
 
 export default App;

apps/app/src/components/Button/Button.tsx

@@ -46,7 +46,7 @@ const Button: React.FC<ButtonProps> = ({
         {...handlers}>
         <div className={c.content}>
           <img className={c.mr16} src={icon} alt='' />
-          <p>{children}</p>
+          <span>{children}</span>
         </div>
       </button>
     );
@@ -61,7 +61,7 @@ const Button: React.FC<ButtonProps> = ({
       })}
       {...handlers}>
       <div className={c.content}>
-        <p>{children}</p>
+        <span>{children}</span>
       </div>
     </button>
   );

apps/app/src/components/Header/Header.tsx

@@ -14,7 +14,6 @@ export const Header = () => {
 
         {isMobile && <NotificationBell />}
       </div>
-
       <HeaderCardsWrapper />
     </div>
   );

apps/app/src/components/Header/HeaderCard/HeaderCard.module.scss

@@ -3,12 +3,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
-  height: 20vw;
-  width: 20vw;
-  min-width: 110px;
+  position: relative;
+  min-width: 136px;
   min-height: 110px;
-  max-width: 136px;
   max-height: 136px;
 
   border-radius: 8px;
@@ -26,7 +23,7 @@
     }
 
     p {
-      font-size: 14px !important;
+      font-size: 14px;
     }
   }
 
@@ -49,3 +46,14 @@
     margin: 0;
   }
 }
+
+.headerCardInner{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  gap: 12px;
+  width: 110px;
+  height: 100%;
+}

apps/app/src/components/Header/HeaderCard/HeaderCard.tsx

@@ -1,16 +1,38 @@
+import { PropsWithChildren } from 'react';
 import styles from './HeaderCard.module.scss';
 
 interface HeaderCardProps {
   img: string;
   text: string;
-  width: number;
-  height: number;
+  imgWidth: number;
+  imgHeight: number;
+  onClick?: () => void;
+  width?: number | null;
+  height?: number | null;
 }
-export const HeaderCard = ({ img, text, width, height }: HeaderCardProps) => {
+export const HeaderCard = ({
+  img,
+  text,
+  imgWidth,
+  imgHeight,
+  onClick = () => {},
+  width = null,
+  height = null,
+  children,
+}: PropsWithChildren<HeaderCardProps>) => {
   return (
-    <div className={styles.headerCard}>
-      <img src={img} alt={text} width={width} height={height} />
-      <p>{text}</p>
+    <div
+      className={styles.headerCard}
+      onClick={onClick}
+      style={{
+        ...(width ? { width: `${width}px` } : {}),
+        ...(height ? { height: `${height}px` } : {}),
+      }}>
+      <div className={styles.headerCardInner}>
+        <img src={img} alt={text} width={imgWidth} height={imgHeight} />
+        <p>{text}</p>
+        {children}
+      </div>
     </div>
   );
 };

apps/app/src/components/Header/HeaderCardsWrapper/HeaderCardsWrapper.tsx

@@ -1,8 +1,10 @@
+import { useNavigate } from 'react-router-dom';
 import { HeaderCard } from '../HeaderCard/HeaderCard';
 import accreditationImage from './../../../assets/images/accreditationIcon.png';
 import enterCodeImage from './../../../assets/images/enterCodeIcon.png';
 import tShirtImage from './../../../assets/images/tShirtIcon.png';
 import styles from './HeaderCardsWrapper.module.scss';
+import { RouteNames } from '../../../router/routes';
 
 enum HeaderCards {
   ENTER_CODE,
@@ -16,42 +18,48 @@ type HeaderCardsInfo = {
   text: string;
   width: number;
   height: number;
+  onClick?: () => void;
 };
 
-const headerCards: HeaderCardsInfo[] = [
-  {
-    id: HeaderCards.ENTER_CODE,
-    img: `${enterCodeImage}`,
-    text: 'Unesi kod',
-    width: 77,
-    height: 34,
-  },
-  {
-    id: HeaderCards.ACCREDITATION,
-    img: `${accreditationImage}`,
-    text: 'Akreditacija',
-    width: 60,
-    height: 39,
-  },
-  {
-    id: HeaderCards.SHOPPING,
-    img: `${tShirtImage}`,
-    text: 'Shopping',
-    width: 80,
-    height: 36,
-  },
-];
-
 export const HeaderCardsWrapper = () => {
+  const navigate = useNavigate();
+  const headerCards: HeaderCardsInfo[] = [
+    {
+      id: HeaderCards.ENTER_CODE,
+      img: `${enterCodeImage}`,
+      text: 'Unesi kod',
+      width: 77,
+      height: 34,
+      onClick: () => {},
+    },
+    {
+      id: HeaderCards.ACCREDITATION,
+      img: `${accreditationImage}`,
+      text: 'Akreditacija',
+      width: 60,
+      height: 39,
+      onClick: () => {},
+    },
+    {
+      id: HeaderCards.SHOPPING,
+      img: `${tShirtImage}`,
+      text: 'Shopping',
+      width: 80,
+      height: 36,
+      onClick: () => navigate(RouteNames.SHOPPING),
+    },
+  ];
+
   return (
     <div className={styles.headerCardsWrapper}>
       {headerCards.map((card) => (
         <HeaderCard
           key={card.id}
           img={card.img}
           text={card.text}
-          width={card.width}
-          height={card.height}
+          imgWidth={card.width}
+          imgHeight={card.height}
+          onClick={card.onClick}
         />
       ))}
     </div>

apps/app/src/components/Header/NotificationBell/NotificationBell.module.scss

@@ -1,33 +1,34 @@
-.notification{
-    &Wrapper {
-        position: relative;
-    }
+.notification {
+  &Wrapper {
+    position: relative;
+    cursor: pointer;
+  }
 
-    &Icon{
-        margin: 0;
-        padding: 0;
-    }
-
-    &Badge{
-        position: absolute;
-        top: -15px;
-        right: -10px;
+  &Icon {
+    margin: 0;
+    padding: 0;
+  }
 
-        width: 27px;
-        height: 27px;
+  &Badge {
+    position: absolute;
+    top: -15px;
+    right: -10px;
 
-        background-color: $primary-highlight;
-        border: 2px solid $primary-black;
-        border-radius: 4px;
+    width: 27px;
+    height: 27px;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+    background-color: $primary-highlight;
+    border: 2px solid $primary-black;
+    border-radius: 4px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    @media (max-width: $breakpoint-mobile-lg) {
-        &Wrapper{
-            margin-right: 10px;
-        }
+  @media (max-width: $breakpoint-mobile-lg) {
+    &Wrapper {
+      margin-right: 10px;
     }
-}
+  }
+}

apps/app/src/components/Header/NotificationBell/NotificationBell.tsx

@@ -1,9 +1,15 @@
-import sprite from './../../../assets/sprite.svg';
+import sprite from '@/assets/sprite.svg';
 import styles from './NotificationBell.module.scss';
+import { useNavigate } from 'react-router-dom';
+import { RouteNames } from '../../../router/routes';
+
+export const NotificationBell: React.FC = () => {
+  const navigate = useNavigate();
 
-export const NotificationBell = () => {
   return (
-    <div className={styles.notificationWrapper}>
+    <div
+      className={styles.notificationWrapper}
+      onClick={() => navigate(RouteNames.NOTIFICATIONS)}>
       <svg className={styles.notificationIcon} width={32} height={32}>
         <use href={`${sprite}#notification-bell-icon`} />
       </svg>

apps/app/src/components/Input/Input.module.scss

@@ -15,7 +15,6 @@
 .inputWrapper {
   position: relative;
   width: 100%;
-  background-color: aqua;
 }
 
 .input {
@@ -75,8 +74,13 @@
   position: absolute;
   right: 0px;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-60%);
   background: transparent;
   border: none;
   cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

apps/app/src/components/Input/Input.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import c from './Input.module.scss';
 import clsx from 'clsx';
-import EyeIcon from '../../assets/icons/Eye open.svg';
-import EyeClosedIcon from '../../assets/icons/Eye closed.svg';
+import EyeIcon from '../../assets/icons/eye-open.svg';
+import EyeClosedIcon from '../../assets/icons/eye-closed.svg';
 
 type InputProps = {
   value: string;