UI adjustments (#135)

* fix: restored sanity in fontSizes

* fix: added gap to borrow table

* env: dependency updates

* feat: added backdrop blur to clickaway overlay

package.json

@@ -11,8 +11,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.30.0",
+    "@cosmjs/cosmwasm-stargate": "^0.30.1",
-    "@cosmjs/stargate": "^0.30.0",
+    "@cosmjs/stargate": "^0.30.1",
     "@marsprotocol/wallet-connector": "^1.5.2",
     "@radix-ui/react-slider": "^1.1.1",
     "@sentry/nextjs": "^7.44.2",
@@ -34,7 +34,7 @@
     "react-toastify": "^9.1.2",
     "react-use-clipboard": "^1.0.9",
     "recharts": "^2.5.0",
-    "swr": "^2.1.0",
+    "swr": "^2.1.1",
     "tailwind-scrollbar-hide": "^1.1.7",
     "zustand": "^4.3.6"
   },

src/components/Borrow/AssetExpanded.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import React from 'react'
 import { Row } from '@tanstack/react-table'
 
-import { getMarketAssets } from 'utils/assets'
 import { Button } from 'components/Button'
 import useStore from 'store'
+import { getMarketAssets } from 'utils/assets'
 
 type AssetRowProps = {
   row: Row<BorrowAsset | BorrowAssetActive>
@@ -46,7 +45,7 @@ export default function AssetExpanded(props: AssetRowProps) {
       }}
     >
       <td colSpan={isActive ? 5 : 4}>
-        <div className='flex justify-end p-4'>
+        <div className='flex justify-end gap-4 p-4'>
           <Button
             onClick={borrowHandler}
             color='primary'

src/components/Modal.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames'
 import { ReactNode } from 'react'
 
-import { Close } from 'components/Icons'
-import { Text } from 'components/Text'
 import { Button } from 'components/Button'
 import Card from 'components/Card'
+import { Close } from 'components/Icons'
 
 interface Props {
   header: string | ReactNode
@@ -23,7 +22,7 @@ export const Modal = (props: Props) => {
   }
 
   return props.open ? (
-    <div className='fixed top-0 left-0 z-40 h-screen w-screen'>
+    <div className='fixed inset-0 z-40 h-screen w-screen '>
       <div className='relative flex h-full w-full items-center justify-center'>
         <Card
           className={classNames(
@@ -46,7 +45,7 @@ export const Modal = (props: Props) => {
           </div>
         </Card>
         <div
-          className='fixed top-0 left-0 z-30 block h-full w-full bg-black/50 hover:cursor-pointer'
+          className='fixed inset-0 z-30 block h-full w-full bg-black/50 backdrop-blur-sm hover:cursor-pointer'
           onClick={onClickAway}
           role='button'
         />

tailwind.config.js

@@ -192,10 +192,10 @@ module.exports = {
     require('tailwind-scrollbar-hide'),
     plugin(function ({ addBase, addUtilities, theme }) {
       addBase({
-        h1: { fontSize: '60.84px', lineHeight: '80px', fontWeight: theme('fontWeight.light') },
+        h1: { fontSize: '61px', lineHeight: '80px', fontWeight: theme('fontWeight.light') },
-        h2: { fontSize: '38.49px', lineHeight: '56px' },
+        h2: { fontSize: '9px', lineHeight: '56px' },
-        h3: { fontSize: '30.42px', lineHeight: '40px' },
+        h3: { fontSize: '30px', lineHeight: '40px' },
-        h4: { fontSize: '24.03px', lineHeight: '36px', fontWeight: theme('fontWeight.normal') },
+        h4: { fontSize: '24px', lineHeight: '36px', fontWeight: theme('fontWeight.normal') },
       }),
         addUtilities({
           '.blur-orb-primary': {
@@ -272,31 +272,31 @@ module.exports = {
             whiteSpace: 'nowrap',
             fontFeatureSettings: '"tnum" on',
           },
-          '.text-3xs': { fontSize: '9.36px', lineHeight: '12px' },
+          '.text-3xs': { fontSize: '9px', lineHeight: '12px' },
           '.text-3xs-caps': {
-            fontSize: '9.36px',
+            fontSize: '9px',
             lineHeight: '12px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),
             letterSpacing: theme('letterSpacing.wide'),
           },
-          '.text-2xs': { fontSize: '10.53px', lineHeight: '16px' },
+          '.text-2xs': { fontSize: '10px', lineHeight: '16px' },
           '.text-2xs-caps': {
-            fontSize: '10.53px',
+            fontSize: '10px',
             lineHeight: '16px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),
             letterSpacing: theme('letterSpacing.wide'),
           },
           '.text-xs-caps': {
-            fontSize: '11.85px',
+            fontSize: '12px',
             lineHeight: '16px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),
             letterSpacing: theme('letterSpacing.wider'),
           },
           '.text-sm-caps': {
-            fontSize: '13.33px',
+            fontSize: '14px',
             lineHeight: '20px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),
@@ -310,34 +310,34 @@ module.exports = {
             letterSpacing: theme('letterSpacing.wider'),
           },
           '.text-lg-caps': {
-            fontSize: '16.88px',
+            fontSize: '17px',
             lineHeight: '24px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),
             letterSpacing: theme('letterSpacing.wider'),
           },
           '.text-xl-caps': {
-            fontSize: '18.98px',
+            fontSize: '19px',
             lineHeight: '28px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.light'),
             letterSpacing: theme('letterSpacing.widest'),
           },
           '.text-2xl-caps': {
-            fontSize: '21.36px',
+            fontSize: '21px',
             lineHeight: '32px',
             textTransform: 'uppercase',
             letterSpacing: theme('letterSpacing.wider'),
           },
           '.text-3xl-caps': {
-            fontSize: '24.03px',
+            fontSize: '24px',
             lineHeight: '36px',
             textTransform: 'uppercase',
             letterSpacing: theme('letterSpacing.wider'),
           },
-          '.text-4xl-caps': { fontSize: '30.42px', lineHeight: '40px', textTransform: 'uppercase' },
+          '.text-4xl-caps': { fontSize: '30px', lineHeight: '40px', textTransform: 'uppercase' },
           '.text-5xl-caps': {
-            fontSize: '38.49px',
+            fontSize: '39px',
             lineHeight: '56px',
             textTransform: 'uppercase',
             letterSpacing: '9px',