diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 92d403a..6d98e04 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,17 +2,17 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended", ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parser: "@typescript-eslint/parser", + plugins: ["react-refresh"], rules: { - 'react-refresh/only-export-components': [ - 'off', + "react-refresh/only-export-components": [ + "off", { allowConstantExport: true }, ], }, -} +}; diff --git a/.gitignore b/.gitignore index e494b90..979a042 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ lerna-debug.log* node_modules dist +dist.zip dist-ssr *.local diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..e13c8ee --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules +build +dist \ No newline at end of file diff --git a/capacitor.config.ts b/capacitor.config.ts index c7f641f..87d927b 100644 --- a/capacitor.config.ts +++ b/capacitor.config.ts @@ -1,15 +1,15 @@ -import type { CapacitorConfig } from '@capacitor/cli'; +import type { CapacitorConfig } from "@capacitor/cli"; const config: CapacitorConfig = { - appId: 'org.Qortal.Qortal-Hub', - appName: 'Qortal-Hub', - webDir: 'dist', - "plugins": { - "LocalNotifications": { - "smallIcon": "qort", - "iconColor": "#09b6e8" - } - } + appId: "org.Qortal.Qortal-Hub", + appName: "Qortal-Hub", + webDir: "dist", + plugins: { + LocalNotifications: { + smallIcon: "qort", + iconColor: "#09b6e8", + }, + }, }; export default config; diff --git a/dist.zip b/dist.zip deleted file mode 100644 index 8f6f422..0000000 Binary files a/dist.zip and /dev/null differ diff --git a/index.html b/index.html index 43b8b56..74f19fd 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,9 @@ - + - - + - - Qortal Hub diff --git a/package-lock.json b/package-lock.json index b43a338..5e2803b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -106,6 +106,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", + "prettier": "^3.5.3", "rename-cli": "^6.2.1", "typescript": "^5.2.2", "vite": "^5.1.6", @@ -15990,6 +15991,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", diff --git a/package.json b/package.json index f5b6940..7e08596 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "format": "prettier --write .", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "test": "vitest", @@ -110,6 +111,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", + "prettier": "^3.5.3", "rename-cli": "^6.2.1", "typescript": "^5.2.2", "vite": "^5.1.6", diff --git a/src/App-styles.ts b/src/App-styles.ts index 4fcf3c0..96112b3 100644 --- a/src/App-styles.ts +++ b/src/App-styles.ts @@ -1,46 +1,49 @@ -import { - AppBar, - Button, - Toolbar, - Typography, - Box, - TextField, - InputLabel, -} from "@mui/material"; +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', + flexDirection: "column", width: "100vw", background: "rgba(39, 40, 44, 1)", 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" + 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', + flexDirection: "column", height: "100%", - width: "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', + flexDirection: "column", width: "60px", height: "100%", - background: "rgba(0, 0, 0, 0.1)" - + background: "rgba(0, 0, 0, 0.1)", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, })); + export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({ display: "flex", alignItems: "center", @@ -48,105 +51,129 @@ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({ width: "100%px", height: "60px", background: "rgba(0, 0, 0, 0.1)", - padding: '20px' + padding: "20px", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, })); export const TextP = styled(Typography)(({ theme }) => ({ fontSize: "13px", fontWeight: 600, fontFamily: "Inter", - color: "white" + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, })); export const TextItalic = styled("span")(({ theme }) => ({ fontSize: "13px", fontWeight: 600, fontFamily: "Inter", - color: "white", - fontStyle: "italic" + fontStyle: "italic", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, })); export const TextSpan = styled("span")(({ theme }) => ({ fontSize: "13px", fontFamily: "Inter", fontWeight: 800, - color: "white" + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, })); -export const AddressBox = styled(Box)` -display: flex; -border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); -justify-content: space-between; -align-items: center; -width: auto; -height: 25px; -padding: 5px 15px 5px 15px; -gap: 5px; -border-radius: 100px; -font-family: Inter; -font-size: 12px; -font-weight: 600; -line-height: 14.52px; -text-align: left; -color: var(--50-white, rgba(255, 255, 255, 0.5)); -cursor: pointer; -transition: all 0.2s; -&:hover { - background-color: rgba(41, 41, 43, 1); - color: white; - svg path { - fill: white; // Fill color changes to white on hover - } - } +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", -export const CustomButton = styled(Box)` + "svg path": { + fill: theme.palette.mode === "dark" ? "#fff" : "#000", + }, + }, +})); -/* Authenticate */ +export const CustomButton = styled(Box)(({ theme }) => ({ + boxSizing: "border-box", + padding: "15px 20px", + gap: "10px", -box-sizing: border-box; + 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", -padding: 15px 20px; -gap: 10px; + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + width: "fit-content", + minWidth: "160px", + cursor: "pointer", + transition: "all 0.2s", -border: 0.5px solid rgba(255, 255, 255, 0.5); -filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3)); -border-radius: 5px; + fontWeight: 600, + fontFamily: "Inter", + textAlign: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, - display: inline-flex; + "&:hover": { + backgroundColor: + theme.palette.mode === "dark" + ? "rgba(41, 41, 43, 1)" + : "rgba(230, 230, 230, 1)", + color: "#fff", - justify-content: center; - align-items: center; + "svg path": { + fill: "#fff", + }, + }, +})); - width: fit-content; - transition: all 0.2s; - color: black; - min-width: 160px; - cursor: pointer; - font-weight: 600; - font-family: Inter; - color: white; - text-align: center; - &:hover { - background-color: rgba(41, 41, 43, 1); - color: white; - svg path { - fill: white; // Fill color changes to white on hover - } - } -`; interface CustomButtonProps { bgColor?: string; color?: string; } + export const CustomButtonAccept = styled(Box)( - ({ bgColor, color }) => ({ + ({ bgColor, color, theme }) => ({ boxSizing: "border-box", padding: "15px 20px", gap: "10px", - border: "0.5px solid rgba(255, 255, 255, 0.5)", + 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", @@ -160,31 +187,31 @@ export const CustomButtonAccept = styled(Box)( fontFamily: "Inter", textAlign: "center", opacity: 0.7, - // Use the passed-in props or fallback defaults - backgroundColor: bgColor || "transparent", - color: color || "white", + + // 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 - ? bgColor - : "rgba(41, 41, 43, 1)", // fallback hover bg - color: color || "white", + backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"), + color: color || "#fff", svg: { path: { - fill: color || "white", + fill: color || "#fff", }, }, }, }) ); - -export const CustomInput = styled(TextField)({ +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", @@ -199,13 +226,13 @@ export const CustomInput = styled(TextField)({ }, "& .MuiOutlinedInput-root": { "& fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, "&:hover fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, "&.Mui-focused fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, }, "& .MuiInput-underline:before": { @@ -217,13 +244,15 @@ export const CustomInput = styled(TextField)({ "& .MuiInput-underline:after": { borderBottom: "none", }, -}); +})); -export const CustomLabel = styled(InputLabel)` - font-weight: 400; - font-family: Inter; - font-size: 10px; - line-height: 12px; - color: rgba(255, 255, 255, 0.5); - -` \ No newline at end of file +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)", +})); \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.tsx b/src/App.tsx index 2a3d1b6..a5dd940 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,6 @@ import { useRef, useState, } from "react"; -import "./App.css"; import { useDropzone } from "react-dropzone"; import { Box, @@ -3562,4 +3561,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index 978ff49..8625495 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/src/ExtStates/NotAuthenticated.tsx @@ -1008,4 +1008,4 @@ export const NotAuthenticated = ({ ); -}; +}; \ No newline at end of file diff --git a/src/assets/Icons/AppsIcon.tsx b/src/assets/Icons/AppsIcon.tsx index 753fe17..d2ad47c 100644 --- a/src/assets/Icons/AppsIcon.tsx +++ b/src/assets/Icons/AppsIcon.tsx @@ -1,6 +1,8 @@ -import React from "react"; +import { useTheme } from "@mui/material"; + +export const AppsIcon = ({ height = 31, width = 31 }) => { + const theme = useTheme(); -export const AppsIcon = ({ color, height = 31, width = 31 }) => { return ( { > ); diff --git a/src/assets/Icons/HomeIcon.tsx b/src/assets/Icons/HomeIcon.tsx index 38f880d..7659119 100644 --- a/src/assets/Icons/HomeIcon.tsx +++ b/src/assets/Icons/HomeIcon.tsx @@ -1,12 +1,20 @@ -import React from 'react'; +import { useTheme } from "@mui/material"; -export const HomeIcon= ({ color, height = 20, width = 23 }) => { - return ( - - - - +export const HomeIcon = ({ height = 20, width = 23 }) => { + const theme = useTheme(); - ); - }; - \ No newline at end of file + return ( + + + + ); +}; diff --git a/src/assets/Icons/LogoutIcon.tsx b/src/assets/Icons/LogoutIcon.tsx index 9288de1..30334f4 100644 --- a/src/assets/Icons/LogoutIcon.tsx +++ b/src/assets/Icons/LogoutIcon.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const LogoutIcon= ({ color, height = 20, width = 18}) => { return ( - + diff --git a/src/assets/Icons/MessagingIcon.tsx b/src/assets/Icons/MessagingIcon.tsx index 0de459b..c14d1d3 100644 --- a/src/assets/Icons/MessagingIcon.tsx +++ b/src/assets/Icons/MessagingIcon.tsx @@ -1,13 +1,30 @@ -import React from 'react'; +import { useTheme } from "@mui/material"; -export const MessagingIcon= ({ color, height = 31, width = 31 }) => { - return ( - - - - - +export const MessagingIcon = ({ color, height = 31, width = 31 }) => { + const theme = useTheme(); - ); - }; - \ No newline at end of file + const setColor = color ? color : theme.palette.text.primary + + return ( + + + + + ); +}; diff --git a/src/assets/Icons/MessagingIcon2.tsx b/src/assets/Icons/MessagingIcon2.tsx index 5cbdb98..da367cd 100644 --- a/src/assets/Icons/MessagingIcon2.tsx +++ b/src/assets/Icons/MessagingIcon2.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const MessagingIcon2= ({ color = '#8F8F91', height = 24, width =24 }) => { return ( - + diff --git a/src/assets/Icons/NotificationIcon2.tsx b/src/assets/Icons/NotificationIcon2.tsx index 10d7a03..3626d71 100644 --- a/src/assets/Icons/NotificationIcon2.tsx +++ b/src/assets/Icons/NotificationIcon2.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const NotificationIcon2= ({ color = 'white', height = 15, width = 15 }) => { return ( - + ); diff --git a/src/assets/Icons/ThreadsIcon.tsx b/src/assets/Icons/ThreadsIcon.tsx index 86dfeaa..3cf02cc 100644 --- a/src/assets/Icons/ThreadsIcon.tsx +++ b/src/assets/Icons/ThreadsIcon.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const ThreadsIcon= ({ color = 'white', height = 11, width = 15 }) => { return ( - + diff --git a/src/assets/Icons/WalletIcon.tsx b/src/assets/Icons/WalletIcon.tsx index 7a0cc58..92223bf 100644 --- a/src/assets/Icons/WalletIcon.tsx +++ b/src/assets/Icons/WalletIcon.tsx @@ -1,12 +1,26 @@ -import React from 'react'; +import React from "react"; -export const WalletIcon= ({ color, height, width }) => { - return ( - - - - - - ); - }; - \ No newline at end of file +export const WalletIcon = ({ color, height, width }) => { + return ( + + + + + ); +}; diff --git a/src/assets/svgs/CreateThreadIcon.tsx b/src/assets/svgs/CreateThreadIcon.tsx index 549ec2e..13b2442 100644 --- a/src/assets/svgs/CreateThreadIcon.tsx +++ b/src/assets/svgs/CreateThreadIcon.tsx @@ -1,20 +1,27 @@ -import React from 'react'; -import { styled } from '@mui/system'; -import { SVGProps } from './interfaces'; +import React from "react"; +import { styled } from "@mui/system"; +import { SVGProps } from "./interfaces"; // Create a styled container with hover effects -const SvgContainer = styled('svg')({ - '& path': { - fill: 'rgba(41, 41, 43, 1)', // Default to red if no color prop - } +const SvgContainer = styled("svg")({ + "& path": { + fill: "rgba(41, 41, 43, 1)", // Default to red if no color prop + }, }); -export const CreateThreadIcon:React.FC = ({ color, opacity }) => { +export const CreateThreadIcon: React.FC = ({ color, opacity }) => { return ( - - + + - - ); }; diff --git a/src/assets/svgs/SaveIcon.tsx b/src/assets/svgs/SaveIcon.tsx index 12c4999..606f42f 100644 --- a/src/assets/svgs/SaveIcon.tsx +++ b/src/assets/svgs/SaveIcon.tsx @@ -1,10 +1,24 @@ -import React from 'react' +import { useTheme } from "@mui/material"; + +export const SaveIcon = ({ color }) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary -export const SaveIcon = ({color = '#8F8F91'}) => { return ( - - - - - ) -} + + + + ); +}; diff --git a/src/assets/svgs/SendNewMessage.tsx b/src/assets/svgs/SendNewMessage.tsx index 33d7e86..5df8bbf 100644 --- a/src/assets/svgs/SendNewMessage.tsx +++ b/src/assets/svgs/SendNewMessage.tsx @@ -12,7 +12,7 @@ const SvgContainer = styled('svg')({ export const SendNewMessage:React.FC = ({ color, opacity }) => { return ( - + ); diff --git a/src/common/Spinners/BarSpinner/barSpinner.css b/src/common/Spinners/BarSpinner/barSpinner.css index 529bc50..916b5f5 100644 --- a/src/common/Spinners/BarSpinner/barSpinner.css +++ b/src/common/Spinners/BarSpinner/barSpinner.css @@ -1,19 +1,27 @@ /* HTML:
*/ .loader-bar { - width: 45px; - aspect-ratio: .75; - --c:no-repeat linear-gradient(currentColor 0 0); - background: - var(--c) 0% 100%, - var(--c) 50% 100%, - var(--c) 100% 100%; - background-size: 20% 65%; - animation: l8 1s infinite linear; + width: 45px; + aspect-ratio: 0.75; + --c: no-repeat linear-gradient(currentColor 0 0); + background: var(--c) 0% 100%, var(--c) 50% 100%, var(--c) 100% 100%; + background-size: 20% 65%; + animation: l8 1s infinite linear; +} + +@keyframes l8 { + 16.67% { + background-position: 0% 0%, 50% 100%, 100% 100%; } - @keyframes l8 { - 16.67% {background-position: 0% 0% ,50% 100%,100% 100%} - 33.33% {background-position: 0% 0% ,50% 0% ,100% 100%} - 50% {background-position: 0% 0% ,50% 0% ,100% 0% } - 66.67% {background-position: 0% 100%,50% 0% ,100% 0% } - 83.33% {background-position: 0% 100%,50% 100%,100% 0% } - } \ No newline at end of file + 33.33% { + background-position: 0% 0%, 50% 0%, 100% 100%; + } + 50% { + background-position: 0% 0%, 50% 0%, 100% 0%; + } + 66.67% { + background-position: 0% 100%, 50% 0%, 100% 0%; + } + 83.33% { + background-position: 0% 100%, 50% 100%, 100% 0%; + } +} diff --git a/src/common/customloader.css b/src/common/customloader.css index ff3dfbc..b77864d 100644 --- a/src/common/customloader.css +++ b/src/common/customloader.css @@ -1,7 +1,6 @@ - .lds-ellipsis { - color: white - } + color: white; +} .lds-ellipsis, .lds-ellipsis div { box-sizing: border-box; @@ -61,4 +60,3 @@ transform: translate(24px, 0); } } - diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index 5e6d086..194ae68 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/src/components/Apps/AppViewerContainer.tsx @@ -20,7 +20,7 @@ const AppViewerContainer = React.forwardRef(({ app, isSelected, hide, isDevMode, padding: 0; } * { - -ms-overflow-style: none; /* IE and Edge */ + -msOverflowStyle: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } *::-webkit-scrollbar { diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 995cd70..631186b 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -1,315 +1,381 @@ -import { - AppBar, - Button, - Toolbar, - Typography, - Box, - TextField, - InputLabel, - ButtonBase, - } from "@mui/material"; - import { styled } from "@mui/system"; - - export const AppsParent = styled(Box)(({ theme }) => ({ - display: "flex", - width: "100%", - flexDirection: "column", - height: "100%", - alignItems: "center", - overflow: 'auto', - // For WebKit-based browsers (Chrome, Safari, etc.) - "::-webkit-scrollbar": { - width: "0px", // Set the width to 0 to hide the scrollbar - height: "0px", // Set the height to 0 for horizontal scrollbar - }, - - // For Firefox - scrollbarWidth: "none", // Hides the scrollbar in Firefox - - // Optional for better cross-browser consistency - "-ms-overflow-style": "none" // Hides scrollbar in IE and Edge - })); - export const AppsContainer = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: 'space-evenly', - gap: '24px', - flexWrap: 'wrap', - alignItems: 'flex-start', - alignSelf: 'center' - - })); - export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ - display: "flex", - width: "100%", - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'center', - })); - export const AppsWidthLimiter = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'flex-start', - })); - export const AppsSearchContainer = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: 'space-between', - alignItems: 'center', - backgroundColor: '#434343', - borderRadius: '8px', - padding: '0px 10px', - height: '36px' - })); - export const AppsSearchLeft = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: 'flex-start', - alignItems: 'center', - gap: '10px', - flexGrow: 1, - flexShrink: 0 - })); - export const AppsSearchRight = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: 'flex-end', - alignItems: 'center', - flexShrink: 1 - })); - export const AppCircleContainer = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: "column", - gap: '5px', - alignItems: 'center', - width: '100%' - })); - export const Add = styled(Typography)(({ theme }) => ({ - fontSize: '36px', - fontWeight: 500, - lineHeight: '43.57px', - textAlign: 'left' - - })); - export const AppCircleLabel = styled(Typography)(({ theme }) => ({ - fontSize: '14px', - fontWeight: 500, - lineHeight: 1.2, - // whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - width: '120%', - '-webkit-line-clamp': '2', - '-webkit-box-orient': 'vertical', - 'display': '-webkit-box', - - })); - export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 500, - lineHeight: 1.2, - })); - export const AppCircle = styled(Box)(({ theme }) => ({ - display: "flex", - width: "75px", - flexDirection: "column", - height: "75px", - alignItems: 'center', - justifyContent: 'center', - borderRadius: '50%', - backgroundColor: "var(--apps-circle)", - border: '1px solid #FFFFFF' - })); +import { Typography, Box, ButtonBase } from "@mui/material"; +import { styled } from "@mui/system"; - export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'space-between', - alignItems: 'center', - width: '100%' - })); +export const AppsParent = styled(Box)(({ theme }) => ({ + display: "flex", + width: "100%", + flexDirection: "column", + height: "100%", + alignItems: "center", + overflow: "auto", + // For WebKit-based browsers (Chrome, Safari, etc.) + "::-webkit-scrollbar": { + width: "0px", // Set the width to 0 to hide the scrollbar + height: "0px", // Set the height to 0 for horizontal scrollbar + }, - export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-start', - alignItems: 'center', - gap: '12px' - })); - export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-end', - alignItems: 'center', - })); + // For Firefox + scrollbarWidth: "none", // Hides the scrollbar in Firefox - export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ - backgroundColor: "#247C0E", - width: '101px', - height: '29px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '25px', - alignSelf: 'center' - })); + // Optional for better cross-browser consistency + "-msOverflowStyle": "none", // Hides scrollbar in IE and Edge - export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ - fontSize: '14px', - fontWeight: 500, - lineHeight: 1.2, - })); + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppPublishTagsContainer = styled(Box)(({theme})=> ({ - gap: '10px', - flexWrap: 'wrap', - justifyContent: 'flex-start', - width: '100%', - display: 'flex' - })) +export const AppsContainer = styled(Box)(({ theme }) => ({ + display: "flex", + width: "90%", + justifyContent: "space-evenly", + gap: "24px", + flexWrap: "wrap", + alignItems: "flex-start", + alignSelf: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); +export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ + display: "flex", + width: "100%", + flexDirection: "column", + justifyContent: "flex-start", + alignItems: "center", + backgroundColor: theme.palette.background.paper, +})); - export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: "column", - justifyContent: 'center', - alignItems: 'flex-start', - })); +export const AppsWidthLimiter = styled(Box)(({ theme }) => ({ + display: "flex", + width: "90%", + flexDirection: "column", + justifyContent: "flex-start", + alignItems: "flex-start", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppInfoAppName = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 500, - lineHeight: 1.2, - textAlign: 'start' - })); - export const AppInfoUserName = styled(Typography)(({ theme }) => ({ - fontSize: '13px', - fontWeight: 400, - lineHeight: 1.2, - color: '#8D8F93', - textAlign: 'start' - })); +export const AppsSearchContainer = styled(Box)(({ theme }) => ({ + display: "flex", + width: "90%", + justifyContent: "space-between", + alignItems: "center", + borderRadius: "8px", + padding: "0px 10px", + height: "36px", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); +export const AppsSearchLeft = styled(Box)(({ theme }) => ({ + display: "flex", + width: "90%", + justifyContent: "flex-start", + alignItems: "center", + gap: "10px", + flexGrow: 1, + flexShrink: 0, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppsNavBarParent = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - height: '60px', - backgroundColor: '#1F2023', - padding: '0px 10px', - position: "fixed", - bottom: 0, - zIndex: 1, - })); +export const AppsSearchRight = styled(Box)(({ theme }) => ({ + display: "flex", + width: "90%", + justifyContent: "flex-end", + alignItems: "center", + flexShrink: 1, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppsNavBarLeft = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-start', - alignItems: 'center', - flexGrow: 1 - })); - export const AppsNavBarRight = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-end', - alignItems: 'center', - })); +export const AppCircleContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + gap: "5px", + alignItems: "center", + width: "100%", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const TabParent = styled(Box)(({ theme }) => ({ - height: '36px', - width: '36px', - backgroundColor: '#434343', - position: 'relative', - borderRadius: '50%', - display: 'flex', - alignItems: 'center', - justifyContent: 'center' - })); +export const Add = styled(Typography)(({ theme }) => ({ + fontSize: "36px", + fontWeight: 500, + lineHeight: "43.57px", + textAlign: "left", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - backgroundColor: '#181C23' - })); +export const AppCircleLabel = styled(Typography)(({ theme }) => ({ + fontSize: "14px", + fontWeight: 500, + lineHeight: 1.2, + // whiteSpace: 'nowrap', + overflow: "hidden", + textOverflow: "ellipsis", + width: "120%", + "-webkit-line-clamp": "2", + "-webkit-box-orient": "vertical", + display: "-webkit-box", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-start', - alignItems: 'center', - })); - export const PublishQAppCTARight = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'flex-end', - alignItems: 'center', - })); +export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ + fontSize: "16px", + fontWeight: 500, + lineHeight: 1.2, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({ - width: '101px', - height: '29px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '25px', - border: '1px solid #FFFFFF' - })); - export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: 'center', - alignItems: 'center', - width: '60px', - height: '60px', - backgroundColor: '#4BBCFE' - })); - - export const PublishQAppInfo = styled(Typography)(({ theme }) => ({ - fontSize: '10px', - fontWeight: 400, - lineHeight: 1.2, - fontStyle: 'italic' - })); +export const AppCircle = styled(Box)(({ theme }) => ({ + display: "flex", + width: "75px", + flexDirection: "column", + height: "75px", + alignItems: "center", + justifyContent: "center", + borderRadius: "50%", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + border: "1px solid #FFFFFF", +})); - export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({ - width: '101px', - height: '30px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '5px', - backgroundColor: '#0091E1', - color: 'white', - fontWeight: 600, - fontSize: '10px' - })); +export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + width: "100%", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); +export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + gap: "12px", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppsCategoryInfo = styled(Box)(({ theme }) => ({ - display: "flex", - alignItems: 'center', - width: '100%', - })); +export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-end", + alignItems: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); - export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: 'column', - })); - export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({ - fontSize: '12px', - fontWeight: 700, - lineHeight: 1.2, - color: '#8D8F93', - })); - export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({ - fontSize: '12px', - fontWeight: 500, - lineHeight: 1.2, - color: '#8D8F93', - })); - export const AppsInfoDescription = styled(Typography)(({ theme }) => ({ - fontSize: '13px', - fontWeight: 300, - lineHeight: 1.2, - width: '90%', - textAlign: 'start' - })); \ No newline at end of file +export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ + backgroundColor: "#247C0E", + color: theme.palette.text.primary, + width: "101px", + height: "29px", + display: "flex", + justifyContent: "center", + alignItems: "center", + borderRadius: "25px", + alignSelf: "center", +})); + +export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ + fontSize: "14px", + fontWeight: 500, + lineHeight: 1.2, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({ + gap: "10px", + flexWrap: "wrap", + justifyContent: "flex-start", + width: "100%", + display: "flex", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "flex-start", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppInfoAppName = styled(Typography)(({ theme }) => ({ + fontSize: "16px", + fontWeight: 500, + lineHeight: 1.2, + textAlign: "start", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppInfoUserName = styled(Typography)(({ theme }) => ({ + fontSize: "13px", + fontWeight: 400, + lineHeight: 1.2, + textAlign: "start", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsNavBarParent = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + width: "100%", + height: "60px", + padding: "0px 10px", + position: "fixed", + bottom: 0, + zIndex: 1, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsNavBarLeft = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + flexGrow: 1, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsNavBarRight = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-end", + alignItems: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const TabParent = styled(Box)(({ theme }) => ({ + height: "36px", + width: "36px", + position: "relative", + borderRadius: "50%", + display: "flex", + alignItems: "center", + justifyContent: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + width: "100%", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppCTARight = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "flex-end", + alignItems: "center", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({ + width: "101px", + height: "29px", + display: "flex", + justifyContent: "center", + alignItems: "center", + borderRadius: "25px", + border: "1px solid #FFFFFF", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "center", + alignItems: "center", + width: "60px", + height: "60px", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppInfo = styled(Typography)(({ theme }) => ({ + fontSize: "10px", + fontWeight: 400, + lineHeight: 1.2, + fontStyle: "italic", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({ + width: "101px", + height: "30px", + display: "flex", + justifyContent: "center", + alignItems: "center", + borderRadius: "5px", + fontWeight: 600, + fontSize: "10px", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsCategoryInfo = styled(Box)(({ theme }) => ({ + display: "flex", + alignItems: "center", + width: "100%", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({ + fontSize: "12px", + fontWeight: 700, + lineHeight: 1.2, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({ + fontSize: "12px", + fontWeight: 500, + lineHeight: 1.2, + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); + +export const AppsInfoDescription = styled(Typography)(({ theme }) => ({ + fontSize: "13px", + fontWeight: 300, + lineHeight: 1.2, + width: "90%", + textAlign: "start", + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, +})); diff --git a/src/components/Apps/AppsCategory.tsx b/src/components/Apps/AppsCategory.tsx index c1fa0a0..0020ecf 100644 --- a/src/components/Apps/AppsCategory.tsx +++ b/src/components/Apps/AppsCategory.tsx @@ -56,7 +56,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); const StyledVirtuosoContainer = styled('div')({ @@ -75,7 +75,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); export const AppsCategory = ({ availableQapps, myName, category, isShow }) => { diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 55cdc4f..85b86bd 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -64,7 +64,7 @@ const ScrollerStyled = styled("div")({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); const StyledVirtuosoContainer = styled("div")({ @@ -83,7 +83,7 @@ const StyledVirtuosoContainer = styled("div")({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); export const AppsCategoryDesktop = ({ diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index eb7ab49..c17521f 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -1,7 +1,13 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import React, { + useContext, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { AppsHomeDesktop } from "./AppsHomeDesktop"; import { Spacer } from "../../common/Spacer"; -import { GlobalContext, MyContext, getBaseApiReact } from "../../App"; +import { GlobalContext, getBaseApiReact } from "../../App"; import { AppInfo } from "./AppInfo"; import { executeEvent, @@ -15,47 +21,58 @@ import { AppPublish } from "./AppPublish"; import { AppsLibraryDesktop } from "./AppsLibraryDesktop"; import { AppsCategoryDesktop } from "./AppsCategoryDesktop"; import { AppsNavBarDesktop } from "./AppsNavBarDesktop"; -import { Box, ButtonBase } from "@mui/material"; +import { Box, ButtonBase, useTheme } from "@mui/material"; import { HomeIcon } from "../../assets/Icons/HomeIcon"; import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { Save } from "../Save/Save"; -import { HubsIcon } from "../../assets/Icons/HubsIcon"; -import { CoreSyncStatus } from "../CoreSyncStatus"; import { IconWrapper } from "../Desktop/DesktopFooter"; -import AppIcon from "../../assets/svgs/AppIcon.svg"; import { useRecoilState } from "recoil"; import { enabledDevModeAtom } from "../../atoms/global"; import { AppsIcon } from "../../assets/Icons/AppsIcon"; const uid = new ShortUniqueId({ length: 8 }); -export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => { +export const AppsDesktop = ({ + mode, + setMode, + show, + myName, + goToHome, + hasUnreadDirects, + hasUnreadGroups, + setDesktopViewMode, + desktopViewMode, +}) => { const [availableQapps, setAvailableQapps] = useState([]); const [selectedAppInfo, setSelectedAppInfo] = useState(null); - const [selectedCategory, setSelectedCategory] = useState(null) + const [selectedCategory, setSelectedCategory] = useState(null); const [tabs, setTabs] = useState([]); const [selectedTab, setSelectedTab] = useState(null); const [isNewTabWindow, setIsNewTabWindow] = useState(false); - const [categories, setCategories] = useState([]) + const [categories, setCategories] = useState([]); const iframeRefs = useRef({}); - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); const { showTutorial } = useContext(GlobalContext); + const theme = useTheme(); - const myApp = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'APP') - }, [myName, availableQapps]) - const myWebsite = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'WEBSITE') - }, [myName, availableQapps]) + const myApp = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === "APP" + ); + }, [myName, availableQapps]); + const myWebsite = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === "WEBSITE" + ); + }, [myName, availableQapps]); - useEffect(()=> { - if(show){ - showTutorial('qapps') + useEffect(() => { + if (show) { + showTutorial("qapps"); } - }, [show]) + }, [show]); useEffect(() => { setTimeout(() => { @@ -81,10 +98,10 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }); if (!response?.ok) return; const responseData = await response.json(); - + setCategories(responseData); - } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } @@ -115,18 +132,19 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }); if (!responseWebsites?.ok) return; const responseDataWebsites = await responseWebsites.json(); - + apps = responseData; websites = responseDataWebsites; const combine = [...apps, ...websites]; setAvailableQapps(combine); } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } }, []); useEffect(() => { - getCategories() + getCategories(); }, [getCategories]); useEffect(() => { @@ -163,12 +181,13 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); return () => { - unsubscribeFromEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); + unsubscribeFromEvent( + "selectedAppInfoCategory", + selectedAppInfoCategoryFunc + ); }; }, []); - - const selectedCategoryFunc = (e) => { const data = e.detail?.data; setSelectedCategory(data); @@ -183,35 +202,37 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }; }, []); - - - - - const navigateBackFunc = (e) => { - if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { + if ( + [ + "category", + "appInfo-from-category", + "appInfo", + "library", + "publish", + ].includes(mode) + ) { // Handle the various modes as needed - if (mode === 'category') { - setMode('library'); + if (mode === "category") { + setMode("library"); setSelectedCategory(null); - } else if (mode === 'appInfo-from-category') { - setMode('category'); - } else if (mode === 'appInfo') { - setMode('library'); - } else if (mode === 'library') { + } else if (mode === "appInfo-from-category") { + setMode("category"); + } else if (mode === "appInfo") { + setMode("library"); + } else if (mode === "library") { if (isNewTabWindow) { - setMode('viewer'); + setMode("viewer"); } else { - setMode('home'); + setMode("home"); } - } else if (mode === 'publish') { - setMode('library'); + } else if (mode === "publish") { + setMode("library"); } - } else if(selectedTab?.tabId) { - executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) + } else if (selectedTab?.tabId) { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}); } }; - useEffect(() => { subscribeToEvent("navigateBack", navigateBackFunc); @@ -234,8 +255,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop setIsNewTabWindow(false); }; - - useEffect(() => { subscribeToEvent("addTab", addTabFunc); @@ -245,7 +264,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }, [tabs]); const setSelectedTabFunc = (e) => { const data = e.detail?.data; - if(e.detail?.isDevMode) return + if (e.detail?.isDevMode) return; setSelectedTab(data); setTimeout(() => { @@ -259,7 +278,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }, 100); setIsNewTabWindow(false); }; - useEffect(() => { subscribeToEvent("setSelectedTab", setSelectedTabFunc); @@ -299,7 +317,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop const setNewTabWindowFunc = (e) => { setIsNewTabWindow(true); - setSelectedTab(null) + setSelectedTab(null); }; useEffect(() => { @@ -318,67 +336,62 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop flexDirection: 'row' }} > - - + { goToHome(); - }} > - - - + + { - setDesktopViewMode('apps') + setDesktopViewMode("apps"); + }} + > + + + + + + { + setDesktopViewMode("chat"); }} > - - - - { - setDesktopViewMode('chat') - }} - > - - + {/* { @@ -417,65 +430,78 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop /> */} - + {isEnabledDevMode && ( - { - setDesktopViewMode('dev') - }} - > - - - - + { + setDesktopViewMode("dev"); + }} + > + + + + )} - {mode !== 'home' && ( - - + {mode !== "home" && ( + )} + - - - {mode === "home" && ( - - - - + + + )} - - - - {mode === "appInfo" && !selectedTab && } - {mode === "appInfo-from-category" && !selectedTab && } - - {mode === "publish" && !selectedTab && } + availableQapps={availableQapps} + setMode={setMode} + myName={myName} + hasPublishApp={!!(myApp || myWebsite)} + categories={categories} + getQapps={getQapps} + /> + + {mode === "appInfo" && !selectedTab && ( + + )} + {mode === "appInfo-from-category" && !selectedTab && ( + + )} + + {mode === "publish" && !selectedTab && ( + + )} {tabs.map((tab) => { if (!iframeRefs.current[tab.tabId]) { iframeRefs.current[tab.tabId] = React.createRef(); } return ( - - - - + + + )} diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx index 32f5abe..8be0afc 100644 --- a/src/components/Apps/AppsHomeDesktop.tsx +++ b/src/components/Apps/AppsHomeDesktop.tsx @@ -1,120 +1,122 @@ -import React, { useMemo, useState } from "react"; +import React, { useState } from "react"; import { AppCircle, AppCircleContainer, AppCircleLabel, AppLibrarySubTitle, AppsContainer, - AppsParent, } from "./Apps-styles"; -import { Avatar, Box, ButtonBase, Input } from "@mui/material"; +import { Box, ButtonBase, Input } from "@mui/material"; import { Add } from "@mui/icons-material"; -import { getBaseApiReact, isMobile } from "../../App"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; +import { isMobile } from "../../App"; import { executeEvent } from "../../utils/events"; import { Spacer } from "../../common/Spacer"; import { SortablePinnedApps } from "./SortablePinnedApps"; import { extractComponents } from "../Chat/MessageDisplay"; -import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; +import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; import { AppsPrivate } from "./AppsPrivate"; +import ThemeSelector from "../Theme/ThemeSelector"; export const AppsHomeDesktop = ({ setMode, myApp, myWebsite, availableQapps, - myName + myName, }) => { - const [qortalUrl, setQortalUrl] = useState('') + const [qortalUrl, setQortalUrl] = useState(""); - const openQortalUrl = ()=> { + const openQortalUrl = () => { try { - if(!qortalUrl) return + if (!qortalUrl) return; const res = extractComponents(qortalUrl); if (res) { const { service, name, identifier, path } = res; executeEvent("addTab", { data: { service, name, identifier, path } }); - executeEvent("open-apps-mode", { }); - setQortalUrl('qortal://') + executeEvent("open-apps-mode", {}); + setQortalUrl("qortal://"); } - } catch (error) { - - } - } + } catch (error) {} + }; return ( <> - - - Apps Dashboard - - - - - { - setQortalUrl(e.target.value) - }} - disableUnderline - autoComplete='off' - autoCorrect='off' - placeholder="qortal://" + + Apps Dashboard + + + + + + + + { + setQortalUrl(e.target.value); + }} + disableUnderline + autoComplete="off" + autoCorrect="off" + placeholder="qortal://" + sx={{ + width: "100%", + color: "white", + "& .MuiInput-input::placeholder": { + color: "rgba(84, 84, 84, 0.70) !important", + fontSize: "20px", + fontStyle: "normal", + fontWeight: 400, + lineHeight: "120%", // 24px + letterSpacing: "0.15px", + opacity: 1, + }, + "&:focus": { + outline: "none", + }, + // Add any additional styles for the input here + }} + onKeyDown={(e) => { + if (e.key === "Enter" && qortalUrl) { + openQortalUrl(); + } + }} + /> + openQortalUrl()}> + { - if (e.key === 'Enter' && qortalUrl) { - openQortalUrl(); - } + color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)", }} /> - openQortalUrl()}> - - - - + + + + + Library - + + + + + ); }; diff --git a/src/components/Apps/AppsLibrary.tsx b/src/components/Apps/AppsLibrary.tsx index 5601626..4e94100 100644 --- a/src/components/Apps/AppsLibrary.tsx +++ b/src/components/Apps/AppsLibrary.tsx @@ -58,7 +58,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); const StyledVirtuosoContainer = styled('div')({ @@ -77,7 +77,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); export const AppsLibrary = ({ availableQapps, setMode, myName, hasPublishApp, isShow, categories={categories} }) => { @@ -290,7 +290,7 @@ export const AppsLibrary = ({ availableQapps, setMode, myName, hasPublishApp, i scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }}> {categories?.map((category)=> { return ( diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 851267b..1d80cc0 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -74,7 +74,7 @@ const ScrollerStyled = styled("div")({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); const StyledVirtuosoContainer = styled("div")({ @@ -93,7 +93,7 @@ const StyledVirtuosoContainer = styled("div")({ scrollbarWidth: "none", // Hide scrollbar for IE and older Edge - "-ms-overflow-style": "none", + "-msOverflowStyle": "none", }); export const AppsLibraryDesktop = ({ diff --git a/src/components/Apps/TabComponent.tsx b/src/components/Apps/TabComponent.tsx index ecf17a7..d13d992 100644 --- a/src/components/Apps/TabComponent.tsx +++ b/src/components/Apps/TabComponent.tsx @@ -1,41 +1,43 @@ -import React from 'react' -import { TabParent } from './Apps-styles' +import { TabParent } from "./Apps-styles"; import NavCloseTab from "../../assets/svgs/NavCloseTab.svg"; -import { getBaseApiReact } from '../../App'; -import { Avatar, ButtonBase } from '@mui/material'; +import { getBaseApiReact } from "../../App"; +import { Avatar, ButtonBase } from "@mui/material"; import LogoSelected from "../../assets/svgs/LogoSelected.svg"; -import { executeEvent } from '../../utils/events'; +import { executeEvent } from "../../utils/events"; import LockIcon from "@mui/icons-material/Lock"; -const TabComponent = ({isSelected, app}) => { +const TabComponent = ({ isSelected, app }) => { return ( - { - if(isSelected){ - executeEvent('removeTab', { - data: app - }) - return + { + if (isSelected) { + executeEvent("removeTab", { + data: app, + }); + return; } - executeEvent('setSelectedTab', { - data: app - }) - }}> - + executeEvent("setSelectedTab", { + data: app, + }); + }} + > + {isSelected && ( - - - - ) } - {app?.isPrivate && !app?.privateAppProperties?.logo ? ( + + )} + {app?.isPrivate && !app?.privateAppProperties?.logo ? ( { width: "28px", }} alt={app?.name} - src={app?.privateAppProperties?.logo ? app?.privateAppProperties?.logo :`${getBaseApiReact()}/arbitrary/THUMBNAIL/${ - app?.name - }/qortal_avatar?async=true`} + src={ + app?.privateAppProperties?.logo + ? app?.privateAppProperties?.logo + : `${getBaseApiReact()}/arbitrary/THUMBNAIL/${ + app?.name + }/qortal_avatar?async=true` + } > { /> )} - + - ) -} + ); +}; -export default TabComponent \ No newline at end of file +export default TabComponent; diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx index 2b1467c..4d9019c 100644 --- a/src/components/Chat/MessageItem.tsx +++ b/src/components/Chat/MessageItem.tsx @@ -74,7 +74,6 @@ const {getIndividualUserInfo} = useContext(MyContext) const [selectedReaction, setSelectedReaction] = useState(null); const [userInfo, setUserInfo] = useState(null) - useEffect(()=> { const getInfo = async ()=> { if(!message?.sender) return diff --git a/src/components/CoreSyncStatus.css b/src/components/CoreSyncStatus.css index 87bf9d7..6624845 100644 --- a/src/components/CoreSyncStatus.css +++ b/src/components/CoreSyncStatus.css @@ -1,59 +1,59 @@ - .lineHeight { - line-height: 33%; - } +.lineHeight { + line-height: 33%; +} - .tooltip { - display: inline-block; - position: relative; - text-align: left; - } +.tooltip { + display: inline-block; + position: relative; + text-align: left; +} - .tooltip .bottom { - min-width: 225px; - max-width: 250px; - top: 35px; - right: 0px; - /* transform: translate(-50%, 0); */ - padding: 10px 10px; - color: var(--black); - background-color: var(--bg-2); - font-weight: normal; - font-size: 13px; - border-radius: 8px; - position: absolute; - z-index: 99999999; - box-sizing: border-box; - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); - border: 1px solid var(--black); - visibility: hidden; - opacity: 0; - transition: opacity 0.2s; - } +.tooltip .bottom { + min-width: 225px; + max-width: 250px; + top: 35px; + right: 0px; + /* transform: translate(-50%, 0); */ + padding: 10px 10px; + color: var(--black); + background-color: var(--bg-2); + font-weight: normal; + font-size: 13px; + border-radius: 8px; + position: absolute; + z-index: 99999999; + box-sizing: border-box; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); + border: 1px solid var(--black); + visibility: hidden; + opacity: 0; + transition: opacity 0.2s; +} - .tooltip:hover .bottom { - visibility: visible; - opacity: 1; - z-index: 100; - } +.tooltip:hover .bottom { + visibility: visible; + opacity: 1; + z-index: 100; +} - .tooltip .bottom i { - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -12px; - width: 24px; - height: 12px; - overflow: hidden; - } +.tooltip .bottom i { + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -12px; + width: 24px; + height: 12px; + overflow: hidden; +} - .tooltip .bottom i::after { - content: ''; - position: absolute; - width: 12px; - height: 12px; - left: 50%; - transform: translate(-50%, 50%) rotate(45deg); - background-color: var(--white); - border: 1px solid var(--black); - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); - } \ No newline at end of file +.tooltip .bottom i::after { + content: ""; + position: absolute; + width: 12px; + height: 12px; + left: 50%; + transform: translate(-50%, 50%) rotate(45deg); + background-color: var(--white); + border: 1px solid var(--black); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); +} diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx index 6da8f4e..aa2e864 100644 --- a/src/components/Desktop/DesktopFooter.tsx +++ b/src/components/Desktop/DesktopFooter.tsx @@ -1,17 +1,6 @@ -import * as React from "react"; -import { - BottomNavigation, - BottomNavigationAction, - ButtonBase, - Typography, -} from "@mui/material"; -import { Home, Groups, Message, ShowChart } from "@mui/icons-material"; +import { ButtonBase, Typography, useTheme } from "@mui/material"; import Box from "@mui/material/Box"; -import BottomLogo from "../../assets/svgs/BottomLogo5.svg"; -import { CustomSvg } from "../../common/CustomSvg"; -import { WalletIcon } from "../../assets/Icons/WalletIcon"; import { HubsIcon } from "../../assets/Icons/HubsIcon"; -import { TradingIcon } from "../../assets/Icons/TradingIcon"; import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import AppIcon from "../../assets/svgs/AppIcon.svg"; @@ -20,19 +9,31 @@ import { Save } from "../Save/Save"; import { useRecoilState } from "recoil"; import { enabledDevModeAtom } from "../../atoms/global"; -export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => { +export const IconWrapper = ({ + children, + label, + color, + selected, + disableWidth, + customWidth, +}) => { + const theme = useTheme(); + return ( {children} @@ -41,7 +42,7 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth, cu fontFamily: "Inter", fontSize: "12px", fontWeight: 500, - color: color, + color: theme.palette.text.primary, }} > {label} @@ -51,24 +52,7 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth, cu }; export const DesktopFooter = ({ - selectedGroup, - groupSection, - isUnread, - goToAnnouncements, - isUnreadChat, - goToChat, - goToThreads, - setOpenManageMembers, - groupChatHasUnread, - groupsAnnHasUnread, - directChatHasUnread, - chatMode, - openDrawerGroups, goToHome, - setIsOpenDrawerProfile, - mobileViewMode, - setMobileViewMode, - setMobileViewModeKeepOpen, hasUnreadGroups, hasUnreadDirects, isHome, @@ -77,15 +61,14 @@ export const DesktopFooter = ({ setDesktopSideView, isApps, setDesktopViewMode, - desktopViewMode, hide, setIsOpenSideViewDirects, - setIsOpenSideViewGroups - + setIsOpenSideViewGroups, }) => { - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); - if(hide) return + if (hide) return; return ( - + + { - setDesktopViewMode('apps') - setIsOpenSideViewDirects(false) - setIsOpenSideViewGroups(false) + setDesktopViewMode("apps"); + setIsOpenSideViewDirects(false); + setIsOpenSideViewGroups(false); }} > - - + + + { setDesktopSideView("groups"); }} > - + + { setDesktopSideView("directs"); }} > - + - + {isEnabledDevMode && ( { - setDesktopViewMode('dev') - setIsOpenSideViewDirects(false) - setIsOpenSideViewGroups(false) - }} - > - { + setDesktopViewMode("dev"); + setIsOpenSideViewDirects(false); + setIsOpenSideViewGroups(false); + }} > - - - + + + + )} - ); diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index 76f2f2e..bd883be 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -1,86 +1,104 @@ -import { Box, ButtonBase } from '@mui/material'; -import React from 'react' +import { Box, ButtonBase, useTheme } from "@mui/material"; import { HomeIcon } from "../assets/Icons/HomeIcon"; import { MessagingIcon } from "../assets/Icons/MessagingIcon"; import { Save } from "./Save/Save"; -import { HubsIcon } from "../assets/Icons/HubsIcon"; -import { CoreSyncStatus } from "./CoreSyncStatus"; -import { IconWrapper } from './Desktop/DesktopFooter'; -import AppIcon from "./../assets/svgs/AppIcon.svg"; -import { useRecoilState } from 'recoil'; -import { enabledDevModeAtom } from '../atoms/global'; -import { AppsIcon } from '../assets/Icons/AppsIcon'; +import { IconWrapper } from "./Desktop/DesktopFooter"; +import { useRecoilState } from "recoil"; +import { enabledDevModeAtom } from "../atoms/global"; +import { AppsIcon } from "../assets/Icons/AppsIcon"; +import ThemeSelector from "./Theme/ThemeSelector"; -export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode, myName }) => { - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) +export const DesktopSideBar = ({ + goToHome, + setDesktopSideView, + toggleSideViewDirects, + hasUnreadDirects, + isDirects, + toggleSideViewGroups, + hasUnreadGroups, + isGroups, + isApps, + setDesktopViewMode, + desktopViewMode, + myName, +}) => { + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); + + const theme = useTheme(); return ( - - { - goToHome(); - - }} - > - - - - - { - setDesktopViewMode('apps') - // setIsOpenSideViewDirects(false) - // setIsOpenSideViewGroups(false) - }} - > - - - - - { - setDesktopViewMode('chat') - }} - > + + { + goToHome(); + }} + > + + + { + setDesktopViewMode("apps"); + // setIsOpenSideViewDirects(false) + // setIsOpenSideViewGroups(false) + }} + > - - - - {/* + + + + { + setDesktopViewMode("chat"); + }} + > + + + + + {/* { setDesktopSideView("groups"); toggleSideViewGroups() @@ -98,23 +116,29 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire /> */} - - {/* */} - {isEnabledDevMode && ( - + {/* */} + {isEnabledDevMode && ( + { - setDesktopViewMode('dev') + setDesktopViewMode("dev"); }} > - + - )} - - ) -} + )} + + + + ); +}; diff --git a/src/components/Group/Forum/texteditor.css b/src/components/Group/Forum/texteditor.css index e3bbd50..ac6d2ed 100644 --- a/src/components/Group/Forum/texteditor.css +++ b/src/components/Group/Forum/texteditor.css @@ -1,71 +1,70 @@ .ql-editor { - min-height: 200px; - width: 100%; - color: black; - font-size: 16px; - font-family: Roboto; - max-height: 225px; - overflow-y: scroll; - padding: 0px !important; - } + min-height: 200px; + width: 100%; + color: black; + font-size: 16px; + font-family: Roboto; + max-height: 225px; + overflow-y: scroll; + padding: 0px !important; +} - .ql-editor::-webkit-scrollbar-track { - background-color: transparent; - cursor: default; - } - .ql-editor::-webkit-scrollbar-track:hover { - background-color: transparent; - } - - .ql-editor::-webkit-scrollbar { - width: 16px; - height: 10px; - background-color: rgba(229, 229, 229, 0.70); - } - - .ql-editor::-webkit-scrollbar-thumb { - background-color: #B0B0B0; - border-radius: 8px; - background-clip: content-box; - border: 4px solid transparent; - } - - - .ql-editor img { - cursor: default; - } - - .ql-editor-display { - min-height: 20px; - width: 100%; - color: black; - font-size: 16px; - font-family: Roboto; - padding: 0px !important; - } - - .ql-editor-display img { - cursor: default; - } - - .ql-container { - font-size: 16px - } +.ql-editor::-webkit-scrollbar-track { + background-color: transparent; + cursor: default; +} +.ql-editor::-webkit-scrollbar-track:hover { + background-color: transparent; +} - .ql-toolbar .ql-stroke { - fill: none !important; - stroke: black !important; +.ql-editor::-webkit-scrollbar { + width: 16px; + height: 10px; + background-color: rgba(229, 229, 229, 0.7); +} + +.ql-editor::-webkit-scrollbar-thumb { + background-color: #b0b0b0; + border-radius: 8px; + background-clip: content-box; + border: 4px solid transparent; +} + +.ql-editor img { + cursor: default; +} + +.ql-editor-display { + min-height: 20px; + width: 100%; + color: black; + font-size: 16px; + font-family: Roboto; + padding: 0px !important; +} + +.ql-editor-display img { + cursor: default; +} + +.ql-container { + font-size: 16px; +} + +.ql-toolbar .ql-stroke { + fill: none !important; + stroke: black !important; } .ql-toolbar .ql-fill { - fill: black !important; - stroke: none !important; + fill: black !important; + stroke: none !important; } .ql-toolbar .ql-picker { - color: black !important; + color: black !important; } .ql-toolbar .ql-picker-options { - background-color: white !important; -} \ No newline at end of file + background-color: white !important; +} diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx index cd98ba9..1ab74dc 100644 --- a/src/components/Mobile/MobileHeader.tsx +++ b/src/components/Mobile/MobileHeader.tsx @@ -20,7 +20,7 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2"; import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { Save } from "../Save/Save"; -import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen'; +import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen"; import { useRecoilState } from "recoil"; import { fullScreenAtom, hasSettingsChangedAtom } from "../../atoms/global"; import { useAppFullScreen } from "../../useAppFullscreen"; @@ -36,12 +36,12 @@ const Header = ({ setMobileViewMode, myName, setSelectedDirect, - setNewChat + setNewChat, }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom); - const {exitFullScreen} = useAppFullScreen(setFullScreen) + const { exitFullScreen } = useAppFullScreen(setFullScreen); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; @@ -77,34 +77,39 @@ const Header = ({ }} > { setMobileViewModeKeepOpen(""); goToHome(); }} // onClick={onHomeClick} > - + - - + + {fullScreen && ( - { - exitFullScreen() - setFullScreen(false) - }}> - - + { + exitFullScreen(); + setFullScreen(false); + }} + > + + )} - {/* Center Title */} @@ -135,14 +140,15 @@ const Header = ({ setMobileViewModeKeepOpen("messaging"); }} > - - + - { - setSelectedDirect(null) - setNewChat(false) - setMobileViewMode("groups"); - setMobileViewModeKeepOpen("") - handleClose(); + marginTop: "10px", }} > - - - - - - { - setMobileViewModeKeepOpen("messaging"); + { + setSelectedDirect(null); + setNewChat(false); + setMobileViewMode("groups"); + setMobileViewModeKeepOpen(""); + handleClose(); + }} + > + + + + + + { + setMobileViewModeKeepOpen("messaging"); - handleClose(); - }} - > - - - - - - + handleClose(); + }} + > + + + + + + ); } @@ -255,24 +282,27 @@ const Header = ({ width: "75px", }} > - - - - {fullScreen && ( - { - exitFullScreen() - setFullScreen(false) - }}> - - + + + + {fullScreen && ( + { + exitFullScreen(); + setFullScreen(false); + }} + > + + )} - + {/* Center Title */} - {/* Right Logout Icon */} - - + - - + // onClick={onLogoutClick} + > + + @@ -357,8 +386,14 @@ const Header = ({ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.3)", // Optional shadow for the circle }} > - - + + @@ -389,6 +424,7 @@ const Header = ({ */} + { setMobileViewMode("groups"); - setMobileViewModeKeepOpen("") + setMobileViewModeKeepOpen(""); handleClose(); }} > - - + + - + + { setMobileViewModeKeepOpen("messaging"); @@ -450,21 +495,32 @@ const Header = ({ handleClose(); }} > - - + + - + - + ); }; diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx index 89bc8b4..0c3e8b7 100644 --- a/src/components/PasswordField/PasswordField.tsx +++ b/src/components/PasswordField/PasswordField.tsx @@ -1,67 +1,97 @@ -import { Button, ButtonBase, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material"; -import { forwardRef, useState } from 'react' -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import VisibilityIcon from '@mui/icons-material/Visibility'; -export const CustomInput = styled(TextField)({ - width: "183px", // Adjust the width as needed +import { + ButtonBase, + InputAdornment, + TextField, + TextFieldProps, + styled, +} from "@mui/material"; +import { forwardRef, useState } from "react"; +import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; +import VisibilityIcon from "@mui/icons-material/Visibility"; + +export const CustomInput = styled(TextField)(({ theme }) => ({ + width: "183px", borderRadius: "5px", - // backgroundColor: "rgba(30, 30, 32, 1)", + backgroundColor: theme.palette.background.paper, outline: "none", input: { - fontSize: 10, - fontFamily: "Inter", - fontWeight: 400, - color: "white", - "&::placeholder": { - fontSize: 16, - color: "rgba(255, 255, 255, 0.2)", - }, - outline: "none", - padding: "10px", + fontSize: 10, + fontFamily: "Inter", + fontWeight: 400, + color: theme.palette.text.primary, + "&::placeholder": { + fontSize: 16, + color: theme.palette.text.disabled, + }, + 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)', - }, + "& fieldset": { + border: `0.5px solid ${theme.palette.divider}`, + }, + "&:hover fieldset": { + border: `0.5px solid ${theme.palette.divider}`, + }, + "&.Mui-focused fieldset": { + border: `0.5px solid ${theme.palette.divider}`, + }, }, "& .MuiInput-underline:before": { - borderBottom: "none", + borderBottom: "none", }, "& .MuiInput-underline:hover:not(.Mui-disabled):before": { - borderBottom: "none", + borderBottom: "none", }, "& .MuiInput-underline:after": { - borderBottom: "none", + borderBottom: "none", }, -}); + })); - -export const PasswordField = forwardRef( ({ ...props }, ref) => { +export const PasswordField = forwardRef( + ({ ...props }, ref) => { const [canViewPassword, setCanViewPassword] = useState(false); return ( - { - setCanViewPassword((prevState) => !prevState) - }}> - {canViewPassword ? : } - - ) - }} - inputRef={ref} - {...props} - /> - ) -}); \ No newline at end of file + { + setCanViewPassword((prevState) => !prevState); + }} + > + {canViewPassword ? ( + + + + ) : ( + + + + )} + + ), + }} + inputRef={ref} + {...props} + /> + ); + } +); diff --git a/src/components/ReactionPicker.css b/src/components/ReactionPicker.css index 89dbe39..6d0a354 100644 --- a/src/components/ReactionPicker.css +++ b/src/components/ReactionPicker.css @@ -1,27 +1,26 @@ .reaction-container { - position: relative; /* Parent must be positioned relatively */ - } - - .emoji-picker { - position: absolute; /* Picker positioned absolutely relative to the parent */ - right: 0; - z-index: 9000000000; /* Ensure picker appears above other content */ - } - - .message-container { - overflow: visible; /* Ensure the message container doesn't cut off the picker */ - } - + position: relative; /* Parent must be positioned relatively */ +} - .reaction-container { - position: relative; - } - - .emoji-picker { - overflow: hidden; - width: auto - } +.emoji-picker { + position: absolute; /* Picker positioned absolutely relative to the parent */ + right: 0; + z-index: 9000000000; /* Ensure picker appears above other content */ +} - .EmojiPickerReact.epr-dark-theme { - --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */ - } \ No newline at end of file +.message-container { + overflow: visible; /* Ensure the message container doesn't cut off the picker */ +} + +.reaction-container { + position: relative; +} + +.emoji-picker { + overflow: hidden; + width: auto; +} + +.EmojiPickerReact.epr-dark-theme { + --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */ +} diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx index 0c01315..273da15 100644 --- a/src/components/Save/Save.tsx +++ b/src/components/Save/Save.tsx @@ -22,20 +22,22 @@ import { LoadingButton } from "@mui/lab"; import { saveToLocalStorage } from "../Apps/AppsNavBar"; import { decryptData, encryptData } from "../../qortalRequests/get"; import { saveFileToDiskGeneric } from "../../utils/generateWallet/generateWallet"; -import { base64ToUint8Array, uint8ArrayToObject } from "../../backgroundFunctions/encryption"; - +import { + base64ToUint8Array, + uint8ArrayToObject, +} from "../../backgroundFunctions/encryption"; export const handleImportClick = async () => { - const fileInput = document.createElement('input'); - fileInput.type = 'file'; - fileInput.accept = '.base64,.txt'; + const fileInput = document.createElement("input"); + fileInput.type = "file"; + fileInput.accept = ".base64,.txt"; // Create a promise to handle file selection and reading synchronously return await new Promise((resolve, reject) => { fileInput.onchange = () => { const file = fileInput.files[0]; if (!file) { - reject(new Error('No file selected')); + reject(new Error("No file selected")); return; } @@ -44,7 +46,7 @@ export const handleImportClick = async () => { resolve(e.target.result); // Resolve with the file content }; reader.onerror = () => { - reject(new Error('Error reading file')); + reject(new Error("Error reading file")); }; reader.readAsText(file); // Read the file as text (Base64 string) @@ -53,8 +55,7 @@ export const handleImportClick = async () => { // Trigger the file input dialog fileInput.click(); }); - -} +}; export const Save = ({ isDesktop, disableWidth, myName }) => { const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom); @@ -65,7 +66,8 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { settingsLocalLastUpdatedAtom ); const setHasSettingsChangedAtom = useSetRecoilState(hasSettingsChangedAtom); - const [isUsingImportExportSettings, setIsUsingImportExportSettings] = useRecoilState(isUsingImportExportSettingsAtom); + const [isUsingImportExportSettings, setIsUsingImportExportSettings] = + useRecoilState(isUsingImportExportSettingsAtom); const [canSave] = useRecoilState(canSaveSettingToQdnAtom); const [openSnack, setOpenSnack] = useState(false); @@ -104,8 +106,6 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { settingsLocalLastUpdated, ]); - - useEffect(() => { setHasSettingsChangedAtom(hasChanged); }, [hasChanged]); @@ -176,7 +176,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { message: "Sucessfully published to QDN", }); setOpenSnack(true); - setAnchorEl(null) + setAnchorEl(null); } } } catch (error) { @@ -197,7 +197,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { const revertChanges = () => { setPinnedApps(oldPinnedApps); saveToLocalStorage("ext_saved_settings", "sortablePinnedApps", null); - setAnchorEl(null) + setAnchorEl(null); }; return ( @@ -207,37 +207,22 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { disabled={ // !hasChanged || // !canSave || - isLoading + isLoading // settingsQdnLastUpdated === -100 } > {isDesktop ? ( ) : ( - + )} { > {isUsingImportExportSettings && ( - + { - - + opacity: 1, + }, + }} + > + Use QDN saving + + + )} {!isUsingImportExportSettings && ( - {!myName ? ( - - - You need a registered Qortal name to save your pinned apps to QDN. - - - ) : ( - <> - {hasChanged && ( { fontSize: "14px", }} > - You have unsaved changes to your pinned apps. Save them to QDN. + You need a registered Qortal name to save your pinned apps to + QDN. - - - Save to QDN - - - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated > 0 && ( - <> + + ) : ( + <> + {hasChanged && ( + - Don't like your current local changes? Would you like to - reset to your saved QDN pinned apps? + You have unsaved changes to your pinned apps. Save them to + QDN. - Revert to QDN + Save to QDN - + + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated > 0 && ( + <> + + Don't like your current local changes? Would you + like to reset to your saved QDN pinned apps? + + + + Revert to QDN + + + )} + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated === 0 && ( + <> + + Don't like your current local changes? Would you + like to reset to the default pinned apps? + + + + Revert to default + + + )} + )} - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === 0 && ( - <> + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated === -100 && + isUsingImportExportSettings !== true && ( + + + The app was unable to download your existing QDN-saved + pinned apps. Would you like to overwrite those changes? + + + + Overwrite to QDN + + + )} + {!hasChanged && ( + - Don't like your current local changes? Would you like to - reset to the default pinned apps? + You currently do not have any changes to your pinned apps - - - Revert to default - - + )} - - )} - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === -100 && isUsingImportExportSettings !== true && ( - - - The app was unable to download your existing QDN-saved pinned - apps. Would you like to overwrite those changes? - - - - Overwrite to QDN - - - )} - {!hasChanged && ( - - - You currently do not have any changes to your pinned apps - - - - )} )} - )} - + - - { - try { - const fileContent = await handleImportClick(); - const decryptedData = await decryptData({ - encryptedData: fileContent, - }); - const decryptToUnit8ArraySubject = - base64ToUint8Array(decryptedData); - const responseData = uint8ArrayToObject( - decryptToUnit8ArraySubject - ); - if(Array.isArray(responseData)){ - saveToLocalStorage("ext_saved_settings_import_export", "sortablePinnedApps", responseData, { - isUsingImportExport: true - }); - setPinnedApps(responseData) - setOldPinnedApps(responseData) - setIsUsingImportExportSettings(true) - } - - } catch (error) { - console.log("error", error); + { + try { + const fileContent = await handleImportClick(); + const decryptedData = await decryptData({ + encryptedData: fileContent, + }); + const decryptToUnit8ArraySubject = + base64ToUint8Array(decryptedData); + const responseData = uint8ArrayToObject( + decryptToUnit8ArraySubject + ); + if (Array.isArray(responseData)) { + saveToLocalStorage( + "ext_saved_settings_import_export", + "sortablePinnedApps", + responseData, + { + isUsingImportExport: true, } - }}> - - Import - - { - try { - const data64 = await objectToBase64(pinnedApps); - - const encryptedData = await encryptData({ - data64, - }); - const blob = new Blob([encryptedData], { - type: "text/plain", - }); - - const timestamp = new Date() - .toISOString() - .replace(/:/g, "-"); // Safe timestamp for filenames - const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`; - await saveFileToDiskGeneric(blob, filename) - - } catch (error) { - console.log('error', error) - } - }}> - Export + ); + setPinnedApps(responseData); + setOldPinnedApps(responseData); + setIsUsingImportExportSettings(true); + } + } catch (error) { + console.log("error", error); + } + }} + > + Import - - + { + try { + const data64 = await objectToBase64(pinnedApps); + + const encryptedData = await encryptData({ + data64, + }); + const blob = new Blob([encryptedData], { + type: "text/plain", + }); + + const timestamp = new Date().toISOString().replace(/:/g, "-"); // Safe timestamp for filenames + const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`; + await saveFileToDiskGeneric(blob, filename); + } catch (error) { + console.log("error", error); + } + }} + > + Export + + + {} }); + +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); \ No newline at end of file diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx new file mode 100644 index 0000000..5b55f53 --- /dev/null +++ b/src/components/Theme/ThemeSelector.tsx @@ -0,0 +1,77 @@ +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/index.css b/src/index.css index 867382c..6b24232 100644 --- a/src/index.css +++ b/src/index.css @@ -1,43 +1,40 @@ @font-face { - font-family: 'Inter'; - src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype'); + 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-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-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-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: #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-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; + --unread: #4297e2; + --danger: #b14646; + --apps-circle: #1f2023; + --green: #5eb049; } body { @@ -97,10 +94,8 @@ body { initial-value: transparent; } - .scrollable-container { transition: --var1 0.4s; - } .scrollable-container:hover { @@ -115,11 +110,6 @@ body { opacity: 0; } - - - - - /* Mobile-specific scrollbar styles */ @media only screen and (max-width: 600px) { ::-webkit-scrollbar { @@ -137,11 +127,11 @@ body { background-color: whitesmoke; } -html, body { - overscroll-behavior:none !important; +html, +body { + overscroll-behavior: none !important; } .swiper { width: 100%; } - diff --git a/src/main.tsx b/src/main.tsx index 22bba47..881d4c1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,81 +1,20 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' -import "./messaging/messagesToBackground"; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import { CssBaseline } from '@mui/material'; -import { MessageQueueProvider } from './MessageQueueContext.tsx'; -import { RecoilRoot } from 'recoil'; -const theme = createTheme({ - palette: { - primary: { - main: '#232428', // Primary color (e.g., used for buttons, headers, etc.) - }, - secondary: { - main: '#232428', // Secondary color - }, - background: { - default: '#27282c', // Default background color - paper: '#1d1d1d', // Paper component background (for dropdowns, dialogs, etc.) - }, - text: { - primary: '#ffffff', // White as the primary text color - secondary: '#b0b0b0', // Light gray for secondary text - disabled: '#808080', // Gray for disabled text - }, - action: { - // disabledBackground: 'set color of background here', - disabled: 'rgb(255 255 255 / 70%)' - } - }, - typography: { - fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif', // Font family - h1: { - color: '#ffffff', // White color for h1 elements - }, - h2: { - color: '#ffffff', // White color for h2 elements - }, - body1: { - color: '#ffffff', // Default body text color - }, - body2: { - color: '#b0b0b0', // Lighter text for body2, often used for secondary text - }, - }, - components: { - MuiOutlinedInput: { - styleOverrides: { - root: { - ".MuiOutlinedInput-notchedOutline": { - borderColor: "white", // ⚪ Default outline color - }, - }, - }, - }, - MuiSelect: { - styleOverrides: { - icon: { - color: "white", // ✅ Caret (dropdown arrow) color - }, - }, - }, - }, -}); +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; +import "./index.css"; +import "./messaging/messagesToBackground"; +import { MessageQueueProvider } from "./MessageQueueContext.tsx"; +import { RecoilRoot } from "recoil"; +import { ThemeProvider } from "./components/Theme/ThemeContext.tsx"; -export default theme; - - -ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById("root")!).render( <> - - - - - - - + + + + + + - , -) + +); diff --git a/tsconfig.json b/tsconfig.json index e49f745..24c5d39 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", + "noImplicitAny": false, "skipLibCheck": true, /* Bundler mode */ diff --git a/vite.config.ts b/vite.config.ts index e515bea..d902a5e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,51 +1,55 @@ /// -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // Import path module for resolving file paths -import fixReactVirtualized from 'esbuild-plugin-react-virtualized' -import wasm from 'vite-plugin-wasm'; -import topLevelAwait from 'vite-plugin-top-level-await'; -import { VitePWA } from 'vite-plugin-pwa'; +import fixReactVirtualized from "esbuild-plugin-react-virtualized"; +import wasm from "vite-plugin-wasm"; +import topLevelAwait from "vite-plugin-top-level-await"; +import { VitePWA } from "vite-plugin-pwa"; export default defineConfig({ - test: { - environment: 'jsdom', + environment: "jsdom", globals: true, - setupFiles: ['./src/test/setup.ts'] + setupFiles: ["./src/test/setup.ts"], }, - assetsInclude: ['**/*.wasm'], - plugins: [react(), wasm(), topLevelAwait(), VitePWA({ - registerType: 'prompt', - manifest: { - name: 'Qortal Hub', - short_name: 'Hub', - description: 'Your easy access to the Qortal blockchain', - start_url: '/', - display: 'standalone', - theme_color: '#ffffff', - background_color: '#ffffff', - icons: [ - { - src: '/qortal192.png', - sizes: '192x192', - type: 'image/png', - }, - { - src: '/qortal.png', - sizes: '512x512', - type: 'image/png', - }, - ], - }, - workbox: { - maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5MB limit - disableDevLogs: true, // Suppresses logs in development - }, - })], + assetsInclude: ["**/*.wasm"], + plugins: [ + react(), + wasm(), + topLevelAwait(), + VitePWA({ + registerType: "prompt", + manifest: { + name: "Qortal Hub", + short_name: "Hub", + description: "Your easy access to the Qortal blockchain", + start_url: "/", + display: "standalone", + theme_color: "#ffffff", + background_color: "#ffffff", + icons: [ + { + src: "/qortal192.png", + sizes: "192x192", + type: "image/png", + }, + { + src: "/qortal.png", + sizes: "512x512", + type: "image/png", + }, + ], + }, + workbox: { + maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5MB limit + disableDevLogs: true, // Suppresses logs in development + }, + }), + ], optimizeDeps: { esbuildOptions: { plugins: [fixReactVirtualized], - } - } + }, + }, });