style fix

ibastawisi · Aug 15, 2024 · e0ddc5f · e0ddc5f
1 parent 1aff89d
commit e0ddc5f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -53,17 +53,12 @@ header {
   transform: rotate(3deg) translate(0px, -4px);
 }
 
-.editor-toolbar {
-  background-color: #fff;
-}
-
 .splash-screen {
   position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #fff;
   z-index: 1000;
 }
 
@@ -172,15 +167,6 @@ body.fullscreen {
   }
 }
 
-@media screen {
-  [theme=dark] .editor-toolbar {
-    background-color: #121212;
-  }
-
-  [theme=dark] .splash-screen {
-    background-color: #121212;
-  }
-}
 
 @media print {
 

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -85,10 +85,10 @@ const StorageChart: React.FC = () => {
   ];
 
   return (
-    <Paper sx={{ p: 2 }}>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start' }}>Local Storage</Typography>
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6}>
+        <Paper sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 2 }}>
+          <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start', userSelect: 'none' }}>Local Storage</Typography>
           {isLoading && <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 300, gap: 2 }}>
             <CircularProgress disableShrink />
           </Box>}
@@ -116,10 +116,13 @@ const StorageChart: React.FC = () => {
             width={256}
             height={300}
             slotProps={{ legend: { hidden: true } }}
+            sx={{ mx: 'auto' }}
           />}
-        </Grid>
-        {<Grid item xs={12} sm={6} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start' }}>Cloud Storage</Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Paper sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 2 }}>
+          <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start', userSelect: 'none' }}>Cloud Storage</Typography>
           {isLoading && <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 300, gap: 2 }}>
             <CircularProgress disableShrink />
           </Box>}
@@ -152,8 +155,8 @@ const StorageChart: React.FC = () => {
             height={300}
             slotProps={{ legend: { hidden: true } }}
           />}
-        </Grid>}
+        </Paper>
       </Grid>
-    </Paper>
+    </Grid>
   );
 };
diff --git a/src/components/EditorSkeleton.tsx b/src/components/EditorSkeleton.tsx
@@ -24,13 +24,17 @@ export const EditorSkeleton: React.FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <>
-      <AppBar elevation={toolbarTrigger ? 4 : 0} position={toolbarTrigger ? 'fixed' : 'static'}>
+      <AppBar elevation={toolbarTrigger ? 4 : 0} position={toolbarTrigger ? 'fixed' : 'static'}
+        sx={{
+          background: 'var(--mui-palette-background-default) !important',
+          transition: 'none'
+        }}>
         <Toolbar className="editor-toolbar" sx={{
           position: "relative",
           displayPrint: 'none', px: `${(toolbarTrigger ? 1 : 0)}!important`,
-          justifyContent: "space-between", alignItems: "start", gap: 0.5, py: 1,
+          justifyContent: "space-between", alignItems: "center", gap: 0.5, py: 1,
         }}>
-          <Box sx={{ display: "flex" }}>
+          <Box sx={{ display: "flex", alignSelf: 'start' }}>
             <IconButton aria-label="Undo" disabled>
               <Undo />
             </IconButton>
@@ -195,7 +199,7 @@ export const EditorSkeleton: React.FC<PropsWithChildren> = ({ children }) => {
               </ToggleButton>
             </ToggleButtonGroup>
           </Box>
-          <Box sx={{ display: "flex", gridColumn: "3/-1" }}>
+          <Box sx={{ display: "flex", alignSelf: 'start' }}>
             <IconButton aria-label='Insert'>
               <Add />
             </IconButton>

diff --git a/src/editor/plugins/ToolbarPlugin/Tools/ColorPicker.tsx b/src/editor/plugins/ToolbarPlugin/Tools/ColorPicker.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { MenuItem, ListItemText, ToggleButton, Menu, ListSubheader, ListItemIcon } from '@mui/material';
 import { FormatColorFill, CircleOutlined, FormatClear, FormatColorReset, Circle } from '@mui/icons-material';
 
-const textPalete = [
+const textPalette = [
   "#d7170b",
   "#fe8a2b",
   "#ffc02b",
@@ -20,7 +20,7 @@ const textPalete = [
   "#ffffff",
 ]
 
-const backgroundPalete = [
+const backgroundPalette = [
   "#fbbbb6",
   "#ffe0c2",
   "#fff1c2",
@@ -82,7 +82,7 @@ export default function ColorPicker({ onColorChange, onClose, toggle = "togglebu
 
       >
         <ListSubheader key="text" sx={{ width: "100%" }}>Text</ListSubheader>
-        {textPalete.map((color, index) => (
+        {textPalette.map((color, index) => (
           <MenuItem key={index} onClick={e => { onChange("text", color); }} selected={color === textColor}>
             <CircleOutlined style={{ color }} />
           </MenuItem>
@@ -91,7 +91,7 @@ export default function ColorPicker({ onColorChange, onClose, toggle = "togglebu
           <FormatClear />
         </MenuItem>
         <ListSubheader key="background" sx={{ width: "100%" }}>Background</ListSubheader>
-        {backgroundPalete.map((color, index) => (
+        {backgroundPalette.map((color, index) => (
           <MenuItem key={index} onClick={e => { onChange("background", color); }} selected={color === backgroundColor}>
             <Circle style={{ backgroundColor: color, color: 'transparent' }} />
           </MenuItem>

diff --git a/src/editor/plugins/ToolbarPlugin/index.tsx b/src/editor/plugins/ToolbarPlugin/index.tsx
@@ -262,13 +262,17 @@ function ToolbarPlugin() {
 
   return (
     <>
-      <AppBar elevation={toolbarTrigger ? 4 : 0} position={toolbarTrigger ? 'fixed' : 'static'} sx={{ transition: 'none' }}>
+      <AppBar elevation={toolbarTrigger ? 4 : 0} position={toolbarTrigger ? 'fixed' : 'static'}
+        sx={{
+          background: 'var(--mui-palette-background-default) !important',
+          transition: 'none'
+        }}>
         <Toolbar className="editor-toolbar" sx={{
           position: "relative",
           displayPrint: 'none', px: `${(toolbarTrigger ? 1 : 0)}!important`,
-          justifyContent: "space-between", alignItems: "start", gap: 0.5, py: 1,
+          justifyContent: "space-between", alignItems: "center", gap: 0.5, py: 1,
         }}>
-          <Box sx={{ display: "flex" }}>
+          <Box sx={{ display: "flex", alignSelf: 'start' }}>
             <IconButton title={IS_APPLE ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)'} aria-label="Undo" disabled={!canUndo}
               onClick={() => { activeEditor.dispatchCommand(UNDO_COMMAND, undefined); }}>
               <Undo />
@@ -291,7 +295,7 @@ function ToolbarPlugin() {
               {showTextFormatTools && <TextFormatToggles editor={activeEditor} sx={{ display: { xs: "none", sm: "none", md: "none", lg: "flex" } }} />}
             </>}
           </Box>
-          <Box sx={{ display: "flex", gridColumn: "3/-1" }}>
+          <Box sx={{ display: "flex", alignSelf: 'start' }}>
             <InsertToolMenu editor={activeEditor} />
             <AlignTextMenu editor={activeEditor} isRTL={isRTL} />
           </Box>