diff --git a/src/App.tsx b/src/App.tsx index 4cb416a..ba2329b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -606,6 +606,7 @@ function App() { }); }); } catch (error) { + console.log(error); } finally { setIsLoading(false); } diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 631186b..15cdb9d 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -1,78 +1,78 @@ -import { Typography, Box, ButtonBase } from "@mui/material"; -import { styled } from "@mui/system"; +import { Typography, Box, 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", + 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 + '::-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 + scrollbarWidth: 'none', // Hides the scrollbar in Firefox // Optional for better cross-browser consistency - "-msOverflowStyle": "none", // Hides scrollbar in IE and Edge + '-msOverflowStyle': 'none', // Hides scrollbar in IE and Edge backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppsContainer = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: "space-evenly", - gap: "24px", - flexWrap: "wrap", - alignItems: "flex-start", - alignSelf: "center", + 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", + display: 'flex', + width: '100%', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'center', backgroundColor: theme.palette.background.paper, })); export const AppsWidthLimiter = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - flexDirection: "column", - justifyContent: "flex-start", - alignItems: "flex-start", + display: 'flex', + width: '90%', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'flex-start', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppsSearchContainer = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: "space-between", - alignItems: "center", - borderRadius: "8px", - padding: "0px 10px", - height: "36px", + 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", + display: 'flex', + width: '90%', + justifyContent: 'flex-start', + alignItems: 'center', + gap: '10px', flexGrow: 1, flexShrink: 0, backgroundColor: theme.palette.background.default, @@ -80,51 +80,50 @@ export const AppsSearchLeft = styled(Box)(({ theme }) => ({ })); export const AppsSearchRight = styled(Box)(({ theme }) => ({ - display: "flex", - width: "90%", - justifyContent: "flex-end", - alignItems: "center", + display: 'flex', + width: '90%', + justifyContent: 'flex-end', + alignItems: 'center', flexShrink: 1, backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppCircleContainer = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: "column", - gap: "5px", - alignItems: "center", - width: "100%", + display: 'flex', + flexDirection: 'column', + gap: '5px', + alignItems: 'center', + width: '100%', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const Add = styled(Typography)(({ theme }) => ({ - fontSize: "36px", + fontSize: '36px', fontWeight: 500, - lineHeight: "43.57px", - textAlign: "left", + lineHeight: '43.57px', + textAlign: 'left', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); 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", + '-webkit-box-orient': 'vertical', + '-webkit-line-clamp': '2', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: '-webkit-box', + fontSize: '14px', + fontWeight: 500, + lineHeight: 1.2, + overflow: 'hidden', + textOverflow: 'ellipsis', + width: '120%', })); export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ - fontSize: "16px", + fontSize: '16px', fontWeight: 500, lineHeight: 1.2, backgroundColor: theme.palette.background.default, @@ -132,58 +131,63 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ })); export const AppCircle = styled(Box)(({ theme }) => ({ - display: "flex", - width: "75px", - flexDirection: "column", - height: "75px", - alignItems: "center", - justifyContent: "center", - borderRadius: "50%", + alignItems: 'center', backgroundColor: theme.palette.background.default, + borderColor: + theme.palette.mode === 'dark' + ? 'rgb(209, 209, 209)' + : 'rgba(41, 41, 43, 1)', + borderWidth: '1px', + borderRadius: '50%', + borderStyle: 'solid', color: theme.palette.text.primary, - border: "1px solid #FFFFFF", + display: 'flex', + flexDirection: 'column', + height: '75px', + justifyContent: 'center', + width: '75px', })); export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: "space-between", - alignItems: "center", - width: "100%", + alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + justifyContent: 'space-between', + width: '100%', })); export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: "flex-start", - alignItems: "center", - gap: "12px", + alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, + display: 'flex', + gap: '12px', + justifyContent: 'flex-start', })); export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: "flex-end", - alignItems: "center", + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ - backgroundColor: "#247C0E", + backgroundColor: '#247C0E', color: theme.palette.text.primary, - width: "101px", - height: "29px", - display: "flex", - justifyContent: "center", - alignItems: "center", - borderRadius: "25px", - alignSelf: "center", + width: '101px', + height: '29px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '25px', + alignSelf: 'center', })); export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ - fontSize: "14px", + fontSize: '14px', fontWeight: 500, lineHeight: 1.2, backgroundColor: theme.palette.background.default, @@ -191,50 +195,50 @@ export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ })); export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({ - gap: "10px", - flexWrap: "wrap", - justifyContent: "flex-start", - width: "100%", - display: "flex", + 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", + 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", + fontSize: '16px', fontWeight: 500, lineHeight: 1.2, - textAlign: "start", + textAlign: 'start', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppInfoUserName = styled(Typography)(({ theme }) => ({ - fontSize: "13px", + fontSize: '13px', fontWeight: 400, lineHeight: 1.2, - textAlign: "start", + 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", + 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, @@ -242,120 +246,120 @@ export const AppsNavBarParent = styled(Box)(({ theme }) => ({ })); export const AppsNavBarLeft = styled(Box)(({ theme }) => ({ - display: "flex", - justifyContent: "flex-start", - alignItems: "center", + 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", + 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", + 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%", + 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", + 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", + 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", + 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", + 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", + fontSize: '10px', fontWeight: 400, lineHeight: 1.2, - fontStyle: "italic", + 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", + width: '101px', + height: '30px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '5px', fontWeight: 600, - fontSize: "10px", + fontSize: '10px', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppsCategoryInfo = styled(Box)(({ theme }) => ({ - display: "flex", - alignItems: "center", - width: "100%", + 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", + display: 'flex', + flexDirection: 'column', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({ - fontSize: "12px", + fontSize: '12px', fontWeight: 700, lineHeight: 1.2, backgroundColor: theme.palette.background.default, @@ -363,7 +367,7 @@ export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({ })); export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({ - fontSize: "12px", + fontSize: '12px', fontWeight: 500, lineHeight: 1.2, backgroundColor: theme.palette.background.default, @@ -371,11 +375,11 @@ export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({ })); export const AppsInfoDescription = styled(Typography)(({ theme }) => ({ - fontSize: "13px", + fontSize: '13px', fontWeight: 300, lineHeight: 1.2, - width: "90%", - textAlign: "start", + width: '90%', + textAlign: 'start', backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, })); diff --git a/src/components/Apps/AppsDevModeTabComponent.tsx b/src/components/Apps/AppsDevModeTabComponent.tsx index 46372a5..e25bf11 100644 --- a/src/components/Apps/AppsDevModeTabComponent.tsx +++ b/src/components/Apps/AppsDevModeTabComponent.tsx @@ -1,22 +1,21 @@ -import React from "react"; -import { TabParent } from "./Apps-styles"; -import NavCloseTab from "../../assets/svgs/NavCloseTab.svg"; -import { getBaseApiReact } from "../../App"; -import { Avatar, ButtonBase } from "@mui/material"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; -import { executeEvent } from "../../utils/events"; +import { TabParent } from './Apps-styles'; +import NavCloseTab from '../../assets/svgs/NavCloseTab.svg'; +import { getBaseApiReact } from '../../App'; +import { Avatar, ButtonBase } from '@mui/material'; +import LogoSelected from '../../assets/svgs/LogoSelected.svg'; +import { executeEvent } from '../../utils/events'; export const AppsDevModeTabComponent = ({ isSelected, app }) => { return ( { if (isSelected) { - executeEvent("removeTabDevMode", { + executeEvent('removeTabDevMode', { data: app, }); return; } - executeEvent("setSelectedTabDevMode", { + executeEvent('setSelectedTabDevMode', { data: app, isDevMode: true, }); @@ -24,15 +23,15 @@ export const AppsDevModeTabComponent = ({ isSelected, app }) => { > {isSelected && ( { )} center-icon diff --git a/src/components/Apps/AppsHome.tsx b/src/components/Apps/AppsHome.tsx index 81fc9b8..4b5b030 100644 --- a/src/components/Apps/AppsHome.tsx +++ b/src/components/Apps/AppsHome.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useMemo, useState } from 'react'; import { AppCircle, AppCircleContainer, @@ -6,52 +6,51 @@ import { AppLibrarySubTitle, AppsContainer, AppsParent, -} from "./Apps-styles"; -import { Avatar, ButtonBase } from "@mui/material"; -import { Add } from "@mui/icons-material"; -import { getBaseApiReact, isMobile } from "../../App"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; -import { executeEvent } from "../../utils/events"; -import { SortablePinnedApps } from "./SortablePinnedApps"; -import { Spacer } from "../../common/Spacer"; +} from './Apps-styles'; +import { Avatar, ButtonBase } from '@mui/material'; +import { Add } from '@mui/icons-material'; +import { getBaseApiReact, isMobile } from '../../App'; +import LogoSelected from '../../assets/svgs/LogoSelected.svg'; +import { executeEvent } from '../../utils/events'; +import { SortablePinnedApps } from './SortablePinnedApps'; +import { Spacer } from '../../common/Spacer'; -export const AppsHome = ({ setMode, myApp, myWebsite, availableQapps }) => { +export const AppsHome = ({ setMode, myApp, myWebsite, availableQapps }) => { return ( <> - - - Apps Dashboard - - - - + Apps Dashboard + + { - setMode("library"); + setMode('library'); }} > - + + Library - - - + + - + ); }; diff --git a/src/components/Apps/AppsLibrary.tsx b/src/components/Apps/AppsLibrary.tsx index 3eee1c2..c79e1af 100644 --- a/src/components/Apps/AppsLibrary.tsx +++ b/src/components/Apps/AppsLibrary.tsx @@ -58,6 +58,8 @@ const officialAppList = [ 'q-search', ]; +// TODO: apply dark/light style + const ScrollerStyled = styled('div')({ // Hide scrollbar for WebKit browsers (Chrome, Safari) '::-webkit-scrollbar': {