restyled buttons

Author: the-duckchild

src/Components/AddNavBar/Images/cute-astronaut-standing-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated_138676-8961.avif

@@ -8,27 +8,45 @@
 .navBarContainer {
     display: flex;
     background: $blueBackground;
-    justify-content: center;
+    justify-content: space-between;
 
 }
 
+.homeButton  {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+}
+
+.profilePageButton {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+}
+
 a {
     margin: 15px 10px 10px 10px;
-    background: $greyBackground;
-    color: $whiteFontColor;
-    background-color: $greyBackground;
-    box-shadow: 2px 2px $orangeBackground;
+    // background: $greyBackground;
+    color: $orangeBackground;
+    // background-color: $greyBackground;  
     padding: 2.5px 20px;
-    text-align: center;
+    // text-align: center;
+    // text-decoration: none;
+    // display: inline-block;
+    border: solid 2px $orangeBackground;
     text-decoration: none;
-    display: inline-block;
     border-radius: 25px;
 }
 
-a:active {
-     box-shadow: 1px 1px $orangeBackground;
-}
+
 
 a:hover {
-    color: $orangeBackground
+    
+    color: $whiteFontColor;
+    box-shadow: 0px 0px 3px 3px $greyBackground;
+}
+
+a:active {
+     box-shadow: none;
+     color: $orangeBackground;
 }

src/Components/AddNavBar/Images/earth_318-581287.avif

@@ -1,22 +1,26 @@
 import React from "react";
-import "./NavBar.scss"
+import "./NavBar.scss";
 import { Link } from "react-router";
 
-
 export default function NavBar() {
   return (
-    <div >
+    <div>
       <header className="navBarHeader">
         <nav className="navBarContainer">
-      <div>
-        <Link to="/" className = "homeButton">Home</Link>
-      </div>
-      <div>
-        <Link to="profile" className = "profilePageButton">Profile</Link>
-      </div>
-      </nav>
+          <div>
+            <Link to="/" className="homeButton">
+              <img src="./Images/earth_318-581287.avif" />
+              Home
+            </Link>
+          </div>
+          <div>
+            <Link to="profile" className="profilePageButton">
+              <img src="Images/cute-astronaut-standing-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated_138676-8961.avif" />
+              Profile
+            </Link>
+          </div>
+        </nav>
       </header>
-      
     </div>
   );
 }