style(dashboard): adjust notify bar

Author: mydearxym

src/containers/thread/DashboardThread/UI/BannerNotifyLayout.tsx

@@ -20,11 +20,13 @@ import {
   Layout,
   LayoutTitle,
   Block,
+  Row,
   Bar,
+  NotifyTextBar,
   NotifyBar,
   NotifyDesc,
-  NotifyLink,
   NotifySolidLink,
+  NotifyIcon,
   CrossIcon,
   ArrowIcon,
   Main,
@@ -80,9 +82,14 @@ const BannerNotifyLayout: FC<TProps> = ({
         >
           <Block $active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}>
             <NotifyBar bg={bg}>
-              <NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
+              <NotifyIcon />
+              <NotifyDesc>
+                <NotifyTextBar long={120} thin />
+              </NotifyDesc>
               <SpaceGrow />
-              <NotifySolidLink bg={bg}>查看详情</NotifySolidLink>
+              <NotifySolidLink bg={bg}>
+                <NotifyTextBar long={30} thin />
+              </NotifySolidLink>
               <Space left={5} />
               <CrossIcon />
             </NotifyBar>
@@ -126,10 +133,19 @@ const BannerNotifyLayout: FC<TProps> = ({
         >
           <Block $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
             <NotifyBar bg={bg} center>
-              <NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
-              <NotifyLink>查看详情</NotifyLink>
-              <Space left={5} />
-              <ArrowIcon />
+              <SpaceGrow />
+              <Row>
+                <NotifyIcon />
+                <NotifyDesc>
+                  <NotifyTextBar long={80} thin />
+                </NotifyDesc>
+                <Space right={10} />
+                <NotifyTextBar long={20} thin />
+                <Space left={5} />
+                <ArrowIcon />
+              </Row>
+              <SpaceGrow />
+              <CrossIcon />
             </NotifyBar>
 
             <Main>

src/containers/thread/DashboardThread/styles/ui/banner_notify_layout.ts

@@ -10,6 +10,7 @@ import css, { theme } from '@/utils/css'
 import { Divider } from '@/widgets/Common'
 import CrossSVG from '@/icons/CloseCross'
 import ArrowSVG from '@/icons/Arrow'
+import NotifySVG from '@/icons/Trumpet'
 
 import { BaseSection, BlockBase } from '.'
 
@@ -39,9 +40,6 @@ export const NotifyDesc = styled.div`
   font-size: 8px;
   font-weight: 600;
 `
-export const NotifyLink = styled(NotifyDesc)`
-  text-decoration: underline;
-`
 export const NotifySolidLink = styled.div<{ bg: TColorName }>`
   background: ${({ bg }) =>
     includes(bg, [COLOR_NAME.BLACK])
@@ -55,6 +53,11 @@ export const NotifySolidLink = styled.div<{ bg: TColorName }>`
   font-weight: bold;
   padding: 0 4px;
 `
+export const NotifyIcon = styled(NotifySVG)`
+  ${css.size(8)};
+  fill: white;
+  margin-right: 6px;
+`
 export const CrossIcon = styled(CrossSVG)`
   fill: white;
   ${css.size(8)};
@@ -117,6 +120,10 @@ export const Bar = styled.div<TBar>`
   border-radius: 5px;
   opacity: ${({ thin }) => (thin ? 0.6 : 1)};
 `
+export const NotifyTextBar = styled(Bar)`
+  width: ${({ long }) => `${long || 10}px`};
+  background: white;
+`
 export const Circle = styled.div<{ radius?: number }>`
   ${({ radius }) => `${css.circle(radius || 22)}`};
   background: ${theme('thread.articleTitle')};

src/widgets/BannerNotify/index.tsx

@@ -17,6 +17,7 @@ import {
   LinkText,
   LinkBtn,
   Row,
+  NotifyIcon,
   CrossIcon,
   ArrowIcon,
 } from './styles'
@@ -43,7 +44,11 @@ const BannerNotify: FC<TProps> = ({
         metric={metric}
         center={layout === BANNER_NOTIFY_LAYOUT.CENTER}
       >
-        <Desc>我们将在 10 月发布新的版本，敬请期待。</Desc>
+        <Row>
+          <NotifyIcon />
+          <Desc>我们将在 10 月发布新的版本，敬请期待。</Desc>
+        </Row>
+
         <Row>
           {layout === BANNER_NOTIFY_LAYOUT.DEFAULT ? (
             <Fragment>

src/widgets/BannerNotify/styles/index.ts

@@ -8,6 +8,7 @@ import { COLORS, COLOR_NAME } from '@/constant'
 import css from '@/utils/css'
 import CrossSVG from '@/icons/CloseCross'
 import ArrowSVG from '@/icons/Arrow'
+import NotifySVG from '@/icons/Trumpet'
 
 type TWrapper = TTestable & { bg: TColorName }
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
@@ -58,6 +59,11 @@ export const Row = styled.div`
   ${css.flex('align-center')};
   margin-left: 10px;
 `
+export const NotifyIcon = styled(NotifySVG)`
+  ${css.size(15)};
+  margin-right: 12px;
+  fill: white;
+`
 export const CrossIcon = styled(CrossSVG)`
   ${css.size(12)};
   fill: white;

src/widgets/Icons/Trumpet.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)