🔨 Switch DashboardChangelog to use useOvermind

packages/app/src/app/pages/common/Modals/Changelog/Dashboard/elements.ts

@@ -0,0 +1,68 @@
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
+import styled, { css } from 'styled-components';
+
+export const Button = styled(ButtonBase)`
+  margin-top: 1rem;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+`;
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.background()};
+    padding: 1.5rem;
+  `};
+`;
+
+export const Date = styled.div`
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.875rem;
+  float: right;
+  width: 100%;
+  text-align: right;
+`;
+
+export const Description = styled.p`
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+`;
+
+export const Image = styled.img`
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  width: 100%;
+`;
+
+export const SubTitle = styled.h2`
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+`;
+
+export const Title = styled.h1`
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.125rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: 100%;
+  text-transform: uppercase;
+`;
+
+export const TitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  margin-bottom: 1rem;
+`;
+
+export const White = styled.span`
+  color: #ffffff;
+`;

packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx

@@ -1,115 +1,75 @@
 import React, { FunctionComponent } from 'react';
-import CSS from 'csstype';
-import { useOvermind } from 'app/overmind';
 import { Link } from 'react-router-dom';
-import theme from '@codesandbox/common/lib/theme';
-import { Button } from '@codesandbox/common/lib/components/Button';
-
-// Inline styles because styled-components didn't load the styles
-const titleStyles: CSS.Properties = {
-  fontWeight: 600,
-  color: 'rgba(255, 255, 255, 0.9)',
-  fontSize: '1.125rem',
-  marginTop: 0,
-  marginBottom: 0,
-  width: '100%',
-  textTransform: 'uppercase',
-};
-
-const dateStyles: CSS.Properties = {
-  color: 'rgba(255, 255, 255, 0.5)',
-  fontSize: '.875rem',
-  float: 'right',
-  width: '100%',
-  textAlign: 'right',
-};
-
-const subTitleStyles: CSS.Properties = {
-  fontWeight: 600,
-  color: 'rgba(255, 255, 255, .9)',
-  fontSize: '1rem',
-  marginTop: '1rem',
-  marginBottom: 0,
-};
 
-const descriptionStyles: CSS.Properties = {
-  lineHeight: 1.6,
-  color: 'rgba(255, 255, 255, 0.7)',
-  fontWeight: 600,
-  fontSize: '.875rem',
-  marginTop: '.5rem',
-  marginBottom: 0,
-};
+import { useOvermind } from 'app/overmind';
 
-const W: FunctionComponent = props => (
-  <span {...props} style={{ color: 'white' }} />
-);
+import {
+  Button,
+  ButtonContainer,
+  Container,
+  Date,
+  Description,
+  Image,
+  SubTitle,
+  Title,
+  TitleContainer,
+  White,
+} from './elements';
 
 export const DashboardChangelog: FunctionComponent = () => {
   const {
     actions: { modalClosed },
   } = useOvermind();
 
   return (
-    <div
-      style={{
-        padding: '1.5rem',
-        backgroundColor: theme.background(),
-      }}
-    >
-      <div
-        style={{
-          marginBottom: '1rem',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <h1 style={titleStyles}>
+    <Container>
+      <TitleContainer>
+        <Title>
           What
           {"'"}s New
-        </h1>
-        <div style={dateStyles}>July 2nd, 2018</div>
-      </div>
+        </Title>
+
+        <Date>July 2nd, 2018</Date>
+      </TitleContainer>
 
-      <img
+      <Image
         alt="CodeSandbox Announcement"
-        style={{
-          width: '100%',
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
-          borderRadius: 2,
-        }}
         src="https://cdn-images-1.medium.com/max/1600/1*wIMw31_Phf1WNEP6zjuTUw.png"
       />
 
-      <p style={descriptionStyles}>
+      <Description>
         We
         {"'"}
         re back with a new update! This update is very focused on{' '}
-        <W>collaboration</W> and <W>organization</W>. Let
+        <White>collaboration</White> and <White>organization</White>. Let
         {"'"}s take a look!
-      </p>
+      </Description>
 
-      <h2 style={subTitleStyles}>Dashboard</h2>
-      <p style={descriptionStyles}>
+      <SubTitle>Dashboard</SubTitle>
+
+      <Description>
         You can now manage your sandboxes in your own{' '}
         <Link to="/dashboard">dashboard</Link>! You
         {"'"}
-        re able to <W>filter, sort, search, delete, create and update</W>{' '}
-        multiple sandboxes at the same time. The possibilities are endless!
-      </p>
-
-      <h2 style={subTitleStyles}>Create Teams</h2>
-      <p style={descriptionStyles}>
-        An extension to the dashboard is <W>teams</W>! You can now create a team
-        with unlimited members to share sandboxes for collaboration. All
-        sandboxes automatically sync using <W>live collaboration</W> between
-        team members.
-      </p>
-
-      <h2 style={subTitleStyles}>Free CodeSandbox Live</h2>
-      <p style={descriptionStyles}>
+        re able to{' '}
+        <White>filter, sort, search, delete, create and update</White> multiple
+        sandboxes at the same time. The possibilities are endless!
+      </Description>
+
+      <SubTitle>Create Teams</SubTitle>
+
+      <Description>
+        An extension to the dashboard is <White>teams</White>! You can now
+        create a team with unlimited members to share sandboxes for
+        collaboration. All sandboxes automatically sync using{' '}
+        <White>live collaboration</White> between team members.
+      </Description>
+
+      <SubTitle>Free CodeSandbox Live</SubTitle>
+
+      <Description>
         Teams is not our only feature that allows for collaboration. We also
-        have <W>real time collaboration</W> with{' '}
+        have <White>real time collaboration</White> with{' '}
         <Link target="_blank" to="/docs/live">
           CodeSandbox Live
         </Link>
@@ -120,39 +80,41 @@ export const DashboardChangelog: FunctionComponent = () => {
         subscription, but we
         {"'"}
         re happy to announce that{' '}
-        <W>CodeSandbox Live is from now on free for everyone</W>!
-      </p>
+        <White>CodeSandbox Live is from now on free for everyone</White>!
+      </Description>
+
+      <SubTitle>And More</SubTitle>
 
-      <h2 style={subTitleStyles}>And More</h2>
-      <p style={descriptionStyles}>
+      <Description>
         There
         {"'"}s a lot more included in this update! Make sure to check out the
         announcement post to find out more about this update.
-      </p>
+      </Description>
 
-      <div style={{ display: 'flex' }}>
+      <ButtonContainer>
         <Button
-          style={{ marginTop: '1rem', marginRight: '.25rem' }}
           block
-          small
-          secondary
           onClick={() => modalClosed()}
+          secondary
+          small
+          style={{ marginRight: '.25rem' }}
         >
           Close
         </Button>
-        {/* 
-  // @ts-ignore */}
+
+        {/*
+        // @ts-ignore */}
         <Button
-          href="/post/announcing-codesandbox-dashboard-teams"
-          style={{ marginTop: '1rem', marginLeft: '.25rem' }}
           block
+          href="/post/announcing-codesandbox-dashboard-teams"
+          rel="noreferrer noopener"
           small
+          style={{ marginLeft: '.25rem' }}
           target="_blank"
-          rel="noreferrer noopener"
         >
           View Announcement
         </Button>
-      </div>
-    </div>
+      </ButtonContainer>
+    </Container>
   );
 };

packages/common/src/components/Button/elements.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
+import React, { ComponentProps } from 'react';
 import { Link } from 'react-router-dom';
-import { Button as ReakitButton } from 'reakit/Button';
+import { Button as ReakitButtonBase } from 'reakit/Button';
+import styled, { css } from 'styled-components';
+
 import theme from '../../theme';
-import { IButtonProps } from '.';
 import { withoutProps } from '../../utils';
 
+import { Button } from '.';
+
 export type OptionProps = {
   theme: any;
   disabled?: boolean;
@@ -102,7 +104,7 @@ const getBorder = ({
   return '2px solid #66B9F4';
 };
 
-export const styles = css<IButtonProps | any>`
+export const styles = css<ComponentProps<typeof Button> | any>`
   transition: 0.3s ease all;
   font-family: Poppins, Roboto, sans-serif;
 
@@ -160,6 +162,6 @@ export const LinkButton = styled(withoutProps(`small`)(Link))`
 export const AButton = styled(withoutProps(`small`)(props => <a {...props} />))`
   ${styles};
 `;
-export const Button = styled(withoutProps(`small`)(ReakitButton))`
+export const ReakitButton = styled(withoutProps(`small`)(ReakitButtonBase))`
   ${styles}
 `;

packages/common/src/components/Button/index.tsx

@@ -1,37 +1,34 @@
-import React from 'react';
-import { LinkButton, AButton, Button, styles } from './elements';
+import React, { FunctionComponent } from 'react';
 
-export interface IButtonProps {
+import { LinkButton, AButton, ReakitButton, styles } from './elements';
+
+type Props = {
   to?: string;
   href?: string;
   big?: boolean;
   small?: boolean;
   style?: React.CSSProperties;
   block?: boolean;
   onClick?: (event: React.MouseEvent) => void;
-  children?: React.ReactNode;
   disabled?: boolean;
   type?: 'button' | 'reset' | 'submit';
   danger?: boolean;
   secondary?: boolean;
   red?: boolean;
   target?: string;
   rel?: string;
-}
-
-function ButtonComponent({ style = {}, ...props }: IButtonProps) {
+};
+const Button: FunctionComponent<Props> = ({ style = {}, ...props }) => {
   // Link
   if (typeof props.to === 'string') {
-    return <LinkButton style={style} to={props.to} {...props} />;
+    return <LinkButton {...props} style={style} to={props.to} />;
   }
 
   if (props.href) {
-    // @ts-ignore
-    return <AButton style={style} {...props} />;
+    return <AButton {...props} style={style} />;
   }
 
-  // @ts-ignore
-  return <Button style={style} {...props} />;
-}
+  return <ReakitButton {...props} style={style} />;
+};
 
-export { ButtonComponent as Button, styles as buttonStyles };
+export { Button, styles as buttonStyles };

packages/common/src/components/Modal/Modal.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import {
   useDialogState,
   DialogDisclosure,
   DialogBackdrop,
   Dialog,
 } from 'reakit/Dialog';
 import { Portal } from 'reakit/Portal';
-import { Button, IButtonProps } from '../Button';
+import { Button } from '../Button';
 import { Backdrop, Container } from './elements';
 
-export interface IModalProps extends IButtonProps {
+export interface IModalProps extends ComponentProps<typeof Button> {
   label?: string;
   button?: React.ElementType;
   backdrop?: React.ElementType;