refactor(style): adjust periodic bg (#2073)

netless-io · Nov 2, 2023 · 14cc519 · 14cc519
1 parent 009e583
commit 14cc519
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 41 deletions.
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
@@ -64,26 +64,26 @@ export const renderPeriodicForm = (t: FlatI18nTFunction, lang: string) =>
                     <div>
                         {t("time")}
 
-                        <div>
+                        <span>
                             {periodic.weeks.length > 0
                                 ? t("every-frequency", { freq: getWeekNames(periodic.weeks, lang) })
                                 : t("no-frequency-selected")}
-                        </div>
+                        </span>
                     </div>
                     <div>
                         {t("type")}
 
-                        <div>{t(`class-room-type.${roomType}`)}</div>
+                        <span>{t(`class-room-type.${roomType}`)}</span>
                     </div>
                     <div>
                         {t("periodic")}
 
-                        <div>
+                        <span>
                             {t("periodic-room-tip", {
                                 date: formatISODayWeekiii(periodic.endTime, lang),
                                 rate: periodic.rate,
                             })}
-                        </div>
+                        </span>
                     </div>
                 </div>
             );

diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less
@@ -135,7 +135,7 @@
     }
 
     >div+div {
-        margin-top: 8px;
+        margin-top: 4px;
     }
 }
 

diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less
@@ -11,7 +11,7 @@
     margin: 0 auto;
     padding: 16px 0;
     border-radius: 6px;
-    background-color: var(--grey-0);
+    background-color: #f6f6f6;
 }
 
 .main-horizontal-layout-content {

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less
@@ -32,24 +32,21 @@
 }
 
 .periodic-room-panel-tips {
-    background-color: var(--grey-0);
-    border-radius: 8px;
-    padding: 12px;
+    padding: 8px 16px;
     margin-bottom: 24px;
-}
-
-.periodic-room-panel-tips-title {
-    color: #3381ff;
-}
+    border-radius: 6px;
+    background-color: #f6f6f6;
+    font-size: 12px;
 
-.periodic-room-panel-tips-type {
-    color: var(--text);
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
+    >div {
+        display: flex;
+        justify-content: space-between;
+        line-height: 24px;
+    }
 
-.periodic-room-panel-tips-inner {
-    color: var(--text);
+    >div+div {
+        margin-top: 4px;
+    }
 }
 
 .periodic-room-panel-table-line {
@@ -62,7 +59,7 @@
     .fancy-scrollbar-mixin();
     flex: 1;
 
-    .ant-table-tbody > tr > td {
+    .ant-table-tbody>tr>td {
         color: var(--text);
         border-bottom: 1px solid transparent;
     }
@@ -88,4 +85,4 @@
     .periodic-room-panel-table-line {
         border-bottom: solid 1px var(--grey-8);
     }
-}
+}
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -51,7 +51,7 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
     const yearMonthFormat = formatWithOptions({ locale }, "yyyy/MM");
     const dayFormat = formatWithOptions({ locale }, "dd");
     const timeSuffixFormat = format("HH:mm");
-    const dayWeekFormat = formatWithOptions({ locale }, "yyyy/MM/dd iii");
+    const dayWeekFormat = formatWithOptions({ locale }, "yyyy/MM/dd (iii)");
 
     const hasRunning = rooms.some(room =>
         [RoomStatus.Started, RoomStatus.Paused].includes(room?.roomStatus as RoomStatus),
@@ -159,21 +159,29 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
         <>
             <div className="periodic-room-panel-container">
                 <div className="periodic-room-panel-tips">
-                    <div className="periodic-room-panel-tips-title">
-                        {t("repeat-frequency", {
-                            week: getWeekNames(periodicInfo.weeks, language),
-                        })}
+                    <div>
+                        {t("time")}
+
+                        <span>
+                            {t("repeat-frequency", {
+                                week: getWeekNames(periodicInfo.weeks, language),
+                            })}
+                        </span>
                     </div>
-                    <div className="periodic-room-panel-tips-type">
-                        {t("schedule-room-type", {
-                            type: t(`class-room-type.${periodicInfo.roomType}`),
-                        })}
+                    <div>
+                        {t("type")}
+
+                        <span>{t(`class-room-type.${periodicInfo.roomType}`)}</span>
                     </div>
-                    <div className="periodic-room-panel-tips-inner">
-                        {t("schedule-room-detail", {
-                            time: dayWeekFormat(periodicInfo.endTime),
-                            length: rooms.length,
-                        })}
+                    <div>
+                        {t("periodic")}
+
+                        <span>
+                            {t("schedule-room-detail", {
+                                time: dayWeekFormat(periodicInfo.endTime),
+                                length: rooms.length,
+                            })}
+                        </span>
                     </div>
                 </div>
                 <div className="periodic-room-panel-btn-list">

diff --git a/packages/flat-components/src/theme/theme.less b/packages/flat-components/src/theme/theme.less
@@ -86,7 +86,8 @@ html[lang^="zh"] .flat-theme-root {
 }
 
 .flat-theme-root {
-    background-color: var(--grey-0);
+    // @TODO: danger! more and more `#f6f6f6` were used
+    background-color: #f6f6f6;
 }
 
 .flat-color-scheme-dark {

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -269,7 +269,6 @@
   "delete-room-records-tips": "Are you sure to delete the current room record?",
   "repeat-frequency": "Every {{week}}",
   "schedule-room-detail": "Ends at {{time}} with {{length}} rooms",
-  "schedule-room-type": "Room type: {{type}}",
   "view-all-rooms-in-periodic-rooms": "View all ({{count}}) rooms",
   "ending": "Ending...",
   "follow-your-perspective-tips": "Other users will follow your perspective",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -269,7 +269,6 @@
   "delete-room-records-tips": "确定删除当前房间记录？",
   "view-all-rooms-in-periodic-rooms": "查看全部 ({{count}}) 场房间",
   "repeat-frequency": "每{{week}}",
-  "schedule-room-type": "房间类型：{{type}}",
   "schedule-room-detail": "结束于 {{time}} ，共 {{length}} 个房间",
   "more": "更多",
   "pausing": "暂停中...",