🔨 Switch LiveSessionEnded to use useOvermind (codesandbox#3214)

Author: MichaelDeBoey

packages/app/src/app/pages/common/Modals/LiveSessionEnded/elements.js

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+import { Explanation as ExplanationBase } from '../elements';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.background};
+    padding: 1rem;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.8);
+  `};
+`;
+
+export const Explanation = styled(ExplanationBase)`
+  margin-bottom: 1rem;
+`;

packages/app/src/app/pages/common/Modals/LiveSessionEnded/elements.ts

@@ -1,21 +1,24 @@
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Row from '@codesandbox/common/lib/components/flex/Row';
-import { useOvermind } from 'app/overmind';
 import React, { FunctionComponent } from 'react';
-import { Explanation, Heading } from '../elements';
-import { Container } from './elements';
+
+import { useOvermind } from 'app/overmind';
+
+import { Heading } from '../elements';
+
+import { Container, Explanation } from './elements';
 
 export const LiveSessionEnded: FunctionComponent = () => {
   const {
+    actions: {
+      editor: { forkSandboxClicked },
+      modalClosed,
+    },
     state: {
+      currentModalMessage,
       editor: {
         currentSandbox: { owned },
       },
-      currentModalMessage,
-    },
-    actions: {
-      modalClosed,
-      editor: { forkSandboxClicked },
     },
   } = useOvermind();
 
@@ -26,32 +29,29 @@ export const LiveSessionEnded: FunctionComponent = () => {
   return (
     <Container>
       <Heading>The live session has ended</Heading>
-      <Explanation style={{ marginBottom: '1rem' }}>
+
+      <Explanation>
         {currentModalMessage || 'The session has ended due to inactivity'},{' '}
         {suggestion}
       </Explanation>
 
       <Row justifyContent="space-around">
-        <Button small href="/s">
+        <Button href="/s" small>
           Create Sandbox
         </Button>
 
         {owned ? (
-          <Button
-            small
-            onClick={() => {
-              modalClosed();
-            }}
-          >
+          <Button onClick={() => modalClosed()} small>
             Close Modal
           </Button>
         ) : (
           <Button
-            small
             onClick={() => {
               forkSandboxClicked();
+
               modalClosed();
             }}
+            small
           >
             Fork Sandbox
           </Button>