WIP: Redesign header (codesandbox#3517)

* duplicate header

* get all the pieces ther

* move Actions into a file

* delete dead code

* move usermenu container styles to usermenu

* make avatar wrap not take extra spac

* align avatar with buttons

* vertical align menubar

* redesign menu + sandbox name

* get the right logos top left

* adjust alignment

* remove debug line

* fixed margin issues

* add aria-label to link buttons

* fix toggle position

Author: siddharthkp

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -735,7 +735,7 @@ export class VSCodeEffect {
 
     this.elements.menubar.style.alignItems = 'center';
     this.elements.menubar.style.height = '38px';
-    this.elements.menubar.style.fontSize = '0.875rem';
+    this.elements.menubar.style.fontSize = '0.8125rem';
     this.elements.menubar.className = 'menubar';
 
     this.elements.statusbar.className = 'part statusbar';

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+
+import { UserMenu } from 'app/pages/common/UserMenu';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+
+import { Stack, Avatar, Button } from '@codesandbox/components';
+import css from '@styled-system/css';
+import {
+  ReloadIcon,
+  PreferenceIcon,
+  LikeIcon,
+  EmbedIcon,
+  ForkIcon,
+} from './icons';
+
+const TooltipButton = ({ tooltip, ...props }) => (
+  <Tooltip content={tooltip}>
+    <Button {...props} />
+  </Tooltip>
+);
+
+export const Actions = () => {
+  const {
+    actions: {
+      modalOpened,
+      editor: { likeSandboxToggled, forkSandboxClicked },
+      explore: { pickSandboxModal },
+    },
+    state: {
+      hasLogIn,
+      updateStatus,
+      user,
+      editor: {
+        currentSandbox: { id, owned, title, description, likeCount, userLiked },
+      },
+    },
+
+    actions: { signInClicked },
+  } = useOvermind();
+
+  const handleSignIn = async () => {
+    await signInClicked({ useExtraScopes: false });
+  };
+
+  let primaryAction;
+  if (!hasLogIn) primaryAction = 'Sign in';
+  else primaryAction = owned ? 'Embed' : 'Fork';
+
+  return (
+    <Stack align="center" gap={1} css={{ button: { width: 'auto' } }}>
+      {updateStatus === 'available' && (
+        <TooltipButton
+          tooltip="Update Available! Click to Refresh."
+          variant="link"
+          onClick={() => document.location.reload()}
+        >
+          <ReloadIcon css={css({ height: 3 })} />
+        </TooltipButton>
+      )}
+
+      {!hasLogIn && (
+        <TooltipButton
+          tooltip="Open preferences"
+          variant="link"
+          onClick={() => modalOpened({ modal: 'preferences' })}
+        >
+          <PreferenceIcon css={css({ height: 3 })} />
+        </TooltipButton>
+      )}
+
+      {hasLogIn ? (
+        <TooltipButton
+          tooltip={userLiked ? 'Undo like sandbox' : 'Like sandbox'}
+          variant="link"
+          onClick={() => likeSandboxToggled(id)}
+        >
+          <LikeIcon
+            css={css({
+              height: 3,
+              marginRight: 1,
+              color: userLiked ? 'reds.500' : 'inherit',
+            })}
+          />{' '}
+          <span>{likeCount}</span>
+        </TooltipButton>
+      ) : (
+        <Stack gap={1} paddingX={2} align="center">
+          <LikeIcon css={css({ height: 3 })} />
+          <span>{likeCount}</span>
+        </Stack>
+      )}
+
+      {user?.curatorAt && (
+        <Button
+          variant="secondary"
+          onClick={() => pickSandboxModal({ description, id, title })}
+        >
+          Pick
+        </Button>
+      )}
+      <Button
+        variant={primaryAction === 'Embed' ? 'primary' : 'secondary'}
+        onClick={() => modalOpened({ modal: 'share' })}
+      >
+        <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
+      </Button>
+      <Button
+        variant={primaryAction === 'Fork' ? 'primary' : 'secondary'}
+        onClick={forkSandboxClicked}
+      >
+        <ForkIcon css={css({ height: 3, marginRight: 1 })} /> Fork
+      </Button>
+      <Button
+        variant="secondary"
+        onClick={() => modalOpened({ modal: 'newSandbox' })}
+      >
+        Create Sandbox
+      </Button>
+      {hasLogIn ? (
+        <UserMenu>
+          <Avatar
+            user={{ ...user, subscriptionSince: null }}
+            css={css({ size: 6 })}
+          />
+        </UserMenu>
+      ) : (
+        <Button variant="primary" onClick={handleSignIn}>
+          Sign in
+        </Button>
+      )}
+    </Stack>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Header/MenuBar/elements.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const Child = styled.div`
   align-items: center;
   height: 38px;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 `;
 
 export const Container = styled.div`

packages/app/src/app/pages/Sandbox/Editor/Header/MenuBar/index.tsx

@@ -22,7 +22,7 @@ export const MenuBar: FunctionComponent = () => {
       className="part titlebar"
       onClick={() => track('Editor - Click Menubar')}
     >
-      <Child className="menubar" ref={menuBarEl} />
+      <Child ref={menuBarEl} />
     </Container>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Header/MenuBar/titlebar.css

@@ -174,7 +174,7 @@
   -webkit-app-region: no-drag;
   overflow: hidden;
   flex-wrap: wrap;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .monaco-workbench.fullscreen .menubar {
@@ -201,8 +201,7 @@
 }
 
 .monaco-workbench .menubar .menubar-menu-items-holder.monaco-menu-container {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe WPC',
-    'Segoe UI', 'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
+  font-family: Inter, sans-serif;
   outline: 0;
   border: none;
   font-size: 0.75rem;

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts

@@ -1,40 +1,14 @@
 import AutosizeInput from 'react-input-autosize';
 import styled, { css } from 'styled-components';
 
-export const Container = styled.div`
-  display: flex;
-  position: relative;
-  font-size: 0.875rem;
-  align-items: center;
-  white-space: nowrap;
-  text-align: center;
-`;
-
 export const Folder = styled.div`
-  overflow: hidden;
   display: none;
 
   @media screen and (min-width: 950px) {
     display: block;
   }
 `;
 
-export const FolderName = styled.button`
-  display: inline-block;
-  cursor: pointer;
-  transition: 0.3s ease color;
-  padding: 0;
-  margin: 0 0.25rem 0 0;
-  outline: 0;
-  border: 0;
-  background-color: transparent;
-  color: inherit;
-
-  &:hover {
-    color: white;
-  }
-`;
-
 export const Form = styled.form`
   position: absolute;
   left: 0;
@@ -57,20 +31,6 @@ export const NameInput = styled(AutosizeInput)`
   }
 `;
 
-export const Name = styled.span<{ owned?: boolean }>`
-  ${({ theme, owned }) => css`
-    color: ${theme.light ? 'black' : 'white'};
-    margin-left: 0.25rem;
-    margin-right: ${owned ? 0 : '0.5rem'};
-    cursor: ${owned ? 'pointer' : 'initial'};
-    text-overflow: ellipsis;
-    appearance: ${owned ? 'none' : 'initial'};
-    background: none;
-    border: 0;
-    outline: 0;
-  `}
-`;
-
 export const Main = styled.div`
   display: none;