From 6235ead02a66e786070f492bbc147110cf81577e Mon Sep 17 00:00:00 2001
From: robby <ta7382@gmail.com>
Date: Fri, 5 May 2023 21:10:26 +0800
Subject: [PATCH] Support star 1~6, fix layout

---
 src/App.js              |  2 +-
 src/container/List.js   |  6 +++---
 src/container/List.scss | 16 ++++++++--------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1bba199..e579671 100644
--- a/src/App.js
+++ b/src/App.js
@@ -91,7 +91,7 @@ const Main = styled.main`
 
   #container {
     margin: 0 auto;
-    width: 1450px;
+    width: 1550px;
 
     @media only screen and (max-width: ${p => p.theme.screenXl}) {
       width: 100%;
diff --git a/src/container/List.js b/src/container/List.js
index 7634d69..f183422 100644
--- a/src/container/List.js
+++ b/src/container/List.js
@@ -36,7 +36,8 @@ class List extends Component {
         { label: '5', checked: true, star: 5 },
         { label: '4', checked: false, star: 4 },
         { label: '3', checked: false, star: 3 },
-        { label: this.t('normal'), checked: false, star: 2 },
+        { label: '2', checked: false, star: 2 },
+        { label: '1', checked: false, star: 1 },
       ],
       nameOptions: [
         { label: this.t('show'), checked: true },
@@ -50,7 +51,6 @@ class List extends Component {
     let nameOptions = [];
 
     stars = state.stars;
-    stars[3].label = t('normal');
 
     nameOptions = state.nameOptions;
     nameOptions[0].label = t('show');
@@ -223,7 +223,7 @@ class List extends Component {
             (this.state.stars[2].checked && Number(_star) === 4) ||
             (this.state.stars[3].checked && Number(_star) === 3) ||
             (this.state.stars[4].checked && Number(_star) === 2) ||
-            (this.state.stars[4].checked && Number(_star) === 1))
+            (this.state.stars[5].checked && Number(_star) === 1))
         );
       })
       .map((c, index) => {
diff --git a/src/container/List.scss b/src/container/List.scss
index 6d5188f..a30799e 100644
--- a/src/container/List.scss
+++ b/src/container/List.scss
@@ -4,7 +4,7 @@
   float: right;
   margin: 0 1rem 0 0.2rem;
   padding: 0.8rem 0;
-  width: 700px;
+  width: 800px;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 0.5rem;
 
@@ -24,8 +24,8 @@
   .type {
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    width: 130px;
+    justify-content: center;
+    width: 145px;
     height: 45px;
     /* stylelint-disable */
     font-family: $en-title-font;
@@ -53,6 +53,7 @@
     i {
       display: inline-block;
       margin-top: 3px;
+      margin-right: 0.5rem;
       width: 34px;
       height: 34px;
       background-position: center;
@@ -66,7 +67,7 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-  padding: 0 1rem;
+  padding: 0 2rem;
   font-size: 18px;
 
   .filter-title {
@@ -94,14 +95,13 @@
 }
 
 .search {
-  margin: 1rem auto;
+  padding: 1rem 2rem;
   width: 100%;
-  text-align: center;
 
   .search-text {
     margin: 0 auto;
-    padding: 0.25rem 0.5rem;
-    width: 625px;
+    padding: 0.5rem;
+    width: 100%;
     font-size: 18px;
     font-family: $input-font;
     color: #ddd;