📝 Fix types for App, Apply Conventions, Update Theme Snapshot

Author: Saeris

packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
 
 export const CardContainer = styled.div`
   padding: 0.5rem;
@@ -28,3 +29,10 @@ export const Label = styled.label`
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.5);
 `;
+
+export const Submit = styled(Button).attrs({
+  type: 'submit',
+})`
+  width: 300;
+  margin-top: 1rem;
+`;

packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx

@@ -4,10 +4,14 @@ import {
   CardElement,
   ReactStripeElements,
 } from 'react-stripe-elements';
-import { Button } from '@codesandbox/common/lib/components/Button';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
-
-import { CardContainer, StripeInput, ErrorText, Label } from './elements';
+import {
+  CardContainer,
+  StripeInput,
+  ErrorText,
+  Label,
+  Submit,
+} from './elements';
 
 interface Props {
   name: string;
@@ -146,13 +150,7 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
           </>
         )}
 
-        <Button
-          type="submit"
-          disabled={loading}
-          style={{ marginTop: '1rem', width: 300 }}
-        >
-          {loading ? loadingText : buttonName}
-        </Button>
+        <Submit disabled={loading}>{loading ? loadingText : buttonName}</Submit>
       </form>
     );
   }

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/Imports/StackbitButton.tsx

@@ -5,7 +5,7 @@ import { gitHubToSandboxUrl } from '@codesandbox/common/lib/utils/url-generator'
 
 window.addEventListener('message', receiveMessage, false);
 
-function receiveMessage(event) {
+function receiveMessage(event: MessageEvent) {
   if (event.origin === 'https://app.stackbit.com' && event.data) {
     const data = JSON.parse(event.data);
 
@@ -32,13 +32,18 @@ function openStackbit(username: string) {
   );
 }
 
-interface Props {
+interface IStackbitButtonProps {
   username: string;
-  style?: React.CSSProperties;
 }
 
-export const StackbitButton = ({ username, style }: Props) => (
-  <Button style={style} small onClick={() => openStackbit(username)}>
+export const StackbitButton: React.FC<IStackbitButtonProps> = ({
+  username,
+}) => (
+  <Button
+    css="margin-top: 1rem; float: right;"
+    small
+    onClick={() => openStackbit(username)}
+  >
     Generate Sandbox
   </Button>
 );

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/Imports/StackbitImport.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import { ImportHeader, ImportDescription, Section } from './elements';
 import { StackbitButton } from './StackbitButton';
 
-interface Props {
+interface IStackbitImportProps {
   username: string;
 }
 
-export const StackbitImport = ({ username }: Props) => (
+export const StackbitImport: React.FC<IStackbitImportProps> = ({
+  username,
+}) => (
   <Section style={{ flex: 4 }}>
     <ImportHeader>Import from Stackbit</ImportHeader>
     <ImportDescription>
@@ -16,10 +18,7 @@ export const StackbitImport = ({ username }: Props) => (
       </a>
       . This generates a project for you that&#39;s automatically set up with
       any Theme, Site Generator and CMS.
-      <StackbitButton
-        style={{ marginTop: '1rem', float: 'right' }}
-        username={username}
-      />
+      <StackbitButton username={username} />
     </ImportDescription>
   </Section>
 );

…/routes/TeamView/AddTeamMember/index.tsx …TeamView/AddTeamMember/AddTeamMember.tsxpackages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx renamed to packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/AddTeamMember.tsx packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx renamed to packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/AddTeamMember.tsx

@@ -1,22 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
-
 import { useMutation } from '@apollo/react-hooks';
-
 import Input from '@codesandbox/common/lib/components/Input';
-import { Button } from '@codesandbox/common/lib/components/Button';
 import track from '@codesandbox/common/lib/utils/analytics';
-
 import { useOvermind } from 'app/overmind';
 import { INVITE_TO_TEAM } from '../../../../queries';
 import { IAddTeamMemberProps, IMutationVariables } from './types';
-
-const ErrorMessage = styled.div`
-  color: ${props => props.theme.red};
-  font-weight: 600;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-`;
+import { ErrorMessage, AddUserForm, AddButton } from './elements';
 
 export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
   const { actions } = useOvermind();
@@ -62,18 +51,18 @@ export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
   return (
     <>
       {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
-      <form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
+      <AddUserForm onSubmit={loading ? undefined : submit}>
         <Input
           ref={node => {
             input = node;
           }}
           placeholder="Add member by username"
           block
         />
-        <Button disabled={loading} style={{ width: 200 }} small>
+        <AddButton disabled={loading}>
           {loading ? 'Adding Member...' : 'Add Member'}
-        </Button>
-      </form>
+        </AddButton>
+      </AddUserForm>
     </>
   );
 };

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/elements.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { Button } from '@codesandbox/common/lib/components/Button';
+
+export const ErrorMessage = styled.div`
+  color: ${props => props.theme.red};
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const AddUserForm = styled.form`
+  display: flex;
+`;
+
+export const AddButton = styled(Button).attrs({
+  small: true,
+})`
+  width: 200;
+`;

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.ts

@@ -0,0 +1 @@
+export { AddTeamMember } from './AddTeamMember';

…ges/Sandbox/SignOutNoticeModal/index.tsx …box/SignOutNoticeModal/SignOutNotice.tsxpackages/app/src/app/pages/Sandbox/SignOutNoticeModal/index.tsx renamed to packages/app/src/app/pages/Sandbox/SignOutNoticeModal/SignOutNotice.tsx packages/app/src/app/pages/Sandbox/SignOutNoticeModal/index.tsx renamed to packages/app/src/app/pages/Sandbox/SignOutNoticeModal/SignOutNotice.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { useOvermind } from 'app/overmind';
-
-import { Button } from '@codesandbox/common/lib/components/Button';
 import Row from '@codesandbox/common/lib/components/flex/Row';
+import { Container, Heading, Explanation, Close, SignIn } from './elements';
 
-import { Container, Heading, Explanation } from './elements';
-
-export const SignOutNotice = () => {
+export const SignOutNotice: React.FC = () => {
   const {
     actions: { modalClosed, signInClicked },
   } = useOvermind();
+
   return (
     <Container>
       <Heading>You have been signed out</Heading>
@@ -23,23 +21,17 @@ export const SignOutNotice = () => {
       </Explanation>
 
       <Row justifyContent="space-around">
-        <Button
-          block
-          style={{ marginRight: '.5rem' }}
+        <Close
           red
           onClick={() => {
             modalClosed();
           }}
         >
           Close
-        </Button>
-        <Button
-          block
-          style={{ marginLeft: '.5rem' }}
-          onClick={() => signInClicked({ useExtraScopes: false })}
-        >
+        </Close>
+        <SignIn onClick={() => signInClicked({ useExtraScopes: false })}>
           Sign in
-        </Button>
+        </SignIn>
       </Row>
     </Container>
   );

packages/app/src/app/pages/Sandbox/SignOutNoticeModal/elements.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Button } from '@codesandbox/common/lib/components/Button';
 
 export const Container = styled.div`
   background-color: ${props => props.theme.background};
@@ -16,3 +17,15 @@ export const Explanation = styled.p`
   line-height: 1.3;
   margin-bottom: 2rem;
 `;
+
+export const Close = styled(Button).attrs({
+  block: true,
+})`
+  margin-right: 0.5rem;
+`;
+
+export const SignIn = styled(Button).attrs({
+  block: true,
+})`
+  margin-left: 0.5rem;
+`;

packages/app/src/app/pages/Sandbox/SignOutNoticeModal/index.ts

@@ -0,0 +1 @@
+export { SignOutNotice } from './SignOutNotice';