feat: improve mask ui

app/components/mask.module.scss

@@ -23,8 +23,9 @@
     .mask-filter {
       width: 100%;
       max-width: 100%;
-      margin-bottom: 10px;
+      margin-bottom: 20px;
       animation: search-in ease 0.3s;
+      height: 40px;
 
       display: flex;
 
@@ -32,7 +33,6 @@
         flex-grow: 1;
         max-width: 100%;
         min-width: 0;
-        margin-bottom: 20px;
         animation: search-in ease 0.3s;
       }
 
@@ -45,10 +45,7 @@
         height: 100%;
         margin-left: 10px;
         box-sizing: border-box;
-
+        min-width: 80px;
-        button {
-          padding: 10px;
-        }
       }
     }
 

app/components/mask.tsx

@@ -291,17 +291,16 @@ export function MaskPage() {
               ))}
             </select>
 
-            <div className={styles["mask-create"]}>
+            <IconButton
-              <IconButton
+              className={styles["mask-create"]}
-                icon={<AddIcon />}
+              icon={<AddIcon />}
-                text={Locale.Mask.Page.Create}
+              text={Locale.Mask.Page.Create}
-                bordered
+              bordered
-                onClick={() => {
+              onClick={() => {
-                  const createdMask = maskStore.create();
+                const createdMask = maskStore.create();
-                  setEditingMaskId(createdMask.id);
+                setEditingMaskId(createdMask.id);
-                }}
+              }}
-              />
+            />
-            </div>
           </div>
 
           <div>