feat(message): change the layout of the main text (#395)

UCloud-FE · Apr 7, 2024 · a3baa2a · a3baa2a
1 parent 9be05ce
commit a3baa2a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/src/components/Message/Message.jsx b/src/components/Message/Message.jsx
@@ -68,7 +68,7 @@ class Message extends Component {
                         <SvgIcon size="20px" type="cross" />
                     </CloseIconWrap>
                 )}
-                {title && <TitleWrap>{title}</TitleWrap>}
+                {title && (children ? <TitleWrap>{title}</TitleWrap> : <ContentWrap>{title}</ContentWrap>)}
                 {children && <ContentWrap>{children}</ContentWrap>}
                 {footer && <FooterWrap>{footer}</FooterWrap>}
             </MessageWrap>

diff --git a/src/components/Message/__demo__/title.jsx b/src/components/Message/__demo__/title.jsx
@@ -13,6 +13,9 @@ const Demo = () => {
             <div className="demo-wrap">
                 <Message title="Message Title" />
             </div>
+            <div className="demo-wrap">
+                <Message>this is a message</Message>
+            </div>
             <Button
                 onClick={() =>
                     Message.message({ title: 'Message Title', children: 'this is a message' }, undefined, () =>

diff --git a/src/components/Message/style/index.js b/src/components/Message/style/index.js
@@ -104,7 +104,7 @@ export const TitleWrap = withProps({
             word-break: break-all;
             font-size: 14px;
             color: ${DT.T_COLOR_TEXT_DEFAULT_DARK};
-            line-height: 22px;
+            line-height: 24px;
         `;
     })
 );
@@ -121,9 +121,9 @@ export const ContentWrap = withProps({
             padding-right: 36px;
             padding-left: 44px;
             word-break: break-all;
-            font-size: 12px;
-            color: ${DT.T_COLOR_TEXT_DEFAULT_LIGHT};
-            line-height: 18px;
+            font-size: 14px;
+            color: ${DT.T_COLOR_TEXT_DEFAULT_DARK};
+            line-height: 24px;
         `;
     })
 );
@@ -132,7 +132,7 @@ export const FooterWrap = styled('div')`
     text-align: right;
     margin-right: 16px;
     margin-left: 44px;
-    margin-top: 12px;
+    margin-top: 8px;
 `;
 
 export const MessageWrap = withProps({
@@ -155,10 +155,6 @@ export const MessageWrap = withProps({
             background: ${DT.T_COLOR_BG_DEFAULT_BRIGHT};
             box-shadow: ${DT.T_SHADOW_BLOCK_DEFAULT_LG};
             position: relative;
-
-            .${titleCls}+.${contentCls} {
-                margin-top: 8px;
-            }
         `;
     })
 );