new styles for the home menu abr

jordus100 · May 17, 2024 · d48758f · d48758f
1 parent 31ad2fc
commit d48758f
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 68 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,43 +1,53 @@
 import './App.scss'
 import User from "./User/User";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import UserButtons from './User/UserButtons';
 
 function App() {
     return (
         <div className="app">
+            <header className="header">
+                <div className="logo">
+                    <h1>Bot-Wars</h1>
+                </div>
+                <nav className="nav">
+                    <ul className="menu-btns">
+                        <li className="menu-btn">
+                            <Link to="tournaments/home">
+                                <button className="btn">Tournaments</button>
+                            </Link>
+                        </li>
+                        <li className="menu-btn">
+                            <Link to="games">
+                                <button className="btn">Games</button>
+                            </Link>
+                        </li>
+                        <li className="menu-btn">
+                            <Link to="about">
+                                <button className="btn">About us</button>
+                            </Link>
+                        </li>
+                        <li className="menu-btn">
+                            <User isLoggedIn={false} />
+                        </li>
+                    </ul>
+                </nav>
+            </header>
+
+
+            <div className='container'>
+
             <UserButtons/>
 
-            <div className="title">
-                <h1>Bot-Wars</h1>
-                <div className="login-btns">
-                    <User isLoggedIn={false}/>
-                </div>
-            </div>
-            <div className="menu-btns">
-                <div className="menu-btn">
-                    <Link to="index.html">
-                        <button className="btn">Home</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="tournaments/home">
-                        <button className="btn">Tournaments</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="games">
-                        <button className="btn">Games</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="about">
-                        <button className="btn">About</button>
-                    </Link>
+                <h2>Hello World</h2>
+                <div>
+                    <p> 12334
+                    </p>
                 </div>
+
             </div>
         </div>
-    )
+    );
 }
 
 export default App
diff --git a/src/App.scss b/src/App.scss
@@ -4,52 +4,106 @@
   -webkit-box-sizing: border-box;
 }
 
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: #000;
+  color: #0f0;
+}
+
 .app {
+  text-align: center;
 
-  h1:hover {
-    cursor: default;
-  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background: rgba(0, 0, 0, 0.8);
+    border-bottom: 1px solid #0f0;
+    padding: 25px;
 
-  .title {
-    overflow: auto;
-    padding: 10px;
-  }
+    .logo {
+      flex-basis: 60%;
+      display: flex;
+      justify-content: left;
+      letter-spacing: 5px;
+    }
 
-  .login-btns {
-    float: right;
-  }
+    .logo h1 {
+      margin: 0;
+      font-size: 1.5em;
+      color: #0f0;
+    }
 
-  .btn {
-    display: inline-block;
-    width: 100%;
-  }
+    .nav {
+      flex-grow: 1;
 
-  .menu-btn {
-    margin: 3px;
-    width: 23%
-  }
-  .menu-btns.admin .menu-btn{
-    width: 32%
-  }
+      .menu-btns {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
 
+        .menu-btn {
+          display: flex;
+          align-items: center;
+          margin: 10px 0 10px 5px;
+          padding: 0;
 
-  .menu-btns {
-    margin-top: 25px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
+          a {
+            text-decoration: none;
+            display: flex;
+            align-items: center;
 
-  @media only screen and (max-width: 650px) {
-    .menu-btn {
-      width: 100%
-    }
-    .menu-btns.admin .menu-btn{
-      width: 100%
+            .btn, .login-btn {
+              padding: 10px 20px;
+              border: none;
+              // color: #000;
+              font-weight: bold;
+              cursor: pointer;
+              min-width: 130px;
+
+              &:hover {
+                background: #fff;
+                color: #000;
+              }
+            }
+
+           .signup-btn {
+              padding: 10px 20px;
+              // border: 3px solid #3D1680 ;
+              background-color: #0BE400 ;
+              color: #000;
+              border-radius: 20px;
+              font-weight: bold;
+              cursor: pointer;
+              min-width: 130px;
+              margin-right: 10px;
+
+              &:hover {
+                background: #fff;
+                color: #000;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
-  .login-btn {
-    width: 100%;
+  .container{
+    display: flex;
+    width: 70%;
+    opacity: 85%;
+    height: 100%;
+    margin: auto;
+    background-color: #161616;
+    // border-left: 3px dashed #0BE400;
+    // border-right: 3px dashed #0BE400;
+
   }
 }
diff --git a/src/User/User.js b/src/User/User.js
@@ -11,10 +11,10 @@ function User({ isAuthenticated, user, login, logout }) {
         ) : (
         <>
           <Link to="/login">
-              <button className="login-btn">Login</button>
+              <button className="login-btn">Log In</button>
           </Link>
           <Link to="/register">
-              <button className="login-btn">Register</button>
+              <button className="signup-btn">Sign Up</button>
           </Link>
         </>
         )}

diff --git a/src/index.js b/src/index.js
@@ -54,9 +54,6 @@ const router = createBrowserRouter([
     {
         path: "/tournaments/add",
         element: <AddTournamentForm />,
-        // In Future with more Turnaments
-        // Assuming getListOfTypesOfGames returns an array of game types
-        //element: <AddTournamentForm gameTypes={getListOfTypesOfGames()} />,
     },
     {
         path: "/tournaments/edit/:id",