5 files changed, 72 insertions, 9 deletions
diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index 72dcba4..f7841f8 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -1,6 +1,7 @@
 import cx from 'clsx';
 import * as React from 'react';
-import Modal from 'react-modal';
+
+import Modal from '../Modal';
 
 import modalStyle from '../Modal.module.scss';
 
@@ -8,7 +9,13 @@ import s from './BaseModal.module.scss';
 
 const { useMemo } = React;
 
-export default function BaseModal({ isOpen, onRequestClose, children }) {
+type BaseModalProps = {
+  isOpen: boolean;
+  onRequestClose: (...args: any[]) => unknown;
+  children: React.ReactNode;
+};
+
+export default function BaseModal({ isOpen, onRequestClose, children }: BaseModalProps) {
   const className = useMemo(
     () => ({
       base: cx(modalStyle.content, s.cnt),
diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss
index 79b8a16..df412e5 100644
--- a/src/components/shared/Basic.module.scss
+++ b/src/components/shared/Basic.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 h2.sectionNameType {
   margin: 0;
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
index 8e72432..49c9a89 100644
--- a/src/components/shared/Fab.tsx
+++ b/src/components/shared/Fab.tsx
@@ -18,7 +18,7 @@ export const position = {
 
 interface ABProps extends React.HTMLAttributes<HTMLButtonElement> {
   text?: string;
-  onClick?: (e: React.FormEvent) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
   'data-testid'?: string;
 }
 
@@ -46,7 +46,7 @@ interface FabProps {
   alwaysShowTitle?: boolean;
   icon?: React.ReactNode;
   mainButtonStyles?: React.CSSProperties;
-  onClick?: (e: React.FormEvent) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
   text?: string;
   children?: React.ReactNode;
 }
@@ -68,7 +68,7 @@ const Fab: React.FC<FabProps> = ({
   const close = () => setIsOpen(false);
   const enter = () => event === 'hover' && open();
   const leave = () => event === 'hover' && close();
-  const toggle = (e: React.FormEvent) => {
+  const toggle = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick) {
       return onClick(e);
     }
@@ -76,7 +76,10 @@ const Fab: React.FC<FabProps> = ({
     return event === 'click' ? (isOpen ? close() : open()) : null;
   };
 
-  const actionOnClick = (e: React.FormEvent, userFunc: (e: React.FormEvent) => void) => {
+  const actionOnClick = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    userFunc: (e: React.MouseEvent<HTMLButtonElement>) => unknown
+  ) => {
     e.persist();
     setIsOpen(false);
     setTimeout(() => {
@@ -95,7 +98,7 @@ const Fab: React.FC<FabProps> = ({
               'aria-hidden': ariaHidden,
               tabIndex: isOpen ? 0 : -1,
               ...ch.props,
-              onClick: (e: React.FormEvent) => {
+              onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
                 if (ch.props.onClick) actionOnClick(e, ch.props.onClick);
               },
             })}
diff --git a/src/components/shared/FeatherIcons.ts b/src/components/shared/FeatherIcons.ts
new file mode 100644
index 0000000..745baa1
--- /dev/null
+++ b/src/components/shared/FeatherIcons.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as Feather from 'react-feather';
+
+type FeatherCompatProps = {
+  color?: string;
+  size?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  [key: string]: unknown;
+};
+
+type IconComponent = React.ComponentType<FeatherCompatProps>;
+
+function asIcon(name: keyof typeof Feather): IconComponent {
+  return Feather[name] as unknown as IconComponent;
+}
+
+export const Activity = asIcon('Activity');
+export const ArrowDown = asIcon('ArrowDown');
+export const ArrowDownCircle = asIcon('ArrowDownCircle');
+export const ArrowUp = asIcon('ArrowUp');
+export const ChevronDown = asIcon('ChevronDown');
+export const ChevronUp = asIcon('ChevronUp');
+export const Cpu = asIcon('Cpu');
+export const Database = asIcon('Database');
+export const Download = asIcon('Download');
+export const DownloadCloud = asIcon('DownloadCloud');
+export const Eye = asIcon('Eye');
+export const EyeOff = asIcon('EyeOff');
+export const FileText = asIcon('FileText');
+export const GitHub = asIcon('GitHub');
+export const Globe = asIcon('Globe');
+export const Hash = asIcon('Hash');
+export const Info = asIcon('Info');
+export const Link = asIcon('Link');
+export const LogOut = asIcon('LogOut');
+export const Menu = asIcon('Menu');
+export const Monitor = asIcon('Monitor');
+export const Pause = asIcon('Pause');
+export const Play = asIcon('Play');
+export const RefreshCcw = asIcon('RefreshCcw');
+export const RefreshCw = asIcon('RefreshCw');
+export const RotateCw = asIcon('RotateCw');
+export const Settings = asIcon('Settings');
+export const Shield = asIcon('Shield');
+export const Sliders = asIcon('Sliders');
+export const Tag = asIcon('Tag');
+export const Tool = asIcon('Tool');
+export const Trash2 = asIcon('Trash2');
+export const Upload = asIcon('Upload');
+export const X = asIcon('X');
+export const XCircle = asIcon('XCircle');
+export const Zap = asIcon('Zap');
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index 7e3ceae..0a5a018 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -1,6 +1,6 @@
 import cx from 'clsx';
 import * as React from 'react';
-import { RotateCw } from 'react-feather';
+import { RotateCw } from '~/components/shared/FeatherIcons';
 
 import s from './RotateIcon.module.scss';