Add new SVG icons for Espressif and Nordic, and update GPS icon

- Added a new SVG file for Espressif logo in `static/img/features/espressif.svg`.
- Updated the GPS icon in `static/img/features/gps.svg` to a new design.
- Added a new SVG file for Nordic logo in `static/img/features/nordic.svg`.

Author: chihosin

components/Flasher/index.jsx

@@ -281,6 +281,26 @@ const ReleaseGrid = ({
               {fsFirmwares[firmware].name}
             </h3>
           </div>
+          <div className={styles.iconSelectorNoClose}>
+            <select
+              id={"pkg-selector"}
+              value=""
+              onChange={async (e) => {
+                const pkgType = e.target.value;
+                if (!pkgType) return;
+                await onPkgDownload(selectedRelease, pkgType);
+              }}
+            >
+              <option value="" disabled>
+                Download
+              </option>
+              {packages.map((f_type, idx) => (
+                <option key={idx} value={f_type}>
+                  {f_type}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
 
         <div className={styles.containerContent}>
@@ -290,14 +310,18 @@ const ReleaseGrid = ({
               {selectorOpts}
             </select>
           </div>
-          {selectedRelease.note ? (
-            <div>
-              <b>Release Note:</b>
+          <div>
+            <b>Release Note</b>
+            {selectedRelease.note ? (
               <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
                 {selectedRelease.note}
               </ReactMarkdown>
-            </div>
-          ) : null}
+            ) : (
+              <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+                *No release note available.*
+              </ReactMarkdown>
+            )}
+          </div>
         </div>
       </div>
 
@@ -346,27 +370,6 @@ const ReleaseGrid = ({
             </div>
           </button>
         </div>
-
-        <div className={styles.iconSelectorNoClose}>
-          <select
-            id={"pkg-selector"}
-            value=""
-            onChange={async (e) => {
-              const pkgType = e.target.value;
-              if (!pkgType) return;
-              await onPkgDownload(selectedRelease, pkgType);
-            }}
-          >
-            <option value="" disabled>
-              Download
-            </option>
-            {packages.map((f_type, idx) => (
-              <option key={idx} value={f_type}>
-                {f_type}
-              </option>
-            ))}
-          </select>
-        </div>
       </div>
     </div>
   );
@@ -470,9 +473,7 @@ const Flasher = () => {
 
       // const zipData = await response.blob();
 
-      setFlashStatus(
-        "Flashing...(Please make sure your device in DFU mode!!!)",
-      );
+      setFlashStatus("Flashing... (Please make sure your device in DFU mode)");
 
       const dfu = new Dfu(port, erase.current);
       await dfu.dfuUpdate(content, async (progress) => {

components/Flasher/styles.module.css

@@ -114,6 +114,7 @@
     border: unset;
     align-items: center;
     height: 2rem;
+    font-size: 20px;
   }
 
   button:not([class]):hover,
@@ -142,12 +143,12 @@
 }
 
 .containerContent {
-  background-color: var(--gray1);
+  /* background-color: var(--gray1); */
 }
 
 /* Common button style */
 .roundedButton {
-  display: inline-flex;
+  display: inherit;
   padding: 8px 16px;
   gap: 0.25rem;
   border-radius: var(--spacer-6);
@@ -161,10 +162,11 @@
     box-shadow 0.2s ease;
   font-weight: 600;
   position: relative;
-}
+  font-size: 15px;
 
-.roundedButton input {
-  margin: unset;
+  svg {
+    font-size: 15px;
+  }
 }
 
 .roundedButton:disabled,
@@ -182,7 +184,7 @@
 .iconSelectorFloatLabel {
   position: relative;
   display: inline-block;
-  width: 40%;
+  width: 50%;
 }
 
 .iconSelectorFloatLabel select {
@@ -359,7 +361,6 @@
 /* selector no close when chose option */
 .iconSelectorNoClose {
   position: relative;
-  width: 20%;
 
   > select {
     width: 100%;