changed: background colors and colors changes in various places

frontend/src/components/NavbarLinks.jsx

@@ -23,7 +23,7 @@ const NavbarLink = ({ label, icon, to, index, active, setActive }) => {
 
                 '&:hover': {
                     backgroundColor:
-                        theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+                        theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
                 },
             })}
             active={active === index}
@@ -31,13 +31,15 @@ const NavbarLink = ({ label, icon, to, index, active, setActive }) => {
             component={Link}
             to={to}
             icon={
-                <ThemeIcon variant="light">
+                <ThemeIcon variant="filled" color={active===index?'gray':'lime'}>
                     {icon}
                 </ThemeIcon>
             }
             label={
                 <Text size="sm">{label}</Text>
             }
+            color='lime'
+            variant='filled'
         >
         </NavLink>
     )

frontend/src/layout/MainLayout.jsx

@@ -34,7 +34,7 @@ const MainLayout = () => {
             }}
                 styles={{
                     main: {
-                        background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0]
+                        background: theme.colorScheme === 'dark' ? '#302e2a' : theme.colors.gray[0]
                     },
                     body: {
                         textAlign: 'center'
@@ -42,7 +42,7 @@ const MainLayout = () => {
                 }}
                 layout='alt'
                 navbar={
-                    <Navbar py="md" px="0" hiddenBreakpoint="md" hidden={!opened} width={{ md: 150 }}>
+                    <Navbar py="md" px="0" hiddenBreakpoint="md" sx={{backgroundColor:'#262523'}} hidden={!opened} width={{ md: 150 }}>
                         <Navbar.Section>
                             <Text size={30} weight={700}>Chess</Text>
                         </Navbar.Section>

frontend/src/main.jsx

@@ -5,7 +5,7 @@ import './index.css'
 import { MantineProvider } from '@mantine/styles'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'Segoe UI' }}>
+  <MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'Segoe UI',primaryColor:'lime' }}>
     <App />
   </MantineProvider>
 )

frontend/src/pages/Play/ChallengeFriend.jsx

@@ -12,7 +12,8 @@ const ChallengeFriend = () => {
         maw={450} sx={{
             width: '100%',
             height: '600px',
-            textAlign: 'center'
+            textAlign: 'center',
+            backgroundColor:'#262523'
         }}
         >
             <Form action={`/play/friend/${friend_username}`} method='POST'>

frontend/src/pages/Play/Play.jsx

@@ -7,7 +7,8 @@ const Play = () => {
         <Card maw={450} sx={{
             width: '100%',
             height: '600px',
-            textAlign: 'center'
+            textAlign: 'center',
+            backgroundColor:'#262523'
         }}>
             <Flex gap="5px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
                 <Title order={2} >Play Chess</Title>
@@ -28,7 +29,7 @@ const CardItem = ({ label, description, src, to }) => {
             label={label}
             icon={<Image src={src} width={50} />}
             description={description}
-            sx={{ backgroundColor: 'black', borderRadius: '5px' }}
+            sx={{ backgroundColor: '#1f1f1a', borderRadius: '5px' }}
         />
     )
 }

frontend/src/pages/Play/PlayFriend.jsx

@@ -41,7 +41,8 @@ const PlayFriend = () => {
                 maw={450} sx={{
                     width: '100%',
                     height: '600px',
-                    textAlign: 'center'
+                    textAlign: 'center',
+                    backgroundColor:'#262523'
                 }}
             >
                 <Flex align="center" justify="center" gap="xs" my="lg">

frontend/src/pages/Settings/Settings.jsx

@@ -15,7 +15,7 @@ const Settings = () => {
             </Flex>
             <Flex justify="start" direction="row" gap="xl" w="100%">
                 <Flex w="300px" gap="3px" align="center" justify="start" direction="column">
-                    {linksList.map((link, index) => <NavLink w="100%" p="10px" key={index} component={Link} sx={{ backgroundColor: 'gray' }} label={link.label} icon={link.icon} to={link.to} />)}
+                    {linksList.map((link, index) => <NavLink w="100%" p="10px" key={index} component={Link} sx={{ backgroundColor: '#262523' }} label={link.label} icon={link.icon} to={link.to} />)}
                 </Flex>
                 <Outlet />
             </Flex>