Jyotiarora2610 refactor liveindex

packages/app/src/app/pages/Live/BlinkingDot.js → packages/app/src/app/pages/Live/BlinkingDot.tsx

@@ -1,18 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
-
-const DotContainer = styled.div`
-  font-size: 4rem;
-  display: block;
-  color: rgb(253, 36, 57);
 
-  svg {
-    transition: 0.3s ease opacity;
-  }
-`;
+import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+import { DotContainer } from './elements';
 
-export class BlinkingDot extends React.PureComponent {
+export class BlinkingDot extends React.PureComponent<{}, { showing: boolean }> {
+  timer: NodeJS.Timeout;
   state = {
     showing: true,
   };

packages/app/src/app/pages/Live/elements.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import Padding from '@codesandbox/common/lib/components/spacing/Padding';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+
+export const Container = styled.div`
+  font-weight: 300;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+`;
+
+export const Wrapper = styled(Padding)`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+`;
+
+export const Content = styled(Centered)`
+  flex: 1;
+  width: 100%;
+  height: 100%;
+`;
+
+export const DotContainer = styled.div`
+  font-size: 4rem;
+  display: block;
+  color: rgb(253, 36, 57);
+
+  svg {
+    transition: 0.3s ease opacity;
+  }
+`;