feat: add styled-components (#1126)

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