edit some styles

Bardala · Nov 16, 2023 · 23b2af2 · 23b2af2
1 parent 7452fad
commit 23b2af2
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 58 deletions.
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -1,5 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useState } from 'react';
+import { CiLogout } from 'react-icons/ci';
+import { IoIosPeople } from 'react-icons/io';
+import { TiHome } from 'react-icons/ti';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../context/AuthContext';
@@ -67,9 +70,15 @@ export const NavBar = () => {
         </div>
 
         <nav className="links">
-          <Link to="/u">users</Link>
-          <Link to="/">Home</Link>
-          <button onClick={handleClick}>logout</button>
+          <Link to="/u">
+            <IoIosPeople />
+          </Link>
+          <Link to="/">
+            <TiHome />
+          </Link>
+          <button onClick={handleClick}>
+            <CiLogout />
+          </button>
         </nav>
       </>
     </header>

diff --git a/frontend/src/components/NotificationMenu.tsx b/frontend/src/components/NotificationMenu.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { FaBell } from 'react-icons/fa';
+import { TbMessageCirclePlus } from 'react-icons/tb';
 import { Link } from 'react-router-dom';
 
 import { useClickOutside } from '../hooks/useClickOutside';
@@ -39,9 +39,9 @@ export const NotificationMenu = () => {
           cursor: 'pointer',
         }}
       >
-        <FaBell
+        <TbMessageCirclePlus
           className="notification-icon"
-          style={numOfMissedMegs! > 0 ? { color: 'green' } : { color: 'black' }}
+          style={numOfMissedMegs! > 0 ? { color: 'green' } : { color: '#dbd8d8' }}
           onClick={() => setShowNotification(!showNotification)}
         />
         {numOfMissedMegs! > 0 && (
@@ -59,35 +59,39 @@ export const NotificationMenu = () => {
       {showNotification && (
         <div className="notification-menu">
           <div className="notification-menu-header">
-            <h3>Notifications</h3>
+            <h3>Missed Messages</h3>
           </div>
           <div className="notification-menu-body">
-            {missedMsgs?.map((m, index) => (
-              <Link
-                to={`/space/${m.chat_spaceId}`}
-                key={index}
-                onClick={() => setShowNotification(false)}
-              >
-                You have{' '}
-                <span
-                  style={{
-                    color: 'green',
-                    fontWeight: 'bold',
-                  }}
+            {missedMsgs!.length > 0 ? (
+              missedMsgs?.map((m, index) => (
+                <Link
+                  to={`/space/${m.chat_spaceId}`}
+                  key={index}
+                  onClick={() => setShowNotification(false)}
                 >
-                  {m.unread_count}
-                </span>{' '}
-                new messages in space{' '}
-                <span
-                  style={{
-                    color: 'green',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  {m.spaceName}
-                </span>
-              </Link>
-            ))}
+                  You have{' '}
+                  <span
+                    style={{
+                      color: 'green',
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {m.unread_count}
+                  </span>{' '}
+                  new messages in space{' '}
+                  <span
+                    style={{
+                      color: 'green',
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {m.spaceName}
+                  </span>
+                </Link>
+              ))
+            ) : (
+              <p>No new messages</p>
+            )}
           </div>
         </div>
       )}

diff --git a/frontend/src/hooks/useProfileData.ts b/frontend/src/hooks/useProfileData.ts
@@ -61,7 +61,6 @@ export const useGetAllMissedMsgs = () => {
 
   const query = useQuery<AllUnReadMsgsRes, ApiError>(key, getAllUnReadMsgsApi(), {
     enabled: !!currUser?.jwt,
-    refetchInterval: 5000,
   });
 
   return { missedMsgs: query.data?.numberOfMsgs };

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -352,6 +352,14 @@ select {
     height: auto;
   }
 
+  .side-bar button {
+    font-size: 0.8rem;
+  }
+
+  .side-bar * {
+    font-size: 0.8rem;
+  }
+
   .space-chat {
     height: 420px;
     overflow-y: auto;

diff --git a/frontend/src/styles/blogList.css b/frontend/src/styles/blogList.css
@@ -13,15 +13,15 @@
     border: 1px solid #ddd;
     border-radius: 8px;
     background: #fafafa;
-    height: 300px;
+    /* height: 300px; */
     justify-content: space-between;
 }
 
-.blog-preview:hover {
+/* .blog-preview:hover {
     box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
     transform: scale(1.05);
     transition: all 0.3s ease-in-out;
-}
+} */
 
 .blog-header h2 {
     font-size: 24px;
@@ -59,7 +59,6 @@ time {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    /* white-space: nowrap; */
     max-width: 100%;
     max-height: 100%;
     line-height: 1.5;
@@ -149,21 +148,6 @@ time {
     font-family: 'Roboto', sans-serif;
 }
 
-/* .author::before {
-    background-image:
-        url("https://cdn-icons-png.flaticon.com/512/149/149071.png");
-}
-
-.comments-count::before {
-    background-image:
-        url("https://cdn-icons-png.flaticon.com/512/25/25663.png");
-}
-
-.likes-count::before {
-    background-image:
-        url("https://cdn-icons-png.flaticon.com/512/1077/1077035.png");
-} */
-
 @media screen and (max-width: 600px) {
     .blog-list {
         grid-template-columns: 1fr;
@@ -175,14 +159,18 @@ time {
     }
 
     .blog-header h2 {
-        font-size: 18px;
+        font-size: 16px;
     }
 
-    .blog-meta {
+    .blog-preview .blog-meta {
         font-size: 12px;
     }
 
-    .blog-excerpt {
+    .blog-meta * {
+        font-size: 4px;
+    }
+
+    .blog-excerpt p {
         font-size: 14px;
     }
 }
diff --git a/frontend/src/styles/navBar.css b/frontend/src/styles/navBar.css
@@ -68,7 +68,7 @@ button {
     display: flex;
     flex-direction: column;
     list-style: none;
-    height: 300px;
+    height: 180px;
     scrollbar-width: none;
     -ms-overflow-style: none;
     overflow-y: overlay;
@@ -77,6 +77,12 @@ button {
     align-items: center;
 }
 
+/* add this code to make the icons bigger */
+.navbar svg {
+    width: 24px;
+    height: 24px;
+}
+
 @media screen and (max-width: 768px) {
     .navbar {
         flex-wrap: wrap;
@@ -98,11 +104,38 @@ button {
     }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
+    .navbar {
+        grid-column: 1 / -1;
+        grid-row: 1 / 2;
+    }
+
+    .navbar h1 {
+        font-size: 1.2rem;
+    }
+
+    .navbar .username {
+        font-size: 0.8rem;
+    }
+
+    .navbar a,
+    button {
+        padding: 4px;
+        margin: 4px;
+        font-size: 0.8rem;
+    }
+
+    .navbar svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/* @media screen and (max-width: 480px) {
 
     .navbar a,
     button {
         padding: 8px;
         font-size: 0.8rem;
     }
-}
+} */