diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts new file mode 100644 index 0000000..9774f06 --- /dev/null +++ b/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)( + ({ 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)', +})); diff --git a/src/styles/ThemeContext.tsx b/src/styles/ThemeContext.tsx deleted file mode 100644 index ed52fda..0000000 --- a/src/styles/ThemeContext.tsx +++ /dev/null @@ -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 ( - - {children} - - ); -}; - -export const useThemeContext = () => useContext(ThemeContext); diff --git a/src/styles/ThemeSelector.tsx b/src/styles/ThemeSelector.tsx deleted file mode 100644 index 5b55f53..0000000 --- a/src/styles/ThemeSelector.tsx +++ /dev/null @@ -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,')`, - }, - "& + .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,')`, - }, - ...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 ( -
- -
- ); -}; - -export default ThemeSelector; diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..3fd5ed7 --- /dev/null +++ b/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: ''; + 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%; +} diff --git a/src/styles/theme.ts b/src/styles/theme.ts index f036fe6..1ae2ea8 100644 --- a/src/styles/theme.ts +++ b/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': {