fix(create-new): Add login option to cloud beta template list and fix styles (#7015)

* Add login option to cloud beta template list and fix styles

* Add sign in button to error message

Author: tristandubbeld

packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx

@@ -459,6 +459,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                         selectTemplate(template);
                       }}
                       onOpenTemplate={openTemplate}
+                      isCloudTemplateList
                     />
                   </Panel>
 

packages/app/src/app/components/CreateSandbox/Import/Import.tsx

@@ -14,8 +14,13 @@ const UnauthenticatedImport: React.FC = () => {
   const actions = useActions();
 
   return (
-    <Stack direction="vertical" gap={8}>
-      <Text as="h2" css={{ margin: 0 }} size={4} weight="medium">
+    <Stack direction="vertical" gap={4}>
+      <Text
+        as="h2"
+        css={{ margin: 0, lineHeight: '24px' }}
+        size={4}
+        weight="medium"
+      >
         Import from GitHub
       </Text>
       <Stack direction="vertical" gap={4}>

packages/app/src/app/components/CreateSandbox/TemplateCategoryList.tsx

@@ -1,33 +1,37 @@
 import React, { useEffect } from 'react';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { Text, Stack } from '@codesandbox/components';
+import { Button, Text, Stack } from '@codesandbox/components';
 import { css } from '@styled-system/css';
 import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
+import { useAppState, useActions } from 'app/overmind';
 import { TemplateFragment } from 'app/graphql/types';
 import { TemplateCard } from './TemplateCard';
 import { TemplateGrid } from './elements';
 
 interface TemplateCategoryListProps {
   title: string;
-  showBetaTag?: boolean;
+  isCloudTemplateList?: boolean;
   templates: TemplateFragment[];
   onSelectTemplate: (template: TemplateFragment) => void;
   onOpenTemplate: (template: TemplateFragment) => void;
 }
 
 export const TemplateCategoryList = ({
   title,
-  showBetaTag,
+  isCloudTemplateList,
   templates,
   onSelectTemplate,
   onOpenTemplate,
 }: TemplateCategoryListProps) => {
+  const { hasLogIn } = useAppState();
+  const actions = useActions();
+
   useEffect(() => {
     track('Create Sandbox Tab Open', { tab: title });
   }, [title]);
 
   return (
-    <Stack direction="vertical" css={{ height: '100%' }} gap={6}>
+    <Stack direction="vertical" css={{ height: '100%' }} gap={4}>
       <Stack
         css={css({
           alignItems: 'center',
@@ -42,14 +46,31 @@ export const TemplateCategoryList = ({
           size={4}
           css={{
             fontWeight: 500,
-            lineHeight: 1.5,
+            lineHeight: '24px',
             margin: 0,
           }}
         >
           {title}
         </Text>
-        {showBetaTag && <CloudBetaBadge hideIcon />}
+        {isCloudTemplateList && <CloudBetaBadge hideIcon />}
       </Stack>
+      {!hasLogIn && isCloudTemplateList ? (
+        <Stack direction="vertical" gap={4}>
+          <Text id="unauthenticated-label" css={{ color: '#999999' }} size={3}>
+            You need to be signed in to fork a cloud template.
+          </Text>
+          <Button
+            aria-describedby="unauthenticated-label"
+            css={{
+              width: '132px',
+            }}
+            onClick={() => actions.signInClicked()}
+            variant="primary"
+          >
+            Sign in
+          </Button>
+        </Stack>
+      ) : null}
       <TemplateGrid>
         {templates.length > 0 ? (
           templates.map(template => (

packages/app/src/app/overmind/internalActions.ts

@@ -526,6 +526,17 @@ export const handleError = (
     effects.analytics.track('Patron Server Sandbox Limit Reached', {
       errorMessage: error.message,
     });
+  } else if (
+    error.message.startsWith(
+      'You need to be signed in to fork a server template.'
+    )
+  ) {
+    notificationActions.primary = {
+      label: 'Sign in',
+      run: () => {
+        state.signInModalOpen = true;
+      },
+    };
   }
 
   effects.notificationToast.add({