From 062c287e75ed7618ffcb180a9576c1668a29524e Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Mon, 23 Jan 2023 22:08:01 +0530
Subject: [PATCH] feat(ui): changed to interfonts

---
 frontend/package-lock.json                            | 11 +++++++++++
 frontend/package.json                                 |  1 +
 frontend/src/components/v2/Button/Button.tsx          |  2 +-
 frontend/src/components/v2/Card/Card.tsx              |  2 +-
 frontend/src/components/v2/Checkbox/Checkbox.tsx      |  2 +-
 frontend/src/components/v2/Dropdown/Dropdown.tsx      |  2 +-
 .../src/components/v2/FormControl/FormControl.tsx     |  4 ++--
 frontend/src/components/v2/IconButton/IconButton.tsx  |  2 +-
 frontend/src/components/v2/Input/Input.tsx            |  2 +-
 frontend/src/components/v2/Menu/Menu.tsx              |  2 +-
 frontend/src/components/v2/Modal/Modal.tsx            |  8 +++++---
 frontend/src/components/v2/Select/Select.tsx          |  6 +++---
 frontend/src/components/v2/Switch/Switch.tsx          |  2 +-
 frontend/src/components/v2/Table/Table.tsx            |  2 +-
 frontend/src/components/v2/TextArea/TextArea.tsx      |  2 +-
 frontend/src/styles/globals.css                       |  8 +++-----
 frontend/tailwind.config.js                           |  4 ++++
 17 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 435f229fcf..1348fbdc34 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@emotion/css": "^11.10.0",
         "@emotion/server": "^11.10.0",
+        "@fontsource/inter": "^4.5.15",
         "@fortawesome/fontawesome-svg-core": "^6.1.2",
         "@fortawesome/free-brands-svg-icons": "^6.1.2",
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -2793,6 +2794,11 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@@ -24164,6 +24170,11 @@
         "use-isomorphic-layout-effect": "^1.1.1"
       }
     },
+    "@fontsource/inter": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 80c267820c..70e2f2358a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/css": "^11.10.0",
     "@emotion/server": "^11.10.0",
+    "@fontsource/inter": "^4.5.15",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-brands-svg-icons": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index c0894f261a..21548d0e3d 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
   [
     'button',
     'transition-all',
-    'font-medium',
+    'font-inter font-medium',
     'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative'
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 1001c8cf3d..9e658aaf73 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -47,7 +47,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          'flex flex-col w-full text-gray-200 bg-mineshaft-700 shadow-md',
+          'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
           isFullHeight && 'h-full',
           isRounded && 'rounded-md',
           isPlain && 'shadow-none',
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx
index 392aeca0fb..5b30fb458f 100644
--- a/frontend/src/components/v2/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx
@@ -25,7 +25,7 @@ export const Checkbox = ({
   ...props
 }: CheckboxProps): JSX.Element => {
   return (
-    <div className="flex items-center text-bunker-300">
+    <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
           'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.tsx b/frontend/src/components/v2/Dropdown/Dropdown.tsx
index d886fe1007..57a206493e 100644
--- a/frontend/src/components/v2/Dropdown/Dropdown.tsx
+++ b/frontend/src/components/v2/Dropdown/Dropdown.tsx
@@ -62,7 +62,7 @@ export const DropdownMenuItem = <T extends ElementType = 'button'>({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      'text-sm block px-4 py-2 data-[highlighted]:bg-gray-700 00 outline-none cursor-pointer',
+      'text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer',
       className
     )}
   >
diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index d609b24f40..14e58d5bed 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -13,7 +13,7 @@ export type FormLabelProps = {
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
   <Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
     {label}
-    {isRequired && <span className="text-red ml-1">*</span>}
+    {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>
 );
 
@@ -25,7 +25,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'text-xs flex items-center opacity-90 text-mineshaft-300 mt-2',
+      'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
       isError && 'text-red-600'
     )}
   >
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index 9790d9d7bb..b1a1f4813d 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -14,7 +14,7 @@ const iconButtonVariants = cva(
   [
     'button',
     'transition-all',
-    'font-medium',
+    'font-inter font-medium',
     'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative'
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index e7b63e3add..4f502e31db 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -38,7 +38,7 @@ const inputVariants = cva(
   }
 );
 
-const inputParentContainerVariants = cva('inline-flex items-center border relative', {
+const inputParentContainerVariants = cva('inline-flex font-inter items-center border relative', {
   variants: {
     isRounded: {
       true: ['rounded-md'],
diff --git a/frontend/src/components/v2/Menu/Menu.tsx b/frontend/src/components/v2/Menu/Menu.tsx
index 54bb08a466..1497b01fa5 100644
--- a/frontend/src/components/v2/Menu/Menu.tsx
+++ b/frontend/src/components/v2/Menu/Menu.tsx
@@ -35,7 +35,7 @@ export const MenuItem = <T extends ElementType = 'button'>({
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
   <li
     className={twMerge(
-      'px-2 py-3 flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
+      'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
       isSelected && 'text-primary',
       isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
       className
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index 63b5d537a3..c7d42541dc 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { Card, CardBody, CardFooter, CardTitle } from '../Card';
 import { IconButton } from '../IconButton';
 
-export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
+export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
   subTitle?: string;
   footerContent?: ReactNode;
@@ -48,8 +48,10 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
 
 ModalContent.displayName = 'ModalContent';
 
-export const Modal = DialogPrimitive.Root;
-export type ModalProps = DialogPrimitive.DialogProps;
+export type ModalProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export const Modal = ({ isOpen, ...props }: ModalProps) => (
+  <DialogPrimitive.Root open={isOpen} {...props} />
+);
 
 export const ModalTrigger = DialogPrimitive.Trigger;
 export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 3fee8b7c79..c00223e2b6 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -22,8 +22,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
-            `select inline-flex items-center justify-between 
-            px-4 py-2.5 text-sm text-white rounded-md bg-mineshaft-800`,
+            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
+            px-4 py-2.5 font-inter text-sm text-white rounded-md bg-mineshaft-800`,
             className
           )}
         >
@@ -36,7 +36,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Content
             position="popper"
             sideOffset={5}
-            className="overflow-hidden text-white rounded-md shadow-md bg-mineshaft-800"
+            className="overflow-hidden text-white rounded-md shadow-md font-inter bg-mineshaft-800"
             style={{ width: 'var(--radix-select-trigger-width)' }}
           >
             <SelectPrimitive.ScrollUpButton>
diff --git a/frontend/src/components/v2/Switch/Switch.tsx b/frontend/src/components/v2/Switch/Switch.tsx
index f720b6ea64..70bbd29ca3 100644
--- a/frontend/src/components/v2/Switch/Switch.tsx
+++ b/frontend/src/components/v2/Switch/Switch.tsx
@@ -19,7 +19,7 @@ export const Switch = ({
   isRequired,
   ...props
 }: SwitchProps): JSX.Element => (
-  <div className="flex items-center text-bunker-300">
+  <div className="flex items-center text-bunker-300 font-inter">
     <label className="text-sm" htmlFor={id}>
       {children}
       {isRequired && <span className="pl-1 text-red">*</span>}
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
index c4d4c89b6d..0c2b52eb8e 100644
--- a/frontend/src/components/v2/Table/Table.tsx
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -14,7 +14,7 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'overflow-x-auto shadow-md relative border border-solid border-mineshaft-700',
+      'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
       isRounded && 'rounded-md',
       className
     )}
diff --git a/frontend/src/components/v2/TextArea/TextArea.tsx b/frontend/src/components/v2/TextArea/TextArea.tsx
index 1ed599235c..afd9078e99 100644
--- a/frontend/src/components/v2/TextArea/TextArea.tsx
+++ b/frontend/src/components/v2/TextArea/TextArea.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 const textAreaVariants = cva(
-  'textarea w-full p-2 border border-solid text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  'textarea w-full p-2 border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
   {
     variants: {
       size: {
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 18814e2242..df32da8d0d 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-    .select[data-placeholder] {
-            color: theme("colors.gray.500")
-    }
-}
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/700.css';
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5b966d858d..f2c832acc9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,7 @@ const round = (num) =>
 const rem = (px) => `${round(px / 16)}rem`;
 const em = (px, base) => `${round(px / base)}em`;
 
+// TODO(akhilmhdh): Clean up this later
 let defaultModifiers = {
   sm: {
     css: [
@@ -1238,6 +1239,9 @@ module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['Inter']
+      },
       colors: {
         // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
         primary: {