Drop inline styling where it's unwieldy.

retrixe · Jul 24, 2023 · e00fabd · e00fabd
1 parent 7fe5623
commit e00fabd
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 72 deletions.
diff --git a/imports/dashboard/console/consoleView.tsx b/imports/dashboard/console/consoleView.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useLayoutEffect } from 'react'
 import Typography from '@mui/material/Typography'
+import styled from '@emotion/styled'
 
 let chrome = false
 try {
@@ -10,26 +11,24 @@ try {
   ) chrome = true
 } catch (e) {}
 
-const ChromeConsoleView = (props: { console: Array<{ id: number, text: string }> }): JSX.Element => {
-  return (
-    <div
-      style={{
-        height: '100%',
-        width: '100%',
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column-reverse'
-      }}
-    >
-      <div style={{ minHeight: '5px' }} />
-      <Typography variant='body2' style={{ lineHeight: 1.5, wordWrap: 'break-word' }} component='div'>
-        {props.console.map((i) => (
-          <span key={i.id}>{i.text}<br /></span>
-        )) /* Truncate to 650 lines due to performance issues afterwards. */}
-      </Typography>
-    </div>
-  )
-}
+const ChromeConsoleViewContainer = styled.div({
+  height: '100%',
+  width: '100%',
+  overflow: 'auto',
+  display: 'flex',
+  flexDirection: 'column-reverse'
+})
+
+const ChromeConsoleView = (props: { console: Array<{ id: number, text: string }> }): JSX.Element => (
+  <ChromeConsoleViewContainer>
+    <div style={{ minHeight: '5px' }} />
+    <Typography variant='body2' style={{ lineHeight: 1.5, wordWrap: 'break-word' }} component='div'>
+      {props.console.map((i) => (
+        <span key={i.id}>{i.text}<br /></span>
+      )) /* Truncate to 650 lines due to performance issues afterwards. */}
+    </Typography>
+  </ChromeConsoleViewContainer>
+)
 
 const ConsoleView = (props: { console: Array<{ id: number, text: string }> }): JSX.Element => {
   const ref = useRef<HTMLDivElement>(null)

diff --git a/imports/dashboard/dashboardLayout.tsx b/imports/dashboard/dashboardLayout.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Typography, IconButton, Drawer,
   List, ListItemButton, ListItemIcon, ListItemText,
@@ -18,6 +19,13 @@ import Layout from '../layout'
 import config from '../config'
 import UnstyledLink from '../helpers/unstyledLink'
 
+const DashboardContainer = styled.div({
+  padding: 20,
+  flexDirection: 'column',
+  display: 'flex',
+  flex: 1
+})
+
 const DrawerItem = (props: { icon: React.ReactElement, name: string, subUrl: string }): JSX.Element => {
   const { server, node } = useRouter().query
   const nodeUri = typeof node === 'string' ? `?node=${encodeURIComponent(node)}` : ''
@@ -96,16 +104,11 @@ const DashboardLayout = (props: React.PropsWithChildren<{ loggedIn: boolean }>):
             </List>
           </Drawer>
         )}
-        <div style={{
-          padding: 20,
-          marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : undefined,
-          flexDirection: 'column',
-          display: 'flex',
-          flex: 1
-        }}
+        <DashboardContainer
+          style={{ marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : 0 }}
         >
           {props.children}
-        </div>
+        </DashboardContainer>
       </Layout>
     </>
   )

diff --git a/imports/dashboard/files/overlay.tsx b/imports/dashboard/files/overlay.tsx
@@ -1,28 +1,29 @@
 import React from 'react'
 import { Paper, Typography, LinearProgress } from '@mui/material'
+import styled from '@emotion/styled'
+
+const OverlayContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'fixed', /* Sit on top of the page content */
+  width: '100%', /* Full width (cover the whole page) */
+  height: '100%', /* Full height (cover the whole page) */
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 2000
+})
 
 const Overlay = ({ message }: { message: string }): JSX.Element => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'fixed', /* Sit on top of the page content */
-      width: '100%', /* Full width (cover the whole page) */
-      height: '100%', /* Full height (cover the whole page) */
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 2000
-    }}
-  >
+  <OverlayContainer>
     <div style={{ flex: 1 }} />
     <Paper sx={{ height: '80px', m: '20px', p: '20px', ml: { xs: '20px', sm: '220px' } }}>
       <LinearProgress />
       <br />
       <Typography variant='body1'>{message}</Typography>
     </Paper>
-  </div>
+  </OverlayContainer>
 )
 
 export default Overlay
diff --git a/imports/layout.tsx b/imports/layout.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
 import { AppBar, Toolbar } from '@mui/material'
+import styled from '@emotion/styled'
+
+const LayoutContainer = styled.div({
+  // background: 'linear-gradient(to top, #fc00ff, #00dbde)',
+  minHeight: '100vh',
+  width: '100vw',
+  maxWidth: '100%',
+  display: 'flex',
+  flexDirection: 'column'
+  // minWidth: '100%'
+})
 
 const Layout = (props: React.PropsWithChildren<{
   appBar?: React.ReactNode
   removeToolbar?: boolean
 }>): JSX.Element => (
-  <div
-    style={{
-      // background: 'linear-gradient(to top, #fc00ff, #00dbde)',
-      minHeight: '100vh',
-      width: '100vw',
-      maxWidth: '100%',
-      display: 'flex',
-      flexDirection: 'column'
-      // minWidth: '100%'
-    }}
-  >
+  <LayoutContainer>
     {/* <style jsx global>
       {`
       body {
@@ -34,7 +35,7 @@ const Layout = (props: React.PropsWithChildren<{
     </AppBar>
     {props.removeToolbar ? '' : <Toolbar />}
     {props.children}
-  </div>
+  </LayoutContainer>
 )
 
 export default Layout
diff --git a/imports/settings/settingsLayout.tsx b/imports/settings/settingsLayout.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Typography, IconButton, Drawer,
   List, ListItemButton, ListItemIcon, ListItemText,
@@ -16,6 +17,13 @@ import Layout from '../layout'
 import config from '../config'
 import UnstyledLink from '../helpers/unstyledLink'
 
+const SettingsContainer = styled.div({
+  padding: 20,
+  flexDirection: 'column',
+  display: 'flex',
+  flex: 1
+})
+
 const DrawerItem = (props: { icon: React.ReactElement, name: string, subUrl: string }): JSX.Element => {
   return (
     <UnstyledLink href={`/settings/${props.subUrl}`}>
@@ -88,16 +96,11 @@ const SettingsLayout = (props: React.PropsWithChildren<{ loggedIn: boolean }>):
             </List>
           </Drawer>
         )}
-        <div style={{
-          padding: 20,
-          marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : undefined,
-          flexDirection: 'column',
-          display: 'flex',
-          flex: 1
-        }}
+        <SettingsContainer
+          style={{ marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : 0 }}
         >
           {props.children}
-        </div>
+        </SettingsContainer>
       </Layout>
     </>
   )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
+import emotionStyled from '@emotion/styled'
 import { Button, IconButton, Typography, TextField, Paper, NoSsr, styled, Tooltip } from '@mui/material'
 import Info from '@mui/icons-material/Info'
 import config from '../imports/config'
@@ -15,6 +16,14 @@ const ButtonContainer = styled('div')(({ theme }) => ({
   }
 }))
 
+const IndexContainer = emotionStyled.div({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+  overflow: 'auto'
+})
+
 const Index = (): JSX.Element => {
   const [failedAuth, setFailedAuth] = useState(false) // Unable to authorize with the server.
   const [invalid, setInvalid] = useState(false) // Invalid credentials.
@@ -92,14 +101,7 @@ const Index = (): JSX.Element => {
         }
         removeToolbar
       >
-        <div style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100vh',
-          overflow: 'auto'
-        }}
-        >
+        <IndexContainer>
           <NoSsr>
             <Paper
               elevation={24} sx={{
@@ -160,7 +162,7 @@ const Index = (): JSX.Element => {
               </ButtonContainer>
             </Paper>
           </NoSsr>
-        </div>
+        </IndexContainer>
       </Layout>
     </React.StrictMode>
   )