Danny's final feedback (codesandbox#3529)

* sync borders for sidebar, activity and title bar

* add flex 1 to form buttons

* sign in button needs more space

* buttons should have more weirght

* extra padding for non-icon buttons

* modified the theme, modified the snapshot

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx

@@ -94,6 +94,7 @@ export const Actions = () => {
       {user?.curatorAt && (
         <Button
           variant="secondary"
+          css={css({ paddingX: 3 })}
           onClick={() => pickSandboxModal({ description, id, title })}
         >
           Pick
@@ -113,6 +114,7 @@ export const Actions = () => {
       </Button>
       <Button
         variant="secondary"
+        css={css({ paddingX: 3 })}
         onClick={() => modalOpened({ modal: 'newSandbox' })}
       >
         Create Sandbox

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx

@@ -29,7 +29,7 @@ export const GithubLogin = () => {
             marginX={2}
             css={css({
               display: 'grid',
-              gridTemplateColumns: '1fr 50px',
+              gridTemplateColumns: '1fr auto',
               gridGap: 4,
             })}
           >

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

@@ -90,11 +90,15 @@ export const EditSummary = ({ setEditing }) => {
         <TagInput value={newTags} onChange={setNewTags} />
       </Stack>
 
-      <Stack paddingX={2}>
-        <Button variant="link" onClick={() => setEditing(false)}>
+      <Stack justify="space-between" paddingX={2}>
+        <Button
+          variant="link"
+          css={{ flex: 1 }}
+          onClick={() => setEditing(false)}
+        >
           Cancel
         </Button>
-        <Button type="submit" variant="secondary">
+        <Button type="submit" css={{ flex: 1 }} variant="secondary">
           Save
         </Button>
       </Stack>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/VarForm.tsx

@@ -63,11 +63,20 @@ export const VarForm = props => {
       </FormField>
       <Stack paddingX={2} marginTop={2}>
         {props.name && props.value ? (
-          <Button variant="link" onClick={() => props.onCancel()}>
+          <Button
+            variant="link"
+            css={{ flex: 1 }}
+            onClick={() => props.onCancel()}
+          >
             Cancel
           </Button>
         ) : null}
-        <Button variant="secondary" type="submit" disabled={!name || !value}>
+        <Button
+          type="submit"
+          variant="secondary"
+          css={{ flex: 1 }}
+          disabled={!name || !value}
+        >
           {props.name && props.value ? 'Save' : 'Add Secret'}
         </Button>
       </Stack>

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

@@ -467,7 +467,7 @@ Object {
     "$schema": "vscode://schemas/color-theme",
     "colors": Object {
       "activityBar.background": "#1C2022",
-      "activityBar.border": "#111518",
+      "activityBar.border": "#2d2d2d",
       "activityBarBadge.background": "#C0C0C0",
       "activityBarBadge.foreground": "#1C2022",
       "badge.background": "#374140",
@@ -508,7 +508,7 @@ Object {
       "tab.border": "#111518",
       "tab.inactiveBackground": "#111518",
       "titleBar.activeBackground": "#1C2022",
-      "titleBar.border": "#111518",
+      "titleBar.border": "#2d2d2d",
     },
     "isCodeSandbox": true,
     "tokenColors": Array [

packages/common/src/themes/codesandbox.json

@@ -4,7 +4,7 @@
   "type": "dark",
   "colors": {
     "activityBar.background": "#1C2022",
-    "activityBar.border": "#111518",
+    "activityBar.border": "#2d2d2d",
     "activityBarBadge.background": "#C0C0C0",
     "activityBarBadge.foreground": "#1C2022",
     "badge.background": "#374140",
@@ -31,7 +31,7 @@
     "tab.border": "#111518",
     "tab.inactiveBackground": "#111518",
     "titleBar.activeBackground": "#1C2022",
-    "titleBar.border": "#111518",
+    "titleBar.border": "#2d2d2d",
     "editorSuggestWidget.background": "#111518",
     "editorSuggestWidget.selectedBackground": "#24282A",
     "editorSuggestWidget.border": "#111518",

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

@@ -97,6 +97,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
         height: 6,
         width: '100%',
         fontSize: 2,
+        fontWeight: 'medium',
         lineHeight: 1, // trust the height
         border: 'none',
         borderRadius: 'small',