feat(requests): Request Overrides & Request Editing (#653)

src/components/Common/Alert/index.tsx

@@ -58,9 +58,9 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
       <div className="flex">
         <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
         <div className="ml-3">
-          <h3 className={`text-sm font-medium ${design.titleColor}`}>
+          <div className={`text-sm font-medium ${design.titleColor}`}>
             {title}
-          </h3>
+          </div>
           <div className={`mt-2 text-sm ${design.textColor}`}>{children}</div>
         </div>
       </div>

src/components/Common/LoadingSpinner/index.tsx

@@ -1,8 +1,37 @@
 import React from 'react';
 
+export const SmallLoadingSpinner: React.FC = () => {
+  return (
+    <div className="inset-0 flex items-center justify-center w-full h-full text-gray-200">
+      <svg
+        className="w-10 h-10"
+        viewBox="0 0 38 38"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+      >
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(1 1)" strokeWidth="2">
+            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="1s"
+                repeatCount="indefinite"
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
 const LoadingSpinner: React.FC = () => {
   return (
-    <div className="h-64 inset-0 flex justify-center items-center text-gray-200">
+    <div className="inset-0 flex items-center justify-center h-64 text-gray-200">
       <svg
         className="w-16 h-16"
         viewBox="0 0 38 38"

src/components/Common/Modal/index.tsx

@@ -66,7 +66,7 @@ const Modal: React.FC<ModalProps> = ({
   return ReactDOM.createPortal(
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
-      className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+      className="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-50"
       onKeyDown={(e) => {
         if (e.key === 'Escape') {
           typeof onCancel === 'function' && backgroundClickable
@@ -98,7 +98,7 @@ const Modal: React.FC<ModalProps> = ({
         show={!loading}
       >
         <div
-          className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full max-h-full"
+          className="inline-block w-full max-h-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -106,7 +106,7 @@ const Modal: React.FC<ModalProps> = ({
         >
           <div className="sm:flex sm:items-center">
             {iconSvg && (
-              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
+              <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-600 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                 {iconSvg}
               </div>
             )}
@@ -116,12 +116,12 @@ const Modal: React.FC<ModalProps> = ({
               }`}
             >
               {title && (
-                <h3
-                  className="text-lg leading-6 font-medium text-white"
+                <span
+                  className="text-lg font-medium leading-6 text-white"
                   id="modal-headline"
                 >
                   {title}
-                </h3>
+                </span>
               )}
             </div>
           </div>
@@ -131,7 +131,7 @@ const Modal: React.FC<ModalProps> = ({
             </div>
           )}
           {(onCancel || onOk || onSecondary || onTertiary) && (
-            <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
+            <div className="flex flex-row-reverse justify-center mt-5 sm:mt-4 sm:justify-start">
               {typeof onOk === 'function' && (
                 <Button
                   buttonType={okButtonType}

src/components/Common/SlideOver/index.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Transition from '../../Transition';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
-import useClickOutside from '../../../hooks/useClickOutside';
 
 interface SlideOverProps {
   show?: boolean;
@@ -21,9 +21,6 @@ const SlideOver: React.FC<SlideOverProps> = ({
   const [isMounted, setIsMounted] = useState(false);
   const slideoverRef = useRef(null);
   useLockBodyScroll(show);
-  useClickOutside(slideoverRef, () => {
-    onClose();
-  });
 
   useEffect(() => {
     setIsMounted(true);
@@ -44,8 +41,15 @@ const SlideOver: React.FC<SlideOverProps> = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-gray-800`}
+        onClick={() => onClose()}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            onClose();
+          }
+        }}
       >
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 flex max-w-full pl-10">
@@ -59,7 +63,12 @@ const SlideOver: React.FC<SlideOverProps> = ({
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-md" ref={slideoverRef}>
+              {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+              <div
+                className="w-screen max-w-md"
+                ref={slideoverRef}
+                onClick={(e) => e.stopPropagation()}
+              >
                 <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
                   <header className="px-4 py-6 space-y-1 bg-indigo-600">
                     <div className="flex items-center justify-between space-x-3">