Show Template Banner and name for not owned sandboxes (codesandbox#2132)

* show sandbox name at the top

* remove unused

* remove inline css

Author: SaraVieira

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

@@ -32,7 +32,6 @@ import { HeaderProps } from './types';
 
 export const Header = observer(({ zenMode }: HeaderProps) => {
   const store = useStore();
-  const sandbox = store.editor.currentSandbox;
   const vscode = store.preferences.settings.experimentVSCode;
 
   return (
@@ -49,11 +48,9 @@ export const Header = observer(({ zenMode }: HeaderProps) => {
         {vscode ? <MenuBar /> : <SaveAllButton />}
       </Left>
 
-      {sandbox.owned && (
-        <Centered>
-          <SandboxName />
-        </Centered>
-      )}
+      <Centered>
+        <SandboxName />
+      </Centered>
 
       <Right>
         {store.updateStatus === 'available' && <RefreshButton />}

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

@@ -80,11 +80,12 @@ export const SandboxName = observer(() => {
     opacity: updatingName ? 0 : 1,
     pointerEvents: updatingName ? 'none' : 'initial',
   });
+  const { customTemplate, owned } = currentSandbox;
 
   return (
     <Main>
       <Container>
-        {!currentSandbox.customTemplate && (
+        {!customTemplate && owned && (
           <animated.div style={spring}>
             <Folder>
               {isLoggedIn ? (
@@ -117,7 +118,9 @@ export const SandboxName = observer(() => {
             />
           </Form>
         ) : (
-          <Name onClick={handleNameClick}>{sandboxName}</Name>
+          <Name owned={owned} onClick={owned ? handleNameClick : null}>
+            {sandboxName}
+          </Name>
         )}
         {template ? (
           <Tooltip
@@ -134,9 +137,7 @@ export const SandboxName = observer(() => {
               </>
             }
           >
-            <TemplateBadge color={currentSandbox.customTemplate.color}>
-              Template
-            </TemplateBadge>
+            <TemplateBadge color={customTemplate.color}>Template</TemplateBadge>
           </Tooltip>
         ) : null}
       </Container>

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

@@ -59,11 +59,11 @@ export const NameInput = styled(AutosizeInput)`
   }
 `;
 
-export const Name = styled.span`
-  ${({ theme }) => css`
+export const Name = styled.span<{ owned?: boolean }>`
+  ${({ theme, owned }) => css`
     color: ${theme.light ? 'black' : 'white'};
     margin-left: 0.25rem;
-    cursor: pointer;
+    cursor: ${owned ? 'pointer' : 'initial'};
     text-overflow: ellipsis;
   `}
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx

@@ -114,7 +114,7 @@ export const Project = observer(({ editable }: IProjectProps) => {
             </PrivacyContainer>
           </PropertyValue>
         </Item>
-        {!isPatron && (
+        {!isPatron && editable && (
           <Explanation style={{ marginTop: '-1rem' }}>
             You can change privacy of a sandbox as a{' '}
             <a href={patronUrl()} target="_blank">