feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/Shared/HorizontalSeparator.tsx

@@ -4,7 +4,7 @@ type Props = {
   classes?: string
 }
 const HorizontalSeparator: FunctionComponent<Props> = ({ classes = '' }) => {
-  return <hr className={`h-1px w-full bg-border no-border ${classes}`} />
+  return <hr className={`min-h-[1px] w-full bg-border border-none ${classes}`} />
 }
 
 export default HorizontalSeparator

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -1,21 +1,24 @@
-import { FunctionComponent, useRef } from 'react'
-import { AlertDialog } from '@reach/alert-dialog'
+import { useRef, ReactNode } from 'react'
+import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
 
-const ModalDialog: FunctionComponent = ({ children }) => {
+type Props = {
+  children: ReactNode
+  onDismiss?: () => void
+  className?: string
+}
+
+const ModalDialog = ({ children, onDismiss, className }: Props) => {
   const ldRef = useRef<HTMLButtonElement>(null)
 
   return (
-    <AlertDialog leastDestructiveRef={ldRef}>
-      {/* sn-component is focusable by default, but doesn't stretch to child width
-          resulting in a badly focused dialog. Utility classes are not available
-          at the sn-component level, only below it. tabIndex -1 disables focus
-          and enables it on the child component */}
-      <div tabIndex={-1} className="sn-component">
-        <div tabIndex={0} className="sk-panel w-160 bg-default rounded shadow-overlay focus:padded-ring-info">
-          {children}
-        </div>
-      </div>
-    </AlertDialog>
+    <AlertDialogOverlay leastDestructiveRef={ldRef} onDismiss={onDismiss}>
+      <AlertDialogContent
+        tabIndex={0}
+        className={`w-160 flex flex-col bg-default border border-solid border-border shadow-main p-0 ${className}`}
+      >
+        {children}
+      </AlertDialogContent>
+    </AlertDialogOverlay>
   )
 }
 

packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 const ModalDialogButtons: FunctionComponent<Props> = ({ children, className }) => (
   <>
-    <hr className="h-1px bg-border no-border m-0" />
+    <hr className="h-[1px] bg-border border-none m-0" />
     <div className={`px-4 py-4 flex flex-row items-center ${className}`}>
       {children != undefined && Array.isArray(children)
         ? children.map((child, idx, arr) => (

packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx

@@ -6,9 +6,7 @@ type Props = {
 }
 
 const ModalDialogDescription: FunctionComponent<Props> = ({ children, className = '' }) => (
-  <AlertDialogDescription className={`px-4 py-4 flex flex-row items-center ${className}`}>
-    {children}
-  </AlertDialogDescription>
+  <AlertDialogDescription className={`px-4 py-4 ${className}`}>{children}</AlertDialogDescription>
 )
 
 export default ModalDialogDescription

packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx

@@ -1,17 +1,23 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 import { AlertDialogLabel } from '@reach/alert-dialog'
 
 type Props = {
   closeDialog: () => void
   className?: string
+  headerButtons?: ReactNode
 }
 
-const ModalDialogLabel: FunctionComponent<Props> = ({ children, closeDialog, className }) => (
-  <AlertDialogLabel className={`sk-panel-header px-4.5 ${className}`}>
+const ModalDialogLabel: FunctionComponent<Props> = ({ children, closeDialog, className, headerButtons }) => (
+  <AlertDialogLabel
+    className={`flex-shrink-0 flex justify-between items-center px-4.5 py-3 border-b border-solid border-border bg-contrast text-text ${className}`}
+  >
     <div className="w-full flex flex-row justify-between items-center">
-      <div className="flex-grow color-text text-base font-medium">{children}</div>
-      <div tabIndex={0} className="font-bold color-info cursor-pointer" onClick={closeDialog}>
-        Close
+      <div className="flex-grow text-text text-base font-medium">{children}</div>
+      <div className="flex items-center gap-2">
+        {headerButtons}
+        <div tabIndex={0} className="font-bold text-info cursor-pointer" onClick={closeDialog}>
+          Close
+        </div>
       </div>
     </div>
     <hr className="h-1px bg-border no-border m-0" />