Popup more user friendly messages on login and register, enhance UI, …

…update logo and favicon

src/assets/css/style.scss

@@ -1235,59 +1235,28 @@ button:disabled {
 
 nav.main-nav {
     padding: 1rem 0;
-    border-bottom: 1px solid #ddd;
-    background-color: $dark-bg;
     position: relative;
 
-    background-image: radial-gradient(circle at center center, transparent, rgb(255, 255, 255)),
-        linear-gradient(
-            309deg,
-            rgba(90, 90, 90, 0.05) 0%,
-            rgba(90, 90, 90, 0.05) 50%,
-            rgba(206, 206, 206, 0.05) 50%,
-            rgba(206, 206, 206, 0.05) 100%
-        ),
-        linear-gradient(
-            39deg,
-            rgba(13, 13, 13, 0.05) 0%,
-            rgba(13, 13, 13, 0.05) 50%,
-            rgba(189, 189, 189, 0.05) 50%,
-            rgba(189, 189, 189, 0.05) 100%
-        ),
-        linear-gradient(
-            144deg,
-            rgba(249, 249, 249, 0.05) 0%,
-            rgba(249, 249, 249, 0.05) 50%,
-            rgba(111, 111, 111, 0.05) 50%,
-            rgba(111, 111, 111, 0.05) 100%
-        ),
-        linear-gradient(
-            166deg,
-            rgba(231, 231, 231, 0.05) 0%,
-            rgba(231, 231, 231, 0.05) 50%,
-            rgba(220, 220, 220, 0.05) 50%,
-            rgba(220, 220, 220, 0.05) 100%
-        ),
-        linear-gradient(
-            212deg,
-            rgba(80, 80, 80, 0.05) 0%,
-            rgba(80, 80, 80, 0.05) 50%,
-            rgba(243, 243, 243, 0.05) 50%,
-            rgba(243, 243, 243, 0.05) 100%
-        ),
-        radial-gradient(circle at center center, hsl(107, 19%, 100%), hsl(107, 19%, 100%));
-
     .container {
         position: static;
         display: flex;
         align-items: center;
     }
 
     .logo {
+        padding-left: 2rem;
+
         a {
-            display: flex;
-            align-items: center;
-            column-gap: 0.25rem;
+            display: block;
+            width: 60px;
+
+            img {
+                display: block;
+                max-width: 100%;
+                height: auto;
+                filter: hue-rotate(16deg);
+                transform: scale(2);
+            }
         }
     }
 
@@ -1433,8 +1402,9 @@ nav.main-nav {
                 color: inherit;
 
                 &.active {
-                    background-color: $secondary-color;
+                    background-image: linear-gradient($secondary-color, $primary-color);
                     color: ghostwhite;
+                    border-radius: 5px;
 
                     button {
                         font-weight: 900 !important;
@@ -1510,7 +1480,7 @@ nav.main-nav {
                 a,
                 button {
                     &.active {
-                        background-color: $secondary-color;
+                        border-radius: 0;
                     }
                 }
             }
@@ -1522,6 +1492,18 @@ nav.main-nav {
             }
         }
     }
+
+    @media (max-width: 480px) {
+        .logo {
+            padding-left: 8px;
+
+            a {
+                img {
+                    transform: scale(1.25);
+                }
+            }
+        }
+    }
 }
 
 .home,
@@ -1530,8 +1512,15 @@ nav.main-nav {
     position: relative;
 
     .user-profile {
-        margin-bottom: 7rem;
         display: flex;
+        align-items: baseline;
+        margin-bottom: 7rem;
+
+        .user-info {
+            p {
+                line-height: 2;
+            }
+        }
 
         .user-avatar {
             margin-left: auto;
@@ -1540,12 +1529,12 @@ nav.main-nav {
             img {
                 padding: 3px;
                 background-color: #eee;
-                border: 3px solid #ddd;
+                border: 3px solid #ccc;
                 display: inline-block;
                 vertical-align: middle;
                 max-width: 100%;
-                width: 4.5em;
-                height: 4.5em;
+                width: 5em;
+                height: 5em;
                 border-radius: 500rem;
             }
         }
@@ -1886,7 +1875,8 @@ nav.main-nav {
                         font-size: 1rem;
                     }
 
-                    &:hover {
+                    &:hover,
+                    &:active {
                         background-color: $primary-color;
                     }
                 }

src/components/auth/Login.jsx

@@ -69,7 +69,7 @@ class Login extends Form {
             <div className="login-form">
                 <div className="form-container">
                     <div className="form-title">
-                        <i className="fas fa-code-branch"></i>
+                        <i className="fas fa-sign-in-alt"></i>
                         <h2>log in to to-do</h2>
                     </div>
 

src/components/common/NavBar.jsx

@@ -14,10 +14,12 @@ class NavBar extends Component {
 
     navRef = React.createRef();
 
-    componentDidMount() {
-        let { height: navHeight } = this.navRef.current.getBoundingClientRect();
+    componentDidUpdate() {
+        const { height: navHeight } = this.navRef.current.getBoundingClientRect();
+        const domElmStyle = document.documentElement.style;
 
-        document.documentElement.style.setProperty("--nav-height", `${navHeight}px`);
+        +domElmStyle.getPropertyValue("--nav-height").split("px")[0] !== navHeight &&
+            domElmStyle.setProperty("--nav-height", `${navHeight}px`);
     }
 
     logoutUser = async () => {
@@ -69,7 +71,7 @@ class NavBar extends Component {
                 <div className="container">
                     <div className="logo">
                         <Link to="/">
-                            <img src={logo} alt="logo" width="60" height="60" />
+                            <img src={logo} alt="logo" />
                         </Link>
                     </div>
 

src/components/reusableComponents/TodosList.jsx

@@ -2,10 +2,6 @@ import React from "react";
 import Todo from "./Todo";
 
 const TodosList = ({ todos }) => {
-    //ToDo: Render all to-dos length
-    //ToDo: Render all completed to-dos length
-    //ToDo: Render all uncompleted to-dos length
-
     return (
         <div className="todos-container section-content">
             <div className="todos-info">