Small fixes (codesandbox#3506)

SaraVieira · web-flow · commit 44622236e68b · 2020-02-12T17:02:36.000+01:00
* small fixes

* use prop instead of css

* use prop instead of css in all files
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx
@@ -112,7 +112,7 @@ export const ConfigurationFilesComponent = ({ theme }) => {
                     <Button
                       css={css({
                         width: 'auto',
-                        height: 5,
+                        height: 4,
                       })}
                       variant="secondary"
                       onClick={() => editor.moduleSelected({ id: module.id })}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx
@@ -43,7 +43,7 @@ export const Netlify = () => {
   return (
     template.netlify !== false && (
       <>
-        <Integration icon={NetlifyIcon} title="netlify">
+        <Integration icon={NetlifyIcon} title="Netlify">
           <Element marginX={2} marginBottom={netlifySite ? 6 : 0}>
             <Text variant="muted" block marginBottom={4}>
               Deploy your sandbox site to{' '}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import css from '@styled-system/css';
 
 import {
   Element,
@@ -17,7 +16,7 @@ export const NotLoggedIn = () => {
 
   return (
     <Collapsible title="Deployment" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element 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 of our
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import css from '@styled-system/css';
 
 import {
   Element,
@@ -22,7 +21,7 @@ export const NotOwner = () => {
 
   return (
     <Collapsible title="Deployment" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element 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 of our
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx
@@ -1,11 +1,26 @@
 import React from 'react';
 
 export const NetlifyIcon = props => (
-  <svg width={11} height={11} fill="none" viewBox="0 0 11 11" {...props}>
+  <svg width={11} height={11} fill="none" viewBox="0 0 40 40" {...props}>
     <path
-      fill="#4CAA9F"
-      d="M4.536.293a1 1 0 011.414 0l4.242 4.243a1 1 0 010 1.414L5.95 10.192a1 1 0 01-1.414 0L.293 5.95a1 1 0 010-1.414L4.536.293z"
+      fill="url(#paint0_radial)"
+      fillRule="evenodd"
+      d="M11.909 8.091c.6.254 4.8 2.03 5.34 2.265.035.015.075.03.102.004a2.098 2.098 0 011.92-.37c.03.008.065.016.09 0a.155.155 0 00.041-.049l4.135-6.404-1.26-1.26c-.805-.805-1.208-1.208-1.674-1.355a2 2 0 00-1.206 0c-.466.147-.868.55-1.674 1.355L11.91 8.09zm-.59 12.411l-4.808-7.013 4.491-4.491c.42.183 1.938.825 3.304 1.403h.001l.027.011c1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 00.523 1.828c.03.03 0 .072-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.042.05-.025.015-.059.008-.086.001a2.274 2.274 0 00-.544-.074c-.163 0-.342.03-.522.063h-.001c-.02.003-.037.007-.054-.005a.21.21 0 01-.045-.051zm17.766-5.986a1.716 1.716 0 00-.496-.381l-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 01-.027-.093l.772-4.726 3.626 3.625-3.77 1.605a.083.083 0 01-.034.006h-.015c-.005-.003-.009-.007-.018-.016h-.001zm.782 1.015l3.98-1.684 3.876 3.876c.806.806 1.208 1.208 1.356 1.674.021.069.04.138.053.209l-9.263-3.923-.014-.006c-.038-.015-.08-.032-.08-.07 0-.038.043-.056.08-.071l.012-.005zm9.107 5.319l-9.65-4.082c-.033-.013-.072-.029-.104-.014a.066.066 0 00-.023.023l-.004.004a1.73 1.73 0 01-1.159.665c-.046 0-.054.059-.061.108l-.003.022-1.064 6.526-.003.014c-.006.033-.012.07.011.092.38.29.603.716.655 1.193 0 .045.054.054.103.062l.005.001.025.005 5.652 1.177 4.37-4.37c.66-.66 1.05-1.05 1.25-1.426zm-11.686 5.762l5.06 1.04-7.185 7.185 1.23-7.56.002-.01c.002-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005a1.85 1.85 0 00.695-.517c.024-.028.053-.055.09-.06a.09.09 0 01.03 0zm-3.646 9.746c.288-1.765 1.36-8.302 1.485-9.063a.238.238 0 01.015-.045c.013-.033.025-.064-.003-.078a1.757 1.757 0 01-1.028-1.175c-.003-.016-.006-.03-.018-.043a.164.164 0 00-.076-.033l-9.922-2.046c-.023-.005-.052-.01-.073.001-.024.013-.037.036-.051.06l-.002.003-.02.035a1.709 1.709 0 01-.077.123l-.009.012c-.01.014-.02.027-.022.043-.002.022.012.041.026.06l.01.014 8.955 12.942.81-.81zm-10.69-11.367L21.95 38.05c-.597.591-.949.904-1.347 1.03a2 2 0 01-1.206 0c-.466-.148-.868-.55-1.674-1.356L8.731 28.73l2.348-3.643c.012-.018.022-.034.04-.047.025-.018.062-.01.091 0a2.434 2.434 0 001.638-.083c.027-.01.054-.017.075.002a.19.19 0 01.029.032zm-5.089 2.872l2.252-3.492c.01-.017.02-.034.008-.05a.159.159 0 00-.008-.01l-.005-.007a2.9 2.9 0 01-.13-.184c-.019-.031-.039-.065-.072-.065a.084.084 0 00-.033.007L5.8 25.799l2.063 2.064zm1.361-4.813l-4.337 1.837-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 00.03.005c.05.008.103.017.103.063 0 .05-.059.073-.109.092l-.007.003-.016.007zM.832 19.892l8.948 1.875h.002c.016.004.03.007.042-.001a.16.16 0 00.05-.062c.103-.191.25-.367.396-.528.03-.03 0-.07-.027-.106l-.007-.01-.007-.009c-.424-.608-4.06-5.86-4.61-6.669l-3.342 3.341c-.805.806-1.208 1.208-1.355 1.674a2 2 0 00-.09.495zm19.517-9.174l4.066-6.303 3.819 3.818-.92 5.698-.002.015a.135.135 0 01-.007.038c-.01.02-.029.024-.05.03a1.83 1.83 0 00-.548.273.154.154 0 00-.02.017c-.011.012-.022.023-.04.024a.114.114 0 01-.042-.006l-5.819-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 00-.297-.894l-.012-.02v-.001c-.03-.046-.06-.094-.036-.141zm.134 2.303c-.031-.014-.07-.024-.098-.003a.16.16 0 00-.034.04c-.38.565-1.01.896-1.69.896-.09 0-.18-.013-.283-.027l-.045-.007c-.048 0-.077.047-.104.089l-.008.012-4.482 6.94a.76.76 0 01-.014.02c-.027.038-.056.08-.027.11.018.017.035.017.052.017.017 0 11.283-4.804 12.147-5.173l.012-.005c.035-.014.075-.03.075-.068v-.153c0-.092.013-.184.029-.263a.106.106 0 000-.057c-.013-.031-.045-.044-.076-.058l-5.454-2.31zm-6.16 9.456c-.04-.133-.08-.27-.085-.271l12.28-5.237s.017 0 .034.017c.067.067.124.112.179.154l.026.016c.026.015.052.03.053.057 0 .01 0 .016-.002.025L25.756 23.7l-.003.02v.006c-.008.05-.015.107-.062.107a1.729 1.729 0 00-1.373.847l-.005.008c-.013.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.004 0-.04-.123-.077-.249z"
+      clipRule="evenodd"
     />
+    <defs>
+      <radialGradient
+        id="paint0_radial"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientTransform="matrix(0 38.3432 -44.1226 0 19.982 .828)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#20C6B7" />
+        <stop offset={1} stopColor="#4D9ABF" />
+      </radialGradient>
+    </defs>
   </svg>
 );
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import {
   FormField,
   Stack,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx
@@ -1,4 +1,3 @@
-import { css } from '@styled-system/css';
 import track from '@codesandbox/common/lib/utils/analytics';
 import React, { ChangeEvent } from 'react';
 import {
@@ -29,17 +28,20 @@ export const CreateRepo = () => {
     target: { value: title },
   }: ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });
 
-  const createRepo = () => {
+  const createRepo = e => {
+    e.preventDefault();
     track('Export to GitHub Clicked');
     createRepoClicked();
   };
 
+  const disabled = Boolean(error) || !repoTitle || !isAllModulesSynced;
+
   return (
     <Collapsible
       title={originalGit ? 'Export to GitHub' : 'Github'}
       defaultOpen={!originalGit}
     >
-      <Element css={css({ paddingX: 2 })}>
+      <Element paddingX={2}>
         <Text variant="muted" marginBottom={4} block>
           Create a GitHub repository to host your sandbox code and keep it in
           sync with CodeSandbox.
@@ -56,20 +58,24 @@ export const CreateRepo = () => {
           </Text>
         )}
 
-        <Stack as="form" direction="vertical" gap={2}>
+        <Stack
+          marginX={0}
+          as="form"
+          direction="vertical"
+          gap={2}
+          onSubmit={createRepo}
+        >
           <Input
             type="text"
             onChange={updateRepoTitle}
             value={repoTitle}
             placeholder="Enter repository name"
           />
-          <Button
-            disabled={Boolean(error) || !repoTitle || !isAllModulesSynced}
-            onClick={createRepo}
-            variant="secondary"
-          >
-            Create Repository
-          </Button>
+          <Element paddingX={2}>
+            <Button disabled={disabled} variant="secondary">
+              Create Repository
+            </Button>
+          </Element>
         </Stack>
       </Element>
     </Collapsible>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx
@@ -1,5 +1,5 @@
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import React from 'react';
 import {
   Integration,
@@ -19,11 +19,7 @@ export const GithubLogin = () => {
 
   return (
     <Collapsible title="Github" defaultOpen>
-      <Element
-        css={css({
-          paddingX: 2,
-        })}
-      >
+      <Element paddingX={2}>
         <Text variant="muted" marginBottom={4} block>
           You can create commits and open pull requests if you add GitHub to
           your integrations.
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import css from '@styled-system/css';
 
 import {
   Element,
@@ -17,7 +16,7 @@ export const NotLoggedIn = () => {
 
   return (
     <Collapsible title="GitHub" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element paddingX={2}>
         <Stack direction="vertical" gap={2} marginBottom={6}>
           <Text size={2} variant="muted" block>
             You need to be signed in to export this sandbox to GitHub and make
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotOwner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotOwner.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import css from '@styled-system/css';
 
 import {
   Element,
@@ -22,7 +21,7 @@ export const NotOwner = () => {
 
   return (
     <Collapsible title="Github" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element paddingX={2}>
         <Stack direction="vertical" gap={2} marginBottom={6}>
           <Text size={2} variant="muted" block>
             You need to own this sandbox to export this sandbox to GitHub and
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Collapsible, Text, Element, Stack } from '@codesandbox/components';
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
 import { GitHubIcon } from './Icons';
 import { CommitForm } from './CommitForm';
 import { Changes } from './Changes';
@@ -42,7 +41,7 @@ export const GitHub = () => {
     <>
       {originalGit ? (
         <Collapsible title="Github" defaultOpen>
-          <Element css={css({ paddingX: 2 })}>
+          <Element paddingX={2}>
             <Stack gap={2} marginBottom={6} align="center">
               <GitHubIcon />
               <Text size={2}>
@@ -57,15 +56,15 @@ export const GitHub = () => {
             {!isFetching ? (
               gitChanges && <Changes {...gitChanges} />
             ) : (
-              <Element css={css({ paddingX: 2 })}>
+              <Element paddingX={2}>
                 <Text variant="muted">Fetching changes...</Text>
               </Element>
             )}
             {!isFetching && (
               <>
                 {changeCount > 0 && <CommitForm />}
                 {changeCount === 0 && (
-                  <Element css={css({ paddingX: 2 })}>
+                  <Element paddingX={2}>
                     <Text variant="muted" weight="bold">
                       There are no changes
                     </Text>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx
@@ -72,7 +72,7 @@ export const LiveNow = () => {
   return (
     <>
       <Collapsible title="Live" defaultOpen>
-        <Element css={css({ paddingX: 2 })}>
+        <Element paddingX={2}>
           <Stack justify="space-between" align="center" marginBottom={2}>
             <Text variant="danger">
               <Stack align="center" gap={2}>
@@ -90,6 +90,7 @@ export const LiveNow = () => {
           <Input
             defaultValue={`https://codesandbox.io/live/${roomId}`}
             marginBottom={2}
+            onFocus={({ target }: { target: any }) => target.select()}
           />
 
           {isOwner && (
@@ -131,7 +132,7 @@ export const LiveNow = () => {
       </Collapsible>
 
       <Collapsible title="Live Mode" defaultOpen>
-        <Stack direction="vertical" gap={2} css={css({ paddingX: 2 })}>
+        <Stack direction="vertical" gap={2} paddingX={2}>
           <Select
             icon={mode === 'open' ? OpenIcon : ClassroomIcon}
             value={mode}
@@ -150,7 +151,7 @@ export const LiveNow = () => {
       </Collapsible>
 
       <Collapsible title="Editors" defaultOpen>
-        <Stack direction="vertical" gap={2} css={css({ paddingX: 2 })}>
+        <Stack direction="vertical" gap={2} paddingX={2}>
           {owners.map(user => (
             <User key={user.id} user={user} liveRole="owner" />
           ))}
@@ -166,7 +167,7 @@ export const LiveNow = () => {
 
       {mode === 'classroom' && (
         <Collapsible title="Viewers" defaultOpen>
-          <Stack direction="vertical" gap={2} css={css({ paddingX: 2 })}>
+          <Stack direction="vertical" gap={2} paddingX={2}>
             {spectators.map(user => (
               <User key={user.id} user={user} liveRole="spectator" />
             ))}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive.tsx
@@ -23,7 +23,7 @@ export const NotLive = () => {
 
   return (
     <Collapsible title="Live" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element paddingX={2}>
         <Text block weight="medium" marginBottom={2}>
           Collaborate in real-time
         </Text>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLoggedIn.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import css from '@styled-system/css';
 
 import {
   Element,
@@ -17,7 +16,7 @@ export const NotLoggedIn = () => {
 
   return (
     <Collapsible title="Live" defaultOpen>
-      <Element css={css({ paddingX: 2 })}>
+      <Element paddingX={2}>
         <Text block weight="medium" marginBottom={2}>
           Collaborate in real-time
         </Text>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
@@ -22,7 +22,7 @@ import {
   Stats,
   Tags,
 } from '@codesandbox/components';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 
 import { BookmarkTemplateButton } from './BookmarkTemplateButton';
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent } from 'react';
 import VERSION from '@codesandbox/common/lib/version';
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import { Button, Stack, Text, Element, Link } from '@codesandbox/components';
 import { SpectrumLogo, GithubIcon, TwitterIcon } from './icons';
 
@@ -51,12 +51,7 @@ export const Delete = () => {
           {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
         </Button>
       </Stack>
-      <Element
-        marginBottom={3}
-        css={css({
-          paddingX: 2,
-        })}
-      >
+      <Element marginBottom={3} paddingX={2}>
         <Stack gap={2}>
           {links.map(({ href, icon }) => (
             <Link
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/EditSummary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/EditSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import {
   Stack,
   FormField,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Privacy.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Privacy.tsx
@@ -7,7 +7,7 @@ import {
   Select,
 } from '@codesandbox/components';
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import { GlobeIcon } from './icons';
 
 export const Privacy = () => {
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx
@@ -27,7 +27,7 @@ import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { Icons } from '@codesandbox/template-icons';
 import getIcon from '@codesandbox/common/lib/templates/icons';
 
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import { TemplateConfig } from './TemplateConfig';
 import { PenIcon } from './icons';
 import { EditSummary } from './EditSummary';
@@ -144,7 +144,7 @@ export const Summary = () => {
 
         <List>
           {customTemplate && <TemplateConfig />}
-          <ListAction justify="space-between">
+          <ListAction justify="space-between" onClick={updateFrozenState}>
             <Label htmlFor="frozen">Frozen</Label>
             <Switch
               id="frozen"
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Ports.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Ports.tsx
@@ -6,7 +6,7 @@ import {
   Text,
   Stack,
 } from '@codesandbox/components';
-import { css } from '@styled-system/css';
+import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import { ServerPort } from '@codesandbox/common/lib/types';
 import BrowserIcon from 'react-icons/lib/go/browser';
