custom theme like epic games

Herman-Riah19 · Nov 17, 2023 · 24ce9e4 · 24ce9e4
1 parent 49f036e
commit 24ce9e4
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 7 deletions.
diff --git a/resources/js/Components/MenuBar/Menubar.js b/resources/js/Components/MenuBar/Menubar.js
@@ -6,7 +6,7 @@ import { Link } from '@inertiajs/inertia-react'
 
 const Menubar = ({ onClick }) => {
   return (
-    <AppBar sx={{ boxShadow: 'none', background: '#35414c', color: '#fff' }}>
+    <AppBar sx={{ boxShadow: 'none', background: '#18181C', color: '#fff' }}>
       <Toolbar sx={{ p: '0' }}>
         <ListItemIcon sx={{ color: 'white', size: '25px' }} onClick={onClick}>
           <Menu />

diff --git a/resources/js/Components/MenuBar/Navbar.js b/resources/js/Components/MenuBar/Navbar.js
@@ -85,7 +85,7 @@ const Navbar = ({ auth, authAvatar, keyWord }) => {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar sx={{ bgcolor: "#212439" }}>
+      <AppBar sx={{ bgcolor: "#18181C" }}>
         <Toolbar sx={{ p: "0" }}>
           <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
             <Link href="/" style={{ textDecoration: "none", color: "#fff" }}>
@@ -141,7 +141,7 @@ const Navbar = ({ auth, authAvatar, keyWord }) => {
               >
                 <Link
                   href={page.link}
-                  style={{ textDecoration: "none", color: "#fff" }}
+                  style={{ textDecoration: "none", color: "#fff", textTransform:"capitalize", fontWeight: '200' }}
                 >
                   {page.title}
                 </Link>

diff --git a/resources/js/Components/MenuBar/SectionBar.js b/resources/js/Components/MenuBar/SectionBar.js
@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { Logout, Person, Settings } from '@mui/icons-material'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountCircle from '@mui/icons-material/AccountCircle'
+import { Link } from "@inertiajs/inertia-react";
 
 const SectionBar = ({ isLoggedIn, authAvatar }) => {
     const [value, setValue] = useState(0)

diff --git a/resources/js/Components/MenuBar/Sidebar.js b/resources/js/Components/MenuBar/Sidebar.js
@@ -47,7 +47,7 @@ const Sidebar = ({ isOpen }) => {
     return (
         <MenuList sx={theme => ({
             position: 'fixed',
-            background:'#35414c',
+            background:'#18181C',
             zIndex: 1,
             height: '50rem',
             transition: 'width 2s',

diff --git a/resources/js/Pages/Home/Search.js b/resources/js/Pages/Home/Search.js
@@ -37,7 +37,7 @@ const Search = (props) => {
 
   useEffect(() => {
     setExistProducts(
-      otherProducts.filter((produ) => produ.name.toLowerCase().includes(search)) ||
+      otherProducts.filter((produ) => produ.name.toLowerCase().includes(search)) |
       otherProducts.filter((produ) => produ.description.toLowerCase().includes(search)))
   },[search])
 

diff --git a/resources/js/Style/theme.js b/resources/js/Style/theme.js
@@ -25,8 +25,8 @@ const theme = createTheme ({
       main: '#00cd5c',
     },
     background: {
-      default: '#181A2D',
-      paper: '#212439',
+      default: '#121212',
+      paper: '#18181C',
     },
     error: {
       main: red.A400,