🔨 Refactor SSEDownNotice to use hooks

Author: Saeris

…/Editor/Workspace/SSEDownNotice/index.js …orkspace/SSEDownNotice/SSEDownNotice.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/SSEDownNotice.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/SSEDownNotice.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
-import { observer, inject } from 'mobx-react';
 import getTemplate from '@codesandbox/common/lib/templates';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from 'app/store';
 
 import { Container } from './elements';
 
-const ConnectionNotice = ({ store }) => {
+export const SSEDownNotice = observer(() => {
+  const store = useStore();
+
   const templateDef = getTemplate(store.editor.currentSandbox.template);
   if (!templateDef.isServer) {
     return null;
@@ -18,9 +22,9 @@ const ConnectionNotice = ({ store }) => {
     <Container>
       <p
         style={{
-          fontWeight: 700,
-          color: 'white',
+          color: '#FFFFFF',
           fontSize: '.875rem',
+          fontWeight: 700,
           marginTop: 0,
         }}
       >
@@ -35,17 +39,15 @@ const ConnectionNotice = ({ store }) => {
         {"'"}t resolved with in a minute it would greatly help us if you could
         let us know on{' '}
         <a
-          style={{ color: 'white' }}
           href="https://spectrum.chat/codesandbox"
-          target="_blank"
           rel="noopener noreferrer"
+          style={{ color: '#FFFFFF' }}
+          target="_blank"
         >
           Spectrum
         </a>
         .
       </p>
     </Container>
   );
-};
-
-export default inject('store')(observer(ConnectionNotice));
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/elements.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.secondary};
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.8rem;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 1rem;
+  `}
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/elements.ts

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

packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/index.ts

@@ -20,7 +20,7 @@ import ConnectionNotice from './ConnectionNotice';
 import Advertisement from './Advertisement';
 import WorkspaceItem from './WorkspaceItem';
 import Chat from './Chat';
-import SSEDownNotice from './SSEDownNotice';
+import { SSEDownNotice } from './SSEDownNotice';
 
 import {
   Container,