From d75da665e128f1864c264c4bd8efcccd6707237e Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 18 May 2023 23:30:05 +0800
Subject: [PATCH] chore: update setting page style

---
 src/components/SettingView.tsx              |  2 +-
 src/components/StripeCheckPaymentBanner.tsx | 16 ++------
 src/components/SubscriptionHistoryTable.tsx | 42 +++++++--------------
 3 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/src/components/SettingView.tsx b/src/components/SettingView.tsx
index 4fffe3b..1b9c21e 100644
--- a/src/components/SettingView.tsx
+++ b/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"
diff --git a/src/components/StripeCheckPaymentBanner.tsx b/src/components/StripeCheckPaymentBanner.tsx
index 8d68fac..b6c04ec 100644
--- a/src/components/StripeCheckPaymentBanner.tsx
+++ b/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(
-    router.query.session_id ? `/api/checkout_sessions/${sessionId}` : null,
-    fetchGetJSON
-  );
+  const { data } = useSWR(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")}{" "}
-          {data?.payment_intent?.status ?? t("common.loading")}
+          {t("payment.self")} {data?.payment_intent?.status ?? t("common.loading")}
         </div>
-        <button
-          className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100"
-          onClick={() => setHideBanner(true)}
-        >
+        <button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
           <Icon.BiX className="w-6 h-auto" />
         </button>
       </div>
diff --git a/src/components/SubscriptionHistoryTable.tsx b/src/components/SubscriptionHistoryTable.tsx
index 9734dbb..eceaf1e 100644
--- a/src/components/SubscriptionHistoryTable.tsx
+++ b/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
-                    scope="col"
-                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
-                  >
+                  <th 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
-                    scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                     {t("common.description")}
                   </th>
-                  <th
-                    scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                     {t("common.amount")}
                   </th>
-                  <th
-                    scope="col"
-                    className="relative py-3.5 pl-3 pr-4 sm:pr-0"
-                  ></th>
+                  <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}
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                      {getCurrencySymbol(
-                        subscription.currency.toLocaleUpperCase()
-                      )}
+                      {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
-                        href={subscription.receipt}
-                        target="_blank"
-                        className="text-indigo-600 hover:text-indigo-900"
-                      >
+                      <a href={subscription.receipt} target="_blank" className="text-indigo-600 hover:text-indigo-900">
                         {t("setting.billing.view-receipt")}
                       </a>
                     </td>