chore: wip

groupher · Dec 17, 2023 · a97fcda · a97fcda
1 parent 80ea756
commit a97fcda
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 15 deletions.
diff --git a/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx b/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx
@@ -1,5 +1,7 @@
 import { FC, memo } from 'react'
 
+import useTheme from '@/hooks/useTheme'
+import THEME from '@/constant/theme'
 import { SpaceGrow } from '@/widgets/Common'
 
 import {
@@ -22,9 +24,10 @@ type TProps = {
 }
 
 const TypeBoxes: FC<TProps> = ({ communityType }) => {
-  //
+  const { curTheme } = useTheme()
+
   return (
-    <Wrapper>
+    <Wrapper key={curTheme}>
       {COMMUNITY_CATS.map((item, index) => {
         const $active = item.type === communityType
         const $color = item.color
@@ -36,6 +39,7 @@ const TypeBoxes: FC<TProps> = ({ communityType }) => {
             touched={!!communityType}
             $active={$active}
             $angle={index % 2 === 0 ? -2 : 2}
+            $withBorder={curTheme === THEME.NIGHT}
             onClick={() => communityTypeOnChange(item.type)}
           >
             <InnerBox $active={$active} $color={$color}>

diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
@@ -14,7 +14,7 @@ export const Wrapper = styled.div`
   height: 105px;
   width: 720px;
 `
-type TBox = { touched: boolean; $angle: number } & TActive
+type TBox = { touched: boolean; $angle: number; $withBorder: boolean } & TActive
 export const Box = styled.div<TBox>`
   ${css.column('align-start', 'justify-between')};
   padding: 5px;
@@ -25,12 +25,10 @@ export const Box = styled.div<TBox>`
 
   border-radius: 8px;
   border: 1px solid transparent;
+  border-color: ${({ $withBorder }) => ($withBorder ? theme('divider') : 'transparent')};
   background: ${theme('alphaBg')};
 
-  box-shadow: ${({ $active }) =>
-    $active
-      ? 'rgba(149, 157, 165, 0.2) 0px 8px 24px;'
-      : 'rgba(0, 0, 0, 0.03) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;'};
+  box-shadow: ${({ $active }) => ($active ? theme('shadow.xxl') : theme('shadow.md'))};
 
   opacity: ${({ touched, $active }) => (touched && !$active ? 0.8 : 1)};
   transform: ${({ $active, $angle }) => ($active ? `rotate(${$angle}deg)` : '')};
@@ -41,7 +39,7 @@ export const Box = styled.div<TBox>`
 
   &:hover {
     cursor: pointer;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    box-shadow: ${theme('shadow.xxl')};
     transform: ${({ $angle }) => `rotate(${$angle}deg)`};
   }
 
@@ -77,6 +75,7 @@ export const ColorMask = styled.div<TInnerBox>`
     background: ${({ $color }) => gradientBg($color)};
   }
 `
+
 export const Header = styled.div`
   ${css.row('align-center', 'justify-between')};
   width: 100%;

diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   border-radius: 12px;
   background: ${theme('alphaBg')};
   border: 1px solid;
-  border-color: #e5e5e5;
+  border-color: ${theme('divider')};
   /* border-color: ${theme('hoverBg')}; */
   border-bottom: none;
 

diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts
@@ -8,8 +8,7 @@ export const Wrapper = styled.div`
   position: absolute;
   left: -3px;
   bottom: -50px;
-  background: rgb(255, 255, 255);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
+  background: ${theme('hiddenPanel')};
   border-radius: 10px;
   padding: 0 82px;
   padding-top: 120px;

diff --git a/utils/themes/skins/day.ts b/utils/themes/skins/day.ts
@@ -114,6 +114,12 @@ const day = {
     blackRow: '#333333',
     blackBg: '#f4f4f4',
   },
+  shadow: {
+    md: 'rgba(0, 0, 0, 0.03) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;',
+    lg: '',
+    xl: '',
+    xxl: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',
+  },
   // inspired by https://endless.design/
   gradientBg: {
     purple: 'linear-gradient(-149deg,#faf5ffd4 0%,rgb(222 198 243) 100%)',
@@ -345,6 +351,7 @@ const day = {
     shadow: '0 0 10px 0 rgb(185 185 185 / 25%) inset',
     ball: 'white',
   },
+  hiddenPanel: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%)',
 }
 
 export default day
diff --git a/utils/themes/skins/night.ts b/utils/themes/skins/night.ts
@@ -115,11 +115,17 @@ const night = {
     blackRow: '#282828',
     blackBg: '#313131',
   },
+  shadow: {
+    md: 'rgba(0, 0, 0, 0.03) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;',
+    lg: '',
+    xl: '',
+    xxl: 'rgb(21 21 21 / 48%) 0px 11px 24px;',
+  },
   gradientBg: {
-    purple: 'linear-gradient(-149deg,#faf5ffd4 0%,rgb(222 198 243) 100%)',
-    blue: 'linear-gradient(310deg,#fafdff 13%,rgb(209 237 255 / 83%) 100%)',
-    green: 'linear-gradient(133deg,#fcfffc 0%,rgb(216 240 221 / 80%) 100%)',
-    orange: 'linear-gradient(244deg,#fffcf7 0%,rgb(255 234 217 / 72%) 100%)',
+    purple: 'linear-gradient(-149deg,#373439d4 0%,rgb(86 70 99) 100%)',
+    blue: 'linear-gradient(310deg,#303435 13%,rgb(49 84 121 / 83%) 100%)',
+    green: 'linear-gradient(133deg,#343434 0%,rgb(58 83 63 / 80%) 100%)',
+    orange: 'linear-gradient(244deg,#3d3d3d 0%,rgb(106 82 62 / 72%) 100%)',
     pink: 'linear-gradient(140deg,#fff5fb99 0%,rgb(255 231 230 / 84%) 100%)',
   },
   header: {
@@ -345,6 +351,7 @@ const night = {
     shadow: '0 0 20px 0px rgb(0 0 0 / 46%) inset',
     ball: '#ffffffb5',
   },
+  hiddenPanel: 'linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(35 35 35) 40%)',
 }
 
 export default night