chore(web): adjust ui styles (#1530)

labring · Sep 12, 2023 · b00225f · b00225f
1 parent 32d2121
commit b00225f
Show file tree

Hide file tree

Showing 75 changed files with 922 additions and 443 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -227,7 +227,7 @@
     "Private": "Private",
     "Readonly": "Readonly",
     "ReadWrite": "ReadWrite",
-    "SearchBucket": "Enter the bucket name to search",
+    "SearchBucket": "Please enter the bucket name to search",
     "Size": "Size",
     "Storage": "Storage",
     "StorageNameTip": "Please enter the cloud storage name",
@@ -632,5 +632,10 @@
   "Retry": "Retry",
   "NoFunctionYet": "You haven't created a function yet~",
   "shortcutKey": "shortcut key",
-  "NameCopiedSuccessfully": "Name copied successfully"
-}
+  "NameCopiedSuccessfully": "Name copied successfully",
+  "NameCannotBeEmpty": "name can't be empty",
+  "PreviousPage": "Previous Page",
+  "NextPage": "Next Page",
+  "LastPage": "Last Page",
+  "FirstPage": "First Page"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -227,7 +227,7 @@
     "Private": "私有 (private)",
     "Readonly": "公共读 (readonly)",
     "ReadWrite": "公共读写 (readwrite)",
-    "SearchBucket": "输入 bucket 名进行搜索",
+    "SearchBucket": "请输入 bucket 名进行搜索",
     "Size": "大小",
     "Storage": "存储",
     "StorageList": "云存储",
@@ -632,5 +632,10 @@
   "Retry": "点击重试",
   "NoFunctionYet": "您还没有创建函数哦～ ",
   "shortcutKey": "快捷键",
-  "NameCopiedSuccessfully": "名称复制成功"
-}
+  "NameCopiedSuccessfully": "名称复制成功",
+  "NameCannotBeEmpty": "name 不能为空",
+  "PreviousPage": "上一页",
+  "NextPage": "下一页",
+  "LastPage": "最后一页",
+  "FirstPage": "第一页"
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -227,7 +227,7 @@
     "Private": "私有 (private)",
     "Readonly": "公共读 (readonly)",
     "ReadWrite": "公共读写 (readwrite)",
-    "SearchBucket": "输入 bucket 名进行搜索",
+    "SearchBucket": "请输入 bucket 名进行搜索",
     "Size": "大小",
     "Storage": "存储",
     "StorageList": "云存储",
@@ -632,5 +632,10 @@
   "Retry": "点击重试",
   "NoFunctionYet": "您还没有创建函数哦～ ",
   "shortcutKey": "快捷键",
-  "NameCopiedSuccessfully": "名称复制成功"
-}
+  "NameCopiedSuccessfully": "名称复制成功",
+  "NameCannotBeEmpty": "name 不能为空",
+  "PreviousPage": "上一页",
+  "NextPage": "下一页",
+  "LastPage": "最后一页",
+  "FirstPage": "第一页"
+}
diff --git a/web/src/App.css b/web/src/App.css
@@ -75,10 +75,8 @@ a {
   }
 }
 
-/* noto-sans-sc-regular */
 @font-face {
   font-family: 'Noto Sans SC';
-  /* font-style: normal; */
   font-display: swap;
   font-weight: 400;
   src: url('//lib.baomitu.com/fonts/noto-sans-sc/noto-sans-sc-regular.eot'), /* IE9 Compat Modes */

diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx
@@ -388,11 +388,30 @@ export const StandardIcon = (props: any) => {
   );
 };
 
-export const ENVIcon = createIcon({
-  displayName: "ENVIcon",
-  viewBox: "0 0 11 15",
-  d: "M9.33333 5.33342H8.66667V4.00008C8.66667 3.11603 8.31548 2.26818 7.69036 1.64306C7.06523 1.01794 6.21739 0.666748 5.33333 0.666748C4.44928 0.666748 3.60143 1.01794 2.97631 1.64306C2.35119 2.26818 2 3.11603 2 4.00008V5.33342H1.33333C0.980036 5.33447 0.64151 5.47528 0.39169 5.7251C0.14187 5.97493 0.00105515 6.31345 0 6.66675V13.3334C0.00105515 13.6867 0.14187 14.0252 0.39169 14.2751C0.64151 14.5249 0.980036 14.6657 1.33333 14.6667H9.33333C9.68663 14.6657 10.0252 14.5249 10.275 14.2751C10.5248 14.0252 10.6656 13.6867 10.6667 13.3334V6.66675C10.6656 6.31345 10.5248 5.97493 10.275 5.7251C10.0252 5.47528 9.68663 5.33447 9.33333 5.33342ZM3.26667 4.00008C3.26667 3.72868 3.32012 3.45994 3.42398 3.2092C3.52784 2.95846 3.68007 2.73064 3.87198 2.53873C4.06389 2.34682 4.29172 2.19459 4.54245 2.09073C4.79319 1.98687 5.06193 1.93341 5.33333 1.93341C5.60473 1.93341 5.87347 1.98687 6.12421 2.09073C6.37495 2.19459 6.60278 2.34682 6.79469 2.53873C6.9866 2.73064 7.13882 2.95846 7.24268 3.2092C7.34654 3.45994 7.4 3.72868 7.4 4.00008V5.33342H3.26667V4.00008ZM9.33333 13.3334H1.33333V6.66675H9.33333V13.3334Z",
-});
+export const ENVIcon = (props: any) => {
+  return (
+    <svg
+      width={props.fontSize}
+      height={props.fontSize}
+      viewBox="0 0 15 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.08375 8.51084V8.94951H4.3225V9.46109H5.1835V9.91668H3.75433V7.58334H5.1835V8.03893H4.3225V8.51084H5.08375Z"
+        fill={props.color}
+      />
+      <path
+        d="M10.4335 4.66668H9.85018V3.50001C9.85018 2.72646 9.54289 1.9846 8.99591 1.43762C8.44893 0.890634 7.70706 0.583344 6.93351 0.583344C6.15996 0.583344 5.4181 0.890634 4.87112 1.43762C4.32414 1.9846 4.01685 2.72646 4.01685 3.50001V4.66668H3.43351C3.12438 4.6676 2.82817 4.79081 2.60957 5.00941C2.39098 5.228 2.26777 5.52421 2.26685 5.83334V11.6667C2.26777 11.9758 2.39098 12.272 2.60957 12.4906C2.82817 12.7092 3.12438 12.8324 3.43351 12.8333H10.4335C10.7426 12.8324 11.0389 12.7092 11.2575 12.4906C11.476 12.272 11.5993 11.9758 11.6002 11.6667V5.83334C11.5993 5.52421 11.476 5.228 11.2575 5.00941C11.0389 4.79081 10.7426 4.6676 10.4335 4.66668ZM5.12518 3.50001C5.12518 3.26254 5.17195 3.02739 5.26283 2.80799C5.35371 2.58859 5.48691 2.38924 5.65483 2.22133C5.82275 2.05341 6.0221 1.92021 6.24149 1.82933C6.46089 1.73845 6.69604 1.69168 6.93351 1.69168C7.17099 1.69168 7.40613 1.73845 7.62553 1.82933C7.84493 1.92021 8.04428 2.05341 8.2122 2.22133C8.38012 2.38924 8.51332 2.58859 8.6042 2.80799C8.69507 3.02739 8.74185 3.26254 8.74185 3.50001V4.66668H5.12518V3.50001ZM10.4335 11.6667H3.43351V5.83334H10.4335V11.6667Z"
+        fill={props.color}
+      />
+      <path
+        d="M7.61485 9.91668H7.04668L6.09585 8.47759V9.91668H5.52768V7.58334H6.09585L7.04668 9.02943V7.58334H7.61485V9.91668ZM9.32576 9.91668H8.6246L7.80851 7.58334H8.39185L8.97518 9.33334L9.55851 7.58334H10.1418L9.32576 9.91668Z"
+        fill={props.color}
+      />
+    </svg>
+  );
+};
 
 export const DomainIcon = createIcon({
   displayName: "DomainIcon",
@@ -572,6 +591,29 @@ export const CopyIcon = (props: any) => {
   );
 };
 
+export const OutlineCopyIcon = (props: any) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.34612 1.63916C4.80212 1.63916 4.36112 2.08016 4.36112 2.62416V3.82295H5.53112V2.80916H11.0616V8.32843H10.1368V9.49843H11.2466C11.7906 9.49843 12.2316 9.05743 12.2316 8.51343V2.62416C12.2316 2.08016 11.7906 1.63916 11.2466 1.63916H5.34612Z"
+        fill={props.color}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.75203 4.27581C2.20803 4.27581 1.76703 4.71681 1.76703 5.26081V11.1501C1.76703 11.6941 2.20803 12.1351 2.75203 12.1351H8.65247C9.19647 12.1351 9.63747 11.6941 9.63747 11.1501V5.26081C9.63747 4.71681 9.19647 4.27581 8.65247 4.27581H2.75203ZM2.93703 10.9651V5.44581H8.46747V10.9651H2.93703Z"
+        fill={props.color}
+      />
+    </svg>
+  );
+};
+
 export const EditIconFull = () => {
   return (
     <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -593,7 +635,13 @@ export const EditIconFull = () => {
 
 export const EditIconLine = (props: any) => {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width={props.size || "14"}
+      height={props.size || "14"}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M11.543 1.37033C11.6992 1.21412 11.9524 1.21412 12.1086 1.37033L13.0015 2.2632C13.1577 2.41941 13.1577 2.67268 13.0015 2.82889L12.2203 3.61013C12.0641 3.76634 11.8108 3.76634 11.6546 3.61013L10.7617 2.71725C10.6055 2.56105 10.6055 2.30778 10.7617 2.15157L11.543 1.37033Z"
         fill={props.color}
@@ -621,3 +669,69 @@ export const RecycleDeleteIcon = createIcon({
   viewBox: "0 0 16 17",
   d: "M4.66666 14.5C4.29999 14.5 3.98599 14.3693 3.72466 14.108C3.46332 13.8467 3.33288 13.5329 3.33332 13.1667V4.5H2.66666V3.16667H5.99999V2.5H9.99999V3.16667H13.3333V4.5H12.6667V13.1667C12.6667 13.5333 12.536 13.8473 12.2747 14.1087C12.0133 14.37 11.6995 14.5004 11.3333 14.5H4.66666ZM11.3333 4.5H4.66666V13.1667H11.3333V4.5ZM5.99999 11.8333H7.33332V5.83333H5.99999V11.8333ZM8.66666 11.8333H9.99999V5.83333H8.66666V11.8333Z",
 });
+
+export const DatabaseIcon = createIcon({
+  displayName: "DatabaseIcon",
+  viewBox: "0 0 14 15",
+  d: "M13.0727 10.2594C13.1861 10.47 13.1092 10.7322 12.9013 10.8485L12.8949 10.852L7.62227 13.6911C7.433 13.793 7.22159 13.8469 7.00663 13.848C6.79166 13.8491 6.57972 13.7973 6.38944 13.6973L6.37775 13.6911L1.10511 10.852C0.892371 10.7374 0.81276 10.4721 0.927317 10.2594C1.04072 10.0488 1.3019 9.96865 1.51354 10.0782L1.51994 10.0816L6.79261 12.9207C6.85529 12.9545 6.92527 12.9724 6.99647 12.973C7.06766 12.9736 7.13792 12.9568 7.20115 12.924L7.20744 12.9207L12.4801 10.0816C12.6928 9.96704 12.9582 10.0466 13.0727 10.2594H13.0727ZM13.0727 7.41563C13.1861 7.62625 13.1092 7.88841 12.9013 8.00477L12.8949 8.00825L7.62227 10.8474C7.433 10.9493 7.22159 11.0032 7.00663 11.0042C6.79166 11.0053 6.57972 10.9536 6.38944 10.8536L6.37775 10.8474L1.10511 8.00825C0.892371 7.8937 0.81276 7.62837 0.927317 7.41563C1.04072 7.20502 1.3019 7.1249 1.51354 7.23447L1.51994 7.23784L6.79261 10.077C6.85529 10.1107 6.92527 10.1287 6.99647 10.1293C7.06766 10.1298 7.13792 10.113 7.20115 10.0803L7.20744 10.077L12.4801 7.23784C12.6928 7.12329 12.9582 7.20288 13.0727 7.41563H13.0727ZM7.43682 1.17784L7.44486 1.18235L12.8721 4.26418C12.944 4.30503 13.0029 4.36544 13.0419 4.4384C13.1546 4.64937 13.077 4.91129 12.8686 5.02702L12.8623 5.03048L7.42523 7.93627C7.29987 8.00327 7.16007 8.03872 7.01793 8.03955C6.87579 8.04039 6.73558 8.00658 6.60944 7.94106L6.60171 7.93698L1.1413 5.03082C1.0678 4.9917 1.007 4.93243 0.966022 4.85996C0.848279 4.65174 0.919715 4.38805 1.12523 4.2674L1.13149 4.26379L6.58206 1.18156C6.71232 1.1079 6.85929 1.06887 7.00894 1.06822C7.15858 1.06756 7.3059 1.10529 7.4368 1.17781L7.43682 1.17784Z",
+});
+
+export const RefreshIcon = createIcon({
+  displayName: "RefreshIcon",
+  viewBox: "0 0 16 17",
+  d: "M11.7667 4.73332C11.2079 4.1695 10.5296 3.7384 9.78187 3.47185C9.03415 3.2053 8.2361 3.11011 7.44667 3.19332C5 3.43999 2.98667 5.42665 2.71333 7.87332C2.34667 11.1067 4.84667 13.8333 8 13.8333C9.00674 13.8333 9.99281 13.5477 10.8437 13.0095C11.6945 12.4714 12.3752 11.7029 12.8067 10.7933C13.02 10.3467 12.7 9.83332 12.2067 9.83332C11.96 9.83332 11.7267 9.96665 11.62 10.1867C11.2329 11.0193 10.5709 11.6933 9.74528 12.0952C8.91965 12.4971 7.9808 12.6024 7.08667 12.3933C5.60667 12.0667 4.41333 10.86 4.1 9.37999C3.96829 8.79483 3.96981 8.18754 4.10446 7.60305C4.23911 7.01856 4.50344 6.47182 4.8779 6.00327C5.25236 5.53472 5.72736 5.15634 6.26778 4.89613C6.8082 4.63592 7.4002 4.50054 8 4.49999C9.10667 4.49999 10.0933 4.95999 10.8133 5.68665L9.80667 6.69332C9.38667 7.11332 9.68 7.83332 10.2733 7.83332H12.6667C13.0333 7.83332 13.3333 7.53332 13.3333 7.16665V4.77332C13.3333 4.17999 12.6133 3.87999 12.1933 4.29999L11.7667 4.73332Z",
+});
+
+export const ChevronLeftIcon = createIcon({
+  displayName: "ChevronLeftIcon",
+  viewBox: "0 0 12 12",
+  d: "M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z",
+});
+
+export const ChevronRightIcon = createIcon({
+  displayName: "ChevronRightIcon",
+  viewBox: "0 0 12 12",
+  d: "M6.58596 5.99999L4.11096 3.52499L4.81796 2.81799L7.99996 5.99999L4.81796 9.18199L4.11096 8.47499L6.58596 5.99999Z",
+});
+
+export const ArrowLeftIcon = createIcon({
+  displayName: "ArrowLeftIcon",
+  viewBox: "0 0 12 12",
+  d: "M9.205 8.295L6.91 6L9.205 3.705L8.5 3L5.5 6L8.5 9L9.205 8.295ZM3 3H4V9H3V3Z",
+});
+
+export const ArrowRightIcon = createIcon({
+  displayName: "ArrowRightIcon",
+  viewBox: "0 0 12 12",
+  d: "M2.79498 3.705L5.08998 6L2.79498 8.295L3.49998 9L6.49998 6L3.49998 3L2.79498 3.705ZM7.99998 3H8.99998V9H7.99998V3Z",
+});
+
+export const OutlineViewOnIcon = createIcon({
+  displayName: "OutlineViewOnIcon",
+  viewBox: "0 0 14 14",
+  d: "M6.99992 3.49992C9.21075 3.49992 11.1824 4.74242 12.1449 6.70825C11.1824 8.67409 9.21075 9.91659 6.99992 9.91659C4.78909 9.91659 2.81742 8.67409 1.85492 6.70825C2.81742 4.74242 4.78909 3.49992 6.99992 3.49992ZM6.99992 2.33325C4.08325 2.33325 1.59242 4.14742 0.583252 6.70825C1.59242 9.26909 4.08325 11.0833 6.99992 11.0833C9.91659 11.0833 12.4074 9.26909 13.4166 6.70825C12.4074 4.14742 9.91659 2.33325 6.99992 2.33325ZM6.99992 5.24992C7.80492 5.24992 8.45825 5.90325 8.45825 6.70825C8.45825 7.51325 7.80492 8.16659 6.99992 8.16659C6.19492 8.16659 5.54159 7.51325 5.54159 6.70825C5.54159 5.90325 6.19492 5.24992 6.99992 5.24992ZM6.99992 4.08325C5.55325 4.08325 4.37492 5.26159 4.37492 6.70825C4.37492 8.15492 5.55325 9.33325 6.99992 9.33325C8.44659 9.33325 9.62492 8.15492 9.62492 6.70825C9.62492 5.26159 8.44659 4.08325 6.99992 4.08325Z",
+});
+
+export const OutlineViewOffIcon = createIcon({
+  displayName: "OutlineViewOffIcon",
+  viewBox: "0 0 16 16",
+  d: "M1.33317 3.51341L2.1865 2.66675L13.3332 13.8134L12.4865 14.6667L10.4332 12.6134C9.6665 12.8667 8.85317 13.0001 7.99984 13.0001C4.6665 13.0001 1.81984 10.9267 0.666504 8.00008C1.1265 6.82675 1.85984 5.79341 2.79317 4.97341L1.33317 3.51341ZM7.99984 6.00008C8.53027 6.00008 9.03898 6.21079 9.41405 6.58587C9.78912 6.96094 9.99984 7.46965 9.99984 8.00008C10.0002 8.22713 9.96185 8.45257 9.8865 8.66675L7.33317 6.11341C7.54735 6.03807 7.77279 5.99974 7.99984 6.00008ZM7.99984 3.00008C11.3332 3.00008 14.1798 5.07341 15.3332 8.00008C14.7891 9.38222 13.8645 10.5819 12.6665 11.4601L11.7198 10.5067C12.6418 9.869 13.3853 9.00612 13.8798 8.00008C13.3409 6.90004 12.5041 5.97326 11.4647 5.32508C10.4252 4.67691 9.22481 4.33333 7.99984 4.33341C7.27317 4.33341 6.55984 4.45341 5.89317 4.66675L4.8665 3.64675C5.8265 3.23341 6.8865 3.00008 7.99984 3.00008ZM2.11984 8.00008C2.6588 9.10012 3.49555 10.0269 4.53499 10.6751C5.57443 11.3233 6.77486 11.6668 7.99984 11.6667C8.45984 11.6667 8.91317 11.6201 9.33317 11.5267L7.81317 10.0001C7.34928 9.95036 6.91639 9.74333 6.58649 9.41343C6.25659 9.08353 6.04956 8.65064 5.99984 8.18675L3.73317 5.91341C3.07317 6.48008 2.51984 7.18675 2.11984 8.00008Z",
+});
+
+export const LinkIcon = createIcon({
+  displayName: "LinkIcon",
+  viewBox: "0 0 24 24",
+  d: "M15.7123 14.0621L14.8875 13.2373L15.7123 12.4125C16.2479 11.8632 16.5455 11.1251 16.5407 10.358C16.5359 9.59082 16.2291 8.85647 15.6866 8.31398C15.1442 7.77149 14.4099 7.46454 13.6428 7.45962C12.8757 7.45471 12.1375 7.75222 11.5882 8.28772L10.7622 9.11255L9.93791 8.28772L10.7627 7.46289C11.5286 6.69707 12.5672 6.26685 13.6502 6.26685C14.7333 6.26685 15.7719 6.69707 16.5377 7.46289C17.3036 8.2287 17.7338 9.26736 17.7338 10.3504C17.7338 11.4334 17.3036 12.4721 16.5377 13.2379L15.7123 14.0621ZM14.0627 15.7124L13.2378 16.5372C12.8586 16.9164 12.4085 17.2172 11.913 17.4224C11.4176 17.6276 10.8866 17.7333 10.3503 17.7333C9.81407 17.7333 9.28306 17.6276 8.78762 17.4224C8.29218 17.2172 7.84202 16.9164 7.46283 16.5372C7.08363 16.158 6.78284 15.7079 6.57763 15.2124C6.37241 14.717 6.26678 14.186 6.26678 13.6497C6.26678 13.1135 6.37241 12.5825 6.57763 12.087C6.78284 11.5916 7.08363 11.1414 7.46283 10.7622L8.28766 9.93739L9.11308 10.7622L8.28766 11.5876C7.75216 12.137 7.45465 12.8751 7.45956 13.6423C7.46448 14.4094 7.77143 15.1437 8.31392 15.6861C8.85641 16.2285 9.59076 16.5354 10.3579 16.5402C11.125 16.545 11.8632 16.2474 12.4124 15.7118L13.2378 14.8876L14.0627 15.7124ZM13.6502 9.52497L14.4751 10.3498L10.3503 14.4751L9.52549 13.6497L13.6497 9.52555L13.6502 9.52497Z",
+});
+
+export const UploadIcon = createIcon({
+  displayName: "UploadIcon",
+  viewBox: "0 0 24 24",
+  d: "M6.5 20C4.98 20 3.68333 19.4767 2.61 18.43C1.53667 17.3767 1 16.0933 1 14.58C1 13.28 1.39 12.12 2.17 11.1C2.95667 10.08 3.98333 9.43 5.25 9.15C5.67 7.61667 6.50333 6.37667 7.75 5.43C9.00333 4.47667 10.42 4 12 4C13.9533 4 15.6067 4.68 16.96 6.04C18.32 7.39333 19 9.04667 19 11C20.1533 11.1333 21.1067 11.6333 21.86 12.5C22.62 13.3533 23 14.3533 23 15.5C23 16.7533 22.5633 17.8167 21.69 18.69C20.8167 19.5633 19.7533 20 18.5 20H13C12.4533 20 11.9833 19.8033 11.59 19.41C11.1967 19.0233 11 18.5533 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5C19.2 18 19.79 17.7567 20.27 17.27C20.7567 16.79 21 16.2 21 15.5C21 14.8 20.7567 14.21 20.27 13.73C19.79 13.2433 19.2 13 18.5 13H17V11C17 9.62 16.5133 8.44 15.54 7.46C14.5667 6.48667 13.3867 6 12 6C10.62 6 9.44 6.48667 8.46 7.46C7.48667 8.44 7 9.62 7 11H6.5C5.53333 11 4.71 11.3433 4.03 12.03C3.34333 12.71 3 13.5333 3 14.5C3 15.4667 3.34333 16.3 4.03 17C4.71 17.6667 5.53333 18 6.5 18H9V20",
+});
+
+export const OutlineFolderAddIcon = createIcon({
+  displayName: "OutlineFolderAddIcon",
+  viewBox: "0 0 24 24",
+  d: "M15 16C15.2833 16 15.521 15.904 15.713 15.712C15.9043 15.5207 16 15.2833 16 15V14H17C17.2833 14 17.5207 13.904 17.712 13.712C17.904 13.5207 18 13.2833 18 13C18 12.7167 17.904 12.479 17.712 12.287C17.5207 12.0957 17.2833 12 17 12H16V11C16 10.7167 15.9043 10.479 15.713 10.287C15.521 10.0957 15.2833 10 15 10C14.7167 10 14.4793 10.0957 14.288 10.287C14.096 10.479 14 10.7167 14 11V12H13C12.7167 12 12.4793 12.0957 12.288 12.287C12.096 12.479 12 12.7167 12 13C12 13.2833 12.096 13.5207 12.288 13.712C12.4793 13.904 12.7167 14 13 14H14V15C14 15.2833 14.096 15.5207 14.288 15.712C14.4793 15.904 14.7167 16 15 16ZM4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4ZM4 6V18V6Z",
+});
diff --git a/web/src/components/DateRangePicker/index.tsx b/web/src/components/DateRangePicker/index.tsx
@@ -1,10 +1,8 @@
 import { ChangeEventHandler, useMemo, useState } from "react";
 import { DateRange, DayPicker, SelectRangeEventHandler } from "react-day-picker";
 import { useTranslation } from "react-i18next";
-import { CalendarIcon } from "@chakra-ui/icons";
 import {
   Box,
-  Button,
   Input,
   Popover,
   PopoverContent,
@@ -15,6 +13,8 @@ import clsx from "clsx";
 import { format, isAfter, isBefore, isValid, parse } from "date-fns";
 import { es, zhCN } from "date-fns/locale";
 
+import { CalendarIcon } from "../CommonIcon";
+
 import "./index.css";
 import "react-day-picker/dist/style.css";
 
@@ -80,8 +80,8 @@ export default function DateRangePicker(props: {
   return (
     <div
       className={clsx(
-        "flex h-8 w-64 rounded-md border border-grayModern-200",
-        !darkMode && "bg-grayModern-100",
+        "flex h-8 w-64 rounded-md border border-frostyNightfall-200",
+        !darkMode && "bg-lafWhite-500",
       )}
     >
       <Input
@@ -99,9 +99,9 @@ export default function DateRangePicker(props: {
       />
       <Popover onClose={onClose}>
         <PopoverTrigger>
-          <Button display={"flex"} variant={"unstyled"}>
-            <CalendarIcon />
-          </Button>
+          <div>
+            <CalendarIcon className="mr-3 cursor-pointer !text-grayModern-500" fontSize="16" />
+          </div>
         </PopoverTrigger>
         <PopoverContent zIndex={99}>
           <DayPicker

diff --git a/web/src/components/EditableTable/NormalTr/index.tsx b/web/src/components/EditableTable/NormalTr/index.tsx
@@ -1,7 +1,8 @@
-import { DeleteIcon, EditIcon } from "@chakra-ui/icons";
+import { EditIcon } from "@chakra-ui/icons";
 import { Td } from "@chakra-ui/react";
 import { t } from "i18next";
 
+import { RecycleDeleteIcon } from "@/components/CommonIcon";
 import IconWrap from "@/components/IconWrap";
 
 import ConfirmButton from "../../ConfirmButton";
@@ -51,7 +52,7 @@ const NormalTr = function (props: {
               configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
             }
           >
-            <DeleteIcon fontSize={15} />
+            <RecycleDeleteIcon fontSize={15} />
           </IconWrap>
         </ConfirmButton>
       </Td>

diff --git a/web/src/components/Editor/ENVEditor.tsx b/web/src/components/Editor/ENVEditor.tsx
@@ -125,7 +125,7 @@ function ENVEditor(props: {
 
   return (
     <div
-      style={{ height: height, width: "100%", padding: "12px 2px", ...style }}
+      style={{ height: height, width: "99%", padding: "12px 2px", ...style }}
       ref={monacoEl}
     ></div>
   );