refactor(app): dashboard style improvements and main page if authenti…

…cated
riccardoperra · Aug 22, 2022 · 25b716a · 25b716a
1 parent 0e2fd98
commit 25b716a
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 20 deletions.
diff --git a/apps/codeimage/src/index.tsx b/apps/codeimage/src/index.tsx
@@ -7,7 +7,7 @@ import {enableUmami} from '@core/constants/umami';
 import {OverlayProvider} from '@solid-aria/overlays';
 import {setElementVars} from '@vanilla-extract/dynamic';
 import {Router, useRoutes} from 'solid-app-router';
-import {createEffect, lazy, on, onMount, Suspense} from 'solid-js';
+import {createEffect, lazy, on, onMount, Show, Suspense} from 'solid-js';
 import {render} from 'solid-js/web';
 import './assets/styles/app.scss';
 import {SidebarPopoverHost} from './components/PropertyEditor/SidebarPopoverHost';
@@ -33,6 +33,8 @@ const Dashboard = lazy(() =>
   }),
 );
 
+const Editor = lazy(() => import('./pages/Editor/Editor'));
+
 export function Bootstrap() {
   getRootEditorStore();
   const [, {locale}] = useI18n();
@@ -41,11 +43,23 @@ export function Bootstrap() {
 
   const Routes = useRoutes([
     {
-      path: ':snippetId?',
+      path: '',
+      component: () => {
+        const state = getAuth0State();
+        return (
+          <Show fallback={() => <Editor />} when={state.loggedIn()}>
+            <Dashboard />
+          </Show>
+        );
+      },
+    },
+    {
+      path: ':snippetId',
       component: lazy(() => import('./pages/Editor/Editor')),
     },
     {
       path: 'dashboard',
+      data: ({navigate}) => navigate('/'),
       component: Dashboard,
     },
   ]);

diff --git a/apps/codeimage/src/pages/Dashboard/Dashboard.css.ts b/apps/codeimage/src/pages/Dashboard/Dashboard.css.ts
@@ -5,7 +5,7 @@ export const scaffold = style([
   adaptiveFullScreenHeight,
   {
     color: themeVars.dynamicColors.panel.textColor,
-    background: themeVars.dynamicColors.background,
+    background: themeVars.dynamicColors.panel.background,
     display: 'flex',
     flexDirection: 'column',
   },

diff --git a/apps/codeimage/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.css.ts b/apps/codeimage/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.css.ts
@@ -0,0 +1,25 @@
+import {themeVars} from '@codeimage/ui';
+import {style} from '@vanilla-extract/css';
+import {toolbarVars} from '../../../../components/Toolbar/Toolbar.css';
+import * as toolbarStyles from '../../../../components/Toolbar/Toolbar.css';
+
+export const header = style([
+  toolbarStyles.toolbarTheme,
+  {
+    padding: `0px ${themeVars.spacing['3']}`,
+    display: 'flex',
+    height: toolbarVars.toolbarHeight,
+    background: themeVars.dynamicColors.background,
+  },
+]);
+
+export const headerContent = style({
+  width: '100%',
+  margin: 'auto',
+  display: 'flex',
+  '@media': {
+    [`(min-width: 1280px)`]: {
+      width: '1280px',
+    },
+  },
+});
diff --git a/apps/codeimage/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/apps/codeimage/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -1,26 +1,29 @@
 import {Box, HStack} from '@codeimage/ui';
 import {CodeImageLogo} from '../../../../components/Icons/CodeImageLogo';
 import {sidebarLogo} from '../../../../components/Scaffold/Sidebar/Sidebar.css';
-import {actionBox, wrapper} from '../../../../components/Toolbar/Toolbar.css';
+import {actionBox} from '../../../../components/Toolbar/Toolbar.css';
 import {ToolbarSettingsButton} from '../../../../components/Toolbar/ToolbarSettings';
 import {UserBadge} from '../../../../components/UserBadge/UserBadge';
+import * as styles from './DashboardHeader.css';
 
 export function DashboardHeader() {
   return (
-    <div class={wrapper}>
-      <ToolbarSettingsButton />
+    <div class={styles.header}>
+      <div class={styles.headerContent}>
+        <ToolbarSettingsButton />
 
-      <Box display={'flex'} alignItems={'center'} flexGrow={1} marginLeft={5}>
-        <div class={sidebarLogo}>
-          <CodeImageLogo width={'140px'} />
-        </div>
-      </Box>
+        <Box display={'flex'} alignItems={'center'} flexGrow={1} marginLeft={5}>
+          <div class={sidebarLogo}>
+            <CodeImageLogo width={'140px'} />
+          </div>
+        </Box>
 
-      <Box class={actionBox} style={{flex: 1}}>
-        <HStack spacing={'2'} marginLeft={'auto'}>
-          <UserBadge />
-        </HStack>
-      </Box>
+        <Box class={actionBox} style={{flex: 1}}>
+          <HStack spacing={'2'} marginLeft={'auto'}>
+            <UserBadge />
+          </HStack>
+        </Box>
+      </div>
     </div>
   );
 }
diff --git a/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.css.ts b/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.css.ts
@@ -1,5 +1,6 @@
 import {themeVars} from '@codeimage/ui';
 import {style} from '@vanilla-extract/css';
+import {darkGrayScale} from '../../../../theme/dark-theme.css';
 
 export const item = style({
   backgroundColor: themeVars.dynamicColors.input.backgroundColor,
@@ -8,15 +9,14 @@ export const item = style({
   padding: '24px',
   paddingBottom: '12px',
   height: '128px',
-  // boxShadow: themeVars.dynamicColors.dialog.panelShadow,
-  boxShadow: 'inset 0 1px 0 0 rgb(255 255 255 / 5%)',
+  boxShadow: themeVars.boxShadow.md,
   color: themeVars.dynamicColors.baseText,
   transition: 'background-color 0.2s ease-in-out',
   position: 'relative',
   display: 'inline-flex',
   flexDirection: 'column',
   ':hover': {
-    backgroundColor: themeVars.dynamicColors.listBox.hoverBackgroundColor,
+    backgroundColor: darkGrayScale.gray2,
   },
 });
 

diff --git a/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.css.ts b/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.css.ts
@@ -6,7 +6,7 @@ const gridListItemCount = createVar();
 
 export const gridList = style({
   vars: {
-    [gridListItemCount]: '3',
+    [gridListItemCount]: '2',
   },
   display: 'grid',
   gap: themeVars.spacing['3'],