Bug fix

dear-diary/.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,12 @@
+favicon.ico,1701879327313,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
+manifest.json,1701879327314,4368aeaf848ae2e048765562c289452f33ad2a175c4b1951ea8bdf2ada0d5b10
+robots.txt,1701879327314,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
+asset-manifest.json,1704180228074,f8a89c935910b58ed94fdbb3d8e9eb659690ac0a3a78c213c72b8e427fd1f4e7
+index.html,1704180228074,443fc6856b54fcbb350f10317ab40f29b7015177cabac9ee24b765b0477c1187
+static/css/main.9c6b28c8.css,1704180228090,1edf76c00632245ad1bf38b355bd4bbdee2a01800c4b9c6eb43fec31b3c0fd77
+static/js/main.bd532879.js.LICENSE.txt,1704180228090,d31ce7e59ec7e7ef7af40ee3985d2dbf9aaee26a52023476fc98d981856f4ada
+static/js/787.97a755d5.chunk.js,1704180228098,80b29505546cb82bbae49a4595eb07131d17e7959ccd5453239d7652d6e6e308
+static/js/787.97a755d5.chunk.js.map,1704180228090,b102309d3478fab86053fcf07fc925203c452b3b7eb42a01f99f5932bfaff424
+static/css/main.9c6b28c8.css.map,1704180228090,9dddbe352e71eafb9c0e5c826cdf1d273fe1df8f944d031deaf121498a45d9cd
+static/js/main.bd532879.js,1704180228090,13e5730a36040c4080142aed653b75ff8c92763b25309d2febbc838bb0e857a7
+static/js/main.bd532879.js.map,1704180228099,3c12a228e5f00b61a007a15c78603f031ad340f41411a58ead1383c36d5feb28

dear-diary/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "dear-diary-emailusername-79cfe"
+  }
+}

dear-diary/firebase.json

@@ -0,0 +1,18 @@
+{
+  "hosting": {
+    "site": "dear-diary-thambara",
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+
+    ]
+  }
+}

dear-diary/src/App.tsx

@@ -2,27 +2,20 @@ import { Routes, Route } from 'react-router-dom';
 import SignInPage from './containers/SignInPage/SignInPage';
 import HomePage from './containers/HomePage/HomePage';
 import 'react-toastify/dist/ReactToastify.css';
-import { ToastContainer } from 'react-toastify';
-
-const routes = [
-  { path: '/', element: <SignInPage /> },
-  { path: '/home', element: <HomePage /> },
-];
-
-
+import { useAppSelector } from './redux/hooks';
+import { ReactElement } from 'react';
+import { routes, PrivateRoute } from './routes';
 
 function App() {
   return (
     <div>
-      <ToastContainer/>
       <Routes>
-      {routes.map((route, index) => (
-          <Route key={index} path={route.path} element={route.element} />
+        {routes.map((route, index) => (
+          PrivateRoute ( route.element, route.path ) 
         ))}
       </Routes>
     </div>
   );
 }
 
 export default App;
-

dear-diary/src/components/DearDiary/DearDiary.tsx

@@ -33,7 +33,7 @@ const SignInPageTitle = styled.div`
 const DearDiary = () => {
   return (
     <SignInPageHeaderBackground >
-      <SignInPageLogo src={"/logo.png"} alt="logo" />
+      <SignInPageLogo src={"https://res.cloudinary.com/dzsokhvfq/image/upload/v1703007756/jvxeozqwb43syppmtayv.png"} alt="logo" />
       <SignInPageTitle >Dear Diary</SignInPageTitle>
     </SignInPageHeaderBackground>
   );

dear-diary/src/components/DiaryCard/DiaryCard.tsx

@@ -3,26 +3,25 @@ import styled from "styled-components";
 
 const Card = styled.div`
   position: relative;
-  border: 1px solid #ccc;
   border-radius: 5px;
+  box-shadow: 0px 0px 3px 3px rgba(50, 50, 50, 0.05);
   padding: 12px;
-  margin-bottom: 5%;
+  margin-bottom: 8%;
   min-width: 190px;
   background-color: white;
-  max-width: 280px;
   height: fit-content;
   display: flex;
   flex-direction: column;
   transition: height 0.3s ease-in-out;
   z-index: 1;
 
   &:hover {
-    box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.638);
+    box-shadow: 0px 2px 2px 2px rgba(150, 150, 150, 0.4);
+    cursor: pointer;
   }
 
   &.expanded {
-    z-index: 5;
-    height: auto
+    z-index: 2;
   }
 
   @media screen and (max-width: 1600px) {
@@ -45,7 +44,7 @@ const CardTitle = styled.p`
   margin-top: 0;
   color: #4b465c;
   font-size: 18px;
-  font-weight: bold;
+  font-weight: 500;
   margin-bottom: 5px;
 `;
 

dear-diary/src/components/Navbar/Navbar.tsx

@@ -1,4 +1,3 @@
-
 import styled from 'styled-components';
 import AppBar from '@mui/material/AppBar';
 import Container from '@mui/material/Container';
@@ -9,16 +8,17 @@ import Profile from '../Profile/Profile';
 const StyledAppBar = styled(AppBar)`
     background-color: transparent !important;
     box-shadow: none !important;
-    `;
+`;
 
 const StyledContainer = styled(Container)`
     max-width: 2000px !important;
     padding: 9px 0 0 0 !important;
-    `;
+`;
 
 const ProfileWrapper = styled.div`
     flex-grow: 1;
-    padding-right: 2% !important; `
+    padding-right: 2% !important;
+`;
 
 function NavBar() {
     return (

dear-diary/src/components/Notification/Notification.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect } from 'react';
+import { hideNotification } from '../../redux/notification/notificationSlice';
+import { IconButton, Snackbar, SnackbarContent } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import styled from 'styled-components';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+
+const StyledSnackbarContent = styled(SnackbarContent)`
+    background-color: white !important;
+    color: black !important;
+    display: flex !important ;
+    justify-content: space-between !important;
+    align-items: center !important;
+    width: 100% !important;
+
+  .MuiSnackbarContent-message {
+    padding: 0px 0px 0px 0px !important;
+    width: 90% !important;}
+
+  .MuiSnackbarContent-action {
+    padding: 0px 0px 0px 0px !important;
+  }
+
+    @media screen and (max-width: 768px) {
+
+        .MuiSnackbarContent-message {
+            width: max-content !important;
+        }
+    }
+`;
+
+const StyledSnackbar = styled(Snackbar)`
+    z-index: 9999 !important;
+    position: fixed !important;
+    min-width: 300px !important;
+    max-width: 400px !important;
+    padding: 0 !important;
+    width: 100% !important;
+    top: 120px !important;
+    right: 20px!important;
+    height: 30px !important;
+
+    @media screen and (max-width: 400px) {
+        min-width: 290px !important;
+        width: 96% !important;
+    }
+`;
+
+const StyledMessageWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const StyledMessage = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+const StyledText = styled.div`
+    display: flex;
+    margin-right: 8px;
+    margin-left: 8px;
+    flex-direction: row;
+    font-weight: 550;
+    color: rgba(75, 70, 92, 0.8);
+    align-items: center;
+`;
+
+const StyledTime = styled.div`
+    color: rgba(75, 70, 92, 0.6);
+    display: flex;
+    align-items: center;
+    font-size: 11px;
+    margin-right: -5px !important;
+    margin-left: auto;
+
+    @media screen and (max-width: 400px) {
+        display: none !important;
+    }
+`;
+
+const StyledCloseIcon = styled(CloseIcon)`
+    color: rgba(75, 70, 92, 0.6);
+`;
+
+
+const StyledDonIcon = styled(DoneIcon)`
+    color: rgba(40, 199, 111, 0.6)
+`;
+
+const StyledErrorIcon = styled(ErrorOutlineIcon)`
+    color: red;
+`;
+
+
+const Notification: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { type, message, show, showtime, elapsedMinutes } = useAppSelector((state) => state.notification);
+
+    useEffect(() => {
+        let autoCloseTimeout: NodeJS.Timeout | null = null;
+
+        if (!showtime) {
+            autoCloseTimeout = setTimeout(() => {
+                dispatch(hideNotification());
+            }, 3000);
+        }
+
+        return () => {
+            if (autoCloseTimeout) {
+                clearTimeout(autoCloseTimeout);
+            }
+        };
+    }, [showtime]);
+
+    const handleCloseNotification = () => {
+        dispatch(hideNotification());
+    };
+
+    const getIcon = () => {
+        switch (type) {
+            case 'success':
+                return <StyledDonIcon />;
+            case 'error':
+                return <StyledErrorIcon />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <StyledSnackbar
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            open={show}
+            autoHideDuration={null}
+            onClose={handleCloseNotification}
+        >
+            <StyledSnackbarContent
+                message={
+                    <StyledMessageWrapper >
+                        <StyledMessage >
+                            {getIcon()}
+                            <StyledText>{message}</StyledText>
+                        </StyledMessage>
+                        {showtime && (
+                            <StyledTime>
+                                {elapsedMinutes} min{elapsedMinutes !== 1 && 's'} ago
+                            </StyledTime>
+                        )}
+                    </StyledMessageWrapper>
+                }
+                action={
+                    <IconButton
+                        size="small"
+                        aria-label="close"
+                        color="inherit"
+                        onClick={handleCloseNotification}
+                    >
+                        <StyledCloseIcon fontSize="small" />
+                    </IconButton>
+                }
+            />
+        </StyledSnackbar>
+    );
+};
+
+export default Notification;

dear-diary/src/components/Profile/Profile.tsx

@@ -5,37 +5,40 @@ import styled from 'styled-components';
 const ProfileWrapper = styled.div`
     padding: 5px 5px 1px 1px;
     margin-top: 10px;
-    z-index: 1;`
+    z-index: 1;
+`;
 
 const ProfileName = styled.div`
     z-index: 1;
     width: 100%;
-    margin-right: 2%;`
+    margin-right: 2%;
+`;
 
 const ProfileNameText = styled.div`
     z-index: 1;
     width: 100%;
     text-align: center;
     font-size: 14px;
-    color: rgb(0, 166, 255);
+    color: rgb(0, 0, 0);
 
     @media screen and (max-width: 768px) {
         transform: scale(0.85);
-    }`
+    }
+`;
 
 const ImageProfile = styled.img`
-    padding: 2% 2% 2% 2%;
     z-index: 1;
-    width: 90%;
+    width: 95%;
     border-radius: 50%;
-    object-fit: cover;`;
+    object-fit: cover;
+`;
 
 const Profile = () => {
     const name = useAppSelector((state) => state.user.userName)
     return (
         <ProfileWrapper>
             <ProfileName>
-                <ImageProfile src={"/user-avatar.svg"}></ImageProfile>
+                <ImageProfile src={"https://res.cloudinary.com/dzsokhvfq/image/upload/v1703007607/vpgx1dyoefgkgebbbrrs.svg"}></ImageProfile>
                 <ProfileNameText >
                     {name}
                 </ProfileNameText>