feat(directory): updated icon style

directory/index.html

@@ -37,26 +37,20 @@
       border-top: 0.3rem solid;
       transform: translateY(-0.3rem) rotate(-45deg);
       animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+      box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0);
+      border-color: rgba(54, 0, 0, 87%);
     }
 
     @media (prefers-color-scheme: dark) {
       .loader {
         background-color: #131313;
       }
-
-      .loader .icon {
-        border-color: rgba(255, 255, 255, 87%);
-      }
     }
 
     @media (prefers-color-scheme: light) {
       .loader {
         background-color: #ececec;
       }
-
-      .loader .icon {
-        border-color: rgba(0, 0, 0, 87%);
-      }
     }
 
     @keyframes icon-flash {

directory/src/component/dropdown.jsx

@@ -19,7 +19,7 @@ export default function Dropdown(props) {
           onClick={() => toggleDropdown()}
         >
           <span className={classes.content}>{props.text}</span>
-          <span className={classes.icon}></span>
+          <span className={classes.icon} style={props.iconStyle}></span>
           <section
             className={classes.popup}
           >
@@ -89,4 +89,5 @@ Dropdown.propTypes = {
   activeColor: PropTypes.object,
   activeRule: PropTypes.func,
   altText: PropTypes.string,
+  iconStyle: PropTypes.object,
 };

directory/src/routes/Root.jsx

@@ -296,6 +296,9 @@ function HeaderButton() {
             navigate(item.value)
           }}
           className={classes['fast-navigate']}
+          iconStyle={{
+            borderWidth: '0.1em',
+          }}
         />
       </Border>
     )