[General] Improvements in install dialog

src/components/UI/Dialog/DialogContent.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const DialogContent: React.FC = ({ children }) => {
+  return <div className="Dialog__content">{children}</div>
+}
+
+export default DialogContent

src/components/UI/Dialog/DialogFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const DialogFooter: React.FC = ({ children }) => {
+  return <div className="Dialog__footer">{children}</div>
+}
+
+export default DialogFooter

src/components/UI/Dialog/DialogHeader.tsx

@@ -0,0 +1,22 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+
+export interface DialogHeaderProps {
+  onClose: () => void
+}
+
+const DialogHeader: React.FC<DialogHeaderProps> = ({ children, onClose }) => {
+  return (
+    <div className="Dialog__header">
+      <div className="Dialog__headerTitle">{children}</div>
+      <div className="Dialog__headerClose">
+        <button className="Dialog__headerCloseButton" onClick={onClose}>
+          <FontAwesomeIcon className="Dialog__headerCloseIcon" icon={faXmark} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default DialogHeader

src/components/UI/Dialog/index.css

@@ -0,0 +1,91 @@
+.Dialog {
+  padding: 0;
+  text-align: left;
+
+  --dialog-margin-horizontal: 32px;
+  --dialog-margin-vertical: 24px;
+  --dialog-gap: 24px;
+}
+
+.Dialog__element {
+  top: 0;
+  z-index: 8;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: fit-content;
+  min-width: fit-content;
+  overflow: auto;
+  border: solid 1px var(--modal-border);
+  border-radius: 10px;
+  background: var(--modal-background);
+  color: var(--text-default);
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 500ms, transform 500ms;
+}
+
+.Dialog__element[open] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.Dialog__element::backdrop {
+  /* var() doesn't work here */
+  background: rgba(13, 15, 28, 0.8);
+}
+
+.Dialog__header {
+  display: flex;
+}
+
+.Dialog__headerTitle {
+  flex: 100% 1 1;
+  padding: var(--dialog-margin-vertical) 16px 0 var(--dialog-margin-horizontal);
+  font-size: 24px;
+}
+
+.Dialog__headerClose {
+  padding: var(--dialog-margin-vertical) var(--dialog-margin-horizontal) 0 0;
+}
+
+.Dialog__headerCloseButton {
+  border: none;
+  margin: -8px;
+  padding: 8px;
+  border-radius: 10px;
+  background: none;
+  color: var(--text-default);
+  cursor: pointer;
+  transition: 250ms color;
+}
+
+.Dialog__headerCloseButton:focus-visible {
+  outline: none;
+  box-shadow: var(--accent) 0 0 0 2px inset;
+}
+
+.Dialog__headerCloseButton:hover {
+  color: var(--text-hover);
+}
+
+.Dialog__headerCloseButton:active {
+  color: var(--accent);
+}
+
+.Dialog__headerCloseIcon {
+  font-size: 20px;
+}
+
+.Dialog__content {
+  padding: var(--dialog-gap) var(--dialog-margin-horizontal);
+}
+
+.Dialog__footer {
+  display: grid;
+  grid-gap: 16px;
+  grid-auto-flow: column;
+  margin: 0 0 0 auto;
+  padding: 0 var(--dialog-margin-horizontal) var(--dialog-margin-vertical)
+    var(--dialog-margin-horizontal);
+}

src/components/UI/Dialog/index.tsx

@@ -0,0 +1,52 @@
+import React, { SyntheticEvent, useCallback, useEffect, useRef } from 'react'
+import './index.css'
+
+export interface DialogProps {
+  className?: string
+  onClose: () => void
+}
+
+const Dialog: React.FC<DialogProps> = ({ children, className, onClose }) => {
+  const dialogRef = useRef<HTMLDialogElement | null>(null)
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (dialog) {
+      const cancel = () => {
+        onCloseRef.current()
+      }
+      dialog.addEventListener('cancel', cancel)
+      dialog['showModal']()
+      return () => {
+        dialog.removeEventListener('cancel', cancel)
+        dialog['close']()
+      }
+    }
+    return
+  }, [dialogRef.current])
+
+  const onDialogClick = useCallback(
+    (e: SyntheticEvent) => {
+      if (e.target === dialogRef.current) {
+        onClose()
+      }
+    },
+    [onClose]
+  )
+
+  return (
+    <div className="Dialog">
+      <dialog
+        className={`Dialog__element ${className}`}
+        ref={dialogRef}
+        onClick={onDialogClick}
+      >
+        {children}
+      </dialog>
+    </div>
+  )
+}
+
+export default Dialog

src/components/UI/FormControl/index.css

@@ -54,6 +54,10 @@
   padding-right: 40px;
 }
 
+.FormControl--hasSideButton > input {
+  padding-right: 64px;
+}
+
 .FormControl--select > select {
   cursor: pointer;
   padding-right: 40px;
@@ -98,6 +102,27 @@
   height: 16px;
 }
 
+.FormControl__sideButton {
+  cursor: pointer;
+  font-size: 20px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100%;
+  padding: 0 14px;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--text-default);
+  border-radius: 10px;
+}
+
+.FormControl__sideButton:focus-visible {
+  outline: none;
+  box-shadow: var(--accent) 0 0 0 2px inset;
+}
+
 .FormControl__caret,
 .FormControl__clear {
   position: absolute;
@@ -138,7 +163,7 @@
 }
 
 .FormControl option {
-  background: var(--background-color);
+  background: var(--body-background);
 }
 
 .FormControl option:checked {

src/components/UI/FormControl/index.tsx

@@ -1,7 +1,7 @@
 import { faCaretDown, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import cx from 'classnames'
-import React from 'react'
+import React, { ReactNode } from 'react'
 import './index.css'
 
 export interface FormControlProps {
@@ -10,6 +10,7 @@ export interface FormControlProps {
   segmented?: boolean
   small?: boolean
   onClear?: () => void
+  sideButton?: ReactNode
 }
 
 const FormControl: React.FC<FormControlProps> = ({
@@ -18,15 +19,17 @@ const FormControl: React.FC<FormControlProps> = ({
   select = false,
   segmented = false,
   small = false,
-  onClear = undefined
+  onClear = undefined,
+  sideButton = undefined
 }) => {
   return (
     <div
       className={cx('FormControl', className, {
         'FormControl--select': select,
         'FormControl--segmented': segmented,
         'FormControl--small': small,
-        'FormControl--clearable': !!onClear
+        'FormControl--clearable': !!onClear,
+        'FormControl--hasSideButton': !!sideButton
       })}
     >
       {children}
@@ -40,6 +43,15 @@ const FormControl: React.FC<FormControlProps> = ({
           <FontAwesomeIcon icon={faXmark} />
         </span>
       )}
+      {sideButton && (
+        <span
+          className="FormControl__sideButton"
+          onClick={onClear}
+          tabIndex={-1}
+        >
+          {sideButton}
+        </span>
+      )}
     </div>
   )
 }

src/components/UI/ToggleSwitch/index.tsx

@@ -1,10 +1,10 @@
+import React, { ChangeEventHandler } from 'react'
 import './index.css'
-import React from 'react'
 
 interface Props {
   dataTestId?: string
   disabled?: boolean
-  handleChange: () => void
+  handleChange: ChangeEventHandler<HTMLInputElement>
   value: boolean
   title: string
 }

src/index.css

@@ -6,6 +6,8 @@ html {
   --tooltip-background-color: #0d0e0e;
   --dropdown-background: #1a264b;
   --menu-background-color: #0d0e0e;
+  --modal-background: #13172a;
+  --modal-border: #1f253f;
   --modal-backdrop: #00000048;
   --text-hover: #59d0ea;
   --link-highlight: #07c5ef;
@@ -89,7 +91,7 @@ code {
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
-  background: var(--current-background, var(--background-color));
+  background: var(--current-background, var(--body-background));
 }
 
 /* Track */
@@ -102,7 +104,7 @@ code {
   background: var(--text-secondary);
   border-radius: 5px;
   margin: 2px;
-  border: 2px solid var(--current-background, var(--background-color));
+  border: 2px solid var(--current-background, var(--body-background));
 }
 
 ::-webkit-scrollbar-thumb:hover {