feat: add styled-components (#1126)

packages/web/package.json

@@ -77,7 +77,8 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.1.0",
+    "styled-components": "^5.3.5"
   },
   "lint-staged": {
     "app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix",

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,12 +1,20 @@
 import { getPlatformString } from '@/Utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
+import styled from 'styled-components'
 
 type Props = {
   children: ReactNode
   onDismiss: () => void
 }
 
+const StyledDialogContent = styled(DialogContent)`
+  width: 90%;
+  max-width: 90%;
+  min-height: 90%;
+  background: var(--modal-background-color);
+`
+
 const HistoryModalDialog = ({ children, onDismiss }: Props) => {
   return (
     <DialogOverlay
@@ -14,18 +22,9 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
       onDismiss={onDismiss}
       aria-label="Note revision history"
     >
-      <DialogContent
-        aria-label="Note revision history"
-        className="rounded shadow-overlay"
-        style={{
-          width: '90%',
-          maxWidth: '90%',
-          minHeight: '90%',
-          background: 'var(--modal-background-color)',
-        }}
-      >
+      <StyledDialogContent aria-label="Note revision history" className="rounded shadow-overlay">
         <div className="bg-default flex flex-col h-full overflow-hidden">{children}</div>
-      </DialogContent>
+      </StyledDialogContent>
     </DialogOverlay>
   )
 }