chore(dashboard): danger zone re-style (#232)

src/containers/thread/DashboardThread/BasicInfo/DangerZone/index.tsx

@@ -11,7 +11,7 @@ import useSalon, { cn } from '../../styles/basic_info/danger_zone'
 
 const ActionButton = ({ children, onClick }) => {
   return (
-    <Button type="red" size="small" space={2} width="w-24" className="-mt-0.5" onClick={onClick}>
+    <Button type="red" ghost size="small" width="w-20" className="-mt-0.5" onClick={onClick}>
       {children}
     </Button>
   )
@@ -26,9 +26,9 @@ const DangerZone: FC = () => {
 
   return (
     <div className={s.wrapper}>
-      <div className={cn(s.divider, 'mb-10')} />
       <h3 className={s.dangerTitle}>危险操作</h3>
-      <div className={s.item}>
+
+      <div className={cn(s.item, 'border-b-0 border-t-2 rounded-t-2xl')}>
         <h3 className={s.title}>
           社区可见性
           <InfoSVG className={s.icon} />
@@ -38,9 +38,7 @@ const DangerZone: FC = () => {
         <p className={s.desc}>当前社区为公开，任何人可以访问</p>
       </div>
 
-      <div className={cn(s.divider, 'mt-4 mb-4')} />
-
-      <div className={s.item}>
+      <div className={cn(s.item, 'border-b-0')}>
         <h3 className={s.title}>
           社区归档
           <InfoSVG className={s.icon} />
@@ -50,16 +48,14 @@ const DangerZone: FC = () => {
         <p className={s.desc}>归档后社区将变为只读</p>
       </div>
 
-      <div className={cn(s.divider, 'mt-4 mb-4')} />
-
-      <div className={s.item}>
+      <div className={cn(s.item, 'border-b-0 rounded-b-2xl')}>
         <h3 className={s.title}>
           删除社区
           <InfoSVG className={s.icon} />
           <div className="grow" />
           <ActionButton onClick={() => setShowDeleteModal(true)}>删除</ActionButton>
         </h3>
-        <p className={s.desc}>会关联删除所有帖子评论等，删除后无法恢复。</p>
+        <p className={s.desc}>关联删除所有帖子评论等，删除后无法恢复。</p>
       </div>
       <PublicModal show={showPublicModal} onClose={() => setPublicModal(false)} />
       <ArchiveModal show={showArchiveModal} onClose={() => setArchiveModal(false)} />

src/containers/thread/DashboardThread/styles/basic_info/danger_zone/index.ts

@@ -5,15 +5,18 @@ import useTwBelt from '~/hooks/useTwBelt'
 export { cn } from '~/css'
 
 export default () => {
-  const { cn, rainbow, fg, bg, fill } = useTwBelt()
+  const { cn, rainbow, fg, bg, fill, br } = useTwBelt()
 
   return {
-    wrapper: 'column w-full',
-    divider: cn('w-full h-px', bg('divider')),
-    dangerTitle: cn('text-base bold-sm mb-5', rainbow(COLOR_NAME.RED, 'fg')),
-    item: cn('column items-start pt-3.5 w-full'),
+    wrapper: cn(
+      'column w-full border border-dashed rounded-2xl',
+      rainbow(COLOR_NAME.RED, 'borderSoft'),
+      bg('sandBox'),
+    ),
+    dangerTitle: cn('text-base bold-sm mb-3.5 mt-3.5 ml-4', rainbow(COLOR_NAME.RED, 'fg')),
+    item: cn('column items-start w-full py-6 px-4 border', br('divider'), bg('htmlBg')),
     title: cn('row-center w-full text-sm mb-2.5', fg('text.title')),
-    desc: cn('text-sm', fg('text.digest')),
+    desc: cn('text-sm opacity-80', fg('text.digest')),
     icon: cn('size-4 ml-1 pointer', `hover: ${fill('text.title')}`, fill('text.digest')),
   }
 }

src/widgets/Buttons/salon/button.ts

@@ -3,6 +3,7 @@ import type { TSpace, TSizeTSM } from '~/spec'
 import { getHeight, getPadding, getRouned, getFontSize } from './metircs/button'
 
 import useTwBelt from '~/hooks/useTwBelt'
+import { COLOR_NAME } from '~/const/colors'
 
 export { cn } from '~/css'
 
@@ -30,7 +31,7 @@ export default ({
   noLeftRouned,
   ...spacing
 }: TProps) => {
-  const { cn, margin, primary, br, fg, bg, isDarkBlack } = useTwBelt()
+  const { cn, margin, primary, br, fg, bg, rainbow, isDarkBlack } = useTwBelt()
 
   const isRed = type === 'red'
   const common = 'group select-none touch-manipulation outline-none bg-none whitespace-nowrap'
@@ -65,11 +66,12 @@ export default ({
       ghost && bg('transparent'),
       ghost ? primary('fg') : fg('button.fg'),
       isRed && 'border-transparent',
+      isRed && ghost && rainbow(COLOR_NAME.RED, 'borderSoft'),
       loading && bg('transparent'),
     ),
     innerRed: cn(
       'hover:brightness-105 active:brightness-95 trans-all-200',
-      bg('button.redBg'),
+      ghost ? bg('alphaBg') : bg('button.redBg'),
       fg('rainbow.red'),
     ),
     children: cn('align-both relative w-auto'),