From 59e7eaf1a4667260a303d32b47843386c8438181 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Wed, 10 Apr 2024 20:34:43 +0800
Subject: [PATCH] Refine UI/UX across multiple components and pages

This commit focuses on refining UI/UX across various components and pages of the application. Changes include adjusting padding and spacing to enhance the overall readability and user interaction, amending hyperlink styling, modifying dropdown menus for optimized mobile experience, and adjusting key UI elements. Other modifications include revising imports for better maintainability, and adding enhancements to several UI components to improve their visual presentation.
---
 .../_components/account-layout-header.tsx     |  2 +-
 .../account-layout-mobile-navigation.tsx      | 27 +++++-----
 .../home/[account]/settings/page.tsx          |  2 +-
 .../_components/site-navigation.tsx           |  6 +--
 apps/web/app/(marketing)/blog/page.tsx        | 22 ++++----
 apps/web/app/(marketing)/faq/page.tsx         |  2 +-
 apps/web/styles/globals.css                   | 11 ++++
 .../gateway/src/components/plan-picker.tsx    |  6 +--
 .../gateway/src/components/pricing-table.tsx  | 51 +++++++++++--------
 .../auth/src/components/auth-layout.tsx       |  4 +-
 10 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
index bd96606b4..dce91f352 100644
--- a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
@@ -1,6 +1,6 @@
 import { PageHeader } from '@kit/ui/page';
 
-import { AccountLayoutMobileNavigation } from '~/(dashboard)/home/[account]/_components/account-layout-mobile-navigation';
+import { AccountLayoutMobileNavigation } from './account-layout-mobile-navigation';
 
 export function AccountLayoutHeader({
   children,
diff --git a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
index 2b8be117d..38e08d852 100644
--- a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
@@ -81,6 +81,7 @@ export const AccountLayoutMobileNavigation = (
         {Links}
 
         <DropdownMenuSeparator />
+
         <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
       </DropdownMenuContent>
     </DropdownMenu>
@@ -95,10 +96,10 @@ function DropdownLink(
   }>,
 ) {
   return (
-    <DropdownMenuItem asChild key={props.path}>
+    <DropdownMenuItem asChild>
       <Link
         href={props.path}
-        className={'flex h-12 w-full items-center space-x-4'}
+        className={'flex h-12 w-full items-center space-x-2 px-3'}
       >
         {props.Icon}
 
@@ -117,13 +118,13 @@ function SignOutDropdownItem(
 ) {
   return (
     <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-4'}
+      className={'flex h-12 w-full items-center space-x-2'}
       onClick={props.onSignOut}
     >
-      <LogOut className={'h-6'} />
+      <LogOut className={'h-4'} />
 
       <span>
-        <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
+        <Trans i18nKey={'common:signOut'} />
       </span>
     </DropdownMenuItem>
   );
@@ -134,18 +135,16 @@ function OrganizationsModal() {
 
   return (
     <Dialog>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <DropdownMenuItem
-          className={'h-12'}
+          className={'flex h-12 w-full items-center space-x-2'}
           onSelect={(e) => e.preventDefault()}
         >
-          <button className={'flex items-center space-x-4'}>
-            <Home className={'h-6'} />
+          <Home className={'h-4'} />
 
-            <span>
-              <Trans i18nKey={'common:yourOrganizations'} />
-            </span>
-          </button>
+          <span>
+            <Trans i18nKey={'common:yourOrganizations'} />
+          </span>
         </DropdownMenuItem>
       </DialogTrigger>
 
@@ -156,7 +155,7 @@ function OrganizationsModal() {
           </DialogTitle>
         </DialogHeader>
 
-        <div className={'flex flex-col space-y-6 py-4'}>
+        <div className={'py-16'}>
           <AccountSelector
             onAccountChange={(value) => {
               const path = value
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
index 4df0570bc..1b891010b 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
@@ -47,7 +47,7 @@ async function TeamAccountSettingsPage(props: Props) {
       <PageBody>
         <div
           className={
-            'container flex w-full max-w-2xl flex-1 flex-col items-center'
+            'container flex w-full max-w-2xl flex-1 flex-col items-center p-0'
           }
         >
           <TeamAccountSettingsContainer account={account} paths={paths} />
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index a8d2c27de..c5d3599a3 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -11,7 +11,7 @@ import {
 import { NavigationMenu, NavigationMenuList } from '@kit/ui/navigation-menu';
 import { Trans } from '@kit/ui/trans';
 
-import { SiteNavigationItem } from '~/(marketing)/_components/site-navigation-item';
+import { SiteNavigationItem } from './site-navigation-item';
 
 const links = {
   Blog: {
@@ -65,14 +65,14 @@ function MobileDropdown() {
         <Menu className={'h-9'} />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent>
+      <DropdownMenuContent className={'w-full'}>
         {Object.values(links).map((item) => {
           const className = 'flex w-full h-full items-center';
 
           return (
             <DropdownMenuItem key={item.path}>
               <Link className={className} href={item.path}>
-                {item.label}
+                <Trans i18nKey={item.label} />
               </Link>
             </DropdownMenuItem>
           );
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index 76fe94f3b..f4a957479 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -32,29 +32,25 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   });
 
   return (
-    <div className={'flex flex-col space-y-12'}>
+    <>
       <SitePageHeader
         title={t('marketing:blog')}
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <If
-        condition={posts.length > 0}
-        fallback={
-          <div className={'container mx-auto pb-12'}>
-            <Trans i18nKey="marketing:noPosts" />
-          </div>
-        }
-      >
-        <div className={'container mx-auto'}>
+      <div className={'container py-12'}>
+        <If
+          condition={posts.length > 0}
+          fallback={<Trans i18nKey="marketing:noPosts" />}
+        >
           <PostsGridList>
             {posts.map((post, idx) => {
               return <PostPreview key={idx} post={post} />;
             })}
           </PostsGridList>
-        </div>
-      </If>
-    </div>
+        </If>
+      </div>
+    </>
   );
 }
 
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index f16830422..a7aeeb686 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -121,7 +121,7 @@ function FaqItem({
       >
         <h2
           className={
-            'hover:underline-none cursor-pointer font-sans text-lg font-medium'
+            'hover:underline-none cursor-pointer font-sans font-medium'
           }
         >
           {item.question}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index c921103b2..eb9a01cdc 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -80,3 +80,14 @@
     @apply max-sm:px-4;
   }
 }
+
+/*
+Optimize dropdowns for mobile
+ */
+[data-radix-popper-content-wrapper] {
+  @apply w-full md:w-auto;
+}
+
+[data-radix-menu-content] {
+  @apply rounded-none md:rounded-lg;
+}
\ No newline at end of file
diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx
index 56875aae7..52a2fe89c 100644
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -246,7 +246,7 @@ export function PlanPicker(
 
                           <div
                             className={
-                              'flex w-full items-center justify-between'
+                              'flex w-full flex-col content-center space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0'
                             }
                           >
                             <Label
@@ -272,7 +272,7 @@ export function PlanPicker(
 
                             <div
                               className={
-                                'flex items-center space-x-4 text-right'
+                                'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
                               }
                             >
                               <If
@@ -396,7 +396,7 @@ function PlanDetails({
     <div
       key={key}
       className={
-        'fade-in animate-in zoom-in-95 flex w-full flex-col space-y-4 px-8 py-2'
+        'fade-in animate-in zoom-in-95 flex w-full flex-col space-y-4 py-2 lg:px-8'
       }
     >
       <div className={'flex flex-col space-y-0.5'}>
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 1e0f4c6a3..9c9b967d9 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -18,6 +18,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -60,7 +61,7 @@ export function PricingTable({
       <div
         className={
           'flex flex-col items-start space-y-6 lg:space-y-0' +
-          ' justify-center lg:flex-row'
+          ' justify-center lg:flex-row lg:space-x-4'
         }
       >
         {config.products.map((product) => {
@@ -151,10 +152,11 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full flex flex-1 grow flex-col items-stretch
-            justify-between space-y-8 self-stretch p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
+        `s-full bg-background flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
+            rounded-lg border border-transparent p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
           ['border-primary']: highlighted,
+          ['dark:shadow-primary/20 shadow dark:shadow-sm']: !highlighted,
         },
       )}
     >
@@ -214,7 +216,7 @@ function PricingItem(
                 `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 capitalize`,
               )}
             >
-              <span className={'text-sm'}>
+              <span className={'text-muted-foreground text-sm'}>
                 <If
                   condition={props.plan.interval}
                   fallback={<Trans i18nKey={'billing:lifetime'} />}
@@ -251,6 +253,28 @@ function PricingItem(
           </If>
         </div>
 
+        <If condition={props.selectable}>
+          <If
+            condition={props.plan.id && props.CheckoutButton}
+            fallback={
+              <DefaultCheckoutButton
+                signUpPath={props.paths.signUp}
+                highlighted={highlighted}
+                plan={props.plan}
+              />
+            }
+          >
+            {(CheckoutButton) => (
+              <CheckoutButton
+                highlighted={highlighted}
+                planId={props.plan.id}
+              />
+            )}
+          </If>
+        </If>
+
+        <Separator />
+
         <div className={'flex flex-col space-y-2'}>
           <h6 className={'text-sm font-semibold'}>
             <Trans i18nKey={'billing:featuresLabel'} />
@@ -276,23 +300,6 @@ function PricingItem(
           </div>
         </If>
       </div>
-
-      <If condition={props.selectable}>
-        <If
-          condition={props.plan.id && props.CheckoutButton}
-          fallback={
-            <DefaultCheckoutButton
-              signUpPath={props.paths.signUp}
-              highlighted={highlighted}
-              plan={props.plan}
-            />
-          }
-        >
-          {(CheckoutButton) => (
-            <CheckoutButton highlighted={highlighted} planId={props.plan.id} />
-          )}
-        </If>
-      </If>
     </div>
   );
 }
@@ -373,7 +380,7 @@ function PlanIntervalSwitcher(
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
             ['hover:text-primary border']: !selected,
-            ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
+            ['font-semibold cursor-default hover:text-initial hover:bg-background']:
               selected,
           },
         );
diff --git a/packages/features/auth/src/components/auth-layout.tsx b/packages/features/auth/src/components/auth-layout.tsx
index 76fda2080..8a0c38f49 100644
--- a/packages/features/auth/src/components/auth-layout.tsx
+++ b/packages/features/auth/src/components/auth-layout.tsx
@@ -8,14 +8,14 @@ export function AuthLayoutShell({
     <div
       className={
         'flex h-screen flex-col items-center justify-center' +
-        ' dark:lg:bg-background space-y-8 lg:space-y-12 lg:bg-gray-50' +
+        ' dark:lg:bg-background space-y-10 lg:space-y-12 lg:bg-gray-50' +
         ' animate-in fade-in slide-in-from-top-8 zoom-in-95 duration-1000'
       }
     >
       {Logo && <Logo />}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
+        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
       >
         {children}
       </div>