From d1173943c27a1fe3536cb2154d8d4939d20f30db Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 12:05:42 -0400
Subject: [PATCH 1/6] project title or repo name is in the code editor title
 bar

---
 editor/src/components/titlebar/title-bar.tsx | 38 ++++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index 3678bbe554f6..a4d794059c72 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -403,6 +403,24 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
     setIsHovered(false)
   }, [])
 
+  const projectName = useEditorState(
+    Substores.restOfEditor,
+    (store) => {
+      return store.editor.projectName
+    },
+    'TitleBar projectName',
+  )
+  const { currentBranch, repoName } = useEditorState(
+    Substores.github,
+    (store) => {
+      return {
+        currentBranch: store.editor.githubSettings.branchName,
+        repoName: githubRepoFullName(store.editor.githubSettings.targetRepository),
+      }
+    },
+    'TitleBar github',
+  )
+
   return (
     <div
       ref={drag}
@@ -411,20 +429,26 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
         height: 40,
         width: '100%',
         backgroundColor: theme.inspectorBackground.value,
-        paddingLeft: 10,
+        padding: '0 10px',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 6,
-        fontWeight: 600,
+        gap: 10,
       }}
       onMouseEnter={setIsHoveredTrue}
       onMouseLeave={setIsHoveredFalse}
     >
-      <PanelButton onClick={toggleCodeEditorVisible} color='#FF5F57' isHovered={isHovered} />
-      <PanelButton onClick={onMinimize} color='#FDBC40' isHovered={isHovered} />
-      <PanelButton onClick={onMaximize} color='#33C748' isHovered={isHovered} />
-      <span style={{ marginLeft: 8 }}>Code </span>
+      <FlexRow css={{ gap: 6 }}>
+        <PanelButton onClick={toggleCodeEditorVisible} color='#FF5F57' isHovered={isHovered} />
+        <PanelButton onClick={onMinimize} color='#FDBC40' isHovered={isHovered} />
+        <PanelButton onClick={onMaximize} color='#33C748' isHovered={isHovered} />
+      </FlexRow>
+
+      {currentBranch != null ? (
+        <SimpleFlexRow>{repoName}</SimpleFlexRow>
+      ) : (
+        <ProjectTitle>{projectName}</ProjectTitle>
+      )}
     </div>
   )
 })

From 36c0606a992eabb904df84cc20206325fa45f57a Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 13:28:02 -0400
Subject: [PATCH 2/6] fix icons

---
 .../semantic/download-lightblue-18x18@2x.png  | Bin 0 -> 1013 bytes
 .../download-lightorange-18x18@2x.png         | Bin 0 -> 1054 bytes
 .../semantic/download-orange-18x18@2x.png     | Bin 0 -> 1054 bytes
 .../semantic/upload-lightblue-18x18@2x.png    | Bin 0 -> 979 bytes
 editor/src/components/titlebar/buttons.tsx    |  16 +-
 editor/src/components/titlebar/title-bar.tsx  | 141 +++++++-----------
 6 files changed, 56 insertions(+), 101 deletions(-)
 create mode 100644 editor/resources/editor/icons/light/semantic/download-lightblue-18x18@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/download-lightorange-18x18@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/download-orange-18x18@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/upload-lightblue-18x18@2x.png

diff --git a/editor/resources/editor/icons/light/semantic/download-lightblue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/download-lightblue-18x18@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..586b2c7c06cca9b8e42ebe1d46b00ad6e8027c60
GIT binary patch
literal 1013
zcmV<R0}A|!P)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm000&x
z000&x0ZCFM@Bjb-Wobi0P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RhDz12zBv0yarRK~#7F?N-ZG!!QtBL4YfCU^;*cpIfK^IsiIIDnPD)
zq=V1_9fTX7@LtjZDIw<sB4#BeF|i!Wvct*qo-JEiTch38Xo+gnsIgrLDhN4HO*Ge}
z=mu?MyGQ!kqgbAbF_nNfAvsis^i2;S(#kRISYi_jz>bfRCNrbHB{M-AV<}hiObEWv
zcZ$9zYu;j8{Y?P8JcKYkS~6p-{wgah@>NB&3*sh}9guBPLF5v$lYHryJvz?I5o<rh
zBYS8}1@kOFWV^^4gPu>q%1hWN>e|;RF?53K4&fZiH`NL!B=nCMUGjyXXWV<7XYk08
z&NF^Cd3K0dALCDT>;5zc@<S=zn&d4F`K}~pWv@?c3jEoPnI2-j0hvBk40$djnipbE
zP16$MBoq%6>kX4>E`KycvQ`BF*)VM?Y>o8}c;ya3lKO@9W*^%(P~<Yvz;2uArzky?
zhG9LYw!9D>@&Fd0WdV71>}8Jy;u~^vO{1yr2iPV4hzi)6^U&}at&h2KsM_$jpq9Dg
zMaURUa}UuV=ncaHX|{d5KAsL4?*N6cK`WrB6AoS3q_&m93I6+_lue1b`v`H0T|&IF
zCrJpUOFS2S4)EgIu<f}9ojPR2>z<5&RfVyZ5mx66GL?b7vB4vS;8mdgCmIxhg%G-m
zwM3ETEtE-=@la$-)yP36qCkWZ`ax~8s0L@Wst8tObg4@L2(EE9cw=MTy){A^q)L$~
jO=yi2l_gW7Miux4DYM~7KH#8C00000NkvXXu0mjf8CJpG

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/download-lightorange-18x18@2x.png b/editor/resources/editor/icons/light/semantic/download-lightorange-18x18@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf294c8e80f51461d93e8095bb3f7eb8a7bc805f
GIT binary patch
literal 1054
zcmV+(1mXLMP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm000&x
z000&x0ZCFM@Bjb-Wobi0P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RhDz12zBv0$)i)K~#7F?N>WiDnSsf9y#hG^6g;Q0qy`-phjw>?f?T(
zBZkaRAnpJoFw!014rB+i1R@R^SXNaxI6x26^U-MTIlz3Xd+t=-zFhzmC{W;cp&%i!
zdszbycL8CK&U|xuKvN9>RZAUR4<Q4b3E^|F1)t+45vi}9QMF<HUrX%=BS-<yB}mA8
zjQfVnh<;mu-i|uFRs5lhZPT?!9gKC3l`$#clp%a-+-ovwNM+fHDhrj<2ZenpC1pw-
z+?+u|#1hgE`FhtUUL{T=CjN~Mx8wy9>MXuw3Y+Gj<04pzL3l9q{Lrl`ou4pS>^17?
z2?17h<k|zcVhvyT1z2aWQT{JF<72He*48~fT^-wo#+R(uKndhYa{zW50X>zoJ|eP}
z#ntFV54@~l@1hSmLmk})^!*B)smXY$bXG#Ns+v@5UM)5FA?QP1AYp5EuvE6vQf&A9
zglZk=6Y`tQayzZbMPhR@fRA-P@*$28DDRk=5Y8yQZEyhTOl*O4R&j|}`|S~pvED0L
zrmxA*M!5s-@Ds%9{SdxDd}#qT4dq)N8x&5p<3h-=wyc0WAPa^KQuah6?huws#zBh8
zMqWX6X0PaE6}4=%lSx%vA7?Aqx`kNHE@WPj2pgr%Jg3(zpv)jGn7fYcrqzeUywE!}
z29^`JQy?2*ca9*F8#o&)GLi^R4ccF#1Sv2zLg^Y8glYOA*#ljTGK`cN679-^!+Tta
zjGyBFLk2?B#_DbmX4%j@XJm#tCOJ~~ICK5;{FE#E?q4HhCzXv%W<v9%0J4%PP#_O{
Y10D<!laIG_$N&HU07*qoM6N<$f_8AxQ~&?~

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/download-orange-18x18@2x.png b/editor/resources/editor/icons/light/semantic/download-orange-18x18@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e28252f497f0c6fad11f0647a58b15728c1650e
GIT binary patch
literal 1054
zcmV+(1mXLMP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm000&x
z000&x0ZCFM@Bjb-Wobi0P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RhDz12zBv0$)i)K~#7F?N-rs+AtKob^>Yt=mutkbOSO$yFkF%AWRUL
zAY=m)7U%};24RC{1pl?gsnx4zxyN9+mSv}3zUL4WAwOTecXjoE0RslSEdsPe8e;~9
zPYU?V@5n^i^Y4BXU>$7nf(~#dq+(2774DS6Z9~M3A(p@cq01soCe83w$OK53opli6
zYW##ie;DN>=N|LLxJ?z;@)>x*DMRT3_lC?1cYjq^mLD;qGm?=~GE?J6EYT8;gyba|
zzU%QQ#I#8xX8kjV6TN}9I%_N$cYJ38Ze0ZXo@-dX2l=NUlaDX?iCOyRpV##|Y}Swt
zloNV@BdD)0vH|LhS^c1OrpHESlQ6*j>kSsxXPbf_=A=Z3czeLFIaUm$vz{0U9G%A6
z3~9ePEGW>Paq)x|xAu+0$swzj&Pphq({D04Ewf^d$2dYy2q<j%Mzw6`rxS;3#H`Uu
zNYHP_AvV4yR|mdypXS5J^4keQvL=&EVfk){4IDt7i7ilPQ<wF6gM6lr><LVnF3zxp
zJE9hAMW2*J;Y~-dX{guo*g)4WwBta?u(q9mKA;bbHb{LZj*Pg=sFX~f0PbL>y@HOK
z=+bo+wR8%=rOLa7nV!osULm`x^IOfXWL~u>8>P)Wi#b%^m>|P)yt8Z6>O*2)A#RL;
z^@Bj}xHZc(ts~PLbT(=;(h^P$+W*8kJWv=RFULx=X8Iwy16_@>48IKJ(v768E!}Y?
zGLdg@;6>;++gRxa4XI+jL`GU&c)+{IIqIK}BmT4ReltQ=QXR?UAv)qODWWTx0R#HL
YAFVIxp-X;3J^%m!07*qoM6N<$f|{q}v;Y7A

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/upload-lightblue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/upload-lightblue-18x18@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..67050154d1d5c186b2c4c9fa822b94d62edead47
GIT binary patch
literal 979
zcmV;^11$WBP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm000&x
z000&x0ZCFM@Bjb-Wobi0P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RhDz12zBv0u)I^K~#7F?Uqee!Y~lWCj!qc-k{t7Hh%2N3G@cw4d4W(
zCjd?$-oP8cP6gj9H?T)wjXvW{GGKv}qy=5||6ZE3nI^wZCX)h`Dpl%lB_OBdT!mQO
zf`U7&1Ae^Fr3R5~i3E<2H;{}~9lqcJL3$3;A%iWUfX;l3G|VSV7-oregrCxumqJj%
zXDxj8#O6J+)$bILmxpkf1`Lzn*SE8lMZTy2DhO_ta)_{f$SEffPx7H}YS3`S2;0Zl
zBo8H!GtS&gR>8P28v6vSyg?fUBfbq%T}>=qT+Ud&s$Ov*p$8(3z*hpE@j9kBLyuhO
zIHR_SvpUW?h~8Dl{;ETArj)Kt@E$GsrX<cvUSDzuZ0*KO4^h5Bm<jkyGE-eDUba_4
zVl@Tw)M`J4Sb?IsqI^Rz;bx#1gEh+*;E@Wq-4d8KOx<w;(U;;PNqs~4hGW1M&;+ot
zC39?hK~?pRBLz+%l%f8HKDjq5<L<)bfjX4MZ9t*Ep5rdb&=!nh_ovz}C_WEK3m+io
z8I*?MAT<+FI|Y?Jz$SLQfQ-@V;30ZXB@MF$#r?Jy*>hbm+dkUu-^(r9oo0vWIHIL<
zo!qWm#eWJ-9G76i_1N-S44puFfZyb`-)EWh5YW0WCHlBN+K#~@YaU9ueF~>j!fB+D
z1#>cy7c8DAB(EQ||5OR&QVHZz6;7iBN|h>Q*AERM^8$pke(eAN002ovPDHLkV1i>a
Bx5oeg

literal 0
HcmV?d00001

diff --git a/editor/src/components/titlebar/buttons.tsx b/editor/src/components/titlebar/buttons.tsx
index 5f9f5b311590..299087f1fa0e 100644
--- a/editor/src/components/titlebar/buttons.tsx
+++ b/editor/src/components/titlebar/buttons.tsx
@@ -49,17 +49,12 @@ export const SquareButton: React.FC<React.PropsWithChildren<TitleButtonProps>> =
 export const RoundButton: React.FC<React.PropsWithChildren<TitleButtonProps>> = ({
   onMouseDown,
   onClick,
-  color,
   children,
 }) => {
-  const bgColor = color == null ? {} : { backgroundColor: color }
-  const ButtonEl = styled(TitleButton)((props) => ({
-    padding: '3px 12px',
+  const ButtonEl = styled(TitleButton)(() => ({
+    padding: '3px',
     gap: 5,
-    height: 24,
-    borderRadius: 18,
-    color: colorTheme.bg0.value,
-    ...bgColor,
+    borderRadius: 20,
   }))
 
   return (
@@ -67,9 +62,10 @@ export const RoundButton: React.FC<React.PropsWithChildren<TitleButtonProps>> =
       onClick={onClick}
       onMouseDown={onMouseDown}
       css={{
+        height: 20,
+        width: 20,
         '&:hover': {
-          background: color,
-          opacity: 0.7,
+          background: colorTheme.bg3.value,
         },
       }}
     >
diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index a4d794059c72..29e8b3490d25 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -91,21 +91,14 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
 
   const dispatch = useDispatch()
   const theme = useColorTheme()
-  const projectName = useEditorState(
-    Substores.restOfEditor,
-    (store) => {
-      return store.editor.projectName
-    },
-    'TitleBar projectName',
-  )
-  const { upstreamChanges, currentBranch, treeConflicts, repoName } = useEditorState(
+
+  const { upstreamChanges, currentBranch, treeConflicts } = useEditorState(
     Substores.github,
     (store) => {
       return {
         upstreamChanges: store.editor.githubData.upstreamChanges,
         currentBranch: store.editor.githubSettings.branchName,
         treeConflicts: store.editor.githubData.treeConflicts,
-        repoName: githubRepoFullName(store.editor.githubSettings.targetRepository),
       }
     },
     'TitleBar github',
@@ -180,88 +173,68 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
         height: TitleHeight,
         width: '100%',
         backgroundColor: theme.inspectorBackground.value,
-        paddingLeft: 10,
+        padding: '0 10px',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'space-between',
         gap: 10,
         flexShrink: 0,
       }}
       onMouseEnter={setIsHoveredTrue}
       onMouseLeave={setIsHoveredFalse}
     >
-      <FlexRow css={{ gap: 6 }}>
-        <PanelButton onClick={toggleNavigatorVisible} color='#FF5F57' isHovered={isHovered} />
-        <PanelButton isHovered={isHovered} color={colorTheme.unavailableGrey.value} />
-      </FlexRow>
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <FlexRow css={{ gap: 15, alignItems: 'center' }}>
+        <FlexRow css={{ gap: 6 }}>
+          <PanelButton onClick={toggleNavigatorVisible} color='#FF5F57' isHovered={isHovered} />
+          <PanelButton isHovered={isHovered} color={colorTheme.unavailableGrey.value} />
+        </FlexRow>
         {currentBranch != null ? (
           <SimpleFlexRow
+            onClick={showMergeConflict}
             style={{
               gap: 5,
-              scale: hasUpstreamChanges || hasMergeConflicts || hasDownstreamChanges ? '75%' : 1,
-              transformOrigin: 'left',
+              color: hasMergeConflicts ? colorTheme.error.value : colorTheme.fg1.value,
             }}
           >
-            {repoName}
-            {<Icons.Branch style={{ width: 19, height: 19 }} />}
+            {hasMergeConflicts ? (
+              <Icons.WarningTriangle style={{ width: 18, height: 18 }} color={'error'} />
+            ) : (
+              <Icons.Branch style={{ width: 18, height: 18 }} />
+            )}
             {currentBranch}
           </SimpleFlexRow>
-        ) : (
-          <ProjectTitle>{projectName}</ProjectTitle>
-        )}
-        {when(
-          loggedIn,
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: 6,
-              scale: '75%',
-              transformOrigin: 'left',
-            }}
-          >
-            {when(
-              hasUpstreamChanges,
-              <RoundButton
-                color={colorTheme.secondaryOrange.value}
-                onClick={openLeftPaneltoGithubTab}
-                onMouseDown={onMouseDown}
-              >
-                {<Icons.Download style={{ width: 19, height: 19 }} color={'on-light-main'} />}
-                <>Remote</>
-              </RoundButton>,
-            )}
-            {when(
-              hasMergeConflicts,
-              <RoundButton
-                color={colorTheme.error.value}
-                onClick={showMergeConflict}
-                onMouseDown={onMouseDown}
-              >
-                {
-                  <Icons.WarningTriangle
-                    style={{ width: 19, height: 19 }}
-                    color={'on-light-main'}
-                  />
-                }
-                <>Merge Conflicts</>
-              </RoundButton>,
-            )}
-            {when(
-              hasDownstreamChanges,
-              <RoundButton
-                color={colorTheme.secondaryBlue.value}
-                onClick={openLeftPaneltoGithubTab}
-                onMouseDown={onMouseDown}
-              >
-                {<Icons.Upload style={{ width: 19, height: 19 }} color={'on-light-main'} />}
-                <>Local</>
-              </RoundButton>,
-            )}
-          </div>,
-        )}
-      </div>
+        ) : null}
+      </FlexRow>
+      {when(
+        loggedIn,
+        <FlexRow
+          css={{
+            gap: 2,
+          }}
+        >
+          {when(
+            hasUpstreamChanges,
+            <RoundButton
+              color={colorTheme.secondaryOrange.value}
+              onClick={openLeftPaneltoGithubTab}
+              onMouseDown={onMouseDown}
+            >
+              {<Icons.Download style={{ width: 18, height: 18 }} color={'component-orange'} />}
+            </RoundButton>,
+          )}
+          {when(
+            hasDownstreamChanges,
+            <RoundButton
+              color={colorTheme.secondaryBlue.value}
+              onClick={openLeftPaneltoGithubTab}
+              onMouseDown={onMouseDown}
+            >
+              {<Icons.Upload style={{ width: 18, height: 18 }} color={'dynamic'} />}
+            </RoundButton>,
+          )}
+        </FlexRow>,
+      )}
     </div>
   )
 })
@@ -462,22 +435,14 @@ const TitleBar = React.memo(() => {
     }),
     'TitleBar loginState',
   )
-  const projectName = useEditorState(
-    Substores.restOfEditor,
-    (store) => {
-      return store.editor.projectName
-    },
-    'TitleBar projectName',
-  )
 
-  const { upstreamChanges, currentBranch, treeConflicts, repoName } = useEditorState(
+  const { upstreamChanges, currentBranch, treeConflicts } = useEditorState(
     Substores.github,
     (store) => {
       return {
         upstreamChanges: store.editor.githubData.upstreamChanges,
         currentBranch: store.editor.githubSettings.branchName,
         treeConflicts: store.editor.githubData.treeConflicts,
-        repoName: githubRepoFullName(store.editor.githubSettings.targetRepository),
       }
     },
     'TitleBar github',
@@ -577,7 +542,6 @@ const TitleBar = React.memo(() => {
                 onClick={openLeftPaneltoGithubTab}
               >
                 {<Icons.Download style={{ width: 19, height: 19 }} color={'on-light-main'} />}
-                <>Pull Remote</>
               </RoundButton>,
             )}
             {when(
@@ -589,7 +553,6 @@ const TitleBar = React.memo(() => {
                     color={'on-light-main'}
                   />
                 }
-                <>Merge Conflicts</>
               </RoundButton>,
             )}
             {when(
@@ -599,7 +562,6 @@ const TitleBar = React.memo(() => {
                 onClick={openLeftPaneltoGithubTab}
               >
                 {<Icons.Upload style={{ width: 19, height: 19 }} color={'on-light-main'} />}
-                <>Push Local</>
               </RoundButton>,
             )}
           </>,
@@ -614,14 +576,11 @@ const TitleBar = React.memo(() => {
         }}
       >
         {currentBranch != null ? (
-          <SimpleFlexRow style={{ gap: 5, flexShrink: 0 }}>
-            {repoName}
+          <SimpleFlexRow style={{ gap: 5 }}>
             {<Icons.Branch style={{ width: 19, height: 19 }} />}
             {currentBranch}
           </SimpleFlexRow>
-        ) : (
-          <ProjectTitle>{projectName}</ProjectTitle>
-        )}
+        ) : null}
       </SimpleFlexRow>
       <div style={{ flexGrow: 1 }} />
       <div style={{ flex: '0 0 0px', paddingRight: 8 }}>

From f0b6e0bc7668c08fd2b1486d7a6e92f22f6024e2 Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 14:02:08 -0400
Subject: [PATCH 3/6] tweak

---
 editor/src/components/titlebar/title-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index 29e8b3490d25..a033eb76564a 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -193,7 +193,7 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
           <SimpleFlexRow
             onClick={showMergeConflict}
             style={{
-              gap: 5,
+              gap: 4,
               color: hasMergeConflicts ? colorTheme.error.value : colorTheme.fg1.value,
             }}
           >

From 82229af3923ed54992cf81185baba2d7658296f9 Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 15:31:28 -0400
Subject: [PATCH 4/6] project title in left menu without github

---
 editor/src/components/titlebar/title-bar.tsx | 27 ++++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index a033eb76564a..490209f654df 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -165,6 +165,14 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
     setIsHovered(false)
   }, [])
 
+  const projectName = useEditorState(
+    Substores.restOfEditor,
+    (store) => {
+      return store.editor.projectName
+    },
+    'TitleBar projectName',
+  )
+
   return (
     <div
       ref={drag}
@@ -184,7 +192,7 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
       onMouseEnter={setIsHoveredTrue}
       onMouseLeave={setIsHoveredFalse}
     >
-      <FlexRow css={{ gap: 15, alignItems: 'center' }}>
+      <FlexRow css={{ gap: 10, alignItems: 'center' }}>
         <FlexRow css={{ gap: 6 }}>
           <PanelButton onClick={toggleNavigatorVisible} color='#FF5F57' isHovered={isHovered} />
           <PanelButton isHovered={isHovered} color={colorTheme.unavailableGrey.value} />
@@ -204,7 +212,9 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
             )}
             {currentBranch}
           </SimpleFlexRow>
-        ) : null}
+        ) : (
+          <ProjectTitle>{projectName}</ProjectTitle>
+        )}
       </FlexRow>
       {when(
         loggedIn,
@@ -376,13 +386,6 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
     setIsHovered(false)
   }, [])
 
-  const projectName = useEditorState(
-    Substores.restOfEditor,
-    (store) => {
-      return store.editor.projectName
-    },
-    'TitleBar projectName',
-  )
   const { currentBranch, repoName } = useEditorState(
     Substores.github,
     (store) => {
@@ -417,11 +420,7 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
         <PanelButton onClick={onMaximize} color='#33C748' isHovered={isHovered} />
       </FlexRow>
 
-      {currentBranch != null ? (
-        <SimpleFlexRow>{repoName}</SimpleFlexRow>
-      ) : (
-        <ProjectTitle>{projectName}</ProjectTitle>
-      )}
+      {currentBranch != null ? <SimpleFlexRow>{repoName}</SimpleFlexRow> : <span>Code</span>}
     </div>
   )
 })

From 0eadce72769445bed6779c9a39200cb4731f33be Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 15:40:10 -0400
Subject: [PATCH 5/6] bold the code

---
 editor/src/components/titlebar/title-bar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index 490209f654df..c3d74cafa8fd 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -420,7 +420,11 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
         <PanelButton onClick={onMaximize} color='#33C748' isHovered={isHovered} />
       </FlexRow>
 
-      {currentBranch != null ? <SimpleFlexRow>{repoName}</SimpleFlexRow> : <span>Code</span>}
+      {currentBranch != null ? (
+        <SimpleFlexRow>{repoName}</SimpleFlexRow>
+      ) : (
+        <span style={{ fontWeight: 600 }}>Code</span>
+      )}
     </div>
   )
 })

From eecd8f0e01befb373141749f8fe7c6630bda3943 Mon Sep 17 00:00:00 2001
From: lankaukk <lankaukk@yahoo.com>
Date: Thu, 12 Oct 2023 16:06:34 -0400
Subject: [PATCH 6/6] dont show push or pull buttons after removing repo

---
 editor/src/components/titlebar/title-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
index c3d74cafa8fd..1d2399506a79 100644
--- a/editor/src/components/titlebar/title-bar.tsx
+++ b/editor/src/components/titlebar/title-bar.tsx
@@ -217,7 +217,7 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
         )}
       </FlexRow>
       {when(
-        loggedIn,
+        loggedIn && currentBranch != null,
         <FlexRow
           css={{
             gap: 2,