feat(ui): changed to interfonts

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",

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",

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'

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',

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',

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
     )}
   >

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'
     )}
   >

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'

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'],

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

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 = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
-export type ModalProps = DialogPrimitive.DialogProps;
+export const Modal = ({ isOpen, ...props }: ModalProps) => (
+  <DialogPrimitive.Root open={isOpen} {...props} />
+);
 
 export const ModalTrigger = DialogPrimitive.Trigger;
 export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;

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 
+            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
-            px-4 py-2.5 text-sm text-white rounded-md bg-mineshaft-800`,
+            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>

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>}

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
     )}

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: {

frontend/src/styles/globals.css

@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
+@import '@fontsource/inter/400.css';
-    .select[data-placeholder] {
+@import '@fontsource/inter/500.css';
-            color: theme("colors.gray.500")
+@import '@fontsource/inter/700.css';
-    }
-}

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: {