@myun/gimi-chat 0.9.27 → 0.9.29

package/dist/components/message-list/index.module.css

@@ -42,7 +42,7 @@
   display: inline-block;
   max-width: 680px;
   padding: 12px 16px;
-  background: #ebf2ff;
+  background: var(--theme-subtleNeutral, #F5F7FA);
   border-radius: 16px;
   white-space: pre-wrap;
   word-break: break-word;
@@ -70,7 +70,7 @@
   align-items: center;
   position: relative;
   font-size: 16px;
-  color: #000000;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 24px;
   width: fit-content;
   text-align: left;
@@ -120,7 +120,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 20px;
   text-align: left;
   font-style: normal;
@@ -152,7 +152,7 @@
   margin: 40px 0;
   width: 100%;
   height: 1px;
-  background: #dfe8f7;
+  background: var(--theme-lightNeutral, #E9EBF2);
 }
 .main .textWrap .textItem .course_recommend .course_recommend_header {
   width: 100%;
@@ -165,7 +165,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 600;
   font-size: 18px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 28px;
   text-align: left;
   font-style: normal;
@@ -180,7 +180,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 500;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 20px;
   text-align: left;
   font-style: normal;
@@ -218,7 +218,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 20px;
   text-align: left;
   font-style: normal;
@@ -243,13 +243,13 @@
 .main .emptyWrap .title {
   font-weight: 600;
   font-size: 20px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 28px;
   margin-bottom: 12px;
 }
 .main .emptyWrap .tips {
   font-size: 16px;
-  color: #54698c;
+  color: var(--theme-neutral, #4C5A70);
 }
 
 .copyBtn {

package/dist/components/product-tag/index.module.css

@@ -8,8 +8,8 @@
   justify-content: center;
   border-radius: 4px;
   gap: 5px;
-  border: 0;
-  background-color: #f1f7ff;
+  border: 1px solid var(--theme-softNeutral, #D9DCE5);
+  background-color: var(--theme-subtleNeutral, #F5F7FA);
   cursor: pointer;
 }
 .icon_btn span {
@@ -17,5 +17,5 @@
 }
 .icon_btn:hover {
   background-color: #FFFFFF;
-  color: #4086FF;
+  color: var(--theme-primary, #4086FF);
 }

package/dist/components/quoted-content/index.js

@@ -36,8 +36,6 @@ var tabList = [{
 }
 // { key: 'course', displayName: '课程' },
 ];
-var quotoIcon = 'https://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202601/30/be6d9_20260130135139.png';
-var isActiveQuotoIcon = 'https://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202601/30/8e64c_20260130135037.png';
 var QuotedContent = function QuotedContent(_ref) {
   var initQuoteSource = _ref.initQuoteSource;
   var _useTranslation = useTranslation(),
@@ -238,7 +236,7 @@ var QuotedContent = function QuotedContent(_ref) {
       className: styles.searchInput,
       prefix: /*#__PURE__*/React.createElement(IconFontCom, {
         type: "icon-search1",
-        color: "#7D91B3",
+        color: "var(--theme-mediumNeutral, #9AA7B7)",
         size: 16
       }),
       onChange: handleChange,
@@ -318,9 +316,10 @@ var QuotedContent = function QuotedContent(_ref) {
     content: t('quote.courseTooltip'),
     position: "top",
     visible: showmodel ? false : undefined
-  }, /*#__PURE__*/React.createElement("img", {
-    src: showmodel ? isActiveQuotoIcon : quotoIcon,
-    alt: ""
+  }, /*#__PURE__*/React.createElement(IconFontCom, {
+    type: "icon-shurukuang-kechengyinyong",
+    size: 26,
+    className: styles.quoteIcon
   }))));
 };
 export default QuotedContent;

package/dist/components/quoted-content/index.module.css

@@ -15,9 +15,19 @@
   border-radius: 8px;
   margin-left: 5px;
   width: calc(100% - 10px);
+  border: 1px solid var(--theme-lightNeutral, #E9EBF2);
+  background-color: #fff;
 }
 .searchInput input::placeholder {
-  color: #7d91b3;
+  color: var(--theme-mediumNeutral, #9AA7B7);
+}
+
+:global .semi-input-wrapper:hover, :global .semi-input-wrapper:active {
+  border-color: var(--theme-primary, #4086FF);
+  background-color: #fff;
+}
+:global .semi-input-clearbtn:hover {
+  border-color: var(--theme-primary, #4086FF);
 }
 
 .content {
@@ -41,14 +51,15 @@
   border-radius: 8px;
   cursor: pointer;
   flex-shrink: 0;
+  color: var(--theme-neutral, #4C5A70);
 }
 .newtab .tabItem:hover {
-  background-color: #f7f7fc;
-  color: var(--theme-primary, #4086ff);
+  background-color: var(--theme-primary-pale, #F0F8FF);
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .newtab .active {
-  background-color: #f7f7fc;
-  color: var(--theme-primary, #4086ff);
+  background-color: var(--theme-primary-pale, #F0F8FF);
+  color: var(--theme-deepNeutral, #2E394C);
   font-weight: 600;
 }
 
@@ -122,11 +133,17 @@
   width: 32px;
   height: 32px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .quotationIcon:hover {
-  background-color: #f2f3f7;
+  background-color: var(--theme-paleNeutral, #F2F3F7);
   border-radius: 8px;
 }
+.quotationIcon:hover .quoteIcon, .quotationIcon.isActive .quoteIcon {
+  color: var(--theme-primary, #4086FF);
+}
 .quotationIcon img {
   width: 100%;
   height: 100%;
@@ -134,10 +151,17 @@
 }
 
 .isActive {
-  background-color: #f2f3f7;
+  background-color: var(--theme-paleNeutral, #F2F3F7);
   border-radius: 8px;
 }
 
+.quoteIcon {
+  color: var(--theme-deepNeutral, #2E394C);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .current_video {
   display: flex;
   flex-direction: column;
@@ -162,9 +186,10 @@
   min-width: 0;
   font-size: 12px;
   padding: 8px;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .current_video .currentItem:hover {
-  background-color: #f7f7fc;
+  background-color: var(--theme-paleNeutral, #F2F3F7);
   color: var(--theme-primary, #4086ff);
 }
 .current_video .currentItem .img {

package/dist/components/reasoning-content/index.module.css

@@ -2,7 +2,7 @@
 .container {
   max-width: clamp(360px, 90%, 800px);
   padding: 0 20px;
-  border-left: 2px solid #d9dce5;
+  border-left: 2px solid var(--theme-softNeutral, #D9DCE5);
   margin-bottom: 16px;
   user-select: none;
 }
@@ -18,7 +18,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 600;
   font-size: 16px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 16px;
   text-align: left;
   font-style: normal;
@@ -34,7 +34,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #7d91b3;
+  color: var(--theme-neutral, #4C5A70);
   line-height: 26px;
   text-align: left;
   font-style: normal;
@@ -121,7 +121,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 26px;
   text-align: left;
   font-style: normal;
@@ -156,7 +156,7 @@
 .dot {
   width: 8px; /* 减小大小 */
   height: 8px; /* 减小大小 */
-  background-color: #4086ff; /* 换成antd主题浅蓝色 */
+  background-color: var(--theme-primary, #4086FF); /* 换成antd主题浅蓝色 */
   border-radius: 50%;
   will-change: transform; /* 告诉浏览器提前优化动画 */
   animation: bounce 0.8s infinite ease-in-out both; /* 减小动画变化幅度 */

package/dist/components/reference-content/index.module.css

@@ -7,7 +7,7 @@
 }
 
 .main {
-  background-color: #f7f8fa;
+  background-color: var(--theme-subtleNeutral, #F5F7FA);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -41,7 +41,7 @@
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .main .description .text_twoline {
   text-overflow: ellipsis;
@@ -55,7 +55,7 @@
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .main .description .product_text {
   text-overflow: ellipsis;
@@ -69,10 +69,10 @@
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .main .description .duration {
-  color: #717f94;
+  color: var(--theme-dustyNeutral, #717F94);
   font-family: "PingFang SC";
   font-weight: 400;
   font-style: Regular;

package/dist/components/search-course-list/index.module.css

@@ -33,7 +33,7 @@
 }
 
 .knowledge {
-  background-color: #f7f8fa;
+  background-color: var(--theme-subtleNeutral, #F5F7FA);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -113,7 +113,7 @@
   border-radius: 4px;
   float: left;
   margin-right: 5px;
-  background-color: #7d91b3;
+  background-color: var(--theme-neutral, #4C5A70);
   color: #ffffff;
 }
 .knowledge .class_description .text {
@@ -129,7 +129,7 @@
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 
 .list {
@@ -143,5 +143,5 @@
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
-  color: #4c5a70;
+  color: var(--theme-neutral, #4C5A70);
 }

package/dist/components/search-result/index.module.css

@@ -9,7 +9,7 @@
   width: 305px;
   display: flex;
   align-items: center;
-  background: #f7f8fa;
+  background: var(--theme-subtleNeutral, #F5F7FA);
   padding: 16px;
   border-radius: 8px;
   margin-right: 10px;
@@ -33,7 +33,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 500;
   font-size: 12px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   text-align: left;
   font-style: normal;
   display: -webkit-box;
@@ -64,14 +64,14 @@
 }
 .search .search_cards .courseItem .courseTitle .newEquityLabel-3 {
   color: #fff;
-  background: #7d91b3;
+  background: var(--theme-neutral, #4C5A70);
 }
 .search .search_cards .courseItem .infoTitle {
   width: 100%;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 12px;
-  color: #7d91b3;
+  color: var(--theme-neutral, #4C5A70);
   line-height: 12px;
   text-align: left;
   font-style: normal;
@@ -81,7 +81,7 @@
   line-height: 17px;
 }
 .search .search_cards .newsItem {
-  background: #f7f8fa;
+  background: var(--theme-subtleNeutral, #F5F7FA);
   padding: 16px;
   border-radius: 8px;
   margin-right: 10px;
@@ -111,7 +111,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 500;
   font-size: 12px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   text-align: left;
   font-style: normal;
   display: -webkit-box;
@@ -141,14 +141,14 @@
 }
 .search .search_cards .newsItem .courseTitle .newEquityLabel-3 {
   color: #fff;
-  background: #7d91b3;
+  background: var(--theme-neutral, #4C5A70);
 }
 .search .search_cards .newsItem .infoTitle {
   width: 100%;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 12px;
-  color: #7d91b3;
+  color: var(--theme-neutral, #4C5A70);
   line-height: 12px;
   text-align: left;
   font-style: normal;
@@ -184,7 +184,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 20px;
   text-align: left;
   font-style: normal;
@@ -194,7 +194,7 @@
 .search .searchAll {
   width: 78px;
   height: 83px;
-  background: #f7f8fa;
+  background: var(--theme-subtleNeutral, #F5F7FA);
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -202,7 +202,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 14px;
   text-align: left;
   font-style: normal;
@@ -214,7 +214,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 14px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 26px;
   text-align: left;
   font-style: normal;

package/dist/components/templates/index.module.css

@@ -81,7 +81,7 @@
   font-family: PingFangSC, PingFang SC;
   font-weight: 500;
   font-size: 16px;
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   line-height: 22px;
   text-align: center;
   font-style: normal;

package/dist/components/upload-list/CustomFile.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from "./customFile.module.css";
-import reTry from "../../assets/image/retry.png";
 import { FileStatus } from "../../interfaces/fileInterface";
 import { formatSizeToKB } from "../../utils/tools";
+import IconFontCom from "../iconfont-com";
 var CustomFile = function CustomFile(_ref) {
   var file = _ref.file,
     handleDelFile = _ref.handleDelFile,
@@ -50,11 +50,21 @@ var CustomFile = function CustomFile(_ref) {
 
   var isError = file.status === FileStatus.UPLOAD_FAILED || file.status === FileStatus.ANALYSE_FAILED || file.status === FileStatus.NETWORK_ERROR;
   var isLoading = [FileStatus.PADDING, FileStatus.RETRING, FileStatus.UPLOADING].includes(file.status);
+  // 仅上传中阶段 fileUrl/fileIcon 尚未就绪；解析中(PADDING/RETRING)资源已就绪，应展示真实图
+  var isUploading = file.status === FileStatus.UPLOADING;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.uploadBox
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.uploadIcon
-  }, isImage ? /*#__PURE__*/React.createElement("img", {
+  }, isUploading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '24px',
+      height: '22px',
+      borderRadius: 4,
+      background: "var(--theme-softNeutral, #D9DCE5)",
+      flexShrink: 0
+    }
+  }) : isImage ? /*#__PURE__*/React.createElement("img", {
     src: file.fileUrl,
     alt: "file-icon",
     style: {
@@ -62,7 +72,10 @@ var CustomFile = function CustomFile(_ref) {
       height: '36px',
       objectFit: 'cover',
       borderRadius: 8,
-      background: "#D9DCE5"
+      background: "var(--theme-softNeutral, #D9DCE5)"
+    },
+    onError: function onError(e) {
+      e.currentTarget.style.visibility = 'hidden';
     }
   }) : /*#__PURE__*/React.createElement("img", {
     src: fileIcon,
@@ -87,13 +100,10 @@ var CustomFile = function CustomFile(_ref) {
   })), isError && /*#__PURE__*/React.createElement("div", {
     className: styles.uploadError,
     onClick: handleRetryClick
-  }, t('common.retry'), /*#__PURE__*/React.createElement("img", {
-    src: reTry,
-    alt: "",
-    style: {
-      width: 16,
-      height: 16
-    }
+  }, t('common.retry'), /*#__PURE__*/React.createElement(IconFontCom, {
+    type: "icon-shuaxin1",
+    size: 16,
+    color: "var(--theme-primary, #4086FF)"
   })), showDel && /*#__PURE__*/React.createElement("div", {
     className: styles.delIcon,
     onClick: handleDeleteClick

package/dist/components/upload-list/ImageFile.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from "./imageFile.module.css";
-import reTry from "../../assets/image/retry.png";
 import { FileStatus } from "../../interfaces/fileInterface";
 import classNames from 'classnames';
+import IconFontCom from "../iconfont-com";
 var ImageFile = function ImageFile(_ref) {
   var file = _ref.file,
     handleDelFile = _ref.handleDelFile,
@@ -30,19 +30,23 @@ var ImageFile = function ImageFile(_ref) {
 
   var isError = file.status === FileStatus.UPLOAD_FAILED || file.status === FileStatus.ANALYSE_FAILED || file.status === FileStatus.NETWORK_ERROR;
   var isLoading = [FileStatus.PADDING, FileStatus.RETRING, FileStatus.UPLOADING].includes(file.status);
+  // 仅上传中阶段 fileUrl 尚未就绪；解析中(PADDING/RETRING)资源已就绪，应展示真实图片
+  var isUploading = file.status === FileStatus.UPLOADING;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(styles.uploadBox, isMessage ? styles.messageImg : styles.inputImg, isSingle ? styles.singleImg : '')
-  }, /*#__PURE__*/React.createElement("img", {
+  }, isUploading ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.uploadImg),
+    style: {
+      background: "var(--theme-softNeutral, #D9DCE5)"
+    }
+  }) : /*#__PURE__*/React.createElement("img", {
     src: file.fileUrl,
     alt: "file-icon",
-    className: classNames(styles.uploadImg)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.uploadName
-  }, isError && /*#__PURE__*/React.createElement("div", {
-    className: styles.sizeText
-  }, isError && /*#__PURE__*/React.createElement("span", {
-    className: styles.errorText
-  }, file.status === FileStatus.UPLOAD_FAILED ? t('upload.status.uploadFailed') : file.status === FileStatus.NETWORK_ERROR ? t('upload.status.networkError') : t('upload.status.parseFailed')))), isLoading && /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.uploadImg),
+    onError: function onError(e) {
+      e.currentTarget.style.visibility = 'hidden';
+    }
+  }), isLoading && /*#__PURE__*/React.createElement("div", {
     className: styles.uploadLoading
   }, /*#__PURE__*/React.createElement("img", {
     src: "https://simg01.gaodunwangxiao.com/uploadfiles/tmp/upload/202509/07/0a0fa_20250907093927.gif",
@@ -50,12 +54,14 @@ var ImageFile = function ImageFile(_ref) {
   })), isError && /*#__PURE__*/React.createElement("div", {
     className: styles.uploadError,
     onClick: handleRetryClick
-  }, t('common.retry'), /*#__PURE__*/React.createElement("img", {
-    src: reTry,
-    alt: "",
-    style: {
-      width: 16,
-      height: 16
+  }, /*#__PURE__*/React.createElement(IconFontCom, {
+    type: "icon-a-iconjichu1",
+    size: 16,
+    extraStyle: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
     }
   })), showDel && /*#__PURE__*/React.createElement("div", {
     className: styles.delIcon,

package/dist/components/upload-list/customFile.module.css

@@ -7,7 +7,7 @@
   width: fit-content; /* 自动适应内容宽度 */
   flex-shrink: 0;
   border-radius: 12px;
-  background: var(---, #f2f3f7);
+  background: var(--theme-subtleNeutral, #F5F7FA);
   padding: 14px 16px 14px 12px;
   margin-bottom: 12px;
   position: relative;
@@ -29,7 +29,7 @@
 
 .uploadName {
   flex: 1; /* 让文件名占满剩余空间 */
-  color: #2e394c;
+  color: var(--theme-deepNeutral, #2E394C);
   font-family: "PingFang SC";
   font-size: 14px;
   font-style: normal;
@@ -53,12 +53,12 @@
 }
 .uploadName .uploadfileName .fileExtension {
   white-space: nowrap; /* 确保扩展名不换行 */
-  color: #717F94; /* 可以给扩展名一个不同的颜色区分 */
+  color: var(--theme-neutral, #4C5A70); /* 可以给扩展名一个不同的颜色区分 */
 }
 .uploadName .sizeText .size {
   margin-right: 4px;
   font-size: 12px; /* 修复之前的语法错误，添加单位px */
-  color: #717F94;
+  color: var(--theme-neutral, #4C5A70);
 }
 .uploadName .sizeText .errorText {
   color: #f33;
@@ -76,7 +76,7 @@
   margin-left: 8px;
   font-size: 14px;
   flex-shrink: 0;
-  color: #717F94;
+  color: var(--theme-deepNeutral, #2E394C);
 }
 .uploadStatus img,
 .uploadLoading img {
@@ -109,7 +109,7 @@
 
 .uploadError {
   cursor: pointer;
-  color: #4086ff;
+  color: var(--theme-primary, #4086ff);
   text-align: right;
   font-family: "PingFang SC";
   font-size: 14px;

package/dist/components/upload-list/imageFile.module.css

@@ -4,7 +4,7 @@
   width: 54px;
   height: 54px;
   border-radius: 8px;
-  border: 0.5px solid #D9DCE5;
+  border: 0.5px solid var(--theme-softNeutral, #D9DCE5);
   position: relative;
   overflow: visible;
   margin-bottom: 12px;
@@ -31,7 +31,7 @@
   width: 54px;
   height: 54px;
   border-radius: 8px;
-  border: 0.5px solid #D9DCE5;
+  border: 0.5px solid var(--theme-softNeutral, #D9DCE5);
 }
 .uploadBox:hover .delIcon {
   display: flex;
@@ -44,18 +44,20 @@
 }
 
 .uploadStatus,
-.uploadLoading {
+.uploadLoading,
+.uploadError {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   border-radius: 8px;
-  border: 0.5px solid #D9DCE5;
+  border: 0.5px solid var(--theme-softNeutral, #D9DCE5);
   background: rgba(0, 0, 0, 0.4);
 }
 .uploadStatus img,
-.uploadLoading img {
+.uploadLoading img,
+.uploadError img {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -88,14 +90,4 @@
 
 .uploadError {
   cursor: pointer;
-  color: #4086ff;
-  text-align: right;
-  font-family: "PingFang SC";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  margin-left: 20px;
-  display: flex;
-  align-items: center;
 }