fix(web): update modal styles (#1220)

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

@@ -1,5 +1,6 @@
 import { useRef, ReactNode } from 'react'
 import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   children: ReactNode
@@ -14,7 +15,10 @@ const ModalDialog = ({ children, onDismiss, className }: Props) => {
     <AlertDialogOverlay leastDestructiveRef={ldRef} onDismiss={onDismiss}>
       <AlertDialogContent
         tabIndex={0}
-        className={`flex w-160 flex-col border border-solid border-border bg-default p-0 shadow-main ${className}`}
+        className={classNames(
+          'flex w-160 flex-col rounded border border-solid border-border bg-default p-0 shadow-main',
+          className,
+        )}
       >
         {children}
       </AlertDialogContent>

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

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

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

@@ -1,5 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { AlertDialogLabel } from '@reach/alert-dialog'
+import Icon from '@/Components/Icon/Icon'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   closeDialog: () => void
@@ -9,15 +11,18 @@ type Props = {
 
 const ModalDialogLabel: FunctionComponent<Props> = ({ children, closeDialog, className, headerButtons }) => (
   <AlertDialogLabel
-    className={`flex flex-shrink-0 items-center justify-between border-b border-solid border-border bg-contrast px-4.5 py-3 text-text ${className}`}
+    className={classNames(
+      'flex flex-shrink-0 items-center justify-between rounded-t border-b border-solid border-border bg-default px-4.5 py-3 text-text',
+      className,
+    )}
   >
     <div className="flex w-full flex-row items-center justify-between">
-      <div className="flex-grow text-base font-medium text-text">{children}</div>
+      <div className="flex-grow text-lg font-semibold text-text">{children}</div>
       <div className="flex items-center gap-2">
         {headerButtons}
-        <div tabIndex={0} className="cursor-pointer font-bold text-info" onClick={closeDialog}>
-          Close
-        </div>
+        <button tabIndex={0} className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+          <Icon type="close" />
+        </button>
       </div>
     </div>
     <hr className="h-1px no-border m-0 bg-border" />