From dcda8b6c0d4c4917b2539e710f43e223b697828a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 6 Jan 2025 15:39:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=89=B2=E5=80=BC=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2=E5=99=A8=E7=9A=84?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Tones.module.css |  2 +-
 src/pages/Tones.tsx        | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Tones.module.css b/src/pages/Tones.module.css
index 510fb1a..1b8c1d6 100644
--- a/src/pages/Tones.module.css
+++ b/src/pages/Tones.module.css
@@ -31,7 +31,7 @@
     padding: 0 var(--spacing-m);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-s);
     h5 {
       padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
diff --git a/src/pages/Tones.tsx b/src/pages/Tones.tsx
index 8477a5d..903c209 100644
--- a/src/pages/Tones.tsx
+++ b/src/pages/Tones.tsx
@@ -83,6 +83,11 @@ export function Tones() {
           </aside>
           <div className={styles.tones_content}>
             <h5>Color Tones</h5>
+            <div className={styles.colors_booth}>
+              {colors.map((c, index) => (
+                <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
+              ))}
+            </div>
             <div className={styles.color_value_mode}>
               <label>Copy color value in</label>
               <HSegmentedControl
@@ -97,11 +102,6 @@ export function Tones() {
                 onChange={setMode}
               />
             </div>
-            <div className={styles.colors_booth}>
-              {colors.map((c, index) => (
-                <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
-              ))}
-            </div>
           </div>
         </section>
       </ScrollArea>