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

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

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

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

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

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