Fix 359 account page alignment (#361)

* Use simple icons for brand icons

* Reuse button on account page

* Fix lint warning in balance list

* Update shadcn components

* Properly handle classname in accountbutton to work asChild

Author: krokosik

package.json

@@ -31,6 +31,7 @@
     "@ducanh2912/next-pwa": "^10.2.9",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.4",
+    "@icons-pack/react-simple-icons": "^13.7.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^6.8.2",
     "@t3-oss/env-nextjs": "^0.11.1",

pnpm-lock.yaml

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, type ButtonProps } from '../ui/button';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '~/lib/utils';
+
+export const AccountButton: React.FC<React.PropsWithChildren<ButtonProps> & { href?: string }> = ({
+  children,
+  href,
+  className,
+  ...buttonProps
+}) => (
+  <WithLink href={href}>
+    <Button
+      variant="ghost"
+      className={cn(className, 'text-md hover:text-foreground/80 w-full justify-between px-0')}
+      {...buttonProps}
+    >
+      <div className="flex items-center gap-4">{children}</div>
+      <ChevronRight className="h-6 w-6 text-gray-500" />
+    </Button>
+  </WithLink>
+);
+
+export const WithLink: React.FC<React.PropsWithChildren<{ href?: string }>> = ({
+  href,
+  children,
+}) =>
+  href ? (
+    <Link href={href} target={href.startsWith('http') ? '_blank' : undefined}>
+      {children}
+    </Link>
+  ) : (
+    children
+  );

src/components/Account/AccountButton.tsx

@@ -55,5 +55,3 @@ export const DownloadAppDrawer: React.FC<DownloadAppDrawerProps> = ({ children,
     </AppDrawer>
   );
 };
-
-export default DownloadAppDrawer;

src/components/Account/DownloadAppDrawer.tsx

@@ -1,13 +1,12 @@
-import { ChevronRight, Languages } from 'lucide-react';
-import React, { useCallback, useMemo } from 'react';
-import { toast } from 'sonner';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import { toast } from 'sonner';
 import { api } from '~/utils/api';
 import { getSupportedLanguages } from '~/utils/i18n/client';
 import { GeneralPicker } from '../GeneralPicker';
 
-export const LanguagePicker: React.FC = () => {
+export const LanguagePicker: React.FC<PropsWithChildren> = ({ children }) => {
   const router = useRouter();
   const { i18n, t } = useTranslation('account_page');
   const updateUser = api.user.updateUserDetail.useMutation();
@@ -34,19 +33,6 @@ export const LanguagePicker: React.FC = () => {
     [router, t, updateUser],
   );
 
-  const trigger = useMemo(
-    () => (
-      <div className="hover:text-foreground/80 flex w-full justify-between px-0 py-2 text-[16px] font-medium text-gray-300">
-        <div className="flex items-center gap-4">
-          <Languages className="h-5 w-5 text-green-500" />
-          {t('ui.change_language')}
-        </div>
-        <ChevronRight className="h-6 w-6 text-gray-500" />
-      </div>
-    ),
-    [t],
-  );
-
   const extractKey = useCallback((language: { code: string }) => language.code, []);
   const selected = useCallback(
     (language: { code: string }) => i18n.language === language.code,
@@ -56,7 +42,7 @@ export const LanguagePicker: React.FC = () => {
 
   return (
     <GeneralPicker
-      trigger={trigger}
+      trigger={children}
       title={t('ui.change_language_details.title')}
       placeholderText={t('ui.change_language_details.placeholder')}
       noOptionsText={t('ui.change_language_details.no_currency_found')}

src/components/Account/LanguagePicker.tsx

@@ -11,6 +11,7 @@ import { api } from '~/utils/api';
 import { AppDrawer } from '../ui/drawer';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../ui/form';
 import { Textarea } from '../ui/textarea';
+import { AccountButton } from './AccountButton';
 
 const feedbackSchema = (t: TFunction) =>
   z.object({
@@ -49,13 +50,10 @@ export const SubmitFeedback: React.FC = () => {
 
   const trigger = useMemo(
     () => (
-      <div className="hover:text-foreground/80 flex w-full justify-between px-0 py-2 text-[16px] font-medium text-gray-300">
-        <div className="flex items-center gap-4 text-[16px]">
-          <MessageSquare className="h-5 w-5 text-green-500" />
-          {t('ui.submit_feedback')}
-        </div>
-        <ChevronRight className="h-6x w-6 text-gray-500" />
-      </div>
+      <AccountButton>
+        <MessageSquare className="h-5 w-5 text-green-500" />
+        {t('ui.submit_feedback')}
+      </AccountButton>
     ),
     [t],
   );

src/components/Account/SubmitFeedback.tsx

@@ -6,6 +6,7 @@ import { api } from '~/utils/api';
 import { useTranslation } from 'next-i18next';
 
 import { Button } from '../ui/button';
+import { AccountButton } from './AccountButton';
 
 const base64ToUint8Array = (base64: string) => {
   const padding = '='.repeat((4 - (base64.length % 4)) % 4);
@@ -94,27 +95,18 @@ export const SubscribeNotification: React.FC = () => {
   }
 
   return (
-    <>
-      <Button
-        variant="ghost"
-        className="text-md hover:text-foreground/80 w-full justify-between px-0"
-        onClick={isSubscribed ? unSubscribeNotification : onRequestNotification}
-      >
-        <div className="flex items-center gap-4">
-          {!isSubscribed ? (
-            <>
-              <Bell className="h-5 w-5 text-red-400" />
-              {t('ui.notifications.enable_notification')}
-            </>
-          ) : (
-            <>
-              <BellOff className="h-5 w-5 text-red-400" />
-              {t('ui.notifications.disable_notification')}
-            </>
-          )}
-        </div>
-        <ChevronRight className="h-6 w-6 text-gray-500" />
-      </Button>
-    </>
+    <AccountButton onClick={isSubscribed ? unSubscribeNotification : onRequestNotification}>
+      {!isSubscribed ? (
+        <>
+          <Bell className="h-5 w-5 text-red-400" />
+          {t('ui.notifications.enable_notification')}
+        </>
+      ) : (
+        <>
+          <BellOff className="h-5 w-5 text-red-400" />
+          {t('ui.notifications.disable_notification')}
+        </>
+      )}
+    </AccountButton>
   );
 };

src/components/Account/SubscribeNotification.tsx

@@ -24,13 +24,10 @@ export const BalanceList: React.FC<{
   const userQuery = api.user.me.useQuery();
 
   const userMap = useMemo(() => {
-    const res = users.reduce(
-      (acc, user) => {
-        acc[user.id] = { user, balances: {}, total: {} };
-        return acc;
-      },
-      {} as Record<number, UserWithBalance>,
-    );
+    const res = users.reduce<Record<number, UserWithBalance>>((acc, user) => {
+      acc[user.id] = { user, balances: {}, total: {} };
+      return acc;
+    }, {});
     groupBalances
       .filter(({ amount }) => 0 < BigMath.abs(amount))
       .forEach((balance) => {