Move css into theme folder

src/styles/App-styles.ts

@@ -0,0 +1,260 @@
+import { Typography, Box, TextField, InputLabel } from '@mui/material';
+import { styled } from '@mui/system';
+
+export const AppContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  width: '100vw',
+  height: '100vh',
+  radius: '15px',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  overflow: 'hidden',
+}));
+
+export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'space-between',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  width: '60px',
+  height: '100%',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  width: '100%px',
+  height: '60px',
+  padding: '20px',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const TextP = styled(Typography)(({ theme }) => ({
+  fontSize: '13px',
+  fontWeight: 600,
+  fontFamily: 'Inter',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const TextItalic = styled('span')(({ theme }) => ({
+  fontSize: '13px',
+  fontWeight: 600,
+  fontFamily: 'Inter',
+  fontStyle: 'italic',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const TextSpan = styled('span')(({ theme }) => ({
+  fontSize: '13px',
+  fontFamily: 'Inter',
+  fontWeight: 800,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AddressBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  border: `1px solid ${
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.3)'
+  }`,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: 'auto',
+  height: '25px',
+  padding: '5px 15px',
+  gap: '5px',
+  borderRadius: '100px',
+  fontFamily: 'Inter',
+  fontSize: '12px',
+  fontWeight: 600,
+  lineHeight: '14.52px',
+  textAlign: 'left',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(41, 41, 43, 1)'
+        : 'rgba(240, 240, 240, 1)',
+    color: theme.palette.mode === 'dark' ? '#fff' : '#000',
+
+    'svg path': {
+      fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
+    },
+  },
+}));
+
+export const CustomButton = styled(Box)(({ theme }) => ({
+  boxSizing: 'border-box',
+  padding: '15px 20px',
+  gap: '10px',
+
+  border: `0.5px solid ${
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.3)'
+  }`,
+  filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
+  borderRadius: '5px',
+
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  width: 'fit-content',
+  minWidth: '160px',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+
+  fontWeight: 600,
+  fontFamily: 'Inter',
+  textAlign: 'center',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(41, 41, 43, 1)'
+        : 'rgba(230, 230, 230, 1)',
+    color: '#fff',
+
+    'svg path': {
+      fill: '#fff',
+    },
+  },
+}));
+
+interface CustomButtonProps {
+  bgColor?: string;
+  color?: string;
+}
+
+export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
+  ({ bgColor, color, theme }) => ({
+    boxSizing: 'border-box',
+    padding: '15px 20px',
+    gap: '10px',
+    border: `0.5px solid ${
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.5)'
+        : 'rgba(0, 0, 0, 0.3)'
+    }`,
+    filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
+    borderRadius: 5,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 'fit-content',
+    transition: 'all 0.2s',
+    minWidth: 160,
+    cursor: 'pointer',
+    fontWeight: 600,
+    fontFamily: 'Inter',
+    textAlign: 'center',
+    opacity: 0.7,
+
+    // Color and backgroundColor with fallbacks
+    backgroundColor:
+      bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
+    color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
+
+    '&:hover': {
+      opacity: 1,
+      backgroundColor:
+        bgColor ||
+        (theme.palette.mode === 'dark'
+          ? 'rgba(41, 41, 43, 1)'
+          : 'rgba(230, 230, 230, 1)'),
+      color: color || '#fff',
+      svg: {
+        path: {
+          fill: color || '#fff',
+        },
+      },
+    },
+  })
+);
+
+export const CustomInput = styled(TextField)(({ theme }) => ({
+  width: '183px', // Adjust the width as needed
+  borderRadius: '5px',
+  // backgroundColor: "rgba(30, 30, 32, 1)",
+  outline: 'none',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  input: {
+    fontSize: 10,
+    fontFamily: 'Inter',
+    fontWeight: 400,
+    color: 'white',
+    '&::placeholder': {
+      fontSize: 16,
+      color: 'rgba(255, 255, 255, 0.2)',
+    },
+    outline: 'none',
+    padding: '10px',
+  },
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+    '&:hover fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+    '&.Mui-focused fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+  },
+  '& .MuiInput-underline:before': {
+    borderBottom: 'none',
+  },
+  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
+    borderBottom: 'none',
+  },
+  '& .MuiInput-underline:after': {
+    borderBottom: 'none',
+  },
+}));
+
+export const CustomLabel = styled(InputLabel)(({ theme }) => ({
+  fontWeight: 400,
+  fontFamily: 'Inter',
+  fontSize: '10px',
+  lineHeight: '12px',
+  color:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.5)',
+}));

src/styles/ThemeContext.tsx

@@ -1,29 +0,0 @@
-import { createContext, useContext, useState, useMemo } from 'react';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from './theme';
-
-const ThemeContext = createContext({
-  themeMode: 'light',
-  toggleTheme: () => {},
-});
-
-export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
-  const [themeMode, setThemeMode] = useState('light');
-
-  const theme = useMemo(
-    () => (themeMode === 'light' ? lightTheme : darkTheme),
-    [themeMode]
-  );
-
-  const toggleTheme = () => {
-    setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
-      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
-    </ThemeContext.Provider>
-  );
-};
-
-export const useThemeContext = () => useContext(ThemeContext);

src/styles/ThemeSelector.tsx

@@ -1,77 +0,0 @@
-import { useThemeContext } from "./ThemeContext";
-import { styled, Switch } from "@mui/material";
-
-const ThemeSwitch = styled(Switch)(({ theme }) => ({
-  width: 62,
-  height: 34,
-  padding: 7,
-  "& .MuiSwitch-switchBase": {
-    margin: 1,
-    padding: 0,
-    transform: "translateX(6px)",
-    "&.Mui-checked": {
-      color: "#fff",
-      transform: "translateX(22px)",
-      "& .MuiSwitch-thumb:before": {
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-          "#fff"
-        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
-      },
-      "& + .MuiSwitch-track": {
-        opacity: 1,
-        backgroundColor: "#aab4be",
-        ...theme.applyStyles("dark", {
-          backgroundColor: "#8796A5",
-        }),
-      },
-    },
-  },
-  "& .MuiSwitch-thumb": {
-    backgroundColor: "#001e3c",
-    width: 32,
-    height: 32,
-    "&::before": {
-      content: "''",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "center",
-      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        "#fff"
-      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
-    },
-    ...theme.applyStyles("dark", {
-      backgroundColor: "#003892",
-    }),
-  },
-  "& .MuiSwitch-track": {
-    opacity: 1,
-    backgroundColor: "#aab4be",
-    borderRadius: 20 / 2,
-    ...theme.applyStyles("dark", {
-      backgroundColor: "#8796A5",
-    }),
-  },
-}));
-
-const ThemeSelector = ({ style }) => {
-  const { themeMode, toggleTheme } = useThemeContext();
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "1px",
-        ...style,
-      }}
-    >
-      <ThemeSwitch checked={themeMode === "dark"} onChange={toggleTheme} />
-    </div>
-  );
-};
-
-export default ThemeSelector;

src/styles/index.css

@@ -0,0 +1,137 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+}
+
+:root {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box !important;
+  word-break: break-word;
+  --color-instance: #1e1e20;
+  --color-instance-popover-bg: #222222;
+  --Mail-Background: rgba(49, 51, 56, 1);
+  --new-message-text: black;
+  --bg-primary: rgba(31, 32, 35, 1);
+  --bg-2: #27282c;
+  --bg-3: rgba(0, 0, 0, 0.1);
+  --unread: #4297e2;
+  --danger: #b14646;
+  --apps-circle: #1f2023;
+  --green: #5eb049;
+}
+
+body {
+  margin: 0px;
+  overflow: hidden;
+}
+
+.image-container {
+  position: relative;
+}
+
+.image-container img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.5s ease; /* Optional: adds a fade effect */
+}
+
+.image-container .hover-image {
+  opacity: 0;
+}
+
+.image-container:hover .hover-image {
+  opacity: 1;
+}
+
+.image-container:hover .base-image {
+  opacity: 0.6;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-track:hover {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #444444;
+  border-radius: 8px;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  transition: 0.3s background-color;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #363636;
+}
+
+@property --var1 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+.scrollable-container {
+  transition: --var1 0.4s;
+}
+
+.scrollable-container:hover {
+  --var1: #444444;
+}
+
+.scrollable-container::-webkit-scrollbar-thumb {
+  background-color: var(--var1);
+  border-radius: 8px;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  opacity: 0;
+}
+
+/* Mobile-specific scrollbar styles */
+@media only screen and (max-width: 600px) {
+  ::-webkit-scrollbar {
+    width: 8px; /* Narrower scrollbar width on mobile */
+    height: 6px; /* Narrower scrollbar height on mobile */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px; /* Adjust the radius for a narrower thumb */
+    border: 2px solid transparent; /* Narrower thumb border */
+  }
+}
+
+.group-list::-webkit-scrollbar-thumb:hover {
+  background-color: whitesmoke;
+}
+
+html,
+body {
+  overscroll-behavior: none !important;
+}
+
+.swiper {
+  width: 100%;
+}

src/styles/theme.ts

@@ -91,7 +91,7 @@ const lightTheme = createTheme({
       light: '#f9f9fd',
     },
     secondary: {
-      main: '#1EAAF1',
+      main: '#c2deec',
     },
     background: {
       default: '#fafafa',
@@ -108,7 +108,7 @@ const lightTheme = createTheme({
       styleOverrides: {
         root: {
           boxShadow:
-            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;',
+            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(230, 200, 200, 0.06) 0px 1px 2px 0px;',
           borderRadius: '8px',
           transition: 'all 0.3s ease-in-out',
           '&:hover': {