From 2a06d896caf894548e8662905c0837cecdf682c8 Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 13 Sep 2023 11:44:33 +0200
Subject: [PATCH] Mp 2442 tab and alignment fixes (#464)

* fix: fixed the margins and paddings of the layout

* fix: fixed the gap
---
 src/components/Account/AccountDetails/index.tsx | 6 +++---
 src/components/Earn/Tab.tsx                     | 6 +++---
 src/components/Settings.tsx                     | 1 +
 src/pages/_layout.tsx                           | 9 ++++-----
 tailwind.config.js                              | 4 +++-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Account/AccountDetails/index.tsx b/src/components/Account/AccountDetails/index.tsx
index 590b5d71..d49f821a 100644
--- a/src/components/Account/AccountDetails/index.tsx
+++ b/src/components/Account/AccountDetails/index.tsx
@@ -86,14 +86,14 @@ function AccountDetails(props: Props) {
     <div
       data-testid='account-details'
       className={classNames(
-        isExpanded ? 'right-4' : '-right-82.5',
-        'w-100 flex items-start gap-6 absolute top-6',
+        isExpanded ? 'right-5' : '-right-80',
+        'w-100 flex items-start gap-4 absolute top-6',
         !reduceMotion && 'transition-all duration-300',
       )}
     >
       <div
         className={classNames(
-          'flex flex-wrap w-16 group relative',
+          'flex flex-wrap min-w-16 w-16 group relative',
           'border rounded-base border-white/20',
           'bg-white/5 backdrop-blur-sticky',
           !reduceMotion && 'transition-colors duration-300',
diff --git a/src/components/Earn/Tab.tsx b/src/components/Earn/Tab.tsx
index fd764c24..5d780530 100644
--- a/src/components/Earn/Tab.tsx
+++ b/src/components/Earn/Tab.tsx
@@ -14,11 +14,11 @@ export default function Tab(props: Props) {
   const { address, accountId } = useParams()
 
   return (
-    <div className='relative mb-4 w-full'>
+    <div className='relative w-full mb-4'>
       <NavLink
         to={getRoute('lend', address, accountId)}
         className={classNames(
-          props.isFarm ? 'text-white/20' : underlineClasses,
+          props.isFarm ? 'text-white/40' : underlineClasses,
           'relative mr-8 text-xl ',
         )}
       >
@@ -27,7 +27,7 @@ export default function Tab(props: Props) {
       <NavLink
         to={getRoute('farm', address, accountId)}
         className={classNames(
-          !props.isFarm ? 'text-white/20' : underlineClasses,
+          !props.isFarm ? 'text-white/40' : underlineClasses,
           'relative text-xl',
         )}
       >
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 1481c393..e02fdbe1 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -7,6 +7,7 @@ export default function Settings() {
     <Button
       variant='solid'
       color='tertiary'
+      className='w-16'
       leftIcon={<Gear />}
       onClick={() => useStore.setState({ settingsModal: true })}
     />
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 61738724..8204cd37 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -50,11 +50,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         className={classNames(
           'lg:min-h-[calc(100vh-65px)]',
           'lg:mt-[65px]',
-          'min-h-screen gap-6 p-6 w-full relative',
-          account && 'pr-18',
-          focusComponent || isMobile
-            ? 'flex justify-center'
-            : 'grid grid-cols-[auto_min-content] place-items-start',
+          'min-h-screen gap-6 px-4 py-6 w-full relative',
+          'flex',
+          account && 'pr-24',
+          'justify-center',
           focusComponent && 'items-center',
           isMobile && 'items-start',
         )}
diff --git a/tailwind.config.js b/tailwind.config.js
index f15c6826..95f4b93e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -187,6 +187,7 @@ module.exports = {
       },
       minWidth: {
         15: '60px',
+        16: '64px',
         92.5: '370px',
       },
       padding: {
@@ -202,8 +203,9 @@ module.exports = {
         '2xl': '1920px',
       },
       spacing: {
+        24: '96px',
         35: '140px',
-        82.5: '330px',
+        80: '320px',
       },
       transitionDuration: {
         3000: '3000ms',