Tab titles

editor/src/components/filebrowser/filebrowser.tsx

@@ -213,12 +213,20 @@ export const FileBrowser = React.memo(() => {
     setAddingFile({ fileOrFolder: fileOrFolder, filename: '' })
   }, [])
 
+  const projectName = useEditorState(
+    Substores.restOfEditor,
+    (store) => {
+      return store.editor.projectName
+    },
+    'TitleBar projectName',
+  )
+
   return (
     <>
       <Section data-name='FileBrowser' onFocus={onFocus} tabIndex={-1}>
         <SectionTitleRow minimised={minimised} toggleMinimised={toggleMinimised}>
           <FlexRow flexGrow={1} style={{ position: 'relative' }}>
-            <Title>Project</Title>
+            <span>(root)</span>
             <FileBrowserActionSheet
               visible={!minimised}
               setAddingFileOrFolder={setAddingFileOrFolder}
@@ -386,7 +394,7 @@ const FileBrowserActionSheet = React.memo((props: FileBrowserActionSheetProps) =
     return (
       <ActionSheet>
         <SquareButton highlight onClick={addFolderClick}>
-          <Icons.NewFolder tooltipText='Add New Folder' />
+          <Icons.GroupClosed tooltipText='Add New Folder' />
         </SquareButton>
         <SquareButton highlight onClick={addTextFileClick}>
           <Icons.NewTextFile tooltipText='Add Code File' />

editor/src/components/filebrowser/fileitem.tsx

@@ -812,7 +812,7 @@ class FileBrowserItemInner extends React.PureComponent<
               ) : null}
               {displayAddFolder ? (
                 <Button onClick={this.showAddingFolderRow}>
-                  <Icons.NewFolder style={fileIconStyle} tooltipText='Add New Folder' />
+                  <Icons.GroupClosed style={fileIconStyle} tooltipText='Add New Folder' />
                 </Button>
               ) : null}
               {displayAddTextFile ? (

editor/src/components/navigator/insert-menu-pane.tsx

@@ -3,16 +3,7 @@
 /** @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react'
 import React from 'react'
-import { NO_OP } from '../../core/shared/utils'
-import {
-  Button,
-  FlexRow,
-  Icons,
-  Section,
-  SectionBodyArea,
-  SectionTitleRow,
-  Title,
-} from '../../uuiui'
+import { Section, SectionBodyArea } from '../../uuiui'
 import { setFocus } from '../common/actions'
 import type { EditorDispatch, LoginState } from '../editor/action-types'
 import { InsertMenu } from '../editor/insertmenu'
@@ -61,14 +52,6 @@ export const InsertMenuPane = React.memo(() => {
       tabIndex={-1}
       style={{ width: '100%', height: '100%' }}
     >
-      <SectionTitleRow minimised={false} toggleMinimised={NO_OP} hideButton={true}>
-        <FlexRow flexGrow={1} style={{ position: 'relative' }}>
-          <Title>Insert</Title>
-        </FlexRow>
-        <Button highlight style={{ width: 22, height: 22 }}>
-          <Icons.Cross onMouseDown={onClickClose} onClick={onClickClose} />
-        </Button>
-      </SectionTitleRow>
       <SectionBodyArea minimised={false} style={{ height: '100%' }}>
         <InsertMenu />
       </SectionBodyArea>

editor/src/components/navigator/left-pane/github-pane/index.tsx

@@ -1120,24 +1120,22 @@ export const GithubPane = React.memo(() => {
     <div style={{ height: '100%', overflowY: 'scroll' }}>
       <Section>
         <SectionTitleRow minimised={false} hideButton>
-          <FlexRow flexGrow={1}>
-            <Title style={{ flexGrow: 1 }}>Github</Title>
+          <FlexRow>
+            <MenuIcons.Octocat style={{ width: 19, height: 19 }} />
+            {githubUser != null ? (
+              <Button
+                style={{ gap: 4, padding: '0 6px' }}
+                onClick={openGithubProfile}
+                css={{
+                  '&:hover': {
+                    opacity: 0.6,
+                  },
+                }}
+              >
+                @{githubUser?.login}
+              </Button>
+            ) : null}
           </FlexRow>
-          {when(
-            githubUser != null,
-            <Button
-              style={{ gap: 4, padding: '0 6px' }}
-              onClick={openGithubProfile}
-              css={{
-                '&:hover': {
-                  opacity: 0.6,
-                },
-              }}
-            >
-              @{githubUser?.login}
-              {<MenuIcons.Octocat style={{ width: 19, height: 19 }} />}
-            </Button>,
-          )}
         </SectionTitleRow>
         {unless(
           isLoggedIn,

editor/src/components/navigator/left-pane/settings-pane.tsx

@@ -221,16 +221,7 @@ export const SettingsPane = React.memo(() => {
       }}
     >
       <Section>
-        <UIGridRow
-          style={{ color: colorTheme.fg1.value }}
-          padded
-          variant='<---1fr--->|------172px-------|'
-        >
-          <H2> Project </H2>
-        </UIGridRow>
-
         {isMyProject === 'yes' ? null : <ForksGiven />}
-
         <UIGridRow padded variant='<---1fr--->|------172px-------|'>
           <span style={{ color: colorTheme.fg2.value }}>Name</span>
           {userState.loginState.type !== 'LOGGED_IN' ? (

editor/src/uuiui/icons.tsx

@@ -227,9 +227,15 @@ export const Icons = {
     color: 'main',
     category: 'layout/flex',
   }),
-
   Downloaded: makeIcon({ type: 'downloaded', color: 'main', width: 18, height: 18 }),
   Gear: makeIcon({ type: 'gear', color: 'main' }),
+  GroupClosed: makeIcon({
+    type: 'group-closed',
+    category: 'element',
+    color: 'main',
+    width: 18,
+    height: 18,
+  }),
   Threedots: makeIcon({ type: 'threedots', color: 'main' }),
   LinkClosed: makeIcon({ type: 'link-closed', color: 'main' }),
   LinkStrikethrough: makeIcon({ type: 'link-strikethrough', color: 'main' }),