menu design + fix grid (codesandbox#4010)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx

@@ -47,13 +47,14 @@ export const SandboxCard = ({ sandbox, template, ...props }: Props) => {
     >
       <Element
         as="div"
-        css={{
+        css={css({
           height: 160,
+          backgroundColor: 'grays.600',
           backgroundImage: `url(${sandbox.screenshotUrl})`,
           backgroundSize: 'cover',
           backgroundPosition: 'center center',
           backgroundRepeat: 'no-repeat',
-        }}
+        })}
       />
       <Stack justify="space-between" align="center" marginLeft={4}>
         {edit ? (

packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx

@@ -1,6 +1,14 @@
 import React, { useEffect } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 import { useOvermind } from 'app/overmind';
-import { Text, Button, Grid, Column } from '@codesandbox/components';
+import {
+  Stack,
+  Grid,
+  Column,
+  Text,
+  Link,
+  Button,
+} from '@codesandbox/components';
 import css from '@styled-system/css';
 import { SandboxCard } from 'app/pages/NewDashboard/Components/SandboxCard';
 import { Loading } from 'app/pages/NewDashboard/Components/Loading';
@@ -21,16 +29,17 @@ export const StartSandboxes = () => {
   return (
     <>
       <section style={{ position: 'relative' }}>
-        <Text marginBottom={4} block>
-          Recently used Templates
-        </Text>
+        <Stack justify="space-between" marginBottom={4}>
+          <Text>Recently Used Templates</Text>
+        </Stack>
+
         {sandboxes.TEMPLATE_START_PAGE ? (
           <Grid
             rowGap={6}
             columnGap={6}
             marginBottom={8}
             css={css({
-              gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
             })}
           >
             {sandboxes.TEMPLATE_START_PAGE.map(({ sandbox }) => (
@@ -45,20 +54,20 @@ export const StartSandboxes = () => {
       </section>
 
       <section style={{ position: 'relative' }}>
-        <Text
-          marginBottom={4}
-          block
-          css={css({ position: 'relative', zIndex: 99 })}
-        >
-          Your Recent Sandboxes
-        </Text>
+        <Stack justify="space-between" align="center" marginBottom={4}>
+          <Text>Your Recent Sandboxes</Text>
+          <Link as={RouterLink} to="recent" size={3} variant="muted">
+            Show more
+          </Link>
+        </Stack>
+
         {sandboxes.RECENT_START_PAGE ? (
           <Grid
             rowGap={6}
             columnGap={6}
             marginBottom={8}
             css={css({
-              gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
             })}
           >
             <Column>

packages/app/src/app/pages/NewDashboard/Sidebar/index.tsx

@@ -78,6 +78,9 @@ export const Sidebar = props => {
                   width: '100%',
                   height: '100%',
                   paddingLeft: 2,
+                  borderBottom: '1px solid',
+                  borderColor: 'sideBar.border',
+                  borderRadius: 0,
                 })}
               >
                 <Stack as="span" align="center">
@@ -95,12 +98,31 @@ export const Sidebar = props => {
                 </Stack>
                 <Icon name="caret" size={8} />
               </Stack>
-              <Menu.List css={{ width: SIDEBAR_WIDTH }}>
+              <Menu.List style={{ width: SIDEBAR_WIDTH, borderRadius: 0 }}>
                 <Menu.Item
                   css={{ textAlign: 'left' }}
                   onSelect={() => actions.dashboard.setActiveTeam({ id: null })}
                 >
-                  <Text size={3}>{user.username} (Personal)</Text>
+                  <Stack align="center">
+                    <Stack
+                      as="span"
+                      css={css({ width: 8 })}
+                      align="center"
+                      justify="center"
+                    >
+                      <Avatar user={user} css={css({ size: 5 })} />
+                    </Stack>
+                    <Text
+                      size={3}
+                      weight={
+                        activeAccount.username === user.username
+                          ? 'semibold'
+                          : 'normal'
+                      }
+                    >
+                      {user.username} (Personal)
+                    </Text>
+                  </Stack>
                 </Menu.Item>
                 {dashboard.teams.map(team => (
                   <Menu.Item
@@ -111,7 +133,32 @@ export const Sidebar = props => {
                       actions.dashboard.setActiveTeam({ id: team.id })
                     }
                   >
-                    <Text size={3}>{team.name}</Text>
+                    <Stack align="center">
+                      <Stack
+                        as="span"
+                        css={css({ width: 8 })}
+                        align="center"
+                        justify="center"
+                      >
+                        <Avatar
+                          user={{
+                            username: team.name,
+                            avatarUrl: 'https://github.com/github.png',
+                          }}
+                          css={css({ size: 5 })}
+                        />
+                      </Stack>
+                      <Text
+                        size={3}
+                        weight={
+                          activeAccount.username === team.name
+                            ? 'semibold'
+                            : 'normal'
+                        }
+                      >
+                        {team.name}
+                      </Text>
+                    </Stack>
                   </Menu.Item>
                 ))}
               </Menu.List>

packages/components/src/components/Menu/index.tsx

@@ -54,10 +54,10 @@ const PortalStyles = createGlobalStyle(
       '&[data-selected]': {
         outline: 'none',
         backgroundColor: 'menuList.hoverBackground',
-        color: 'menuList.foreground',
+        color: 'menuList.hoverForeground',
       },
       // override reach ui styles
-      font: 'ineherit',
+      font: 'inherit',
     },
   }),
   styledcss`

packages/components/src/utils/polyfill-theme.ts

@@ -201,9 +201,10 @@ const polyfillTheme = vsCodeTheme => {
     },
     menuList: {
       background: uiColors.sideBar.background,
+      foreground: uiColors.mutedForeground,
       border: uiColors.sideBar.border,
       hoverBackground: uiColors.sideBar.border,
-      foreground: uiColors.sideBar.foreground,
+      hoverForeground: uiColors.sideBar.foreground,
     },
   };