Cleanup CSS

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts

@@ -10,24 +10,24 @@ export const Container = styled.div`
   `};
 `;
 
-export const Title = styled.div`
-  color: #fd2439fa;
-  font-weight: 800;
+export const Input = styled(InputBase)`
+  width: calc(100% - 1.5rem);
+  margin: 0 0.75rem;
+  font-size: 0.875rem;
+`;
+
+export const LiveMessage = styled.div`
+  font-size: 1rem;
+  flex: 1;
   display: flex;
   align-items: center;
-  vertical-align: middle;
-
-  padding: 0 1rem 0.5rem;
-
-  svg {
-    margin-right: 0.25rem;
-  }
 `;
 
-export const Input = styled(InputBase)`
-  width: calc(100% - 1.5rem);
-  margin: 0 0.75rem;
+export const NoOtherUsers = styled.div`
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 600;
   font-size: 0.875rem;
+  margin-top: 0.25rem;
 `;
 
 export const SubTitle = styled.div`
@@ -39,6 +39,20 @@ export const SubTitle = styled.div`
   font-size: 0.875rem;
 `;
 
+export const Title = styled.div`
+  color: #fd2439fa;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+
+  padding: 0 1rem 0.5rem;
+
+  svg {
+    margin-right: 0.25rem;
+  }
+`;
+
 export const Users = styled.div`
   ${({ theme }) => css`
     padding: 0 1rem 0.25rem;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx

@@ -10,7 +10,15 @@ import { Description, WorkspaceInputContainer } from '../../../elements';
 import LiveButton from '../LiveButton';
 
 import Countdown from './Countdown';
-import { Container, Input, SubTitle, Title, Users } from './elements';
+import {
+  Container,
+  Input,
+  LiveMessage,
+  NoOtherUsers,
+  SubTitle,
+  Title,
+  Users,
+} from './elements';
 import { FollowButton } from './FollowButton';
 import { LiveMode } from './LiveMode';
 import { MakeEditorButton } from './MakeEditorButton';
@@ -58,22 +66,15 @@ export const LiveInfo: FunctionComponent = () => {
   return (
     <Container>
       <Title>
-        <div
-          style={{
-            fontSize: '1rem',
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
+        <LiveMessage>
           {reconnecting ? (
             'Reconnecting...'
           ) : (
             <>
               <RecordIcon /> {getLiveMessage()}
             </>
           )}
-        </div>
+        </LiveMessage>
 
         <div>{startTime !== null && <Countdown time={startTime} />}</div>
       </Title>
@@ -162,16 +163,7 @@ export const LiveInfo: FunctionComponent = () => {
               />
             ))
           ) : (
-            <div
-              style={{
-                color: 'rgba(255, 255, 255, 0.8)',
-                fontWeight: 600,
-                fontSize: '.875rem',
-                marginTop: '0.25rem',
-              }}
-            >
-              No other users in session, invite them!
-            </div>
+            <NoOtherUsers>No other users in session, invite them!</NoOtherUsers>
           )}
         </Users>
       </Margin>