design fixes (codesandbox#3411)

* design fixes

* finish danny things

* fix some ives stuff

* no hardcoding colors

Author: SaraVieira

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

@@ -37,8 +37,9 @@ const getIcon = name => {
 };
 
 const Grid = styled(BaseGrid)`
-  grid-template-columns: 1fr 100px;
+  grid-template-columns: 1fr 56px;
   grid-gap: ${({ theme }) => theme.space[4]}px;
+  align-items: flex-end;
 `;
 
 export const ConfigurationFilesComponent = ({ theme }) => {
@@ -150,7 +151,7 @@ export const ConfigurationFilesComponent = ({ theme }) => {
                       })
                     }
                   >
-                    Create File
+                    Create
                   </Button>
                 </Grid>
               </Element>

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

@@ -42,7 +42,7 @@ export const Dependencies: FunctionComponent = () => {
   const { dependencies = {} } = parsed;
 
   return (
-    <Collapsible title="Dependencies">
+    <Collapsible title="Dependencies" defaultOpen>
       <List marginBottom={2}>
         {Object.keys(dependencies)
           .sort()

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

@@ -4,8 +4,6 @@ import { useOvermind } from 'app/overmind';
 import { css } from '@styled-system/css';
 import { Button, Element, Stack } from '@codesandbox/components';
 
-import { TemplateConfig } from './TemplateConfig';
-
 export const Config = () => {
   const {
     actions: {
@@ -51,7 +49,6 @@ export const Config = () => {
 
   return (
     <>
-      {customTemplate && <TemplateConfig />}
       {!customTemplate && (
         <Element marginX={2} marginY={4}>
           <Button

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

@@ -29,9 +29,12 @@ const DescriptionTrimmed = styled(Text)`
 const Icon = styled(PenIcon)`
   cursor: pointer;
   opacity: 0;
+  transition: all;
+  transition-duration: ${({ theme }) => theme.speeds[4]};
 `;
 
 const SandboxDescription = styled(SidebarRow)`
+  min-height: 0;
   :hover {
     svg {
       opacity: 1;

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

@@ -41,7 +41,7 @@ export const Privacy = () => {
           <option value={1}>Unlisted (only available by url)</option>
           <option value={2}>Private</option>
         </Select>
-        {isPaidUser ? (
+        {!isPaidUser ? (
           <Text variant="muted" size={2}>
             You an change privacy of a sandbox as a Pro.{' '}
             <Link href="/pro" css={{ textDecoration: 'underline !important' }}>

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

@@ -1,14 +1,8 @@
 import * as templates from '@codesandbox/common/lib/templates';
 import React, { FunctionComponent, useState } from 'react';
-import { SketchPicker } from 'react-color';
+
 import { useOvermind } from 'app/overmind';
-import {
-  Collapsible,
-  List,
-  ListAction,
-  Text,
-  Element,
-} from '@codesandbox/components';
+import { ListAction, Text, Element } from '@codesandbox/components';
 import styled, { css } from 'styled-components';
 import getIcon from '@codesandbox/common/lib/templates/icons';
 import { ColorIcons as Icons } from '@codesandbox/template-icons';
@@ -21,21 +15,6 @@ const buttonStyles = css`
   cursor: pointer;
 `;
 
-const PickColor = styled(PopoverDisclosure)`
-  ${({ theme, color }) => css`
-    width: ${theme.space[5]}px;
-    height: ${theme.space[4]}px;
-    border: 1px solid ${color};
-    background: ${color};
-    border-radius: ${theme.radii.small}px;
-    &:focus {
-      // need to use !important to override styles from
-      // workbench-theme.css, not proud :/
-      outline: none !important;
-    }
-  `}
-`;
-
 export const Button = styled(PopoverDisclosure)<{ color: string }>`
   ${({ color }) => css`
     color: ${color};
@@ -49,6 +28,7 @@ export const IconButton = styled.button`
 
 export const IconWrapper = styled(Popover)`
   ${({ theme }) => css`
+    z-index: 12;
     padding: ${theme.space[3]}px;
     background: ${theme.colors.sideBar.background};
   `};
@@ -67,6 +47,14 @@ export const IconList = styled.ul`
   }
 `;
 
+const OpenPopover = styled(PopoverDisclosure)`
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  width: 100%;
+`;
+
 export const TemplateConfig: FunctionComponent = () => {
   const {
     actions: {
@@ -81,89 +69,54 @@ export const TemplateConfig: FunctionComponent = () => {
   const iconPopover = usePopoverState({
     placement: 'top',
   });
-  const colorPopover = usePopoverState({
-    placement: 'top',
-  });
   const [selectedIcon, setSelectedIcon] = useState(
     customTemplate.iconUrl || ''
   );
 
   const DefaultIcon = getIcon(template);
-  const defaultColor =
-    customTemplate.color || templates.default(template).color();
+  const defaultColor = templates.default(template).color();
 
   const setIcon = (key: string) => {
     setSelectedIcon(key);
     iconPopover.hide();
     editTemplate({ ...customTemplate, iconUrl: key });
   };
   const TemplateIcon = Icons[selectedIcon];
-  const [selectedColor, setSelectedColor] = useState(
-    () => customTemplate.color || templates.default(template).color()
-  );
-  const colors = Object.keys(templates)
-    .filter(x => x !== 'default')
-    .map(t => templates[t])
-    .map(a => ({ color: a.color(), title: a.niceName }));
 
   return (
-    <Collapsible title="Template" defaultOpen>
-      <List>
-        <ListAction justify="space-between" gap={2}>
-          <Text>Color</Text>
-          <Element>
-            <PickColor {...colorPopover} color={selectedColor} />
-            <Popover
-              aria-label="Choose a Color"
-              hideOnClickOutside
-              hideOnEsc
-              {...colorPopover}
-            >
-              <SketchPicker
-                color={selectedColor}
-                disableAlpha
-                onChangeComplete={({ hex }) => {
-                  colorPopover.hide();
-                  setSelectedColor(hex);
-                }}
-                presetColors={[...new Set(colors)]}
-              />
-            </Popover>
-          </Element>
-        </ListAction>
-        <ListAction justify="space-between" gap={2}>
-          <Text>Icon</Text>
-          <Element>
-            <Button {...iconPopover} color={defaultColor}>
-              {selectedIcon && TemplateIcon ? (
-                <TemplateIcon width={24} />
-              ) : (
-                <DefaultIcon width={24} />
-              )}
-            </Button>
-            <IconWrapper
-              aria-label="Choose an Icon"
-              hideOnClickOutside
-              hideOnEsc
-              {...iconPopover}
-            >
-              <IconList>
-                {Object.keys(Icons).map((i: string) => {
-                  const TemplateIconMap = Icons[i];
-                  return (
-                    // eslint-disable-next-line
-                    <li onClick={() => setIcon(i)} role="button" tabIndex={0}>
-                      <IconButton>
-                        <TemplateIconMap width={24} />
-                      </IconButton>
-                    </li>
-                  );
-                })}
-              </IconList>
-            </IconWrapper>
-          </Element>
-        </ListAction>
-      </List>
-    </Collapsible>
+    <OpenPopover {...iconPopover}>
+      <ListAction justify="space-between" gap={2}>
+        <Text>Template Icon</Text>
+        <Element>
+          <Button {...iconPopover} color={defaultColor}>
+            {selectedIcon && TemplateIcon ? (
+              <TemplateIcon width={24} />
+            ) : (
+              <DefaultIcon width={24} />
+            )}
+          </Button>
+          <IconWrapper
+            aria-label="Choose an Icon"
+            hideOnClickOutside
+            hideOnEsc
+            {...iconPopover}
+          >
+            <IconList>
+              {Object.keys(Icons).map((i: string) => {
+                const TemplateIconMap = Icons[i];
+                return (
+                  // eslint-disable-next-line
+                  <li onClick={() => setIcon(i)} role="button" tabIndex={0}>
+                    <IconButton>
+                      <TemplateIconMap width={24} />
+                    </IconButton>
+                  </li>
+                );
+              })}
+            </IconList>
+          </IconWrapper>
+        </Element>
+      </ListAction>
+    </OpenPopover>
   );
 };

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

@@ -11,13 +11,16 @@ import { PenIcon } from './icons';
 
 const Icon = styled(PenIcon)`
   cursor: pointer;
-  display: none;
+  opacity: 0;
+  transition: all;
+  transition-duration: ${({ theme }) => theme.speeds[4]};
 `;
 
 const SandboxNameWrapper = styled(SidebarRow)`
+  min-height: 0;
   :hover {
     svg {
-      display: block;
+      opacity: 1;
     }
   }
 `;

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

@@ -8,6 +8,7 @@ import {
   Avatar,
   Stack,
   List,
+  ListAction,
   ListItem,
   Switch,
   Stats,
@@ -26,6 +27,7 @@ import { Title } from './Title';
 import { Description } from './Description';
 import { Privacy } from './Privacy';
 import { Config } from './Config';
+import { TemplateConfig } from './TemplateConfig';
 
 export const ProjectInfo = () => {
   const {
@@ -65,11 +67,16 @@ export const ProjectInfo = () => {
 
   return (
     <>
-      <Collapsible title="Sandbox Info" defaultOpen>
+      <Collapsible
+        title={customTemplate ? 'Template Info' : 'Sandbox Info'}
+        defaultOpen
+      >
         <Stack direction="vertical" gap={6}>
           <Element as="section" css={css({ paddingX: 2 })}>
             <Title editable />
-            <Description editable />
+            <Element marginTop={2}>
+              <Description editable />
+            </Element>
           </Element>
 
           <Element as="section" css={css({ paddingX: 2 })}>
@@ -84,14 +91,15 @@ export const ProjectInfo = () => {
           </Element>
 
           <List>
-            <ListItem justify="space-between">
+            {customTemplate && <TemplateConfig />}
+            <ListAction onClick={updateFrozenState} justify="space-between">
               <Label htmlFor="frozen">Frozen</Label>
               <Switch
                 id="frozen"
                 onChange={updateFrozenState}
                 on={customTemplate ? sessionFrozen : isFrozen}
               />
-            </ListItem>
+            </ListAction>
             {isForked ? (
               <ListItem justify="space-between">
                 <Text>

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

@@ -102,13 +102,14 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
+        padding: 0,
         height: 6,
         width: '100%',
         fontSize: 2,
         border: 'none',
         borderRadius: 'small',
         transition: 'all ease-in',
-        transitionDuration: theme => theme.speeds[1],
+        transitionDuration: theme => theme.speeds[2],
 
         ':focus': {
           outline: 'none',

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

@@ -23,7 +23,7 @@ export const Header = styled(SidebarRow).attrs({ gap: 2 })(
       backgroundColor: 'sideBar.hoverBackground',
       svg: {
         // TODO: this should come from somewhere else - text muted maybe?
-        color: 'grays.300',
+        color: 'grays.400',
       },
     },
   })
@@ -37,7 +37,7 @@ const Icon = styled.svg<{
     transform: props.open ? 'rotate(0)' : 'rotate(-90deg)',
     transition: 'transform',
     transitionDuration: theme => theme.speeds[1],
-    color: 'grays.400',
+    color: 'grays.500',
   })
 );