Sidebar - Lots of polish? (codesandbox#3473)

* add styles for resizer outside sidebar

* remove shadow from button

* select: increase space next to icon

* use list hover color instead of sidebar

* list hover colors

* switch colors

* change sidebar border for codesandbox

* use list hoverbackground instead of sidebar for deps

* add space between avatars in live

* button line height fix

* make config button height 5

* better naming for switch

* remove extra px from closed border

* make switch visible on backgrounds

* better hover for avatar in summary

* change white to full hex for theme ===

* update snapshot for test

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx

@@ -112,7 +112,7 @@ export const ConfigurationFilesComponent = ({ theme }) => {
                     <Button
                       css={css({
                         width: 'auto',
-                        height: 4,
+                        height: 5,
                       })}
                       variant="secondary"
                       onClick={() => editor.moduleSelected({ id: module.id })}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx

@@ -130,7 +130,7 @@ export class Dependency extends React.PureComponent<Props, State> {
           css={css({
             position: 'relative',
             '.actions': { backgroundColor: 'sideBar.background' },
-            ':hover .actions': { backgroundColor: 'sideBar.hoverBackground' },
+            ':hover .actions': { backgroundColor: 'list.hoverBackground' },
           })}
         >
           <Link

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx

@@ -150,7 +150,7 @@ export const LiveNow = () => {
       </Collapsible>
 
       <Collapsible title="Editors" defaultOpen>
-        <Element css={css({ paddingX: 2 })}>
+        <Stack direction="vertical" gap={2} css={css({ paddingX: 2 })}>
           {owners.map(user => (
             <User key={user.id} user={user} liveRole="owner" />
           ))}
@@ -161,20 +161,20 @@ export const LiveNow = () => {
             spectators.map(user => (
               <User key={user.id} user={user} liveRole="editor" />
             ))}
-        </Element>
+        </Stack>
       </Collapsible>
 
       {mode === 'classroom' && (
         <Collapsible title="Viewers" defaultOpen>
-          <Element css={css({ paddingX: 2 })}>
+          <Stack direction="vertical" gap={2} css={css({ paddingX: 2 })}>
             {spectators.map(user => (
               <User key={user.id} user={user} liveRole="spectator" />
             ))}
 
             {spectators.length
               ? null
               : 'No other users in session, invite them! '}
-          </Element>
+          </Stack>
         </Collapsible>
       )}
     </>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx

@@ -99,8 +99,13 @@ export const Summary = () => {
 
           <Element as="section" css={css({ paddingX: 2 })}>
             {author ? (
-              <Link href={profileUrl(author.username)}>
-                <Stack gap={2} align="center" marginBottom={4}>
+              <Link variant="muted" href={profileUrl(author.username)}>
+                <Stack
+                  gap={2}
+                  align="center"
+                  css={{ display: 'inline-flex' }}
+                  marginBottom={4}
+                >
                   <Avatar user={author} /> <Text>{author.username}</Text>
                 </Stack>
               </Link>

packages/common/src/design-language/colors.ts

@@ -1,5 +1,5 @@
 export const colors = {
-  white: '#fff',
+  white: '#ffffff',
   grays: {
     100: '#fff9f9',
     200: '#e6e6e6',

packages/common/src/theme/__snapshots__/theme.test.ts.snap

@@ -501,7 +501,7 @@ Object {
       "scrollbarSlider.activeBackground": "#374140",
       "scrollbarSlider.background": "#37414050",
       "sideBar.background": "#191d1f",
-      "sideBar.border": "#111518",
+      "sideBar.border": "#2d2d2d",
       "statusBar.background": "#1C2022",
       "statusBar.border": "#111518",
       "tab.activeBackground": "#1C2022",

packages/common/src/themes/codesandbox.json

@@ -24,7 +24,7 @@
     "scrollbarSlider.activeBackground": "#374140",
     "scrollbarSlider.background": "#37414050",
     "sideBar.background": "#191d1f",
-    "sideBar.border": "#111518",
+    "sideBar.border": "#2d2d2d",
     "statusBar.background": "#1C2022",
     "statusBar.border": "#111518",
     "tab.activeBackground": "#1C2022",

packages/components/src/components/Button/index.tsx

@@ -3,12 +3,6 @@ import css from '@styled-system/css';
 import deepmerge from 'deepmerge';
 import { Element } from '../Element';
 
-// totally custom button shadow, same across themes
-const interactionShadows = {
-  hover: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-  focus: '0px 2px 4px rgba(0, 0, 0, 0.4)',
-};
-
 const variantStyles = {
   primary: {
     backgroundColor: 'button.background',
@@ -21,13 +15,11 @@ const variantStyles = {
       // so we need to write the long syntax
       // TODO @sid: extend our system to make background work as well
       background: theme => theme.colors.button.hoverBackground,
-      boxShadow: interactionShadows.hover,
     },
     ':focus': {
       // we use the same colors for hover and focus
       // but we add an active state to give
       background: theme => theme.colors.button.hoverBackground,
-      boxShadow: interactionShadows.focus,
     },
     ':disabled:hover': {
       background: 'transparent', // override hover
@@ -40,11 +32,9 @@ const variantStyles = {
     // same technique as primary
     ':hover': {
       background: theme => theme.colors.secondaryButton.hoverBackground,
-      boxShadow: interactionShadows.hover,
     },
     ':focus': {
       background: theme => theme.colors.secondaryButton.hoverBackground,
-      boxShadow: interactionShadows.focus,
     },
     ':disabled:hover': {
       background: 'transparent', // override hover
@@ -68,11 +58,9 @@ const variantStyles = {
     // same technique as primary
     ':hover': {
       background: theme => theme.colors.dangerButton.hoverBackground,
-      boxShadow: interactionShadows.hover,
     },
     ':focus': {
       background: theme => theme.colors.dangerButton.hoverBackground,
-      boxShadow: interactionShadows.focus,
     },
 
     ':disabled:hover': {
@@ -106,6 +94,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
         height: 6,
         width: '100%',
         fontSize: 2,
+        lineHeight: 1, // trust the height
         border: 'none',
         borderRadius: 'small',
         transition: 'all ease-in',

packages/components/src/components/Collapsible/index.tsx

@@ -41,7 +41,7 @@ export const Body = styled(Element)<{
   open?: boolean;
 }>(props =>
   css({
-    borderBottom: '1px solid',
+    borderBottom: props.open ? '1px solid' : 'none',
     borderColor: 'sideBar.border',
     maxHeight: props.open ? '1000px' : 0,
     overflow: props.open ? 'auto' : 'hidden',

packages/components/src/components/Link/index.tsx

@@ -17,7 +17,7 @@ const LinkElement = styled(Text).attrs({ as: 'a' })<ILinkProps>(
     transition: 'color ease',
     transitionDuration: theme => theme.speeds[2],
     ':hover, :focus': {
-      color: 'inherit',
+      color: 'foreground',
     },
   })
 );