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.

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,

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

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

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>
           );

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

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}

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;
+}