style(landing): adjust darkmode card (#198)

src/app/Landing/FeatureWall/DarkMode/Panel.tsx

@@ -9,7 +9,16 @@ import { CARDS_METRICS } from './constant'
 import DayCard from './DayCard'
 import NightCard from './NightCard'
 
-import { Wrapper, DivideColumn } from '../../styles/feature_wall/dark_mode/panel'
+import {
+  Wrapper,
+  DivideColumn,
+  SwitchBox,
+  ThemeBox,
+  MoonIcon,
+  MoonSolidIcon,
+  SunIcon,
+  SunSolidIcon,
+} from '../../styles/feature_wall/dark_mode/panel'
 
 type TProps = {
   hovering: boolean
@@ -23,6 +32,12 @@ const Panel: FC<TProps> = ({ hovering }) => {
       <Wrapper>
         <DayCard hovering={hovering} metric={CARDS_METRICS[curTheme][THEME.DAY] as TCardMetric} />
         <DivideColumn $hovering={hovering} />
+        <SwitchBox $hovering={hovering}>
+          <ThemeBox $active={!hovering}>{!hovering ? <SunSolidIcon /> : <SunIcon />}</ThemeBox>
+          <ThemeBox $active={hovering}>
+            <ThemeBox>{!hovering ? <MoonIcon /> : <MoonSolidIcon />}</ThemeBox>
+          </ThemeBox>
+        </SwitchBox>
         <NightCard
           hovering={hovering}
           metric={CARDS_METRICS[curTheme][THEME.NIGHT] as TCardMetric}

src/app/Landing/styles/feature_wall/dark_mode/day_card.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled(BaseCard)<{ $hovering: boolean }>`
   background: ${({ $hovering }) => ($hovering ? NIGHT_THEMES.htmlBg : DAY_THEMES.htmlBg)};
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  margin-top: ${({ $hovering }) => ($hovering ? '-16px' : '0')};
+  margin-top: ${({ $hovering }) => ($hovering ? '-5px' : '0')};
 `
 export const Title = styled.div<{ $hovering: boolean }>`
   color: ${({ $hovering }) => ($hovering ? NIGHT_THEMES.article.title : DAY_THEMES.article.title)};

src/app/Landing/styles/feature_wall/dark_mode/night_card.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled(BaseCard)<{ $hovering: boolean }>`
   background: ${({ $hovering }) => (!$hovering ? NIGHT_THEMES.htmlBg : DAY_THEMES.htmlBg)};
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  margin-top: ${({ $hovering }) => ($hovering ? '16px' : '0')};
+  margin-top: ${({ $hovering }) => ($hovering ? '5px' : '0')};
 `
 export const Title = styled.div<{ $hovering: boolean }>`
   color: ${({ $hovering }) => (!$hovering ? NIGHT_THEMES.article.title : DAY_THEMES.article.title)};

src/app/Landing/styles/feature_wall/dark_mode/panel.ts

@@ -1,6 +1,11 @@
-import type { TColor } from '@/spec'
+import type { TActive, TColor } from '@/spec'
 import styled, { css, theme } from '@/css'
 
+import SunSVG from '@/icons/Sun'
+import SunSolidSVG from '@/icons/SunSolid'
+import MoonSVG from '@/icons/Moon'
+import MoonSolidSVG from '@/icons/MoonSolid'
+
 import { WithMargin } from '@/widgets/Common'
 
 export const Wrapper = styled.div`
@@ -13,12 +18,56 @@ export const Wrapper = styled.div`
 export const DivideColumn = styled.div<{ $hovering: boolean }>`
   background: ${theme('rainbow.red')};
   width: 3px;
-  height: ${({ $hovering }) => ($hovering ? '180px' : '150px')};
+  // height: ${({ $hovering }) => ($hovering ? '180px' : '150px')};
+  height: 150px;
   position: absolute;
   border-radius: 5px;
   z-index: 10;
   transition: all 0.2s;
 `
+export const SwitchBox = styled.div<{ $hovering: boolean }>`
+  ${css.row('align-center', 'justify-between')};
+  background: ${theme('alphaBg')};
+  padding: 0 3px;
+  width: 65px;
+  height: 30px;
+  position: absolute;
+  left: 95px;
+  top: 100px;
+  z-index: 11;
+  border: 1px solid;
+  border-radius: 10px;
+  border-color: ${theme('divider')};
+
+  transform: ${({ $hovering }) => ($hovering ? 'rotate(180deg)' : '')};
+  transition: all .3s;
+`
+export const ThemeBox = styled.div<TActive>`
+  ${css.size(24)};
+  ${css.row('align-both')};
+  background: ${({ $active }) => ($active ? theme('alphaBg2') : 'transparent')};
+  border: 1px solid;
+  border-radius: 8px;
+  border-color: ${({ $active }) => ($active ? theme('divider') : 'transparent')};
+  transition: all .2s;
+`
+export const SunIcon = styled(SunSVG)`
+  ${css.size(16)};
+  fill: ${theme('article.title')};
+`
+export const SunSolidIcon = styled(SunSolidSVG)`
+  ${css.size(15)};
+  fill: ${theme('article.title')};
+`
+export const MoonIcon = styled(MoonSVG)`
+  ${css.size(14)};
+  fill: ${theme('article.title')};
+`
+export const MoonSolidIcon = styled(MoonSolidSVG)`
+  ${css.size(12)};
+  fill: ${theme('article.title')};
+  transform: rotate(180deg);
+`
 export const Item = styled.div`
   ${css.row('align-center')};
   gap: 6px;

src/containers/editor/CommunityEditor/styles/content/fake_browser/browser_head.ts

@@ -113,9 +113,10 @@ export const RefreshIcon = styled(RefreshSVG)`
   fill: ${theme('hint')};
 `
 export const LockIcon = styled(LockSVG)`
-  fill: ${theme('article.digest')};
-  ${css.size(15)};
-  margin-top: 1px;
+  fill: ${theme('hint')};
+  opacity: 0.6;
+  ${css.size(14)};
+  margin-top: 2px;
   margin-left: 4px;
 `
 export const MoreIcon = styled(MoreSVG)`

src/widgets/Icons/MoonSolid.tsx

@@ -0,0 +1,11 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 256 256" {...props}>
+      <path d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52 104.84 104.84 0 0 1 52.91-37 8 8 0 0 1 10 10 88.08 88.08 0 0 0 109.8 109.8 8 8 0 0 1 10 10Z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)

src/widgets/Icons/SunSolid.tsx

@@ -0,0 +1,11 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 256 256" {...props}>
+      <path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm8 24a64 64 0 1 0 64 64 64.07 64.07 0 0 0-64-64Zm-69.66 5.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)