From 9dc49dcf34bc7ffd565306c22aef7a13f42b1cfb Mon Sep 17 00:00:00 2001
From: pkong-ds <pkong.work@gmail.com>
Date: Fri, 24 May 2024 22:05:46 +0800
Subject: [PATCH] Style device list item

---
 src/pages/type/[type].astro |  9 ++++-----
 src/styles/device.css       | 27 +++++++++++++++++++++------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/pages/type/[type].astro b/src/pages/type/[type].astro
index 3cff419..6587cca 100644
--- a/src/pages/type/[type].astro
+++ b/src/pages/type/[type].astro
@@ -129,26 +129,24 @@ const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
     </ul>
   </section>
   <section class="select-device">
-    <header class="select-device__header">
-      <h2 class="select-device__heading">SELECT DEVICE</h2>
-    </header>
     <ul class="device-section-list">
       {
         Object.keys(brandDeviceList).map((b: string) => {
           const brand = BrandEnum.parse(b);
           const devices = brandDeviceList[brand];
-          console.log(devices)
           if (devices == null || devices.length === 0) {
             return <></>
           }
           return (
             <li class="device-section-list__item" data-device-id={b}>
               <section id={b} class="device-section">
-                <h3 class="device-section__device-name">{b}</h3>
+                <h3 class="device-section__brand-name">{brand.toUpperCase()}</h3>
                 {
                   <ul class="device-grid-list">
                     {/* FIXME: Remove background color for debugging */}
                     {devices.map((deviceDetail: Device) => (
+                      <div class="device-grid-container">
+                      <h3 class="device-grid-container-header">{deviceDetail.name}</p>
                       <li
                         class="device-grid"
                         style={{ backgroundColor: deviceDetail.color.hexcode }}
@@ -196,6 +194,7 @@ const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
                           </div>
                         </a>
                       </li>
+                      </div>
                     ))}
                   </ul>
                 }
diff --git a/src/styles/device.css b/src/styles/device.css
index 8d8f7cf..5f622cc 100644
--- a/src/styles/device.css
+++ b/src/styles/device.css
@@ -107,7 +107,7 @@
 }
 
 .select-device {
-  padding: 50px 20px 40px 20px;
+  padding: 50px 20px 50px 20px;
   background-color: rgba(0, 0, 0, 0.06);
 }
 @media (min-width: 992px) {
@@ -339,7 +339,7 @@
 
 .device-section-list {
   list-style: none;
-  margin: 40px 0 0 0;
+  margin: 0 0 0 0;
   padding: 0;
 }
 
@@ -351,14 +351,19 @@
   margin: 10px 0 0 0;
 }
 
+.device-section-list__item {
+  margin-bottom: 100px;
+}
+
 .device-section {
   scroll-margin-top: 80px;
 }
 
-.device-section__device-name {
+.device-section__brand-name {
   color: var(--gray-1);
-  font-size: 18px;
-  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 30px 0;
 }
 
 .device-grid-list {
@@ -369,11 +374,21 @@
   padding: 0;
 }
 
+.device-grid-container {
+  margin: 20px 0 0 10px;
+}
+
+.device-grid-container-header {
+  color: var(--gray-1);
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 20px 0;
+}
+
 .device-grid {
   position: relative;
   height: 160px;
   width: 160px;
-  margin: 10px 0 0 10px;
   background-color: var(--white);
   border: 1px solid var(--gray-5);
   box-sizing: border-box;