chore: update setting page style

src/components/SettingView.tsx

@@ -17,7 +17,7 @@ const SettingView = () => {
   const { data: session } = useSession();
 
   return (
-    <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4 dark:bg-zinc-800">
+    <div className="w-full flex flex-col justify-start items-start space-y-3 py-4 sm:py-8 dark:bg-zinc-800">
       <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2">
         <a
           href="https://discord.gg/z6kakemDjm"

src/components/StripeCheckPaymentBanner.tsx

@@ -1,9 +1,8 @@
+import useSWR from "swr";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { fetchGetJSON } from "../utils/api-helpers";
-import useSWR from "swr";
-import Link from "next/link";
 import Icon from "./Icon";
 
 interface Props {
@@ -20,10 +19,7 @@ const StripeCheckPaymentBanner = (props: Props) => {
 
   // Fetch CheckoutSession from static page via
   // https://nextjs.org/docs/basic-features/data-fetching#static-generation
-  const { data, error } = useSWR(
+  const { data } = useSWR(router.query.session_id ? `/api/checkout_sessions/${sessionId}` : null, fetchGetJSON);
-    router.query.session_id ? `/api/checkout_sessions/${sessionId}` : null,
-    fetchGetJSON
-  );
 
   return (
     <>
@@ -33,13 +29,9 @@ const StripeCheckPaymentBanner = (props: Props) => {
         } relative w-full flex flex-row justify-start sm:justify-center items-center py-1 bg-gray-100 dark:bg-zinc-700`}
       >
         <div className="text-sm leading-6 pr-4 cursor-pointer">
-          {t("payment.self")}{" "}
+          {t("payment.self")} {data?.payment_intent?.status ?? t("common.loading")}
-          {data?.payment_intent?.status ?? t("common.loading")}
         </div>
-        <button
+        <button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
-          className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100"
-          onClick={() => setHideBanner(true)}
-        >
           <Icon.BiX className="w-6 h-auto" />
         </button>
       </div>

src/components/SubscriptionHistoryTable.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
 import axios from "axios";
+import { t } from "i18next";
 import { useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
 import { SubscriptionPurchase } from "@/types";
 import { getCurrencySymbol, getDateString } from "@/utils";
-import { t } from "i18next";
 
 const SubscriptionHistoryTable = () => {
   const [list, setList] = useState<SubscriptionPurchase[]>([]);
@@ -28,6 +28,10 @@ const SubscriptionHistoryTable = () => {
     }
   }, [session]);
 
+  if (list.length === 0) {
+    return <></>;
+  }
+
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="mt-8 flow-root">
@@ -36,28 +40,16 @@ const SubscriptionHistoryTable = () => {
             <table className="min-w-full divide-y divide-gray-300">
               <thead>
                 <tr>
-                  <th
+                  <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
-                    scope="col"
-                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
-                  >
                     {t("common.date")}
                   </th>
-                  <th
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-                    scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
                     {t("common.description")}
                   </th>
-                  <th
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-                    scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
                     {t("common.amount")}
                   </th>
-                  <th
+                  <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0"></th>
-                    scope="col"
-                    className="relative py-3.5 pl-3 pr-4 sm:pr-0"
-                  ></th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200">
@@ -66,21 +58,13 @@ const SubscriptionHistoryTable = () => {
                     <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
                       {getDateString(subscription.createdAt)}
                     </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{subscription.description}</td>
                     <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                      {subscription.description}
+                      {getCurrencySymbol(subscription.currency.toLocaleUpperCase())}
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                      {getCurrencySymbol(
-                        subscription.currency.toLocaleUpperCase()
-                      )}
                       {subscription.amount / 100}
                     </td>
                     <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
-                      <a
+                      <a href={subscription.receipt} target="_blank" className="text-indigo-600 hover:text-indigo-900">
-                        href={subscription.receipt}
-                        target="_blank"
-                        className="text-indigo-600 hover:text-indigo-900"
-                      >
                         {t("setting.billing.view-receipt")}
                       </a>
                     </td>