💄 style: Update theme style

package.json

@@ -2,7 +2,7 @@
   "name": "sd-webui-lobe-theme",
   "version": "3.0.8",
   "private": true,
-  "description": "The modern theme for stable diffusion webui, legacy verison a.k.a kitchen theme",
+  "description": "The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.",
   "keywords": [
     "stable-diffusion-webui",
     "sd-webui-kitchen-theme",

src/App.tsx

@@ -56,16 +56,10 @@ export const App = memo(() => {
           href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/site.webmanifest"
           rel="manifest"
         />
-        <link
-          color="#000000"
-          href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/safari-pinned-tab.svg"
-          rel="mask-icon"
-        />
         <meta content="Stable Diffusion · LobeHub" name="apple-mobile-web-app-title" />
         <meta content="Stable Diffusion · LobeHub" name="application-name" />
         <meta content="#000000" name="msapplication-TileColor" />
         <meta content="#000000" name="theme-color" />
-
         <link href={manifest} rel="manifest" />
       </Helmet>
       <Layout>{storeLoading === false && loading === false ? <Index /> : <Loading />}</Layout>

src/components/Giscus/index.tsx

@@ -1,12 +1,21 @@
-import { ActionIcon, DiscordIcon, Giscus as G } from '@lobehub/ui';
-import { Space } from 'antd';
+import {
+  ActionIcon,
+  DiscordIcon,
+  Giscus as G,
+  GradientButton,
+  Icon,
+  Modal,
+  type ModalProps,
+} from '@lobehub/ui';
+import { Button, Space } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Github } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { homepage } from '@/../package.json';
-import Modal, { type ModalProps } from '@/components/Modal';
 import VersionTag from '@/components/VersionTag';
 import { selectors, useAppStore } from '@/store';
 
@@ -19,13 +28,15 @@ const repoName = homepage.replace('https://github.com/', '') as `${string}/${str
 
 const Giscus = memo<GiscusProps>(({ open, onCancel }) => {
   const setting = useAppStore(selectors.currentSetting, isEqual);
+  const theme = useTheme();
   const { t } = useTranslation();
   return (
     <Modal
+      footer={false}
       onCancel={onCancel}
       open={open}
       title={
-        <>
+        <Flexbox align={'center'} gap={4} horizontal>
           <a href={'https://discord.gg/AYFPHvv2jT'} rel="noreferrer" target="_blank">
             <ActionIcon icon={DiscordIcon} title={'Discord'} />
           </a>
@@ -36,10 +47,27 @@ const Giscus = memo<GiscusProps>(({ open, onCancel }) => {
             {t('themeFeedback')}
             <VersionTag />
           </Space>
-        </>
+        </Flexbox>
       }
     >
-      <G lang={setting.i18n} mapping="number" repo={repoName} repoId="R_kgDOJCPcNg" term="53" />
+      <Flexbox gap={32}>
+        <Center
+          gap={16}
+          horizontal
+          style={{
+            background: theme.colorBgLayout,
+            border: `1px solid ${theme.colorBorderSecondary}`,
+            borderRadius: theme.borderRadiusLG,
+            padding: '16px 0',
+          }}
+        >
+          <Button icon={<Icon icon={DiscordIcon} />} size={'large'}>
+            Join Discover
+          </Button>
+          <GradientButton icon={<Icon icon={Github} />}>LobeTheme Github</GradientButton>
+        </Center>
+        <G lang={setting.i18n} mapping="number" repo={repoName} repoId="R_kgDOJCPcNg" term="53" />
+      </Flexbox>
     </Modal>
   );
 });

src/components/Modal/index.tsx

@@ -1,35 +0,0 @@
-import { Icon } from '@lobehub/ui';
-import { Modal as AntModal, type ModalProps as AntModalProps } from 'antd';
-import { X } from 'lucide-react';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useStyles } from './style';
-
-export type ModalProps = AntModalProps;
-
-const Modal = memo<ModalProps>(({ className, title, open, onCancel, children, ...props }) => {
-  const { cx, styles } = useStyles();
-
-  return (
-    <AntModal
-      cancelText={'Cancel'}
-      className={cx(styles.modal, className)}
-      closeIcon={<Icon icon={X} />}
-      footer={null}
-      onCancel={onCancel}
-      open={open}
-      title={
-        <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-          {title}
-        </Flexbox>
-      }
-      width={800}
-      {...props}
-    >
-      {children}
-    </AntModal>
-  );
-});
-
-export default Modal;

src/components/Modal/style.ts

@@ -1,21 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, responsive }) => ({
-  modal: css`
-    height: 70%;
-
-    .ant-modal-header {
-      margin-bottom: 24px;
-    }
-
-    ${responsive.mobile} {
-      .ant-modal-header {
-        margin-bottom: 8px;
-      }
-
-      .ant-modal-content {
-        padding: 8px;
-      }
-    }
-  `,
-}));

src/components/Setting/index.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Modal, type ModalProps } from '@lobehub/ui';
 import { Space } from 'antd';
 import { Book } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { homepage } from '@/../package.json';
-import { Modal, type ModalProps } from '@/components';
 import VersionTag from '@/components/VersionTag';
 
 import SettingForm from './SettingForm';
@@ -19,10 +19,11 @@ const Setting = memo<SettingProps>(({ open, onCancel }) => {
   const { t } = useTranslation();
   return (
     <Modal
+      footer={false}
       onCancel={onCancel}
       open={open}
       title={
-        <>
+        <Flexbox align={'center'} gap={4} horizontal>
           <a href={homepage} rel="noreferrer" target="_blank">
             <ActionIcon icon={Book} title="Setting Documents" />
           </a>
@@ -30,7 +31,7 @@ const Setting = memo<SettingProps>(({ open, onCancel }) => {
             {t('themeSetting')}
             <VersionTag />
           </Space>
-        </>
+        </Flexbox>
       }
     >
       <SettingForm />

src/components/index.ts

@@ -2,7 +2,6 @@ export { default as Giscus, type GiscusProps } from './Giscus';
 export { default as Loading } from './Loading';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as CustomLogo, type CustomLogoProps } from './Logo/CustomLogo';
-export { default as Modal, type ModalProps } from './Modal';
 export { default as PromptEditor } from './PromptEditor';
 export { default as Setting, type SettingProps } from './Setting';
 export { default as VersionTag } from './VersionTag';

src/manifest.ts

@@ -1,6 +1,8 @@
 const manifest = {
   background_color: '#000000',
-  display: 'fullscreen',
+  description:
+    'The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.',
+  display: 'standalone',
   icons: [
     {
       sizes: '192x192',
@@ -13,9 +15,12 @@ const manifest = {
       type: 'image/png',
     },
   ],
+  id: '/',
   name: 'Stable Diffusion',
   orientation: 'portrait',
+  scope: '/',
   short_name: 'Stable Diffusion',
+  splash_pages: null,
   start_url: location.origin,
   theme_color: '#000000',
 };

src/pages/Content/style.ts

@@ -109,6 +109,7 @@ export const useStyles = createStyles(
 
         #txt2img_accordions,
         #img2img_accordions {
+          flex-direction: column;
           padding: 0 !important;
           background: transparent !important;
 
@@ -244,6 +245,15 @@ export const useStyles = createStyles(
             gap: 8px !important;
           }
         }
+
+        #npw {
+          padding: 16px !important;
+
+          background-color: ${token.colorBgContainer} !important;
+          border: 1px solid ${token.colorBorderSecondary} !important;
+          border-radius: ${token.borderRadius}px !important;
+          box-shadow: none;
+        }
       `,
       textares: css`
         [id$='2img_prompt'],