fix(app): update page styles

src/app/dash/[userid]/clippings/[clippingid]/content.tsx

@@ -32,7 +32,13 @@ type ClippingPageProps = {
 function ClippingPageContent(props: ClippingPageProps) {
   const { cid, clipping: clippingServerData, iac } = props
 
-  const clipping = clippingServerData
+  const { data: clippingClientData } = useFetchClippingQuery({
+    variables: {
+      id: cid
+    },
+  })
+
+  const clipping = clippingClientData || clippingServerData
 
   const me = useSelector<TGlobalStore, UserContent>(s => s.user.profile)
   const [sharePreviewVisible, setSharePreviewVisible] = useState(false)

src/app/dash/[userid]/settings/components/webhook-table.tsx

@@ -0,0 +1,76 @@
+import { Table, Button } from '@mantine/core'
+import { Table as TableDef, flexRender } from '@tanstack/react-table'
+import React from 'react'
+import toast from 'react-hot-toast'
+import { useTranslation } from 'react-i18next'
+import { FetchMyWebHooksQuery, useDeleteAWebHookMutation } from '../../../../../schema/generated'
+
+type WebhookTableProps = {
+  table: TableDef<FetchMyWebHooksQuery['me']['webhooks'][0]>
+  onRowDelete: (id: number) => Promise<any>
+}
+
+function WebhookTable(props: WebhookTableProps) {
+  const { t } = useTranslation()
+  const { table, onRowDelete } = props
+  if (table.getRowModel().rows.length === 0) {
+    return (
+      <div className='my-8'>
+        <span>
+          {t('app.menu.search.empty')}
+        </span>
+      </div>
+    )
+  }
+  return (
+    <Table>
+      <Table.Thead>
+        {table.getHeaderGroups().map(headerGroup => (
+          <Table.Tr key={headerGroup.id}>
+            {headerGroup.headers.map(column => (
+              // eslint-disable-next-line react/jsx-key
+              <Table.Th
+                key={column.id}
+              >
+                {flexRender(column.column.columnDef.header, column.getContext())}
+              </Table.Th>
+            ))}
+          </Table.Tr>
+        ))}
+      </Table.Thead>
+      <Table.Tbody>
+        {table.getRowModel().rows.map(row => {
+          return (
+            <Table.Tr
+              key={row.id}
+              className='with-fade-in'
+            >
+              {row.getVisibleCells().map(cell => {
+                if (cell.column.columnDef.header === 'action') {
+                  return (
+                    <Table.Td key={cell.id}>
+                      <Button
+                        variant="gradient"
+                        className='bg-gradient-to-br from-orange-400 to-red-500'
+                        onClick={() => {
+                          return onRowDelete(cell.row.getValue('id'))
+                        }}
+                      >{t('app.common.delete')}</Button>
+                    </Table.Td>
+                  )
+                }
+                return (
+                  <Table.Td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Td>
+                )
+              })}
+            </Table.Tr>
+          )
+        })}
+      </Table.Tbody>
+    </Table>
+  )
+}
+
+export default WebhookTable

src/app/dash/[userid]/settings/content.tsx

@@ -5,7 +5,7 @@ import SimpleSwitcher from './simple-switcher'
 import Exports from './exports'
 import WebHooks from './webhooks'
 import AccountRemoveButton from './account-remove'
-import { Select, useMantineColorScheme } from '@mantine/core'
+import { Divider, Select, useMantineColorScheme } from '@mantine/core'
 import OrdersTable from './orders'
 
 type SettingsPageProps = {
@@ -69,20 +69,27 @@ function SettingsPageContent(props: SettingsPageProps) {
   const { t } = useTranslation()
   return (
     <div
-      className={`flex flex-col items-center justify-center py-32 w-10/12 my-8 mx-auto shadow-2xl rounded-sm bg-blue-800 bg-opacity-25`}
+      className={`flex flex-col items-center justify-center py-32 w-10/12 my-8 mx-auto shadow-2xl rounded-sm bg-slate-200 dark:bg-slate-800 bg-opacity-70`}
     >
       <h3 className='text-gray-800 dark:text-gray-200 text-2xl mb-4'> 🛠 {t('app.settings.title')}</h3>
       <GlobalSettings />
+
+      <Divider w={'80%'} className='mt-8' />
+
       <h3 className='text-gray-800 dark:text-gray-200 text-2xl mb-4 mt-8'>
         {t('app.settings.orders.title')}
       </h3>
       <OrdersTable />
 
+      <Divider w={'80%'} className='mt-8' />
+
       <h3 className='text-gray-800 dark:text-gray-200 text-2xl mb-4 mt-8'>
         {t('app.settings.export.title')}
       </h3>
       <Exports />
 
+      <Divider w={'80%'} className='mt-8' />
+
       <div className='w-full'>
         <div className='mx-4 lg:mx-20'>
           <h3 className='text-gray-800 dark:text-gray-200 text-2xl mb-4 mt-8 text-center'>
@@ -100,6 +107,8 @@ function SettingsPageContent(props: SettingsPageProps) {
         </div>
       </div>
 
+      <Divider w={'80%'} className='mt-8' />
+
       <h3 className='text-gray-800 dark:text-gray-200 text-2xl mb-4 mt-8'>
         {t('app.settings.danger.removeAccount')}
       </h3>

src/app/dash/[userid]/settings/webhooks.tsx

@@ -9,8 +9,10 @@ import { useFormik } from 'formik'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
 import { useTranslation } from 'react-i18next'
-import { Button, Table } from '@mantine/core'
-import { FetchMyWebHooksQuery, useCreateNewWebHookMutation, useDeleteAWebHookMutation, useFetchMyWebHooksQuery, WebHookItem, WebHookStep } from '../../../../schema/generated'
+import { Button, Table, Tooltip } from '@mantine/core'
+import { FetchMyWebHooksQuery, useCreateNewWebHookMutation, useDeleteAWebHookMutation, useFetchMyWebHooksQuery, useProfileQuery, WebHookItem, WebHookStep } from '../../../../schema/generated'
+import { useIsPremium } from '../../../../hooks/profile'
+import WebhookTable from './components/webhook-table'
 
 const webhookColumns: ColumnDef<FetchMyWebHooksQuery['me']['webhooks'][0]>[] = [{
   header: 'id',
@@ -27,6 +29,16 @@ const webhookColumns: ColumnDef<FetchMyWebHooksQuery['me']['webhooks'][0]>[] = [
 
 function WebHooks() {
   const uid = useSelector<TGlobalStore, number>(s => s.user.profile.id)
+
+  const { data: me } = useProfileQuery({
+    variables: {
+      id: uid
+    },
+    skip: uid <= 0
+  })
+
+  const isPremium = useIsPremium(me?.me.premiumEndAt)
+
   const { data: webhooksResp, client, refetch } = useFetchMyWebHooksQuery({
     variables: {
       id: uid
@@ -37,7 +49,12 @@ function WebHooks() {
   const { t } = useTranslation()
 
   const [createMutation] = useCreateNewWebHookMutation()
-  const [deleteMutation] = useDeleteAWebHookMutation()
+  const [deleteMutation] = useDeleteAWebHookMutation({
+    onCompleted: () => {
+      refetch()
+      toast.success(t('app.common.done'))
+    }
+  })
 
   const [visible, setVisible] = useState(false)
   const formik = useFormik({
@@ -75,79 +92,29 @@ function WebHooks() {
   return (
     <div className='w-full text-center'>
       <div className=' mx-4 lg:mx-20'>
-        <Table>
-          <thead>
-            {table.getHeaderGroups().map(headerGroup => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map(column => (
-                  // eslint-disable-next-line react/jsx-key
-                  <th
-                    key={column.id}
-                  >
-                    {flexRender(column.column.columnDef.header, column.getContext())}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.length === 0 && (
-              <tr>
-                <td
-                  colSpan={webhookColumns.length}
-                >
-                  {t('app.menu.search.empty')}
-                </td>
-              </tr>
-            )}
-            {table.getRowModel().rows.map(row => {
-              return (
-                <tr
-                  key={row.id}
-                  className='with-fade-in'
-                >
-                  {row.getVisibleCells().map(cell => {
-                    if (cell.column.columnDef.header === 'action') {
-                      return (
-                        <td key={cell.id}>
-                          <Button
-                            variant="gradient"
-                            className='bg-gradient-to-br from-orange-400 to-red-500'
-                            onClick={() => {
-                              return deleteMutation({
-                                variables: {
-                                  id: cell.row.getValue('id')
-                                }
-                              }).then(() => {
-                                client.resetStore()
-                                toast.success(t('app.common.done'))
-                              })
-                            }}
-                          >{t('app.common.delete')}</Button>
-                        </td>
-                      )
-                    }
-                    return (
-                      <td key={cell.id}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    )
-                  })}
-                </tr>
-              )
-            })}
-          </tbody>
-        </Table>
+        <WebhookTable
+          table={table}
+          onRowDelete={id => {
+            return deleteMutation({
+              variables: {
+                id
+              }
+            })
+          }}
+        />
       </div>
-      <Button
-        variant="gradient"
-        className='bg-gradient-to-br from-indigo-400 to-cyan-500'
-        onClick={() => {
-          setVisible(true)
-        }}
-      >
-        New
-      </Button>
+      <Tooltip label={!isPremium ? t('app.payment.webhookRequired') : null}>
+        <Button
+          variant="gradient"
+          className='bg-gradient-to-br from-indigo-400 to-cyan-500'
+          disabled={!isPremium}
+          onClick={() => {
+            setVisible(true)
+          }}
+        >
+          New
+        </Button>
+      </Tooltip>
 
       {visible && (
         <Dialog
@@ -167,17 +134,18 @@ function WebHooks() {
               <div
                 className='w-full text-right'
               >
-                <Button
-                  variant="gradient"
-                  className='bg-gradient-to-br from-indigo-400 to-cyan-500'
-                  disabled={formik.values.hookUrl.length <= 3 || !formik.isValid}
-                  loading={formik.isSubmitting}
-                  type='submit'
-                >
-                  {t('app.settings.webhook.submit')}
-                </Button>
+                <Tooltip label={!isPremium ? t('app.payment.webhookRequired') : null}>
+                  <Button
+                    variant="gradient"
+                    className='bg-gradient-to-br from-indigo-400 to-cyan-500'
+                    disabled={formik.values.hookUrl.length <= 3 || !formik.isValid || !isPremium}
+                    loading={formik.isSubmitting}
+                    type='submit'
+                  >
+                    {t('app.settings.webhook.submit')}
+                  </Button>
+                </Tooltip>
               </div>
-
             </form>
           </div>
         </Dialog>

src/app/pricing/content.tsx

@@ -54,7 +54,10 @@ function PricingContent(props: PricingContentProps) {
                 <Button
                   component={Link}
                   href={p ? `/dash/${p.me.id}/home` : '/auth/auth-v3'}
-                  className=' bg-gradient-to-br from-sky-400 to-sky-500 w-full shadow-xl'
+                  fullWidth
+                  variant='gradient'
+                  gradient={{ from: 'indigo', to: 'cyan' }}
+                  size='lg'
                 >
                   <span className=' py-8 text-2xl'>
                     {t('app.plan.free.goto')}
@@ -66,7 +69,7 @@ function PricingContent(props: PricingContentProps) {
         />
         <PlanCard
           title={(
-            <h2 className='text-5xl'>{t('app.plan.premium.name')}</h2>
+            <h2 className='text-5xl font-bold text-transparent bg-clip-text dark:from-teal-200 dark:to-indigo-400 bg-gradient-to-br from-teal-600 to-indigo-700'>{t('app.plan.premium.name')}</h2>
           )}
           plan='premium'
           description={t('app.plan.premium.description')}

src/components/book-info/book-info.tsx

@@ -28,7 +28,7 @@ function BookInfo({ book, uid, duration, isLastReadingBook }: TBookInfoProp) {
   return (
     <Card className='mt-20 flex p-12 bg-blue-200 bg-opacity-50 flex-col md:flex-row'>
       <>
-        <div className='mr-12 w-full h-full'>
+        <div className='mr-12 h-full'>
           <BlurhashView
             blurhashValue={book.edges?.imageInfo.blurHashValue ?? 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'}
             src={book.image}
@@ -56,7 +56,7 @@ function BookInfo({ book, uid, duration, isLastReadingBook }: TBookInfoProp) {
           )}
           <button
             onClick={() => togglePreviewVisible()}
-            className='bg-blue-400 hover:bg-blue-500 py-2 px-4 mb-2 inline-block rounded hover:shadow duration-300 transition-all flex items-center'
+            className='bg-blue-400 hover:bg-blue-500 py-2 px-4 mb-2 rounded hover:shadow duration-300 transition-all flex items-center'
           >
             {t('app.book.share')}
             <ShareIcon className='w-4 h-4 ml-1' />

src/components/navigation-bar/authed.tsx

@@ -47,7 +47,7 @@ function LoggedNavigationBar(props: LoggedNavigationBarProps) {
       <li className='mr-6'>
         <button
           onClick={onSearch}
-          className=' bg-white bg-opacity-50 backdrop-blur hover:bg-opacity-100 transition-all duration-150 flex items-center px-4 py-2 rounded-full text-gray-800 dark:text-white'
+          className=' bg-slate-500 bg-opacity-50 backdrop-blur hover:bg-opacity-100 transition-all duration-150 flex items-center px-4 py-2 rounded-full text-slate-800 dark:text-white'
         >
           <MagnifyingGlassIcon className='w-6 h-6' />
           <span className='ml-2'>{t('app.menu.search.title')}</span>

src/components/searchbar/searchbar.tsx

@@ -121,12 +121,12 @@ function SearchBar(props: SearchBarProps) {
         }}>
           {data?.search.clippings.map(c => (
             <li
-              className='dark:bg-gray-300 bg-gray-400 mt-4 list-none with-slide-in rounded'
+              className='dark:bg-slate-800 bg-slate-400 mt-4 list-none hover:dark:bg-slate-900 hover:bg-slate-500 with-slide-in rounded duration-150 transition-all active:scale-95'
               key={c.id}
             >
               <Link
                 href={`/dash/${profile.domain.length > 3 ? profile.domain : profile.id}/clippings/${c.id}`}
-                className='block py-8 px-4 duration-150 hover:bg-blue-200 rounded transition-colors'
+                className='block py-8 px-4'
                 onClick={props.onClose}>
 
                 <p className='text-xl leading-normal'>{c.content}</p>

src/locales/en.json

@@ -3,7 +3,8 @@
     "fold": "Fold",
     "unfold": "Unfold",
     "payment": {
-      "required": "Limit exceeded, please upgrade to a premium account"
+      "required": "Limit exceeded, please upgrade to a premium account",
+      "webhookRequired": "Webhook only available in premium plan. please upgrade to premium"
     },
     "ai": {
       "clippingHelp": "AI-generated narration for the segment"

src/locales/ko.json

@@ -3,7 +3,8 @@
     "fold": "겹",
     "unfold": "펴다",
     "payment": {
-      "required": "한도를 초과했습니다. 프리미엄 계정으로 업그레이드하세요."
+      "required": "한도를 초과했습니다. 프리미엄 계정으로 업그레이드하세요.",
+      "webhookRequired": "웹훅은 프리미엄 플랜에서만 사용할 수 있습니다. 프리미엄으로 업그레이드해주세요"
     },
     "ai": {
       "clippingHelp": "세그먼트에 대한 AI 생성 내레이션"