From b5a9620dc4acee44795ef8f20dcdc9e86f5f4406 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 13:53:57 +0200 Subject: [PATCH 01/16] Use desktop file --- src/components/Apps/AppInfo.tsx | 29 +++++--- src/components/Apps/AppInfoSnippet.tsx | 91 ++++++++++++++------------ 2 files changed, 67 insertions(+), 53 deletions(-) diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index 48f0b61..60ed119 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -1,3 +1,4 @@ +import React, { useEffect, useMemo, useState } from 'react'; import { AppCircle, AppCircleContainer, @@ -17,9 +18,11 @@ import { AppsLibraryContainer, AppsWidthLimiter, } from './Apps-styles'; -import { Avatar, Box } from '@mui/material'; -import { getBaseApiReact } from '../../App'; +import { Avatar, Box, ButtonBase, InputBase } from '@mui/material'; +import { Add } from '@mui/icons-material'; +import { getBaseApiReact, isMobile } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; + import { Spacer } from '../../common/Spacer'; import { executeEvent } from '../../utils/events'; import { AppRating } from './AppRating'; @@ -27,7 +30,7 @@ import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom, } from '../../atoms/global'; -import { saveToLocalStorage } from './AppsNavBar'; +import { saveToLocalStorage } from './AppsNavBarDesktop'; import { useRecoilState, useSetRecoilState } from 'recoil'; export const AppInfo = ({ app, myName }) => { @@ -46,8 +49,9 @@ export const AppInfo = ({ app, myName }) => { return ( { width: '90%', }} > - - + {!isMobile && } { }} > - {isSelectedAppPinned - ? 'Unpin from dashboard' - : 'Pin to dashboard'} + {!isMobile ? ( + <> + {isSelectedAppPinned + ? 'Unpin from dashboard' + : 'Pin to dashboard'} + + ) : ( + <>{isSelectedAppPinned ? 'Unpin' : 'Pin'} + )} - { - setSortablePinnedApps((prev) => { - let updatedApps; + {!isMobile && ( + { + setSortablePinnedApps((prev) => { + let updatedApps; - if (isSelectedAppPinned) { - // Remove the selected app if it is pinned - updatedApps = prev.filter( - (item) => - !( - item?.name === app?.name && item?.service === app?.service - ) + if (isSelectedAppPinned) { + // Remove the selected app if it is pinned + updatedApps = prev.filter( + (item) => + !( + item?.name === app?.name && + item?.service === app?.service + ) + ); + } else { + // Add the selected app if it is not pinned + updatedApps = [ + ...prev, + { + name: app?.name, + service: app?.service, + }, + ]; + } + + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps ); - } else { - // Add the selected app if it is not pinned - updatedApps = [ - ...prev, - { - name: app?.name, - service: app?.service, - }, - ]; - } - - saveToLocalStorage( - 'ext_saved_settings', - 'sortablePinnedApps', - updatedApps - ); - return updatedApps; - }); - setSettingsLocalLastUpdated(Date.now()); - }} - sx={{ - backgroundColor: '#359ff7ff', - opacity: isSelectedAppPinned ? 0.6 : 1, - }} - > - - {' '} - {isSelectedAppPinned ? 'Unpin' : 'Pin'} - - + return updatedApps; + }); + setSettingsLocalLastUpdated(Date.now()); + }} + sx={{ + backgroundColor: '#359ff7ff', + opacity: isSelectedAppPinned ? 0.6 : 1, + }} + > + + {' '} + {isSelectedAppPinned ? 'Unpin' : 'Pin'} + + + )} { From 7f207e5d9132d79058801df626ea0797e9f9014b Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 16:05:48 +0200 Subject: [PATCH 02/16] Fix missing bracket --- src/App.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1c6913a..3ad6fe2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -289,7 +289,6 @@ export const isMainWindow = true; function App() { const [extState, setExtstate] = useState('not-authenticated'); const [desktopViewMode, setDesktopViewMode] = useState('home'); - const [backupjson, setBackupjson] = useState(null); const [rawWallet, setRawWallet] = useState(null); const [ltcBalanceLoading, setLtcBalanceLoading] = useState(false); @@ -2018,7 +2017,7 @@ function App() { setIsOpenDrawerProfile={setIsOpenDrawerProfile} userInfo={userInfo} /> - renderProfile() + {renderProfile()} )} From d83c20640ae73c068d4b3ed7e99ff29e41e9a2cf Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 16:06:04 +0200 Subject: [PATCH 03/16] Set correct property --- src/assets/Icons/Download.tsx | 2 +- src/assets/Icons/Logout.tsx | 2 +- src/assets/Icons/NavAdd.tsx | 2 +- src/assets/Icons/NavCloseTab.tsx | 4 ++-- src/assets/Icons/NavMoreMenu.tsx | 2 +- src/assets/Icons/Return.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/Icons/Download.tsx b/src/assets/Icons/Download.tsx index 28ac605..a8498db 100644 --- a/src/assets/Icons/Download.tsx +++ b/src/assets/Icons/Download.tsx @@ -25,7 +25,7 @@ export const Download: React.FC = ({ clipRule="evenodd" d="M12.8047 0.393196V7.21185H16.3036L10.0003 13.5139L3.69697 7.21185H7.19584V0H12.8045L12.8047 0.393196ZM2.7047 16.8587V13.9861H0V18.6179C0 19.3774 0.622589 20 1.38213 20H18.6179C19.3774 20 20 19.3774 20 18.6179V13.9861H17.2962V17.2963L2.70461 17.2954L2.7047 16.8587Z" fill={setColor} - fill-opacity={setOpacity} + fillOpacity={setOpacity} /> ); diff --git a/src/assets/Icons/Logout.tsx b/src/assets/Icons/Logout.tsx index f7d9c57..b15d0f4 100644 --- a/src/assets/Icons/Logout.tsx +++ b/src/assets/Icons/Logout.tsx @@ -21,7 +21,7 @@ export const Logout: React.FC = ({ color, opacity, ...children }) => { clipRule="evenodd" d="M7.56485 0H16.3611C17.2662 0 18 0.727797 18 1.62558V18.3744C18 19.2722 17.2662 20 16.3611 20H7.56485C6.65969 20 5.92593 19.2722 5.92593 18.3744V12.6013H10.6168C11.4569 12.6013 12.1404 11.9039 12.1404 11.0467V8.87329C12.1404 8.01613 11.4569 7.31875 10.6168 7.31875H5.92593V1.62558C5.92593 0.727797 6.65969 0 7.56485 0ZM11.1667 11.0467C11.1667 11.3719 10.9205 11.6354 10.6168 11.6354H4.8144C4.74521 11.6354 4.68911 11.6955 4.68911 11.7696V12.8632C4.68911 13.3492 4.17007 13.6259 3.8078 13.3329L0.218431 10.4298C-0.0728102 10.1942 -0.0728102 9.72579 0.218431 9.49024L3.8078 6.58709C4.17005 6.29409 4.68911 6.57077 4.68911 7.05684V8.1504C4.68911 8.2245 4.74521 8.28454 4.8144 8.28454H10.6168C10.9205 8.28454 11.1667 8.54813 11.1667 8.87329V11.0467Z" fill={setColor} - fill-opacity={setOpacity} + fillOpacity={setOpacity} /> ); diff --git a/src/assets/Icons/NavAdd.tsx b/src/assets/Icons/NavAdd.tsx index dd45bad..c234be2 100644 --- a/src/assets/Icons/NavAdd.tsx +++ b/src/assets/Icons/NavAdd.tsx @@ -25,7 +25,7 @@ export const NavAdd: React.FC = ({ color, opacity, ...children }) => { ); diff --git a/src/assets/Icons/NavCloseTab.tsx b/src/assets/Icons/NavCloseTab.tsx index 8b2734e..6062175 100644 --- a/src/assets/Icons/NavCloseTab.tsx +++ b/src/assets/Icons/NavCloseTab.tsx @@ -32,14 +32,14 @@ export const NavCloseTab: React.FC = ({ stroke={theme.palette.text.primary} stroke-width="2" fill={setColor} - fill-opacity={setOpacity} + fillOpacity={setOpacity} /> ); diff --git a/src/assets/Icons/NavMoreMenu.tsx b/src/assets/Icons/NavMoreMenu.tsx index ca641ba..2916f49 100644 --- a/src/assets/Icons/NavMoreMenu.tsx +++ b/src/assets/Icons/NavMoreMenu.tsx @@ -23,7 +23,7 @@ export const NavMoreMenu: React.FC = ({ ); diff --git a/src/assets/Icons/Return.tsx b/src/assets/Icons/Return.tsx index df0abad..81a6690 100644 --- a/src/assets/Icons/Return.tsx +++ b/src/assets/Icons/Return.tsx @@ -20,7 +20,7 @@ export const Return: React.FC = ({ color, opacity, ...children }) => { clipRule="evenodd" d="M2.645 5.81803H15C15.9471 5.81803 16.8557 6.20131 17.5257 6.88278C18.195 7.56497 18.5714 8.49007 18.5714 9.45445V10.909C18.5714 11.8734 18.195 12.7985 17.5257 13.4807C16.8557 14.1622 15.9471 14.5454 15 14.5454C12.0164 14.5454 8.57143 14.5454 8.57143 14.5454C8.17714 14.5454 7.85714 14.8713 7.85714 15.2727C7.85714 15.6742 8.17714 16 8.57143 16H15C16.3264 16 17.5979 15.464 18.5357 14.5091C19.4736 13.5541 20 12.2596 20 10.909C20 10.4268 20 9.93664 20 9.45445C20 8.10461 19.4736 6.80932 18.5357 5.8544C17.5979 4.9002 16.3264 4.36347 15 4.36347H2.645L6.17929 1.27906C6.47857 1.01797 6.51286 0.55832 6.25643 0.253588C6 -0.0511433 5.54857 -0.0860541 5.24929 0.175041L0.249285 4.53874C0.0914279 4.67692 0 4.87838 0 5.09075C0 5.30312 0.0914279 5.50458 0.249285 5.64276L5.24929 10.0065C5.54857 10.2676 6 10.2326 6.25643 9.92791C6.51286 9.62318 6.47857 9.16353 6.17929 8.90244L2.645 5.81803Z" fill={setColor} - fill-opacity={opacity} + fillOpacity={opacity} /> ); From b65aaf645bf643474290d80a607a81ed37223962 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 16:13:45 +0200 Subject: [PATCH 04/16] Set correct format for msOverflowStyle property --- src/components/Apps/AppViewerContainer.tsx | 2 +- src/components/Apps/AppsCategoryDesktop.tsx | 4 ++-- src/components/Apps/AppsLibraryDesktop.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index aa60a6c..daa3a7e 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/src/components/Apps/AppViewerContainer.tsx @@ -19,7 +19,7 @@ const AppViewerContainer = React.forwardRef( padding: 0; } * { - -msOverflowStyle: none; /* IE and Edge */ + msOverflowStyle: 'none', /* IE and Edge */ scrollbar-width: none; /* Firefox */ } *::-webkit-scrollbar { diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index fbad9a7..754630e 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -68,7 +68,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: 'none', // Hide scrollbar for IE and older Edge - '-msOverflowStyle': 'none', + msOverflowStyle: 'none', }); const StyledVirtuosoContainer = styled('div')({ @@ -87,7 +87,7 @@ const StyledVirtuosoContainer = styled('div')({ scrollbarWidth: 'none', // Hide scrollbar for IE and older Edge - '-msOverflowStyle': 'none', + msOverflowStyle: 'none', }); export const AppsCategoryDesktop = ({ diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 62c3bec..73ac307 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -76,7 +76,7 @@ const ScrollerStyled = styled('div')({ scrollbarWidth: 'none', // Hide scrollbar for IE and older Edge - '-msOverflowStyle': 'none', + msOverflowStyle: 'none', }); const StyledVirtuosoContainer = styled('div')({ @@ -95,7 +95,7 @@ const StyledVirtuosoContainer = styled('div')({ scrollbarWidth: 'none', // Hide scrollbar for IE and older Edge - '-msOverflowStyle': 'none', + msOverflowStyle: 'none', }); export const AppsLibraryDesktop = ({ From 92f255a175068259735ea54c4abb346c808fe388 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 16:15:17 +0200 Subject: [PATCH 05/16] Remove unused method --- src/components/PasswordField/PasswordField.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx index 31f0a49..b59538e 100644 --- a/src/components/PasswordField/PasswordField.tsx +++ b/src/components/PasswordField/PasswordField.tsx @@ -4,7 +4,6 @@ import { TextField, TextFieldProps, styled, - useTheme, } from '@mui/material'; import { forwardRef, useState } from 'react'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; @@ -52,7 +51,6 @@ export const CustomInput = styled(TextField)(({ theme }) => ({ export const PasswordField = forwardRef( ({ ...props }, ref) => { const [canViewPassword, setCanViewPassword] = useState(false); - const theme = useTheme(); return ( Date: Sun, 20 Apr 2025 16:28:47 +0200 Subject: [PATCH 06/16] Refactor style with theme --- src/components/GeneralNotifications.tsx | 44 ++++++++++++++----------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx index 3235fbb..97c498b 100644 --- a/src/components/GeneralNotifications.tsx +++ b/src/components/GeneralNotifications.tsx @@ -43,7 +43,13 @@ export const GeneralNotifications = ({ address }) => { > + PAYMENT NOTIFICATION } @@ -53,13 +59,13 @@ export const GeneralNotifications = ({ address }) => { slotProps={{ tooltip: { sx: { - color: '#ffffff', - backgroundColor: '#444444', + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, }, }, arrow: { sx: { - color: '#444444', + color: theme.palette.text.primary, }, }, }} @@ -68,9 +74,7 @@ export const GeneralNotifications = ({ address }) => { sx={{ color: hasNewPayment ? 'var(--unread)' - : theme.palette.mode === 'dark' - ? 'rgb(209, 209, 209)' - : 'rgba(41, 41, 43, 1)', + : theme.palette.text.primary, }} /> @@ -88,14 +92,14 @@ export const GeneralNotifications = ({ address }) => { > {!hasNewPayment && ( @@ -110,12 +114,12 @@ export const GeneralNotifications = ({ address }) => { {hasNewPayment && ( { setAnchorEl(null); @@ -124,18 +128,18 @@ export const GeneralNotifications = ({ address }) => { > { />{' '} {formatDate(latestTx?.timestamp)} + { > {latestTx?.amount} + Date: Sun, 20 Apr 2025 16:54:13 +0200 Subject: [PATCH 07/16] Remove custom icons and use the MUI material icons --- src/App.tsx | 137 +++++++++++++++----------------- src/assets/Icons/Download.tsx | 32 -------- src/assets/Icons/Logout.tsx | 28 ------- src/assets/Icons/LogoutIcon.tsx | 18 ----- 4 files changed, 66 insertions(+), 149 deletions(-) delete mode 100644 src/assets/Icons/Download.tsx delete mode 100644 src/assets/Icons/Logout.tsx delete mode 100644 src/assets/Icons/LogoutIcon.tsx diff --git a/src/App.tsx b/src/App.tsx index 3ad6fe2..7d3a7c7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,13 +29,12 @@ import { decryptStoredWallet } from './utils/decryptWallet'; import { CountdownCircleTimer } from 'react-countdown-circle-timer'; import Logo1Dark from './assets/svgs/Logo1Dark.svg'; import RefreshIcon from '@mui/icons-material/Refresh'; +import DownloadIcon from '@mui/icons-material/Download'; import Copy from './assets/svgs/Copy.svg'; import ltcLogo from './assets/ltc.png'; import PersonSearchIcon from '@mui/icons-material/PersonSearch'; import qortLogo from './assets/qort.png'; import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { Download } from './assets/Icons/Download.tsx'; -import { Logout } from './assets/Icons/Logout.tsx'; import { Return } from './assets/Icons/Return.tsx'; import WarningIcon from '@mui/icons-material/Warning'; import Success from './assets/svgs/Success.svg'; @@ -73,6 +72,7 @@ import { TaskManager } from './components/TaskManager/TaskManager.tsx'; import { useModal } from './common/useModal'; import { CustomizedSnackbars } from './components/Snackbar/Snackbar'; import SettingsIcon from '@mui/icons-material/Settings'; +import LogoutIcon from '@mui/icons-material/Logout'; import HelpIcon from '@mui/icons-material/Help'; import { cleanUrl, @@ -1538,46 +1538,43 @@ function App() { > - - LOG OUT - - } - placement="left" - arrow - sx={{ fontSize: '24' }} - slotProps={{ - tooltip: { - sx: { - color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, - }, - }, - arrow: { - sx: { - color: theme.palette.text.primary, - }, - }, + { + logoutFunc(); + setIsOpenDrawerProfile(false); }} > - + LOGOUT + + } + placement="left" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.primary, + }, + }, }} - onClick={() => { - logoutFunc(); - setIsOpenDrawerProfile(false); - }} - /> - + > + + + @@ -1888,41 +1885,39 @@ function App() { )} - - BACKUP WALLET - - } - placement="left" - arrow - sx={{ fontSize: '24' }} - slotProps={{ - tooltip: { - sx: { - color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, - }, - }, - arrow: { - sx: { - color: theme.palette.text.primary, - }, - }, + + { + setExtstate('download-wallet'); + setIsOpenDrawerProfile(false); }} > - + BACKUP WALLET + + } + placement="left" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.primary, + }, + }, }} - onClick={() => { - setExtstate('download-wallet'); - setIsOpenDrawerProfile(false); - }} - /> - + > + + + diff --git a/src/assets/Icons/Download.tsx b/src/assets/Icons/Download.tsx deleted file mode 100644 index a8498db..0000000 --- a/src/assets/Icons/Download.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useTheme } from '@mui/material'; -import { SVGProps } from './interfaces'; - -export const Download: React.FC = ({ - color, - opacity, - ...children -}) => { - const theme = useTheme(); - - const setColor = color ? color : theme.palette.text.primary; - const setOpacity = opacity ? opacity : 1; - - return ( - - - - ); -}; diff --git a/src/assets/Icons/Logout.tsx b/src/assets/Icons/Logout.tsx deleted file mode 100644 index b15d0f4..0000000 --- a/src/assets/Icons/Logout.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useTheme } from '@mui/material'; -import { SVGProps } from './interfaces'; - -export const Logout: React.FC = ({ color, opacity, ...children }) => { - const theme = useTheme(); - - const setColor = color ? color : theme.palette.text.primary; - const setOpacity = opacity ? opacity : 1; - - return ( - - - - ); -}; diff --git a/src/assets/Icons/LogoutIcon.tsx b/src/assets/Icons/LogoutIcon.tsx deleted file mode 100644 index d1a4408..0000000 --- a/src/assets/Icons/LogoutIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -export const LogoutIcon = ({ color, height = 20, width = 18 }) => { - return ( - - - - ); -}; From 958acbe9436f6b6e0a867461588dadfee4fa8648 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 17:07:29 +0200 Subject: [PATCH 08/16] Remove empty file --- src/constants/forum.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/constants/forum.ts diff --git a/src/constants/forum.ts b/src/constants/forum.ts deleted file mode 100644 index e69de29..0000000 From 2f3252a2e316953d4bd758d9d713171059d3a977 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 17:08:03 +0200 Subject: [PATCH 09/16] Get correct files from other branch --- src/components/Apps/AppInfo.tsx | 26 +++----- src/components/Apps/AppInfoSnippet.tsx | 88 ++++++++++++-------------- 2 files changed, 51 insertions(+), 63 deletions(-) diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index 60ed119..3ac6282 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -18,11 +18,9 @@ import { AppsLibraryContainer, AppsWidthLimiter, } from './Apps-styles'; -import { Avatar, Box, ButtonBase, InputBase } from '@mui/material'; -import { Add } from '@mui/icons-material'; -import { getBaseApiReact, isMobile } from '../../App'; +import { Avatar, Box } from '@mui/material'; +import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; - import { Spacer } from '../../common/Spacer'; import { executeEvent } from '../../utils/events'; import { AppRating } from './AppRating'; @@ -49,9 +47,8 @@ export const AppInfo = ({ app, myName }) => { return ( { width: '90%', }} > - {!isMobile && } + + { }} > - {!isMobile ? ( - <> - {isSelectedAppPinned - ? 'Unpin from dashboard' - : 'Pin to dashboard'} - - ) : ( - <>{isSelectedAppPinned ? 'Unpin' : 'Pin'} - )} + {isSelectedAppPinned + ? 'Unpin from dashboard' + : 'Pin to dashboard'} - {!isMobile && ( - { - setSortablePinnedApps((prev) => { - let updatedApps; + { + setSortablePinnedApps((prev) => { + let updatedApps; - if (isSelectedAppPinned) { - // Remove the selected app if it is pinned - updatedApps = prev.filter( - (item) => - !( - item?.name === app?.name && - item?.service === app?.service - ) - ); - } else { - // Add the selected app if it is not pinned - updatedApps = [ - ...prev, - { - name: app?.name, - service: app?.service, - }, - ]; - } - - saveToLocalStorage( - 'ext_saved_settings', - 'sortablePinnedApps', - updatedApps + if (isSelectedAppPinned) { + // Remove the selected app if it is pinned + updatedApps = prev.filter( + (item) => + !( + item?.name === app?.name && item?.service === app?.service + ) ); - return updatedApps; - }); - setSettingsLocalLastUpdated(Date.now()); - }} - sx={{ - backgroundColor: '#359ff7ff', - opacity: isSelectedAppPinned ? 0.6 : 1, - }} - > - - {' '} - {isSelectedAppPinned ? 'Unpin' : 'Pin'} - - - )} + } else { + // Add the selected app if it is not pinned + updatedApps = [ + ...prev, + { + name: app?.name, + service: app?.service, + }, + ]; + } + + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps + ); + return updatedApps; + }); + setSettingsLocalLastUpdated(Date.now()); + }} + sx={{ + backgroundColor: '#359ff7ff', + opacity: isSelectedAppPinned ? 0.6 : 1, + }} + > + + {' '} + {isSelectedAppPinned ? 'Unpin' : 'Pin'} + + { From fda3208072031c84347abe5daaae69d6c54a3ab5 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 17:57:19 +0200 Subject: [PATCH 10/16] Remove Add and use AddIcon from MUI --- src/common/BoundedNumericTextField.tsx | 10 +++---- src/components/Apps/AppInfo.tsx | 1 - src/components/Apps/Apps-styles.tsx | 39 ++++++++++--------------- src/components/Apps/AppsHomeDesktop.tsx | 4 +-- src/components/Apps/AppsPrivate.tsx | 4 +-- 5 files changed, 23 insertions(+), 35 deletions(-) diff --git a/src/common/BoundedNumericTextField.tsx b/src/common/BoundedNumericTextField.tsx index 9951d7e..fa0d4b1 100644 --- a/src/common/BoundedNumericTextField.tsx +++ b/src/common/BoundedNumericTextField.tsx @@ -1,9 +1,4 @@ -import { - IconButton, - InputAdornment, - TextField, - TextFieldProps, -} from '@mui/material'; +import { IconButton, InputAdornment, TextFieldProps } from '@mui/material'; import React, { useRef, useState } from 'react'; import AddIcon from '@mui/icons-material/Add'; import RemoveIcon from '@mui/icons-material/Remove'; @@ -44,6 +39,7 @@ export const BoundedNumericTextField = ({ const stringIsEmpty = (value: string) => { return value === ''; }; + const isAllZerosNum = /^0*\.?0*$/; const isFloatNum = /^-?[0-9]*\.?[0-9]*$/; const isIntegerNum = /^-?[0-9]+$/; @@ -85,6 +81,7 @@ export const BoundedNumericTextField = ({ } return value; }; + const filterValue = (value: string) => { if (stringIsEmpty(value)) return ''; value = filterTypes(value); @@ -120,6 +117,7 @@ export const BoundedNumericTextField = ({ setTextFieldValue(value); }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { onChange, ...noChangeProps } = { ...props }; return ( diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index 3ac6282..aab351d 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -1,4 +1,3 @@ -import React, { useEffect, useMemo, useState } from 'react'; import { AppCircle, AppCircleContainer, diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 152c09a..cc0f299 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -2,12 +2,12 @@ import { Typography, Box, ButtonBase } from '@mui/material'; import { styled } from '@mui/system'; export const AppsParent = styled(Box)(({ theme }) => ({ + alignItems: 'center', display: 'flex', - width: '100%', flexDirection: 'column', height: '100%', - alignItems: 'center', overflow: 'auto', + width: '100%', // For WebKit-based browsers (Chrome, Safari, etc.) '::-webkit-scrollbar': { width: '0px', // Set the width to 0 to hide the scrollbar @@ -25,34 +25,34 @@ export const AppsParent = styled(Box)(({ theme }) => ({ })); 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, + display: 'flex', + flexWrap: 'wrap', + gap: '24px', + justifyContent: 'space-evenly', + width: '90%', })); export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - width: '100%', - flexDirection: 'column', - justifyContent: 'flex-start', alignItems: 'center', backgroundColor: theme.palette.background.paper, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + width: '100%', })); 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, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + width: '90%', })); export const AppsSearchContainer = styled(Box)(({ theme }) => ({ @@ -99,15 +99,6 @@ export const AppCircleContainer = styled(Box)(({ theme }) => ({ width: '100%', })); -export const Add = styled(Typography)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - color: theme.palette.text.primary, - fontSize: '36px', - fontWeight: 500, - lineHeight: '43.57px', - textAlign: 'left', -})); - export const AppCircleLabel = styled(Typography)(({ theme }) => ({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx index f02941f..d9ad291 100644 --- a/src/components/Apps/AppsHomeDesktop.tsx +++ b/src/components/Apps/AppsHomeDesktop.tsx @@ -7,7 +7,7 @@ import { AppsContainer, } from './Apps-styles'; import { Box, ButtonBase, Input, useTheme } from '@mui/material'; -import { Add } from '@mui/icons-material'; +import AddIcon from '@mui/icons-material/Add'; import { executeEvent } from '../../utils/events'; import { Spacer } from '../../common/Spacer'; import { SortablePinnedApps } from './SortablePinnedApps'; @@ -140,7 +140,7 @@ export const AppsHomeDesktop = ({ }} > - + + Library diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx index fc032ff..4d3e852 100644 --- a/src/components/Apps/AppsPrivate.tsx +++ b/src/components/Apps/AppsPrivate.tsx @@ -23,13 +23,13 @@ import { import { Label } from '../Group/AddGroup'; import { Spacer } from '../../common/Spacer'; import { - Add, AppCircle, AppCircleContainer, AppCircleLabel, PublishQAppChoseFile, PublishQAppInfo, } from './Apps-styles'; +import AddIcon from '@mui/icons-material/Add'; import ImageUploader from '../../common/ImageUploader'; import { MyContext } from '../../App'; import { fileToBase64 } from '../../utils/fileReading'; @@ -234,7 +234,7 @@ export const AppsPrivate = ({ myName }) => { }} > - + + Private From 8cd67ddba75e39411e5d356a4cd085ceff65361c Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 18:03:35 +0200 Subject: [PATCH 11/16] Use material searchIcon --- src/components/Apps/AppsLibraryDesktop.tsx | 52 ++++++++++++---------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 73ac307..b2d170b 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -6,7 +6,6 @@ import { AppLibrarySubTitle, AppsContainer, AppsLibraryContainer, - AppsParent, AppsSearchContainer, AppsSearchLeft, AppsSearchRight, @@ -27,7 +26,7 @@ import { } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; -import IconSearch from '../../assets/svgs/Search.svg'; +import SearchIcon from '@mui/icons-material/Search'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; import qappDevelopText from '../../assets/svgs/qappDevelopText.svg'; import qappLibraryText from '../../assets/svgs/qappLibraryText.svg'; @@ -41,7 +40,6 @@ import { AppsDesktopLibraryBody, AppsDesktopLibraryHeader, } from './AppsDesktop-styles'; -import ReturnSVG from '../../assets/svgs/Return.svg'; import { ComposeP, MailIconImg, @@ -202,7 +200,8 @@ export const AppsLibraryDesktop = ({ }} > - + + setSearchValue(e.target.value)} @@ -215,6 +214,7 @@ export const AppsLibraryDesktop = ({ }} /> + {searchValue && ( + { getQapps(); @@ -234,7 +235,6 @@ export const AppsLibraryDesktop = ({ > + + { executeEvent('navigateBack', {}); }} - > - - Return to Apps Dashboard - + > + + {searchedList?.length > 0 ? ( { - // executeEvent("addTab", { - // data: qapp - // }) executeEvent('selectedAppInfo', { data: qapp, }); @@ -358,6 +355,7 @@ export const AppsLibraryDesktop = ({ /> + {qapp?.metadata?.title || qapp?.name} @@ -366,7 +364,9 @@ export const AppsLibraryDesktop = ({ ); })} + + {hasPublishApp ? 'Update Apps!' : 'Create Apps!'} + + + + { setMode('publish'); @@ -410,10 +414,12 @@ export const AppsLibraryDesktop = ({ {hasPublishApp ? 'Update' : 'Publish'} + + All @@ -473,14 +479,14 @@ export const AppsLibraryDesktop = ({ > {category?.name} From a5c4a2ae75edf1821074e87e864e6430f4a6ed46 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 18:48:00 +0200 Subject: [PATCH 12/16] Refactor q-app library page --- src/assets/Icons/QappDevelopText.tsx | 30 ++++++ src/assets/Icons/QappLibraryText.tsx | 34 ++++++ src/assets/svgs/qappDevelopText.svg | 3 - src/assets/svgs/qappLibraryText.svg | 4 - src/components/Apps/Apps-styles.tsx | 108 ++++++++++---------- src/components/Apps/AppsCategoryDesktop.tsx | 30 +----- src/components/Apps/AppsLibraryDesktop.tsx | 56 +++++----- 7 files changed, 156 insertions(+), 109 deletions(-) create mode 100644 src/assets/Icons/QappDevelopText.tsx create mode 100644 src/assets/Icons/QappLibraryText.tsx delete mode 100644 src/assets/svgs/qappDevelopText.svg delete mode 100644 src/assets/svgs/qappLibraryText.svg diff --git a/src/assets/Icons/QappDevelopText.tsx b/src/assets/Icons/QappDevelopText.tsx new file mode 100644 index 0000000..e0856cf --- /dev/null +++ b/src/assets/Icons/QappDevelopText.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material'; +import { SVGProps } from './interfaces'; + +export const QappDevelopText: React.FC = ({ + color, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + ); +}; diff --git a/src/assets/Icons/QappLibraryText.tsx b/src/assets/Icons/QappLibraryText.tsx new file mode 100644 index 0000000..146717e --- /dev/null +++ b/src/assets/Icons/QappLibraryText.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material'; +import { SVGProps } from './interfaces'; + +export const QappLibraryText: React.FC = ({ + color, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + + ); +}; diff --git a/src/assets/svgs/qappDevelopText.svg b/src/assets/svgs/qappDevelopText.svg deleted file mode 100644 index 3aa786a..0000000 --- a/src/assets/svgs/qappDevelopText.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/qappLibraryText.svg b/src/assets/svgs/qappLibraryText.svg deleted file mode 100644 index 297c466..0000000 --- a/src/assets/svgs/qappLibraryText.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index cc0f299..056308d 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -114,7 +114,7 @@ export const AppCircleLabel = styled(Typography)(({ theme }) => ({ })); export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, fontSize: '16px', fontWeight: 500, @@ -158,148 +158,150 @@ export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ })); export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'flex-end', alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + justifyContent: 'flex-end', })); 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', + backgroundColor: theme.palette.background.default, + borderRadius: '25px', + color: theme.palette.text.primary, + display: 'flex', + height: '29px', + justifyContent: 'center', + width: '101px', })); export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, 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, + display: 'flex', + flexWrap: 'wrap', + gap: '10px', + justifyContent: 'flex-start', + width: '100%', })); export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({ + alignItems: 'flex-start', + backgroundColor: theme.palette.background.default, 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 }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, 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 }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, 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%', + backgroundColor: theme.palette.background.default, + bottom: 0, + color: theme.palette.text.primary, + display: 'flex', height: '60px', + justifyContent: 'space-between', padding: '0px 10px', position: 'fixed', - bottom: 0, + width: '100%', 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, + display: 'flex', + flexGrow: 1, + justifyContent: 'flex-start', })); export const AppsNavBarRight = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'flex-end', alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + justifyContent: 'flex-end', })); 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, + borderRadius: '50%', color: theme.palette.text.primary, + display: 'flex', + height: '36px', + justifyContent: 'center', + position: 'relative', + width: '36px', })); 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, + display: 'flex', + justifyContent: 'space-between', + width: '100%', })); export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'flex-start', alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + justifyContent: 'flex-start', })); export const PublishQAppCTARight = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'flex-end', alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + justifyContent: 'flex-end', })); export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({ - width: '101px', - height: '29px', - display: 'flex', - justifyContent: 'center', alignItems: 'center', + backgroundColor: theme.palette.background.paper, + borderColor: theme.palette.background.default, borderRadius: '25px', - border: '1px solid #FFFFFF', - backgroundColor: theme.palette.background.default, + borderStyle: 'solid', + borderWidth: '1px', color: theme.palette.text.primary, + display: 'flex', + height: '29px', + justifyContent: 'center', + width: '101px', })); export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({ diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 754630e..738b561 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -1,46 +1,24 @@ -import React, { - useCallback, - useContext, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { - AppCircle, - AppCircleContainer, - AppCircleLabel, AppLibrarySubTitle, - AppsContainer, AppsLibraryContainer, - AppsParent, AppsSearchContainer, AppsSearchLeft, AppsSearchRight, AppsWidthLimiter, - PublishQAppCTAButton, - PublishQAppCTALeft, - PublishQAppCTAParent, - PublishQAppCTARight, - PublishQAppDotsBG, } from './Apps-styles'; -import { Avatar, Box, ButtonBase, InputBase, styled } from '@mui/material'; -import { Add } from '@mui/icons-material'; -import { MyContext, getBaseApiReact } from '../../App'; -import LogoSelected from '../../assets/svgs/LogoSelected.svg'; +import { ButtonBase, InputBase, styled } from '@mui/material'; +import { MyContext } from '../../App'; import IconSearch from '../../assets/svgs/Search.svg'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; -import qappDevelopText from '../../assets/svgs/qappDevelopText.svg'; -import qappDots from '../../assets/svgs/qappDots.svg'; - import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; -import { executeEvent } from '../../utils/events'; import { AppsDesktopLibraryBody, AppsDesktopLibraryHeader, } from './AppsDesktop-styles'; + const officialAppList = [ 'q-tube', 'q-blog', diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index b2d170b..3960f25 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -23,15 +23,16 @@ import { InputBase, Typography, styled, + useTheme, } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import SearchIcon from '@mui/icons-material/Search'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; -import qappDevelopText from '../../assets/svgs/qappDevelopText.svg'; -import qappLibraryText from '../../assets/svgs/qappLibraryText.svg'; +import { QappDevelopText } from '../../assets/Icons/QappDevelopText.tsx'; +import { QappLibraryText } from '../../assets/Icons/QappLibraryText.tsx'; import RefreshIcon from '@mui/icons-material/Refresh'; -import qappDots from '../../assets/svgs/qappDots.svg'; +import AppsIcon from '@mui/icons-material/Apps'; import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; @@ -40,11 +41,8 @@ import { AppsDesktopLibraryBody, AppsDesktopLibraryHeader, } from './AppsDesktop-styles'; -import { - ComposeP, - MailIconImg, - ShowMessageReturnButton, -} from '../Group/Forum/Mail-styles'; +import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; +import { Theme } from 'emoji-picker-react'; const officialAppList = [ 'q-tube', @@ -107,6 +105,7 @@ export const AppsLibraryDesktop = ({ }) => { const [searchValue, setSearchValue] = useState(''); const virtuosoRef = useRef(); + const theme = useTheme(); const officialApps = useMemo(() => { return availableQapps.filter( @@ -181,17 +180,18 @@ export const AppsLibraryDesktop = ({ - + Official Apps + + {officialApps?.map((qapp) => { @@ -387,7 +389,7 @@ export const AppsLibraryDesktop = ({ textAlign: 'start', }} > - {hasPublishApp ? 'Update Apps!' : 'Create Apps!'} + {hasPublishApp ? 'Update your app' : 'Publish your app'} @@ -399,11 +401,12 @@ export const AppsLibraryDesktop = ({ > - + - + + Categories + + All + {categories?.map((category) => { return ( {category?.name} From e8ccfb3d46390331d0d6ce529f492b62a86da0f4 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 18:58:55 +0200 Subject: [PATCH 13/16] Refactor q-app library component style --- src/components/Apps/Apps-styles.tsx | 4 +-- src/components/Apps/AppsCategoryDesktop.tsx | 32 +++++++-------------- src/components/Apps/AppsDesktop.tsx | 8 +++--- src/components/Apps/AppsLibraryDesktop.tsx | 1 - 4 files changed, 17 insertions(+), 28 deletions(-) diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 056308d..45fd02c 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -38,7 +38,7 @@ export const AppsContainer = styled(Box)(({ theme }) => ({ export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.paper, + backgroundColor: theme.palette.background.default, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', @@ -114,7 +114,7 @@ export const AppCircleLabel = styled(Typography)(({ theme }) => ({ })); export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ - backgroundColor: theme.palette.background.paper, + backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, fontSize: '16px', fontWeight: 500, diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 738b561..25d7ca3 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -9,7 +9,7 @@ import { } from './Apps-styles'; import { ButtonBase, InputBase, styled } from '@mui/material'; import { MyContext } from '../../App'; -import IconSearch from '../../assets/svgs/Search.svg'; +import SearchIcon from '@mui/icons-material/Search'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; @@ -19,22 +19,6 @@ import { AppsDesktopLibraryHeader, } from './AppsDesktop-styles'; -const officialAppList = [ - 'q-tube', - 'q-blog', - 'q-share', - 'q-support', - 'q-mail', - 'q-fund', - 'q-shop', - 'q-trade', - 'q-support', - 'q-manager', - 'q-wallets', - 'q-search', - 'q-nodecontrol', -]; - const ScrollerStyled = styled('div')({ // Hide scrollbar for WebKit browsers (Chrome, Safari) '::-webkit-scrollbar': { @@ -136,15 +120,15 @@ export const AppsCategoryDesktop = ({ @@ -159,7 +143,8 @@ export const AppsCategoryDesktop = ({ }} > - + + setSearchValue(e.target.value)} @@ -172,6 +157,7 @@ export const AppsCategoryDesktop = ({ }} /> + {searchValue && ( + + {`Category: ${category?.name}`} + {mode === 'appInfo' && !selectedTab && ( diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 3960f25..6d5c3ec 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -42,7 +42,6 @@ import { AppsDesktopLibraryHeader, } from './AppsDesktop-styles'; import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; -import { Theme } from 'emoji-picker-react'; const officialAppList = [ 'q-tube', From 8d20f1a6dba0cf9301737fc9c5ba378bef94f9b1 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 19:33:38 +0200 Subject: [PATCH 14/16] Apply theme to app pages --- src/components/Apps/AppInfo.tsx | 43 ++++++++++++++++----- src/components/Apps/AppInfoSnippet.tsx | 17 ++++++-- src/components/Apps/AppRating.tsx | 2 + src/components/Apps/Apps-styles.tsx | 24 ++++++++++-- src/components/Apps/AppsCategoryDesktop.tsx | 17 +++++--- src/components/Apps/AppsDesktop-styles.tsx | 24 ------------ src/components/Apps/AppsLibraryDesktop.tsx | 14 ++++--- 7 files changed, 88 insertions(+), 53 deletions(-) delete mode 100644 src/components/Apps/AppsDesktop-styles.tsx diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index aab351d..53a155a 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -7,7 +7,6 @@ import { AppInfoSnippetContainer, AppInfoSnippetLeft, AppInfoSnippetMiddle, - AppInfoSnippetRight, AppInfoUserName, AppsCategoryInfo, AppsCategoryInfoLabel, @@ -17,7 +16,7 @@ import { AppsLibraryContainer, AppsWidthLimiter, } from './Apps-styles'; -import { Avatar, Box } from '@mui/material'; +import { Avatar, Box, useTheme } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import { Spacer } from '../../common/Spacer'; @@ -35,6 +34,7 @@ export const AppInfo = ({ app, myName }) => { const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( sortablePinnedAppsAtom ); + const theme = useTheme(); const isSelectedAppPinned = !!sortablePinnedApps?.find( (item) => item?.name === app?.name && item?.service === app?.service @@ -104,17 +104,21 @@ export const AppInfo = ({ app, myName }) => { + {app?.metadata?.title || app?.name} + + {app?.name} + - + { setSettingsLocalLastUpdated(Date.now()); }} sx={{ - backgroundColor: '#359ff7ff', - width: '100%', - maxWidth: '320px', + backgroundColor: theme.palette.background.paper, height: '29px', + maxWidth: '320px', opacity: isSelectedAppPinned ? 0.6 : 1, + width: '100%', }} > @@ -172,6 +176,7 @@ export const AppInfo = ({ app, myName }) => { : 'Pin to dashboard'} + { executeEvent('addTab', { @@ -179,10 +184,12 @@ export const AppInfo = ({ app, myName }) => { }); }} sx={{ - backgroundColor: isInstalled ? '#0091E1' : '#247C0E', - width: '100%', - maxWidth: '320px', + backgroundColor: isInstalled + ? '#0091E1' + : theme.palette.background.paper, height: '29px', + maxWidth: '320px', + width: '100%', }} > @@ -191,25 +198,41 @@ export const AppInfo = ({ app, myName }) => { + + + - + + + + Category: + + {app?.metadata?.categoryName || 'none'} + + About this Q-App + + {app?.metadata?.description || 'No description'} diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx index 2b3b17c..c877bba 100644 --- a/src/components/Apps/AppInfoSnippet.tsx +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { AppCircle, AppCircleContainer, @@ -11,7 +10,7 @@ import { AppInfoSnippetRight, AppInfoUserName, } from './Apps-styles'; -import { Avatar, ButtonBase } from '@mui/material'; +import { Avatar, ButtonBase, useTheme } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import { Spacer } from '../../common/Spacer'; @@ -41,6 +40,8 @@ export const AppInfoSnippet = ({ const setSettingsLocalLastUpdated = useSetRecoilState( settingsLocalLastUpdatedAtom ); + const theme = useTheme(); + return ( + { @@ -112,12 +114,17 @@ export const AppInfoSnippet = ({ > {app?.metadata?.title || app?.name} + + {app?.name} + + + @@ -174,7 +181,9 @@ export const AppInfoSnippet = ({ }); }} sx={{ - backgroundColor: isInstalled ? '#0091E1' : '#247C0E', + backgroundColor: isInstalled + ? '#0091E1' + : theme.palette.background.paper, }} > diff --git a/src/components/Apps/AppRating.tsx b/src/components/Apps/AppRating.tsx index abf1bba..191650d 100644 --- a/src/components/Apps/AppRating.tsx +++ b/src/components/Apps/AppRating.tsx @@ -91,6 +91,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => { } } }, []); + useEffect(() => { if (hasCalledRef.current) return; if (!app) return; @@ -108,6 +109,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => { message: `Would you like to rate this app a rating of ${newValue}?. It will create a POLL tx.`, publishFee: fee.fee + ' QORT', }); + if (hasPublishedRating === false) { const pollName = `app-library-${app.service}-rating-${app.name}`; const pollOptions = [`1, 2, 3, 4, 5, initialValue-${newValue}`]; diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 45fd02c..a335810 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -36,6 +36,24 @@ export const AppsContainer = styled(Box)(({ theme }) => ({ width: '90%', })); +export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + display: 'flex', + flexDirection: 'column', + flexShrink: 0, + width: '100%', +})); + +export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + width: '100%', +})); + export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ alignItems: 'center', backgroundColor: theme.palette.background.default, @@ -177,13 +195,11 @@ export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ width: '101px', })); -export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - color: theme.palette.text.primary, +export const AppDownloadButtonText = styled(Typography)({ fontSize: '14px', fontWeight: 500, lineHeight: 1.2, -})); +}); export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 25d7ca3..5103488 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -1,23 +1,21 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { AppLibrarySubTitle, + AppsDesktopLibraryBody, + AppsDesktopLibraryHeader, AppsLibraryContainer, AppsSearchContainer, AppsSearchLeft, AppsSearchRight, AppsWidthLimiter, } from './Apps-styles'; -import { ButtonBase, InputBase, styled } from '@mui/material'; +import { ButtonBase, InputBase, styled, useTheme } from '@mui/material'; import { MyContext } from '../../App'; import SearchIcon from '@mui/icons-material/Search'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; -import { - AppsDesktopLibraryBody, - AppsDesktopLibraryHeader, -} from './AppsDesktop-styles'; const ScrollerStyled = styled('div')({ // Hide scrollbar for WebKit browsers (Chrome, Safari) @@ -60,6 +58,7 @@ export const AppsCategoryDesktop = ({ }) => { const [searchValue, setSearchValue] = useState(''); const virtuosoRef = useRef(); + const theme = useTheme(); const { rootHeight } = useContext(MyContext); const categoryList = useMemo(() => { @@ -148,7 +147,13 @@ export const AppsCategoryDesktop = ({ setSearchValue(e.target.value)} - sx={{ ml: 1, flex: 1 }} + sx={{ + background: theme.palette.background.paper, + borderRadius: '6px', + flex: 1, + ml: 1, + paddingLeft: '12px', + }} placeholder="Search for apps" inputProps={{ 'aria-label': 'Search for apps', diff --git a/src/components/Apps/AppsDesktop-styles.tsx b/src/components/Apps/AppsDesktop-styles.tsx deleted file mode 100644 index 26cb567..0000000 --- a/src/components/Apps/AppsDesktop-styles.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { - AppBar, - Button, - Toolbar, - Typography, - Box, - TextField, - InputLabel, - ButtonBase, - } from "@mui/material"; - import { styled } from "@mui/system"; - - export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: 'column', - flexShrink: 0, - width: '100%' - })); - export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: 'column', - flexGrow: 1, - width: '100%' - })); \ No newline at end of file diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 6d5c3ec..1c6206e 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -5,6 +5,8 @@ import { AppCircleLabel, AppLibrarySubTitle, AppsContainer, + AppsDesktopLibraryBody, + AppsDesktopLibraryHeader, AppsLibraryContainer, AppsSearchContainer, AppsSearchLeft, @@ -37,10 +39,6 @@ import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; import { executeEvent } from '../../utils/events'; -import { - AppsDesktopLibraryBody, - AppsDesktopLibraryHeader, -} from './AppsDesktop-styles'; import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; const officialAppList = [ @@ -204,7 +202,13 @@ export const AppsLibraryDesktop = ({ setSearchValue(e.target.value)} - sx={{ ml: 1, flex: 1 }} + sx={{ + background: theme.palette.background.paper, + borderRadius: '6px', + flex: 1, + ml: 1, + paddingLeft: '12px', + }} placeholder="Search for apps" inputProps={{ 'aria-label': 'Search for apps', From 57202da103b23f79dac5bfe2b86e3f07b47df744 Mon Sep 17 00:00:00 2001 From: "nico.benaz" <52411515+nbenaglia@users.noreply.github.com> Date: Mon, 21 Apr 2025 11:28:15 +0200 Subject: [PATCH 15/16] Remove curly braces --- src/components/Group/Group.tsx | 111 ++++++++++++++++----------------- 1 file changed, 53 insertions(+), 58 deletions(-) diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index bbd0455..419fa0d 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -2521,64 +2521,59 @@ export const Group = ({ )} - { - - } - { - - } - - { - - } + + + + + Date: Mon, 21 Apr 2025 11:32:13 +0200 Subject: [PATCH 16/16] Remove curly brackets --- src/components/Group/Group.tsx | 70 +++++++++++++++++----------------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 419fa0d..4573022 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -2235,42 +2235,40 @@ export const Group = ({ : '0px', }} > - { - - } +