🔨 Switch SignOutNoticeModal to use useOvermind

Author: MichaelDeBoey

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

@@ -1,11 +1,13 @@
-import styled from 'styled-components';
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  background-color: ${props => props.theme.background};
-  padding: 1rem;
-  margin: 0;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  ${({ theme }) => css`
+    background-color: ${theme.background};
+    padding: 1rem;
+    margin: 0;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  `};
 `;
 
 export const Heading = styled.h2`
@@ -16,3 +18,7 @@ export const Explanation = styled.p`
   line-height: 1.3;
   margin-bottom: 2rem;
 `;
+
+export const Button = styled(ButtonBase)`
+  margin-right: 0.5rem;
+`;

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

@@ -1,18 +1,19 @@
-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 React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
 
-import { Container, Heading, Explanation } from './elements';
+import { Button, Container, Explanation, Heading } from './elements';
 
-export const SignOutNotice = () => {
+export const SignOutNoticeModal: FunctionComponent = () => {
   const {
     actions: { modalClosed, signInClicked },
   } = useOvermind();
+
   return (
     <Container>
       <Heading>You have been signed out</Heading>
+
       <Explanation>
         CodeSandbox has migrated to a system where authorization tokens can be
         managed and revoked, and we had to sign everyone out for this.
@@ -23,21 +24,11 @@ export const SignOutNotice = () => {
       </Explanation>
 
       <Row justifyContent="space-around">
-        <Button
-          block
-          style={{ marginRight: '.5rem' }}
-          red
-          onClick={() => {
-            modalClosed();
-          }}
-        >
+        <Button block onClick={() => modalClosed()} red>
           Close
         </Button>
-        <Button
-          block
-          style={{ marginLeft: '.5rem' }}
-          onClick={() => signInClicked({ useExtraScopes: false })}
-        >
+
+        <Button block onClick={() => signInClicked({ useExtraScopes: false })}>
           Sign in
         </Button>
       </Row>