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>
   )
 }

yarn.lock

@@ -6154,6 +6154,7 @@ __metadata:
     react-dnd-touch-backend: ^16.0.1
     react-dom: ^18.1.0
     sass-loader: ^12.6.0
+    styled-components: ^5.3.5
     svg-jest: ^1.0.1
     ts-jest: ^27.1.4
     ts-loader: ^9.2.8
@@ -29911,7 +29912,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:5.3.5":
+"styled-components@npm:5.3.5, styled-components@npm:^5.3.5":
   version: 5.3.5
   resolution: "styled-components@npm:5.3.5"
   dependencies: