chore(theme): adjust some night theme keys

groupher · Oct 15, 2023 · 454b1fe · 454b1fe
1 parent d677a2c
commit 454b1fe
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 38 deletions.
diff --git a/config/config.json b/config/config.json
@@ -1,6 +1,6 @@
 {
   "//--- general configs ---//": "",
-  "DEFAULT_THEME": "day",
+  "DEFAULT_THEME": "night",
   "SENIOR_AMOUNT_THRESHOLD": 51.2,
   "SPONSOR_AMOUNT_THRESHOLD": 3999,
   "PAGE_SIZE": {

diff --git a/src/containers/editor/CommunityEditor/styles/banner/finished.ts b/src/containers/editor/CommunityEditor/styles/banner/finished.ts
@@ -114,7 +114,7 @@ export const DashIntro = styled.div`
 `
 export const DashTitle = styled.div`
   font-size: 13px;
-  color: ${theme('article.digest')};
+  color: ${theme('dashboard.menuTitle')};
   font-weight: 500;
   margin-bottom: 2px;
 

diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -195,6 +195,9 @@ const GlobalStyle = createGlobalStyle<TPrimaryColor>`
     width: 180px !important;
     margin-left: 100px;
     justify-content: center;
+    color: ${theme('toast.title')} !important;
+    background: ${theme('toast.bg')} !important;
+    border-color: ${theme('toast.border')} !important;
   }
 `
 export default GlobalStyle
diff --git a/src/containers/thread/DashboardThread/schema.ts b/src/containers/thread/DashboardThread/schema.ts
@@ -155,7 +155,7 @@ const updateDashboardEnable = gql`
 
 const updateDashboardLayout = gql`
   mutation (
-    $community: Stirng!
+    $community: String!
     $primaryColor: String
     $postLayout: String
     $kanbanLayout: String

diff --git a/src/containers/thread/DashboardThread/styles/layout/index.ts b/src/containers/thread/DashboardThread/styles/layout/index.ts
@@ -62,7 +62,7 @@ export const BlockBase = styled.div<TBlockBase>`
   padding: 16px 15px;
 
   &:hover {
-    opacity: ${({ $active }) => ($active ? 0.65 : 0.3)};
+    opacity: ${({ $active }) => ($active ? 0.7 : 0.3)};
     cursor: pointer;
   }
 

diff --git a/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts b/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts
@@ -74,8 +74,8 @@ export const Block = styled(BlockBase)`
 export const DividerLine = styled(Divider)`
   opacity: 0.8;
 `
-
 export const BgWrapper = styled.div`
+  color: ${theme('article.digest')};
   ${css.row('align-center')};
   font-size: 12px;
 `

diff --git a/src/containers/thread/DashboardThread/styles/layout/wallpaper.ts b/src/containers/thread/DashboardThread/styles/layout/wallpaper.ts
@@ -86,7 +86,7 @@ export const ContentBlock = styled.div<{ hasShadow?: boolean }>`
 export const ContentBar = styled.div<{ long: number }>`
   width: ${({ long }) => `${long}%`};
   height: 8px;
-  background: ${theme('divider')};
+  background: ${theme('hoverBg')};
   margin-bottom: 15px;
   z-index: 3;
   border-radius: 5px;

diff --git a/src/containers/thread/DashboardThread/styles/portal.ts b/src/containers/thread/DashboardThread/styles/portal.ts
@@ -6,7 +6,7 @@ import ArrowSVG from '@/icons/ArrowSimple'
 
 export const Wrapper = styled.div``
 export const Title = styled.div`
-  color: ${theme('article.title')};
+  color: ${theme('dashboard.menuCat')};
   font-size: 19px;
   width: auto;
 

diff --git a/src/containers/thread/DashboardThread/styles/saving_bar.ts b/src/containers/thread/DashboardThread/styles/saving_bar.ts
@@ -9,7 +9,12 @@ type TWrapper = { direction: 'left' | 'right' } & TSpace
 export const NormalWrapper = styled.div<TWrapper>`
   ${css.row('align-center')};
   width: ${({ direction }) => (direction === 'right' ? 'calc(100% + 10px)' : '100%')};
-  background: ${({ direction }) => `linear-gradient(to ${direction}, #f7f7f7 60%, transparent)`};
+  background: ${(props) => {
+    const { direction } = props
+    const themeVal = theme('hoverBg')(props)
+
+    return `linear-gradient(to ${direction}, ${themeVal} 60%, transparent)`
+  }};
 
   height: 42px;
   padding: 0 10px;
@@ -23,6 +28,7 @@ export const MinimalWrapper = styled(NormalWrapper)`
 `
 export const HintWrapper = styled.div`
   ${css.row('align-center')};
+  color: ${theme('article.digest')};
 `
 export const InfoIcon = styled(InfoSVG)<{ $minimal: boolean }>`
   ${css.size(13)};
@@ -32,7 +38,6 @@ export const InfoIcon = styled(InfoSVG)<{ $minimal: boolean }>`
 `
 export const HintText = styled.div<{ $minimal: boolean }>`
   font-size: ${({ $minimal }) => ($minimal ? '11px' : '13px')}};
-  color: ${theme('article.digest')};
 `
 export const Hint = styled.span`
   color: ${theme('article.title')};

diff --git a/src/containers/thread/DashboardThread/styles/section_label.ts b/src/containers/thread/DashboardThread/styles/section_label.ts
@@ -10,7 +10,7 @@ export const Header = styled.div`
   ${css.row('align-center')};
 `
 export const Title = styled.div<{ noDesc: boolean }>`
-  color: ${theme('article.title')};
+  color: ${theme('dashboard.menuCat')};
   font-size: 16px;
   margin-bottom: ${({ noDesc }) => (noDesc ? '25px' : '0')};
 `

diff --git a/src/containers/thread/DashboardThread/styles/side_menu/group.ts b/src/containers/thread/DashboardThread/styles/side_menu/group.ts
@@ -31,7 +31,7 @@ export const FoldArrowIcon = styled(ArrowSVG)<{ fold: boolean }>`
   transition: all 0.2s;
 `
 export const Title = styled.div`
-  color: ${theme('article.title')};
+  color: ${theme('dashboard.menuCat')};
   font-size: 13px;
   margin-left: 10px;
   font-weight: 500;
@@ -65,7 +65,7 @@ export const Item = styled(Link)<TItem>`
   position: relative;
   display: block;
   color: ${({ $active, primaryColor }) =>
-    $active ? primaryTheme(primaryColor) : theme('article.digest')};
+    $active ? primaryTheme(primaryColor) : theme('dashboard.menuTitle')};
   background: ${({ $active }) => ($active ? theme('activeLinear') : 'transparent')};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
 

diff --git a/src/widgets/Buttons/styles/yes_or_no_buttons.ts b/src/widgets/Buttons/styles/yes_or_no_buttons.ts
@@ -10,7 +10,7 @@ export const Wrapper = styled.div<TWrapper>`
 `
 export const CancelBtn = styled.div`
   opacity: 0.8;
-  color: ${theme('button.primary')};
+  color: ${theme('article.digest')};
   font-size: 13px;
   margin-top: 1px;
 

diff --git a/utils/themes/skins/day.ts b/utils/themes/skins/day.ts
@@ -292,13 +292,7 @@ const day = {
   toast: {
     bg: contentBoxBg,
     border,
-    message: descText,
     title: threadTitle,
-    infoBar: '#E8F0FE',
-    errorBar: '#f59381',
-    successBar: '#9dd035',
-    warnBar: '#f5a30e',
-    boxShadow: '-3px 5px 20px 0px rgb(155 155 155 / 20%)',
   },
   mailBox: {
     headHightBg: '#e8f9f8',
@@ -320,6 +314,10 @@ const day = {
     shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
     quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
   },
+  dashboard: {
+    menuCat: threadTitle,
+    menuTitle: descText,
+  },
 }
 
 export default day
diff --git a/utils/themes/skins/night.ts b/utils/themes/skins/night.ts
@@ -47,6 +47,7 @@ const night = {
   alphaBg: hoverBg,
   alphaBg2: '#1c1c1cb8',
   hoverBg,
+  savingBarBg: '#f7f7f7',
   hoverBorder: '#393939',
   hoverLinear: 'linear-gradient(315deg, rgb(104 104 104 / 0%) 0%, #2c2c2c 100%);',
   activeLinear: 'linear-gradient(315deg,rgba(255,255,255,0) 0%,#343434 70%)',
@@ -63,46 +64,46 @@ const night = {
 
   baseColor: {
     red: '#ca5f4d',
-    redBg: '#ffbfba3d',
+    redBg: '#7d3b363d',
 
     orange: '#ce9f6f',
-    orangeBg: '#FEF7E8',
+    orangeBg: '#4c3e37',
 
     brown: '#8d691e',
-    brownBg: '#fff3df',
+    brownBg: '#3a342b',
 
     yellow: '#eddd85',
-    yellowBg: '#FEFBE8',
+    yellowBg: '#41403a',
 
     green: '#699411',
-    greenBg: '#eefdd89c',
+    greenBg: '#8a97764a',
 
     greenLight: '#37B784',
-    greenLightBg: '#e3f3cc4a',
+    greenLightBg: '#69735a4a',
 
     cyan: '#24878C',
     cyanBg: '#e1fcff',
 
     // naming, fix later
     cyanLight: '#00B5CC',
-    cyanLightBg: '#e1fcff94',
+    cyanLightBg: '#39494b94',
 
     blue: '#0073E3',
-    blueBg: '#d8e3fd54',
+    blueBg: '#76809654',
 
     purple: '#7d519e',
-    purpleBg: '#f7d8fd38',
+    purpleBg: '#7c618238',
 
     grey: '#106d8a',
 
     pink: '#b36976',
-    pinkBg: '#ffd8ea59',
+    pinkBg: '#73526159',
 
     pinkLite: '#82606b',
     pinkBtnText: '#ded0d0',
 
     black: '#333333',
-    blackBg: '#f4f4f4',
+    blackBg: '#313131',
   },
   header: {
     fg: '#8c8c8c',
@@ -290,15 +291,9 @@ const night = {
     active: darken(primaryColor, 10),
   },
   toast: {
-    bg: contentBoxBg,
+    bg: '#2c2c2c',
     border,
-    message: descText,
-    title: threadTitle,
-    infoBar: '#E8F0FE',
-    errorBar: '#f59381',
-    successBar: '#9dd035',
-    warnBar: '#f5a30e',
-    boxShadow: '-3px 5px 20px 0px rgb(155 155 155 / 20%)',
+    title: '#afafaf',
   },
   mailBox: {
     headHightBg: '#e8f9f8',
@@ -320,6 +315,11 @@ const night = {
     shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
     quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
   },
+
+  dashboard: {
+    menuCat: '#c1c1c1',
+    menuTitle: '#949494',
+  },
 }
 
 export default night