feat: added card and modal component

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 built
 healthcheck.js
+tailwind.config.js

frontend/src/components/v2/Card/Card.tsx

@@ -34,6 +34,7 @@ export const CardBody = ({ children, className }: CardBodyProps) => (
 
 export type CardProps = {
   children: ReactNode;
+  className?: string;
   isFullHeight?: boolean;
   isRounded?: boolean;
   isPlain?: boolean;
@@ -41,16 +42,17 @@ export type CardProps = {
 };
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ children, isFullHeight, isRounded, isHoverable, isPlain }, ref): JSX.Element => {
+  ({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
     return (
       <div
         ref={ref}
         className={twMerge(
-          'flex flex-col w-full text-gray-200 bg-mineshaft shadow-md',
+          'flex flex-col w-full text-gray-200 bg-mineshaft-700 shadow-md',
           isFullHeight && 'h-full',
           isRounded && 'rounded-md',
           isPlain && 'shadow-none',
-          isHoverable && 'hover:shadow-xl'
+          isHoverable && 'hover:shadow-xl',
+          className
         )}
       >
         {children}

frontend/src/components/v2/Modal/Modal.stories.tsx

@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Modal, ModalContent, ModalContentProps, ModalTrigger } from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalContent>;
+
+const Template = (args: ModalContentProps) => (
+  <Modal>
+    <ModalTrigger asChild>
+      <Button>Open</Button>
+    </ModalTrigger>
+    <ModalContent {...args}>Hello world</ModalContent>
+  </Modal>
+);
+
+export const Basic: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    title: 'Title',
+    subTitle: 'Something as subtitle',
+    footerContent: 'footer content'
+  }
+};

frontend/src/components/v2/Modal/Modal.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { twMerge } from 'tailwind-merge';
+
+import { Card, CardBody, CardFooter, CardTitle } from '../Card';
+import { IconButton } from '../IconButton';
+
+export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
+  title?: ReactNode;
+  subTitle?: string;
+  footerContent?: ReactNode;
+};
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className="fixed inset-0 w-full h-full animate-fadeIn"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      />
+      <DialogPrimitive.Content {...props} ref={forwardedRef}>
+        <Card
+          isRounded
+          className={twMerge(
+            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            className
+          )}
+        >
+          {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
+          <CardBody>{children}</CardBody>
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}
+          <DialogPrimitive.Close aria-label="Close" asChild>
+            <IconButton
+              variant="plain"
+              ariaLabel="close"
+              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+            >
+              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+            </IconButton>
+          </DialogPrimitive.Close>
+        </Card>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
+
+ModalContent.displayName = 'ModalContent';
+
+export const Modal = DialogPrimitive.Root;
+export type ModalProps = DialogPrimitive.DialogProps;
+
+export const ModalTrigger = DialogPrimitive.Trigger;
+export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;

frontend/src/components/v2/Modal/index.tsx

@@ -0,0 +1,2 @@
+export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
+export { Modal, ModalContent, ModalTrigger } from './Modal';

frontend/src/components/v2/index.tsx

@@ -3,4 +3,5 @@ export * from './Card';
 export * from './FormControl';
 export * from './IconButton';
 export * from './Input';
+export * from './Modal';
 export * from './Select';

frontend/tailwind.config.js

@@ -1234,451 +1234,460 @@ const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  darkMode: 'class',
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {
         // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
         primary: {
-          50: "#fcfdf7",
-          100: "#f8fcee",
-          200: "#eef6d5",
-          300: "#e3f1bc",
-          400: "#cfe78a",
-          500: "#badc58",
-          600: "#a7c64f",
-          700: "#8ca542",
-          800: "#708435",
-          900: "#5b6c2b",
-          DEFAULT: "#badc58",
-        },
-        grey: "#0d1117",
+          50: '#fcfdf7',
+          100: '#f8fcee',
+          200: '#eef6d5',
+          300: '#e3f1bc',
+          400: '#cfe78a',
+          500: '#badc58',
+          600: '#a7c64f',
+          700: '#8ca542',
+          800: '#708435',
+          900: '#5b6c2b',
+          DEFAULT: '#badc58'
+        },
+        grey: '#0d1117',
         mineshaft: {
-          50: "#f5f5f5",
-          100: "#ebebeb",
-          200: "#ccccce",
-          300: "#adaeb0",
-          400: "#707174",
-          500: "#323439",
-          600: "#2d2f33",
-          700: "#26272b",
-          800: "#1e1f22",
-          900: "#19191c",
-          DEFAULT: "#323439",
+          50: '#f5f5f5',
+          100: '#ebebeb',
+          200: '#ccccce',
+          300: '#adaeb0',
+          400: '#707174',
+          500: '#323439',
+          600: '#2d2f33',
+          700: '#26272b',
+          800: '#1e1f22',
+          900: '#19191c',
+          DEFAULT: '#323439'
         },
         chicago: {
-          50: "#f7f7f7",
-          100: "#efefef",
-          200: "#d6d6d7",
-          300: "#bdbebf",
-          400: "#8c8d8e",
-          500: "#5b5c5e",
-          600: "#525355",
-          700: "#444547",
-          800: "#373738",
-          900: "#2d2d2e",
-          DEFAULT: "#5b5c5e",
+          50: '#f7f7f7',
+          100: '#efefef',
+          200: '#d6d6d7',
+          300: '#bdbebf',
+          400: '#8c8d8e',
+          500: '#5b5c5e',
+          600: '#525355',
+          700: '#444547',
+          800: '#373738',
+          900: '#2d2d2e',
+          DEFAULT: '#5b5c5e'
         },
         bunker: {
-          50: "#f3f4f4",
-          100: "#e8e8e9",
-          200: "#c5c6c8",
-          300: "#a2a4a6",
-          400: "#5d5f64",
-          500: "#171b21",
-          600: "#15181e",
-          700: "#111419",
-          800: "#0e1014",
-          900: "#0b0d10",
-          DEFAULT: "#171B21",
-        },
-        githubblack: "#020409",
-        blue2: "#130f40",
-        blue1: "#3498db",
+          50: '#f3f4f4',
+          100: '#e8e8e9',
+          200: '#c5c6c8',
+          300: '#a2a4a6',
+          400: '#5d5f64',
+          500: '#171b21',
+          600: '#15181e',
+          700: '#111419',
+          800: '#0e1014',
+          900: '#0b0d10',
+          DEFAULT: '#171B21'
+        },
+        githubblack: '#020409',
+        blue2: '#130f40',
+        blue1: '#3498db',
         yellow: {
-          50: "#fefcf3",
-          100: "#fef9e7",
-          200: "#fcf0c3",
-          300: "#f9e79f",
-          400: "#f5d657",
-          500: "#f1c40f",
-          600: "#d9b00e",
-          700: "#b5930b",
-          800: "#917609",
-          900: "#766007",
-          DEFAULT: "#f1c40f",
+          50: '#fefcf3',
+          100: '#fef9e7',
+          200: '#fcf0c3',
+          300: '#f9e79f',
+          400: '#f5d657',
+          500: '#f1c40f',
+          600: '#d9b00e',
+          700: '#b5930b',
+          800: '#917609',
+          900: '#766007',
+          DEFAULT: '#f1c40f'
         },
         red: {
-          50: "#fef6f5",
-          100: "#fdedec",
-          200: "#f9d2ce",
-          300: "#f5b7b1",
-          400: "#ee8277",
-          500: "#e74c3c",
-          600: "#d04436",
-          700: "#ad392d",
-          800: "#8b2e24",
-          900: "#71251d",
-          DEFAULT: "#e74c3c",
-        },
-        orange: "#f39c12",
+          50: '#fef6f5',
+          100: '#fdedec',
+          200: '#f9d2ce',
+          300: '#f5b7b1',
+          400: '#ee8277',
+          500: '#e74c3c',
+          600: '#d04436',
+          700: '#ad392d',
+          800: '#8b2e24',
+          900: '#71251d',
+          DEFAULT: '#e74c3c'
+        },
+        orange: '#f39c12',
         green: {
-          50: "#f5fcf8",
-          100: "#eafaf1",
-          200: "#cbf2dc",
-          300: "#abebc6",
-          400: "#6ddb9c",
-          500: "#2ecc71",
-          600: "#29b866",
-          700: "#239955",
-          800: "#1c7a44",
-          900: "#176437",
-          DEFAULT: "#2ecc71",
-        },
-      },
+          50: '#f5fcf8',
+          100: '#eafaf1',
+          200: '#cbf2dc',
+          300: '#abebc6',
+          400: '#6ddb9c',
+          500: '#2ecc71',
+          600: '#29b866',
+          700: '#239955',
+          800: '#1c7a44',
+          900: '#176437',
+          DEFAULT: '#2ecc71'
+        }
+      }
     },
     keyframes: {
       type: {
-        "0%": { transform: "translateX(0ch)" },
-        "5%, 10%": { transform: "translateX(1ch)" },
-        "15%, 20%": { transform: "translateX(2ch)" },
-        "25%, 30%": { transform: "translateX(3ch)" },
-        "35%, 40%": { transform: "translateX(4ch)" },
-        "45%, 50%": { transform: "translateX(5ch)" },
-        "55%, 60%": { transform: "translateX(6ch)" },
-        "65%, 70%": { transform: "translateX(7ch)" },
-        "75%, 80%": { transform: "translateX(8ch)" },
-        "85%, 90%": { transform: "translateX(9ch)" },
-        "95%, 100%": { transform: "translateX(11ch)" },
+        '0%': { transform: 'translateX(0ch)' },
+        '5%, 10%': { transform: 'translateX(1ch)' },
+        '15%, 20%': { transform: 'translateX(2ch)' },
+        '25%, 30%': { transform: 'translateX(3ch)' },
+        '35%, 40%': { transform: 'translateX(4ch)' },
+        '45%, 50%': { transform: 'translateX(5ch)' },
+        '55%, 60%': { transform: 'translateX(6ch)' },
+        '65%, 70%': { transform: 'translateX(7ch)' },
+        '75%, 80%': { transform: 'translateX(8ch)' },
+        '85%, 90%': { transform: 'translateX(9ch)' },
+        '95%, 100%': { transform: 'translateX(11ch)' }
       },
       fadeIn: {
-        "0%": { opacity: 0 },
-        "100%": { opacity: 1 },
+        '0%': { opacity: 0 },
+        '100%': { opacity: 1 }
+      },
+      popIn: {
+        from: {
+          opacity: 0,
+          transform: 'translate(-50%, -48%) scale(0.96)'
+        },
+        to: {
+          opacity: 1,
+          transform: 'translate(-50%, -50%) scale(1)'
+        }
       },
       spin: {
-        "0%": { transform: "rotate(0deg)" },
-        "40%": { transform: "rotate(360deg)" },
-        "100%": { transform: "rotate(360deg)" },
+        '0%': { transform: 'rotate(0deg)' },
+        '40%': { transform: 'rotate(360deg)' },
+        '100%': { transform: 'rotate(360deg)' }
       },
       bounce: {
-        "0%": { transform: "translateY(-90%)" },
-        "100%": { transform: "translateY(-100%)" },
+        '0%': { transform: 'translateY(-90%)' },
+        '100%': { transform: 'translateY(-100%)' }
       },
       wiggle: {
-        "0%, 100%": { transform: "rotate(-3deg)" },
-        "50%": { transform: "rotate(3deg)" },
+        '0%, 100%': { transform: 'rotate(-3deg)' },
+        '50%': { transform: 'rotate(3deg)' }
       },
       ping: {
-        "75%, 100%": {
-          transform: "scale(2)",
-          opacity: 0,
-        },
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: 0
+        }
       },
       popup: {
-        "0%": {
-          transform: "scale(0.2)",
-          opacity: 0,
+        '0%': {
+          transform: 'scale(0.2)',
+          opacity: 0
           // transform: "translateY(120%)",
         },
-        "100%": {
-          transform: "scale(1)",
-          opacity: 1,
+        '100%': {
+          transform: 'scale(1)',
+          opacity: 1
           // transform: "translateY(100%)",
-        },
+        }
       },
       popright: {
-        "0%": {
-          transform: "translateX(-100%)",
-        },
-        "100%": {
-          transform: "translateX(0%)",
+        '0%': {
+          transform: 'translateX(-100%)'
         },
+        '100%': {
+          transform: 'translateX(0%)'
+        }
       },
       popleft: {
-        "0%": {
-          transform: "translateX(100%)",
-        },
-        "100%": {
-          transform: "translateX(0%)",
+        '0%': {
+          transform: 'translateX(100%)'
         },
+        '100%': {
+          transform: 'translateX(0%)'
+        }
       },
       popdown: {
-        "0%": {
-          transform: "scale(0.2)",
-          opacity: 0,
+        '0%': {
+          transform: 'scale(0.2)',
+          opacity: 0
           // transform: "translateY(80%)",
         },
-        "100%": {
-          transform: "scale(1)",
-          opacity: 1,
+        '100%': {
+          transform: 'scale(1)',
+          opacity: 1
           // transform: "translateY(100%)",
-        },
-      },
+        }
+      }
     },
     animation: {
-      fadeIn: "fadeIn 1000ms ease-in-out",
-      bounce: "bounce 1000ms ease-in-out infinite",
-      spin: "spin 4000ms ease-in-out infinite",
-      cursor: "cursor .6s linear infinite alternate",
-      type: "type 2.7s ease-out .8s infinite alternate both",
-      "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",
-      wiggle: "wiggle 200ms ease-in-out",
-      ping: "ping 1000ms ease-in-out infinite",
-      popup: "popup 300ms ease-in-out",
-      popdown: "popdown 300ms ease-in-out",
-      popright: "popright 100ms ease-in-out",
-      popleft: "popleft 100ms ease-in-out",
+      fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
+      bounce: 'bounce 1000ms ease-in-out infinite',
+      spin: 'spin 4000ms ease-in-out infinite',
+      cursor: 'cursor .6s linear infinite alternate',
+      type: 'type 2.7s ease-out .8s infinite alternate both',
+      'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
+      wiggle: 'wiggle 200ms ease-in-out',
+      ping: 'ping 1000ms ease-in-out infinite',
+      popup: 'popup 300ms ease-in-out',
+      popdown: 'popdown 300ms ease-in-out',
+      popright: 'popright 100ms ease-in-out',
+      popleft: 'popleft 100ms ease-in-out',
+      popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);'
     },
     fontSize: {
-      xxxs: ".23rem",
-      xxs: ".5rem",
-      xs: ".75rem",
-      sm: ".875rem",
-      base: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "4rem",
-      "7xl": "5rem",
-      "8xl": "6rem",
-      "9xl": "7rem",
+      xxxs: '.23rem',
+      xxs: '.5rem',
+      xs: '.75rem',
+      sm: '.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem',
+      '8xl': '6rem',
+      '9xl': '7rem'
     },
     typography: (theme) => ({
       DEFAULT: {
         css: [
           {
-            color: "var(--tw-prose-body)",
-            maxWidth: "65ch",
+            color: 'var(--tw-prose-body)',
+            maxWidth: '65ch',
             '[class~="lead"]': {
-              color: "var(--tw-prose-lead)",
+              color: 'var(--tw-prose-lead)'
             },
             a: {
               color: colors.gray[200],
-              textDecoration: "underline",
-              fontWeight: "500",
+              textDecoration: 'underline',
+              fontWeight: '500'
             },
             strong: {
               color: colors.gray[200],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "a strong": {
-              color: "inherit",
+            'a strong': {
+              color: 'inherit'
             },
-            "blockquote strong": {
-              color: "inherit",
+            'blockquote strong': {
+              color: 'inherit'
             },
-            "thead th strong": {
-              color: "inherit",
+            'thead th strong': {
+              color: 'inherit'
             },
             ol: {
-              listStyleType: "decimal",
+              listStyleType: 'decimal'
             },
             'ol[type="A"]': {
-              listStyleType: "upper-alpha",
+              listStyleType: 'upper-alpha'
             },
             'ol[type="a"]': {
-              listStyleType: "lower-alpha",
+              listStyleType: 'lower-alpha'
             },
             'ol[type="A" s]': {
-              listStyleType: "upper-alpha",
+              listStyleType: 'upper-alpha'
             },
             'ol[type="a" s]': {
-              listStyleType: "lower-alpha",
+              listStyleType: 'lower-alpha'
             },
             'ol[type="I"]': {
-              listStyleType: "upper-roman",
+              listStyleType: 'upper-roman'
             },
             'ol[type="i"]': {
-              listStyleType: "lower-roman",
+              listStyleType: 'lower-roman'
             },
             'ol[type="I" s]': {
-              listStyleType: "upper-roman",
+              listStyleType: 'upper-roman'
             },
             'ol[type="i" s]': {
-              listStyleType: "lower-roman",
+              listStyleType: 'lower-roman'
             },
             'ol[type="1"]': {
-              listStyleType: "decimal",
+              listStyleType: 'decimal'
             },
             ul: {
-              listStyleType: "disc",
+              listStyleType: 'disc'
             },
-            "ol > li::marker": {
-              fontWeight: "400",
-              color: "var(--tw-prose-counters)",
+            'ol > li::marker': {
+              fontWeight: '400',
+              color: 'var(--tw-prose-counters)'
             },
-            "ul > li::marker": {
-              color: "var(--tw-prose-bullets)",
+            'ul > li::marker': {
+              color: 'var(--tw-prose-bullets)'
             },
             hr: {
-              borderColor: "var(--tw-prose-hr)",
-              borderTopWidth: 1,
+              borderColor: 'var(--tw-prose-hr)',
+              borderTopWidth: 1
             },
             blockquote: {
-              fontWeight: "500",
-              fontStyle: "italic",
-              color: "var(--tw-prose-quotes)",
-              borderLeftWidth: "0.25rem",
-              borderLeftColor: "var(--tw-prose-quote-borders)",
-              quotes: '"\\201C""\\201D""\\2018""\\2019"',
+              fontWeight: '500',
+              fontStyle: 'italic',
+              color: 'var(--tw-prose-quotes)',
+              borderLeftWidth: '0.25rem',
+              borderLeftColor: 'var(--tw-prose-quote-borders)',
+              quotes: '"\\201C""\\201D""\\2018""\\2019"'
             },
-            "blockquote p:first-of-type::before": {
-              content: "open-quote",
+            'blockquote p:first-of-type::before': {
+              content: 'open-quote'
             },
-            "blockquote p:last-of-type::after": {
-              content: "close-quote",
+            'blockquote p:last-of-type::after': {
+              content: 'close-quote'
             },
             h1: {
               color: colors.gray[200],
-              fontWeight: "800",
+              fontWeight: '800'
             },
-            "h1 strong": {
-              fontWeight: "900",
-              color: "inherit",
+            'h1 strong': {
+              fontWeight: '900',
+              color: 'inherit'
             },
             h2: {
               color: colors.gray[200],
-              fontWeight: "700",
+              fontWeight: '700'
             },
-            "h2 strong": {
-              fontWeight: "800",
-              color: "inherit",
+            'h2 strong': {
+              fontWeight: '800',
+              color: 'inherit'
             },
             h3: {
               color: colors.gray[300],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "h3 strong": {
-              fontWeight: "700",
-              color: "inherit",
+            'h3 strong': {
+              fontWeight: '700',
+              color: 'inherit'
             },
             h4: {
               color: colors.gray[400],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "h4 strong": {
-              fontWeight: "700",
-              color: "inherit",
+            'h4 strong': {
+              fontWeight: '700',
+              color: 'inherit'
             },
             // TODO: Figure out how to not need these, it's a merging issue
             img: {},
-            "figure > *": {},
+            'figure > *': {},
             figcaption: {
-              color: "var(--tw-prose-captions)",
+              color: 'var(--tw-prose-captions)'
             },
             code: {
-              color: "var(--tw-prose-code)",
-              fontWeight: "600",
+              color: 'var(--tw-prose-code)',
+              fontWeight: '600'
             },
-            "code::before": {
-              content: '"`"',
+            'code::before': {
+              content: '"`"'
             },
-            "code::after": {
-              content: '"`"',
+            'code::after': {
+              content: '"`"'
             },
-            "a code": {
-              color: "inherit",
+            'a code': {
+              color: 'inherit'
             },
-            "h1 code": {
-              color: "inherit",
+            'h1 code': {
+              color: 'inherit'
             },
-            "h2 code": {
-              color: "inherit",
+            'h2 code': {
+              color: 'inherit'
             },
-            "h3 code": {
-              color: "inherit",
+            'h3 code': {
+              color: 'inherit'
             },
-            "h4 code": {
-              color: "inherit",
+            'h4 code': {
+              color: 'inherit'
             },
-            "blockquote code": {
-              color: "inherit",
+            'blockquote code': {
+              color: 'inherit'
             },
-            "thead th code": {
-              color: "inherit",
+            'thead th code': {
+              color: 'inherit'
             },
             pre: {
-              color: "var(--tw-prose-pre-code)",
+              color: 'var(--tw-prose-pre-code)',
               backgroundColor: colors.gray[800],
-              overflowX: "auto",
-              fontWeight: "400",
+              overflowX: 'auto',
+              fontWeight: '400'
             },
-            "pre code": {
-              backgroundColor: "transparent",
-              borderWidth: "0",
-              borderRadius: "0",
-              padding: "0",
-              fontWeight: "inherit",
-              color: "inherit",
-              fontSize: "inherit",
-              fontFamily: "inherit",
-              lineHeight: "inherit",
+            'pre code': {
+              backgroundColor: 'transparent',
+              borderWidth: '0',
+              borderRadius: '0',
+              padding: '0',
+              fontWeight: 'inherit',
+              color: 'inherit',
+              fontSize: 'inherit',
+              fontFamily: 'inherit',
+              lineHeight: 'inherit'
             },
-            "pre code::before": {
-              content: "none",
+            'pre code::before': {
+              content: 'none'
             },
-            "pre code::after": {
-              content: "none",
+            'pre code::after': {
+              content: 'none'
             },
             table: {
-              width: "100%",
-              tableLayout: "auto",
-              textAlign: "left",
+              width: '100%',
+              tableLayout: 'auto',
+              textAlign: 'left',
               marginTop: em(32, 16),
-              marginBottom: em(32, 16),
+              marginBottom: em(32, 16)
             },
             thead: {
-              borderBottomWidth: "1px",
-              borderBottomColor: "var(--tw-prose-th-borders)",
+              borderBottomWidth: '1px',
+              borderBottomColor: 'var(--tw-prose-th-borders)'
             },
-            "thead th": {
-              color: "var(--tw-prose-headings)",
-              fontWeight: "600",
-              verticalAlign: "bottom",
+            'thead th': {
+              color: 'var(--tw-prose-headings)',
+              fontWeight: '600',
+              verticalAlign: 'bottom'
             },
-            "tbody tr": {
-              borderBottomWidth: "1px",
-              borderBottomColor: "var(--tw-prose-td-borders)",
+            'tbody tr': {
+              borderBottomWidth: '1px',
+              borderBottomColor: 'var(--tw-prose-td-borders)'
             },
-            "tbody tr:last-child": {
-              borderBottomWidth: "0",
+            'tbody tr:last-child': {
+              borderBottomWidth: '0'
             },
-            "tbody td": {
-              verticalAlign: "baseline",
+            'tbody td': {
+              verticalAlign: 'baseline'
             },
             tfoot: {
-              borderTopWidth: "1px",
-              borderTopColor: "var(--tw-prose-th-borders)",
-            },
-            "tfoot td": {
-              verticalAlign: "top",
+              borderTopWidth: '1px',
+              borderTopColor: 'var(--tw-prose-th-borders)'
             },
+            'tfoot td': {
+              verticalAlign: 'top'
+            }
           },
           defaultModifiers.gray.css,
-          ...defaultModifiers.base.css,
-        ],
+          ...defaultModifiers.base.css
+        ]
       },
-      ...defaultModifiers,
-    }),
+      ...defaultModifiers
+    })
   },
   plugins: [
     plugin(function ({ addUtilities }) {
       addUtilities({
-        ".no-scrollbar::-webkit-scrollbar": {
-          display: "none",
-        },
-        ".no-scrollbar": {
-          "-ms-overflow-style": "none",
-          "scrollbar-width": "none",
+        '.no-scrollbar::-webkit-scrollbar': {
+          display: 'none'
         },
+        '.no-scrollbar': {
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none'
+        }
       });
     }),
-    require("@tailwindcss/typography"),
-  ],
+    require('@tailwindcss/typography')
+  ]
 };