More Polish (codesandbox#3492)

* add follow button

* fix click on template icon

* fix truncated text

* add team

* fix chat toggle

* fix grammar

* fiz ts

* add version

* make codesandbox capital

* always open files

* fix ts

* clean up

* Apply suggestions from code review

Co-Authored-By: Michaël De Boey <[email protected]>

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

Co-Authored-By: Michaël De Boey <[email protected]>

* fix activitybar

Co-authored-by: Michaël De Boey <[email protected]>

Author: SaraVieira

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -237,15 +237,13 @@ export const onSendChat: Action<{ message: string }> = (
   effects.live.sendChat(message);
 };
 
-export const onChatEnabledChange: Action<boolean> = (
-  { effects, state },
-  enabled
-) => {
+export const onChatEnabledToggle: Action = ({ effects, state }) => {
   effects.analytics.track('Enable Live Chat');
 
   if (state.live.isOwner && state.live.roomInfo) {
-    state.live.roomInfo.chatEnabled = enabled;
-    effects.live.sendChatEnabled(enabled);
+    const chatEnabled = state.live.roomInfo.chatEnabled;
+    state.live.roomInfo.chatEnabled = !chatEnabled;
+    effects.live.sendChatEnabled(!chatEnabled);
   }
 };
 

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

@@ -9,6 +9,7 @@ import Tooltip, {
   SingletonTooltip,
 } from '@codesandbox/common/lib/components/Tooltip';
 import { TippyProps } from '@tippy.js/react';
+
 import {
   DeployIcon,
   ExplorerIcon,
@@ -91,6 +92,7 @@ export const Navigation: FunctionComponent<Props> = ({
   const disabledItems = getDisabledItems(state);
 
   return (
+    // @ts-ignore
     <Container
       align="center"
       direction="vertical"

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx

@@ -20,7 +20,7 @@ export const Live: FunctionComponent = () => {
       live: {
         createLiveClicked,
         onAddEditorClicked,
-        onChatEnabledChange,
+        onChatEnabledToggle,
         onFollow,
         onModeChanged,
         onRemoveEditorClicked,
@@ -81,7 +81,7 @@ export const Live: FunctionComponent = () => {
           roomInfo={roomInfo}
           setFollowing={onFollow}
           setMode={onModeChanged}
-          toggleChatEnabled={() => onChatEnabledChange(!roomInfo.chatEnabled)}
+          toggleChatEnabled={onChatEnabledToggle}
           toggleNotificationsHidden={onToggleNotificationsHidden}
         />
       ) : (

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

@@ -91,8 +91,8 @@ export const ConfigurationFilesComponent = ({ theme }) => {
               Configuration for your Sandbox
             </Text>
             <Text variant="muted">
-              Codesandbox supports several config files per template, you can
-              see and edit all supported files for the current sandbox here.
+              CodeSandbox supports several configuration files per template, you
+              can see and edit all supported files for the current sandbox here.
             </Text>
           </Element>
           <Stack direction="vertical" gap={4}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx

@@ -46,7 +46,7 @@ export const Netlify = () => {
         <Integration icon={NetlifyIcon} title="netlify">
           <Element marginX={2} marginBottom={netlifySite ? 6 : 0}>
             <Text variant="muted" block marginBottom={4}>
-              Deploy your sandbox to{' '}
+              Deploy your sandbox site to{' '}
               <Link href="https://www.netlify.com/" target="_blank">
                 Netlify
               </Link>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx

@@ -20,7 +20,7 @@ export const NotLoggedIn = () => {
       <Element css={css({ paddingX: 2 })}>
         <Stack direction="vertical" gap={2} marginBottom={6}>
           <Text size={2} variant="muted" block>
-            You can deploy a production version of your sandbox using one our
+            You can deploy a production version of your sandbox using one of our
             supported providers - Netlify or ZEIT.
           </Text>
           <Text size={2} variant="muted" block>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx

@@ -25,7 +25,7 @@ export const NotOwner = () => {
       <Element css={css({ paddingX: 2 })}>
         <Stack direction="vertical" gap={2} marginBottom={6}>
           <Text size={2} variant="muted" block>
-            You can deploy a production version of your sandbox using one our
+            You can deploy a production version of your sandbox using one of our
             supported providers - Netlify or ZEIT.
           </Text>
           <Text size={2} variant="muted" block>

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

@@ -33,8 +33,8 @@ export const Deployment: FunctionComponent = () => {
     <Collapsible title="Deployment" defaultOpen>
       <Element paddingX={2}>
         <Text variant="muted" block marginBottom={6}>
-          You can deploy a production version of your sandbox using one our
-          supported providers.
+          You can deploy a production version of your sandbox using one of our
+          supported providers - Netlify or ZEIT.
         </Text>
         <Stack direction="vertical" gap={5}>
           <Zeit />

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx

@@ -145,11 +145,17 @@ export class Dependency extends React.PureComponent<Props, State> {
             <Stack
               align="center"
               justify="flex-end"
-              css={css({ position: 'absolute', right: 2 })}
+              css={css({
+                position: 'absolute',
+                right: 2,
+                flexGrow: 0,
+                flexShrink: 1,
+                width: '100%',
+              })}
             >
               <Text
                 variant="muted"
-                maxWidth={75}
+                maxWidth="30%"
                 css={{ display: hovering ? 'none' : 'block' }}
               >
                 {formatVersion(dependencies[dependency])}{' '}

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

@@ -7,7 +7,7 @@ import css from '@styled-system/css';
 import DirectoryEntry from './DirectoryEntry/index';
 import EditIcons from './DirectoryEntry/Entry/EditIcons';
 
-export const Files = ({ defaultOpen = null }) => {
+export const Files = () => {
   const {
     state: { editor: editorState, isLoggedIn },
     actions: { editor, files },
@@ -27,11 +27,7 @@ export const Files = ({ defaultOpen = null }) => {
 
   return (
     <>
-      <Collapsible
-        title="Files"
-        defaultOpen={defaultOpen}
-        css={{ position: 'relative' }}
-      >
+      <Collapsible title="Files" defaultOpen css={{ position: 'relative' }}>
         <SidebarRow
           justify="flex-end"
           css={css({