groupher · mydearxym · Dec 1, 2023 · Dec 1, 2023
diff --git a/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx b/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx
@@ -101,7 +101,8 @@ const AvatarLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         isTouched={isTouched}
         field={SETTING_FIELD.AVATAR_LAYOUT}
         loading={saving}
-        width="80%"
+        width="580px"
+        left={-5}
         top={25}
       />
     </Wrapper>

diff --git a/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx b/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx
@@ -237,7 +237,8 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         isTouched={isTouched}
         field={SETTING_FIELD.BANNER_LAYOUT}
         loading={saving}
-        width="88%"
+        width="632px"
+        left={-5}
         top={20}
       />
     </Wrapper>

diff --git a/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx b/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx
@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { keys } from 'ramda'
 
-import GLOW_EFFECTS, { GLOW_OPACITY } from '@/constant/glow_effect'
+import { GLOW_OPACITY, GLOW_EFFECTS_KEYS } from '@/constant/glow_effect'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
+import useTheme from '@/hooks/useTheme'
 
 import { Br, Row as RowBase } from '@/widgets/Common'
 import ArrowLinker from '@/widgets/ArrowLinker'
@@ -47,7 +47,7 @@ const GlowEffect: FC<TProps> = ({
   saving,
 }) => {
   const primaryColor = usePrimaryColor()
-  const EFFECTS_KEYS = keys(GLOW_EFFECTS)
+  const { curTheme } = useTheme()
 
   return (
     <Wrapper>
@@ -69,14 +69,14 @@ const GlowEffect: FC<TProps> = ({
           <CloseIcon />
         </NoBox>
 
-        {EFFECTS_KEYS.map((effect) => (
+        {GLOW_EFFECTS_KEYS.map((effect) => (
           <Box
             key={effect}
             $active={effect === glowType}
             $color={primaryColor}
             onClick={() => edit(effect, 'glowType')}
           >
-            <GrowBackground glowPosition="absolute" glowType={effect} />
+            <GrowBackground glowPosition="absolute" glowType={effect} $curTheme={curTheme} />
           </Box>
         ))}
       </Row>
@@ -85,8 +85,9 @@ const GlowEffect: FC<TProps> = ({
         isTouched={isTouched}
         field={SETTING_FIELD.GLOW_TYPE}
         loading={saving}
+        left={-5}
         top={35}
-        width="87%"
+        width="628px"
       />
 
       <Br bottom={40} />

diff --git a/src/containers/thread/DashboardThread/Layout/TagLayout.tsx b/src/containers/thread/DashboardThread/Layout/TagLayout.tsx
@@ -82,7 +82,8 @@ const TagLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         isTouched={isTouched}
         field={SETTING_FIELD.TAG_LAYOUT}
         loading={saving}
-        width="80%"
+        left={-5}
+        width="580px"
         top={25}
       />
     </Wrapper>

diff --git a/src/containers/thread/DashboardThread/store/Models.ts b/src/containers/thread/DashboardThread/store/Models.ts
@@ -169,7 +169,6 @@ export const settingsModalFields = {
   docCategories: T.opt(T.array(GroupCategory), []),
 
   // glow effect
-  // glowType: T.opt(T.string, keys(GLOW_EFFECTS)[0]),
   glowType: T.opt(T.string, ''),
   glowFixed: T.opt(T.bool, true),
   glowOpacity: T.opt(T.enum(values(GLOW_OPACITY)), GLOW_OPACITY.NORMAL),

diff --git a/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts b/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts
@@ -1,7 +1,8 @@
 import styled from 'styled-components'
 
 import type { TActive, TColor, TGlowEffect } from '@/spec'
-import GLOW_EFFECTS from '@/constant/glow_effect'
+import { GLOW_EFFECTS_DAY, GLOW_EFFECTS_NIGHT } from '@/constant/glow_effect'
+import THEME from '@/constant/theme'
 
 import css, { theme, rainbow } from '@/css'
 
@@ -31,7 +32,8 @@ export const Box = styled.div<TBox>`
   border: 1px solid;
   z-index: 1;
 
-  border-color: ${({ $active, $color }) => ($active ? rainbow($color) : theme('divider'))};
+  border-color: ${({ $active, $color }) =>
+    $active ? rainbow($color, 'article.digest') : theme('divider')};
 
   box-shadow: ${({ $active }) => ($active ? css.cardShadow : 'none')};
   background: ${theme('alphaBg')};
@@ -71,12 +73,16 @@ export const SettingsRow = styled.div`
 export const GrowBackground = styled('div').withConfig({
   shouldForwardProp: (props) => props !== 'glowType' && props !== 'glowPosition',
 })<TGlowEffect>`
-  background: ${({ glowType }) => `
+  background: ${({ glowType, $curTheme }) => {
+    const GLOW_EFFECTS = $curTheme === THEME.DAY ? GLOW_EFFECTS_DAY : GLOW_EFFECTS_NIGHT
+
+    return `
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].LEFT.X} ${GLOW_EFFECTS[glowType].LEFT.Y}, ${GLOW_EFFECTS[glowType].LEFT.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].LEFT.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT1.X} ${GLOW_EFFECTS[glowType].RIGHT1.Y}, ${GLOW_EFFECTS[glowType].RIGHT1.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].MAIN.X} ${GLOW_EFFECTS[glowType].MAIN.Y}, ${GLOW_EFFECTS[glowType].MAIN.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].MAIN.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT2.X} ${GLOW_EFFECTS[glowType].RIGHT2.Y}, ${GLOW_EFFECTS[glowType].RIGHT2.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS});
-  `};
+  `
+  }};
 
   filter: saturate(1.2);
   inset: 0;

diff --git a/src/containers/thread/DashboardThread/styles/layout/index.ts b/src/containers/thread/DashboardThread/styles/layout/index.ts
@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
     padding: 20px;
   `};
 `
-
 export const Banner = styled.div`
   height: 70px;
   width: 100%;
@@ -35,10 +34,7 @@ export const TabsWrapper = styled.div`
   `};
 `
 export const BaseSection = styled.section`
-  /* margin: 0 50px; */
   padding-bottom: 30px;
-  /* border-bottom: 1px solid;
-  border-bottom-color: ${theme('divider')}; */
 `
 export const TitleBase = styled.div`
   color: ${theme('article.title')};
@@ -55,7 +51,7 @@ export const BlockBase = styled.div<TBlockBase>`
 
   border: 1px solid;
   border-radius: 7px;
-  border-color: ${({ $active, $color }) => ($active ? rainbow($color) : theme('primary'))};
+  border-color: ${({ $active, $color }) => ($active ? rainbow($color, 'hint') : theme('primary'))};
   padding: 16px 15px;
 
   &:hover {

diff --git a/src/spec/index.ts b/src/spec/index.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/no-unresolved */
 /* eslint-disable import/extensions */
-
 import type { TRootStore as RootStoreType } from '@/stores/RootStore'
 
+import type { TThemeName } from './theme'
 import type { TArticle } from './article'
 import type { TCommunity } from './community'
 
@@ -216,6 +216,7 @@ export type TGlowEffect = {
   glowPosition?: TGlowPosition
   glowFixed?: boolean
   glowOpacity?: string
+  $curTheme?: TThemeName
 }
 
 interface IWindow extends Window {

diff --git a/src/widgets/GlobalLayout/GlowBackground.tsx b/src/widgets/GlobalLayout/GlowBackground.tsx
@@ -4,6 +4,7 @@ import type { TMetric, TGlowPosition } from '@/spec'
 
 import useGlow from '@/hooks/useGlow'
 import useMetric from '@/hooks/useMetric'
+import useTheme from '@/hooks/useTheme'
 
 import METRIC from '@/constant/metric'
 
@@ -19,6 +20,7 @@ const getGlowPosition = (metric: TMetric, glowFixed: boolean): TGlowPosition =>
 
 const GlowBackground: FC = () => {
   const metric = useMetric()
+  const { curTheme } = useTheme()
   const { glowType, glowFixed, glowOpacity } = useGlow()
 
   if (!glowType) return null
@@ -28,6 +30,7 @@ const GlowBackground: FC = () => {
       glowType={glowType}
       glowPosition={getGlowPosition(metric, glowFixed)}
       glowOpacity={glowOpacity}
+      $curTheme={curTheme}
     />
   )
 }

diff --git a/src/widgets/GlobalLayout/styles/glow_background.ts b/src/widgets/GlobalLayout/styles/glow_background.ts
@@ -1,18 +1,22 @@
 import styled from 'styled-components'
 
 import type { TGlowEffect } from '@/spec'
-import GLOW_EFFECTS from '@/constant/glow_effect'
+import { GLOW_EFFECTS_DAY, GLOW_EFFECTS_NIGHT } from '@/constant/glow_effect'
+import THEME from '@/constant/theme'
 
 export const Wrapper = styled('div').withConfig({
   shouldForwardProp: (props) =>
     props !== 'glowType' && props !== 'glowPosition' && props !== 'glowOpacity',
 })<TGlowEffect>`
-  background: ${({ glowType }) => `
+  background: ${({ glowType, $curTheme }) => {
+    const GLOW_EFFECTS = $curTheme === THEME.DAY ? GLOW_EFFECTS_DAY : GLOW_EFFECTS_NIGHT
+    return `
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].LEFT.X} ${GLOW_EFFECTS[glowType].LEFT.Y}, ${GLOW_EFFECTS[glowType].LEFT.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].LEFT.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT1.X} ${GLOW_EFFECTS[glowType].RIGHT1.Y}, ${GLOW_EFFECTS[glowType].RIGHT1.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].MAIN.X} ${GLOW_EFFECTS[glowType].MAIN.Y}, ${GLOW_EFFECTS[glowType].MAIN.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].MAIN.RADIUS}),
     radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT2.X} ${GLOW_EFFECTS[glowType].RIGHT2.Y}, ${GLOW_EFFECTS[glowType].RIGHT2.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS});
-  `};
+  `
+  }};
 
   filter: saturate(1.2);
 

diff --git a/utils/constant/glow_effect.ts b/utils/constant/glow_effect.ts
@@ -1,3 +1,5 @@
+import { keys } from 'ramda'
+
 export const GLOW_OPACITY = {
   NORMAL: '1',
   WEEK: '0.68',
@@ -11,7 +13,7 @@ export const GLOW_EFFECT_NAME = {
   PURPLE_BLUE: 'PURPLE_BLUE',
 }
 
-const GLOW_EFFECTS = {
+export const GLOW_EFFECTS_DAY = {
   ORANGE_PURPLE: {
     LEFT: {
       COLOR: '#f39e8d26',
@@ -146,4 +148,139 @@ const GLOW_EFFECTS = {
   },
 }
 
-export default GLOW_EFFECTS
+export const GLOW_EFFECTS_NIGHT = {
+  ORANGE_PURPLE: {
+    LEFT: {
+      COLOR: '#f39e8d26',
+      X: '25%',
+      Y: '-16%',
+      RADIUS: '30%',
+    },
+    RIGHT1: {
+      COLOR: '#ffeba824',
+      X: '100%',
+      Y: '0',
+      RADIUS: '40%',
+    },
+    MAIN: {
+      COLOR: '#4e4bd212',
+      X: '78%',
+      Y: '4%',
+      RADIUS: '40%',
+    },
+    RIGHT2: {
+      COLOR: '#961fb314',
+      X: '90%',
+      Y: '15%',
+      RADIUS: '30%',
+    },
+  },
+  GREY_BROWN: {
+    LEFT: {
+      COLOR: '#5f564c8a',
+      X: '20%',
+      Y: '-16%',
+      RADIUS: '30%',
+    },
+    RIGHT1: {
+      COLOR: '#d4003f03',
+      X: '100%',
+      Y: '0',
+      RADIUS: '40%',
+    },
+
+    MAIN: {
+      COLOR: '#ff980012',
+      X: '72%',
+      Y: '4%',
+      RADIUS: '40%',
+    },
+    RIGHT2: {
+      COLOR: '#f6c49f1c',
+      X: '80%',
+      Y: '18%',
+      RADIUS: '30%',
+    },
+  },
+  YELLOW_RED: {
+    LEFT: {
+      COLOR: '#ffc43b2b',
+      X: '20%',
+      Y: '-16%',
+      RADIUS: '30%',
+    },
+    RIGHT1: {
+      COLOR: '#d4003f03',
+      X: '100%',
+      Y: '0',
+      RADIUS: '40%',
+    },
+
+    MAIN: {
+      COLOR: '#f4433621',
+      X: '78%',
+      Y: '4%',
+      RADIUS: '40%',
+    },
+    RIGHT2: {
+      COLOR: '#ff98000a',
+      X: '90%',
+      Y: '15%',
+      RADIUS: '30%',
+    },
+  },
+  GREY_GREEN: {
+    LEFT: {
+      COLOR: '#444b428a',
+      X: '30%',
+      Y: '-16%',
+      RADIUS: '30%',
+    },
+    RIGHT1: {
+      COLOR: '#30381fa6',
+      X: '100%',
+      Y: '0',
+      RADIUS: '40%',
+    },
+    MAIN: {
+      COLOR: '#2e3323a6',
+      X: '78%',
+      Y: '4%',
+      RADIUS: '40%',
+    },
+    RIGHT2: {
+      COLOR: '#363c2978',
+      X: '90%',
+      Y: '15%',
+      RADIUS: '30%',
+    },
+  },
+  PURPLE_BLUE: {
+    LEFT: {
+      COLOR: '#323d498f',
+      X: '28%',
+      Y: '-8%',
+      RADIUS: '26%',
+    },
+    RIGHT1: {
+      COLOR: '#2b36489e',
+      X: '100%',
+      Y: '0',
+      RADIUS: '40%',
+    },
+    MAIN: {
+      COLOR: '#12283c59',
+      X: '70%',
+      Y: '4%',
+      RADIUS: '35%',
+    },
+    RIGHT2: {
+      COLOR: '#0e2b4670',
+      X: '85%',
+      Y: '15%',
+      RADIUS: '30%',
+    },
+  },
+}
+
+export const GLOW_EFFECTS_KEYS = keys(GLOW_EFFECTS_DAY)