Polish sandbox info (codesandbox#3369)

* Fix width of textarea with count

* remove noPadding in favor of css=

* fix alignment of editable title+description

* add hover+focus states for input elements

* remove padding from stats + club author and stats together

* deduplicate codesandbox black theme

* Add link component

* fix foreground color in theme

* fix focus state for input

* fix focus state for swtich

* fix privacy setting for pro users

* convert text to link

* fix outline for color picker button

* fix text + switch component

* link avatar

* use link for pro link

* make description muted

* disable underline from workbench.css

* sigh use important coz old design uses workbench

* handle patrons without subscription

* turns out my profile is busted, not subscriptionSince

* oops sorry missed that

* fix types

Co-authored-by: Sara Vieira <[email protected]>

Author: siddharthkp

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

@@ -124,7 +124,7 @@ export function initializeCustomTheme() {
 
   installCustomTheme(
     'codesandbox-black-0.0.1',
-    'CodeSandbox Black',
+    'CodeSandbox Black.',
     JSON.stringify(codeSandboxBlackTheme)
   );
 }

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Description.tsx

@@ -6,29 +6,35 @@ import React, {
   useState,
 } from 'react';
 import styled from 'styled-components';
+import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
-import { Textarea, SidebarRow, Text, FormField } from '@codesandbox/components';
+import {
+  Element,
+  Textarea,
+  SidebarRow,
+  Text,
+  FormField,
+} from '@codesandbox/components';
 import { PenIcon } from './icons';
 
 const DescriptionTrimmed = styled(Text)`
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  flex-wrap: wrap;
+  word-break: break-word;
   overflow: hidden;
 `;
 
 const Icon = styled(PenIcon)`
   cursor: pointer;
-  display: none;
+  opacity: 0;
 `;
 
-const SandboxDescription = styled(SidebarRow)<{ empty: boolean }>`
-  font-style: ${props => (props.empty ? 'normal' : 'italic')};
-  flex-wrap: wrap;
-  word-break: break-all;
+const SandboxDescription = styled(SidebarRow)`
   :hover {
     svg {
-      display: block;
+      opacity: 1;
     }
   }
 `;
@@ -68,10 +74,10 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
 
   return editing ? (
     <FormField
-      noPadding
       direction="vertical"
       label="Sandbox Description"
       hideLabel
+      css={css({ paddingX: 0 })}
     >
       <Textarea
         onBlur={() => {
@@ -88,11 +94,15 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
       />
     </FormField>
   ) : (
-    <SandboxDescription gap={4} empty={Boolean(description)}>
-      <DescriptionTrimmed>
-        {description || (editable ? 'No description, create one!' : '')}
+    <SandboxDescription>
+      <DescriptionTrimmed variant="muted">
+        {description || (editable ? 'No description, create one!' : null)}
+        {editable && (
+          <Element as="span" marginX={2}>
+            <Icon onClick={() => setEditing(true)} />
+          </Element>
+        )}
       </DescriptionTrimmed>
-      {editable && <Icon onClick={() => setEditing(true)} />}
     </SandboxDescription>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Privacy.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Collapsible, Text, Stack, Select } from '@codesandbox/components';
+import {
+  Collapsible,
+  Text,
+  Link,
+  Stack,
+  Select,
+} from '@codesandbox/components';
 import { useOvermind } from 'app/overmind';
 import { css } from '@styled-system/css';
 import { GlobeIcon } from './icons';
@@ -11,15 +17,17 @@ export const Privacy = () => {
     },
     state: {
       editor: { currentSandbox },
-      isPatron,
+      user,
     },
   } = useOvermind();
 
+  const isPaidUser = user?.subscription;
+
   return (
     <Collapsible title="Privacy" defaultOpen>
       <Stack direction="vertical" gap={4} css={css({ paddingX: 3 })}>
         <Select
-          disabled={!isPatron}
+          disabled={!isPaidUser}
           icon={GlobeIcon}
           onChange={({ target: { value } }) =>
             sandboxPrivacyChanged({
@@ -30,18 +38,15 @@ export const Privacy = () => {
           value={currentSandbox.privacy}
         >
           <option value={0}>Public</option>
-
-          {isPatron && (
-            <option value={1}>Unlisted (only available by url)</option>
-          )}
-
-          {isPatron && <option value={2}>Private</option>}
+          <option value={1}>Unlisted (only available by url)</option>
+          <option value={2}>Private</option>
         </Select>
-        {!isPatron ? (
+        {isPaidUser ? (
           <Text variant="muted" size={2}>
-            You an change privacy of a sandbox as a Pro.
-            <br />
-            Become a Pro.
+            You an change privacy of a sandbox as a Pro.{' '}
+            <Link href="/pro" css={{ textDecoration: 'underline !important' }}>
+              Become a Pro
+            </Link>
           </Text>
         ) : null}
       </Stack>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/TemplateConfig.tsx

@@ -25,9 +25,14 @@ const PickColor = styled(PopoverDisclosure)`
   ${({ theme, color }) => css`
     width: ${theme.space[5]}px;
     height: ${theme.space[4]}px;
-    border: 1px solid inherit;
+    border: 1px solid ${color};
     background: ${color};
     border-radius: ${theme.radii.small}px;
+    &:focus {
+      // need to use !important to override styles from
+      // workbench-theme.css, not proud :/
+      outline: none !important;
+    }
   `}
 `;
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Title.tsx

@@ -6,6 +6,7 @@ import { useOvermind } from 'app/overmind';
 
 import { Text, Input, SidebarRow, FormField } from '@codesandbox/components';
 import styled from 'styled-components';
+import css from '@styled-system/css';
 import { PenIcon } from './icons';
 
 const Icon = styled(PenIcon)`
@@ -64,7 +65,7 @@ export const Title = ({ editable }) => {
   };
 
   return editing ? (
-    <FormField label="Sandbox Name" hideLabel>
+    <FormField label="Sandbox Name" hideLabel css={css({ paddingX: 0 })}>
       <Input
         onBlur={onBlur}
         onChange={onChange}
@@ -78,7 +79,7 @@ export const Title = ({ editable }) => {
       />
     </FormField>
   ) : (
-    <SandboxNameWrapper gap={4}>
+    <SandboxNameWrapper gap={2}>
       <Text>{getSandboxName(currentSandbox)}</Text>
       {editable && <Icon onClick={edit} />}
     </SandboxNameWrapper>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx

@@ -3,14 +3,22 @@ import {
   Element,
   Collapsible,
   Text,
+  Link,
+  Label,
   Avatar,
   Stack,
   List,
   ListItem,
   Switch,
   Stats,
 } from '@codesandbox/components';
+
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import {
+  sandboxUrl,
+  profileUrl,
+} from '@codesandbox/common/lib/utils/url-generator';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { useOvermind } from 'app/overmind';
 
 import { css } from '@styled-system/css';
@@ -19,8 +27,6 @@ import { Description } from './Description';
 import { Privacy } from './Privacy';
 import { Config } from './Config';
 
-const Link = props => <Text variant="muted" {...props} />;
-
 export const ProjectInfo = () => {
   const {
     actions: {
@@ -54,45 +60,56 @@ export const ProjectInfo = () => {
     return frozenUpdated({ frozen: !isFrozen });
   };
 
+  const isForked = forkedFromSandbox || forkedTemplateSandbox;
+  const { url: templateUrl } = getTemplateDefinition(template);
+
   return (
     <>
       <Collapsible title="Sandbox Info" defaultOpen>
         <Stack direction="vertical" gap={6}>
-          <Element css={css({ paddingX: 2 })}>
+          <Element as="section" css={css({ paddingX: 2 })}>
             <Title editable />
             <Description editable />
           </Element>
-          {author ? (
-            <Stack
-              gap={2}
-              align="center"
-              marginBottom={4}
-              css={css({ paddingX: 2 })}
-            >
-              <Avatar user={author} /> <Text>{author.username}</Text>
-            </Stack>
-          ) : null}
-          <Stats sandbox={currentSandbox} />
+
+          <Element as="section" css={css({ paddingX: 2 })}>
+            {author ? (
+              <Link href={profileUrl(author.username)}>
+                <Stack gap={2} align="center" marginBottom={4}>
+                  <Avatar user={author} /> <Text>{author.username}</Text>
+                </Stack>
+              </Link>
+            ) : null}
+            <Stats sandbox={currentSandbox} />
+          </Element>
+
           <List>
             <ListItem justify="space-between">
-              <Text as="label" htmlFor="frozen">
-                Frozen
-              </Text>
+              <Label htmlFor="frozen">Frozen</Label>
               <Switch
                 id="frozen"
                 onChange={updateFrozenState}
                 on={customTemplate ? sessionFrozen : isFrozen}
               />
             </ListItem>
-            <ListItem justify="space-between">
-              <Text> {forkedTemplateSandbox ? 'Template' : 'Forked From'}</Text>
-              <Link>
-                {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
-              </Link>
-            </ListItem>
+            {isForked ? (
+              <ListItem justify="space-between">
+                <Text>
+                  {forkedTemplateSandbox ? 'Template' : 'Forked From'}
+                </Text>
+                <Link
+                  href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
+                  target="_blank"
+                >
+                  {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
+                </Link>
+              </ListItem>
+            ) : null}
             <ListItem justify="space-between">
               <Text>Environment</Text>
-              <Link>{template}</Link>
+              <Link href={templateUrl} target="_blank">
+                {template}
+              </Link>
             </ListItem>
           </List>
         </Stack>

packages/common/src/themes/codesandbox-black.js

@@ -14,7 +14,7 @@ const colors = {
   contrastActiveBorder: null,
   errorForeground: tokens.reds[500],
   focusBorder: tokens.grays[600],
-  foreground: tokens.grays[300],
+  foreground: tokens.grays[200],
   activityBar: {
     background: tokens.grays[700],
     border: tokens.grays[600],
@@ -137,7 +137,7 @@ const colors = {
     placeholderForeground: tokens.grays[300],
   },
   inputOption: {
-    activeBorder: tokens.blues[300],
+    activeBorder: tokens.grays[300],
   },
   inputValidation: {
     infoForeground: null,
@@ -212,7 +212,7 @@ const colors = {
     background: tokens.grays[700],
     hoverBackground: tokens.green,
     border: tokens.grays[600],
-    foreground: tokens.grays[300],
+    foreground: tokens.grays[200],
   },
   sideBarSectionHeader: {
     background: tokens.grays[700],

packages/components/src/components/FormField/index.tsx

@@ -14,7 +14,6 @@ interface IFormFieldProps {
   // for this purpose, we visually hide the label but still  keep in the
   // elements tree.
   hideLabel?: boolean;
-  noPadding?: boolean;
   direction?: 'horizontal' | 'vertical';
 }
 
@@ -23,7 +22,6 @@ export const FormField: React.FC<IFormFieldProps> = ({
   id,
   hideLabel = false,
   direction = 'horizontal',
-  noPadding,
   ...props
 }) => {
   const inputId = useId(id);
@@ -42,7 +40,7 @@ export const FormField: React.FC<IFormFieldProps> = ({
           direction="horizontal"
           justify="space-between"
           align="center"
-          css={{ height: 8, paddingX: noPadding ? 0 : 2 }}
+          css={{ height: 8, paddingX: 2 }}
           {...props}
         >
           <LabelWrapper>
@@ -59,7 +57,7 @@ export const FormField: React.FC<IFormFieldProps> = ({
   return (
     <Element
       css={{
-        paddingX: noPadding ? 0 : 2,
+        paddingX: 2,
       }}
       {...props}
     >

packages/components/src/components/Input/index.tsx

@@ -21,5 +21,16 @@ export const Input = styled(Element).attrs({ as: 'input' })(
     '::-webkit-input-placeholder': placeholderStyles,
     '::-ms-input-placeholder': placeholderStyles,
     '::placeholder': placeholderStyles,
+
+    ':hover, :focus': {
+      borderColor: 'inputOption.activeBorder',
+      // need to use !important to override styles from
+      // workbench-theme.css, not proud :/
+      outline: 'none !important',
+    },
+    ':disabled': {
+      opacity: 0.4,
+      borderColor: 'input.border', // (default border)
+    },
   })
 );