Add notification bell and minor styling

The-DevBlog · Nov 13, 2023 · b8192e9 · b8192e9
1 parent 5985022
commit b8192e9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/devblog/devblog/ClientApp/src/components/Nav.tsx b/devblog/devblog/ClientApp/src/components/Nav.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import SignOut from "../pages/SignOut";
-import { MdMenu } from "react-icons/md";
+import { MdMenu, MdNotifications } from "react-icons/md";
 import { IsLoggedIn } from "../components/AuthenticationService";
 import { GetIsAdmin } from "./AuthenticationService";
 import "./styles/Nav.css";
@@ -48,8 +48,12 @@ const Nav = () => {
                     </div>
                 </Link>
 
+
+                <div className="notifications">
+                    <MdNotifications />
+                </div>
                 <div className="nav-drop-down">
-                    <MdMenu className="nav-icon" onClick={updateMenu} size={69} />
+                    <MdMenu className="nav-icon" onClick={updateMenu} />
 
                     <div className="nav-links" style={{ display: display }}>
                         <Link to="/" className={isActive("/")}>Home</Link>

diff --git a/devblog/devblog/ClientApp/src/components/styles/Nav.css b/devblog/devblog/ClientApp/src/components/styles/Nav.css
@@ -18,7 +18,7 @@
 }
 
 .logo {
-    font-size: 40px;
+    font-size: 38px;
     padding: 5px;
 }
 
@@ -32,9 +32,12 @@
     opacity: 1.0;
 }
 
-.nav-links,
-.nav-icon {
-    display: none;
+.notifications {
+    font-size: 35px;
+    margin-top: 23px;
+    margin-left: auto;
+    margin-right: 130px;
+    z-index: 21;
 }
 
 .nav-drop-down {
@@ -63,9 +66,11 @@
 }
 
 .nav-icon {
+    font-size: 69px;
     cursor: pointer;
     display: flex;
     margin-left: auto;
+    margin-top: 7px;
 }
 
 .nav-links {
@@ -90,6 +95,16 @@
 
 @media(max-width: 450px) {
     .logo {
-        font-size: 30px;
+        font-size: 25px;
+    }
+
+    .nav-icon {
+        font-size: 50px;
+    }
+
+    .notifications {
+        font-size: 25px;
+        margin-right: 85px;
+        margin-top: 19px;
     }
 }
diff --git a/devblog/devblog/ClientApp/src/pages/styles/Home.css b/devblog/devblog/ClientApp/src/pages/styles/Home.css
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 150px 20px 0px 20px;
+    margin: 92px 20px 0px 20px;
 }
 
 .update-video>button {

diff --git a/devblog/devblog/ClientApp/src/pages/styles/Posts.css b/devblog/devblog/ClientApp/src/pages/styles/Posts.css
@@ -3,17 +3,17 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 100px 20px 0px 20px;
+    margin: 90px 20px 10px 20px;
 }
 
 .pager:first-child {
     display: flex;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .pager:last-child {
     display: flex;
-    margin-bottom: 100px;
+    margin-bottom: 50px;
 }
 
 .pager span {

diff --git a/devblog/devblog/Controllers/VotesController.cs b/devblog/devblog/Controllers/VotesController.cs
@@ -1,5 +1,4 @@
 using devblog.Interfaces;
-using devblog.Models;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;