Refactor theme

src/App-styles.ts

@@ -1,260 +0,0 @@
-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/App.tsx

@@ -34,8 +34,8 @@ import ltcLogo from './assets/ltc.png';
 import PersonSearchIcon from '@mui/icons-material/PersonSearch';
 import qortLogo from './assets/qort.png';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import Download from './assets/svgs/Download.svg';
-import Logout from './assets/svgs/Logout.svg';
+import { Download } from './assets/svgs/Download.tsx';
+import { Logout } from './assets/svgs/Logout.tsx';
 import { Return } from './assets/svgs/Return.tsx';
 import WarningIcon from '@mui/icons-material/Warning';
 import Success from './assets/svgs/Success.svg';
@@ -45,7 +45,6 @@ import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 import {
   createAccount,
-  generateRandomSentence,
   saveFileToDisk,
   saveSeedPhraseToDisk,
 } from './utils/generateWallet/generateWallet';
@@ -61,16 +60,14 @@ import {
   AuthenticatedContainerInnerRight,
   CustomButton,
   CustomButtonAccept,
-  CustomInput,
   CustomLabel,
   TextItalic,
   TextP,
   TextSpan,
-} from './App-styles';
+} from './styles/App-styles.ts';
 import { Spacer } from './common/Spacer';
 import { Loader } from './components/Loader';
 import { PasswordField, ErrorText } from './components';
-import { ChatGroup } from './components/Chat/ChatGroup';
 import { Group, requestQueueMemberNames } from './components/Group/Group';
 import { TaskManager } from './components/TaskManager/TaskManger';
 import { useModal } from './common/useModal';
@@ -149,7 +146,7 @@ import { BuyQortInformation } from './components/BuyQortInformation';
 import { QortPayment } from './components/QortPayment';
 import { GeneralNotifications } from './components/GeneralNotifications';
 import { PdfViewer } from './common/PdfViewer';
-import ThemeSelector from './styles/ThemeSelector.tsx';
+import ThemeSelector from './components/Theme/ThemeSelector.tsx';
 
 type extStates =
   | 'not-authenticated'
@@ -1652,16 +1649,16 @@ function App() {
                     },
                   }}
                 >
-                  <img
-                    src={Logout}
-                    onClick={() => {
-                      logoutFunc();
-                      setIsOpenDrawerProfile(false);
-                    }}
+                  <Logout
                     style={{
                       cursor: 'pointer',
                       width: '20px',
                       height: 'auto',
+                      color: 'rgba(255, 255, 255, 0.5)',
+                    }}
+                    onClick={() => {
+                      logoutFunc();
+                      setIsOpenDrawerProfile(false);
                     }}
                   />
                 </Tooltip>
@@ -2020,15 +2017,16 @@ function App() {
                 },
               }}
             >
-              <img
-                onClick={() => {
-                  setExtstate('download-wallet');
-                  setIsOpenDrawerProfile(false);
-                }}
-                src={Download}
+              <Download
                 style={{
                   cursor: 'pointer',
                   width: '20px',
+                  height: 'auto',
+                  color: 'rgba(255, 255, 255, 0.5)',
+                }}
+                onClick={() => {
+                  setExtstate('download-wallet');
+                  setIsOpenDrawerProfile(false);
                 }}
               />
             </Tooltip>
@@ -2155,18 +2153,6 @@ function App() {
                 maxWidth: '700px',
               }}
             >
-              {/* <img
-                style={{
-                  cursor: 'pointer',
-                  height: '24px',
-                  color:
-                    theme.palette.mode === 'dark'
-                      ? 'rgba(255, 255, 255, 0.5)'
-                      : 'rgba(0, 0, 0, 0.3)',
-                }}
-                onClick={returnToMain}
-                src={Return}
-              /> */}
               <Return
                 style={{
                   cursor: 'pointer',

src/index.css

@@ -1,137 +0,0 @@
-@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/main.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import './index.css';
+import '../src/styles/index.css';
 import './messaging/messagesToBackground';
 import { MessageQueueProvider } from './MessageQueueContext.tsx';
 import { RecoilRoot } from 'recoil';
-import { ThemeProvider } from './styles/ThemeContext.tsx';
+import { ThemeProvider } from './components/Theme/ThemeContext.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <>

src/styles/theme.ts

@@ -102,7 +102,6 @@ const lightTheme = createTheme({
       secondary: '#525252',
     },
   },
-
   components: {
     MuiCard: {
       styleOverrides: {