🔨 Refactored 🧠 Overmind Hacktober | /app/pages/common/Modals/Changelog/Dashboard/index.js (codesandbox#2664)

* Refactor /app/pages/common/Modals/Changelog/Dashboard/index.js

* Remove export default

Author: NabeelahY

…mmon/Modals/Changelog/Dashboard/index.js …mon/Modals/Changelog/Dashboard/index.tsxpackages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.js renamed to packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.js renamed to packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
+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 = {
+const titleStyles: CSS.Properties = {
   fontWeight: 600,
   color: 'rgba(255, 255, 255, 0.9)',
   fontSize: '1.125rem',
@@ -16,23 +16,23 @@ const titleStyles = {
   textTransform: 'uppercase',
 };
 
-const dateStyles = {
+const dateStyles: CSS.Properties = {
   color: 'rgba(255, 255, 255, 0.5)',
   fontSize: '.875rem',
   float: 'right',
   width: '100%',
   textAlign: 'right',
 };
 
-const subTitleStyles = {
+const subTitleStyles: CSS.Properties = {
   fontWeight: 600,
   color: 'rgba(255, 255, 255, .9)',
   fontSize: '1rem',
   marginTop: '1rem',
   marginBottom: 0,
 };
 
-const descriptionStyles = {
+const descriptionStyles: CSS.Properties = {
   lineHeight: 1.6,
   color: 'rgba(255, 255, 255, 0.7)',
   fontWeight: 600,
@@ -41,9 +41,15 @@ const descriptionStyles = {
   marginBottom: 0,
 };
 
-const W = props => <span {...props} style={{ color: 'white' }} />;
+const W: FunctionComponent = props => (
+  <span {...props} style={{ color: 'white' }} />
+);
+
+export const DashboardChangelog: FunctionComponent = () => {
+  const {
+    actions: { modalClosed },
+  } = useOvermind();
 
-function DashboardChangelog({ signals }) {
   return (
     <div
       style={{
@@ -130,12 +136,12 @@ function DashboardChangelog({ signals }) {
           block
           small
           secondary
-          onClick={() => {
-            signals.modalClosed();
-          }}
+          onClick={() => modalClosed()}
         >
           Close
         </Button>
+        {/* 
+  // @ts-ignore */}
         <Button
           href="/post/announcing-codesandbox-dashboard-teams"
           style={{ marginTop: '1rem', marginLeft: '.25rem' }}
@@ -149,6 +155,4 @@ function DashboardChangelog({ signals }) {
       </div>
     </div>
   );
-}
-
-export default inject('signals')(hooksObserver(DashboardChangelog));
+};