small modif to be able to applied style to dropdown component

src-tauri/src/main.rs

@@ -1,9 +1,6 @@
-// Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 use axum::http::{HeaderValue, Method};
 use axum::Router;
-
 use log::{debug, trace};
 use magic_eye::server::server_config::{
     __cmd__get_server_config_options, get_server_config_options,
@@ -22,23 +19,24 @@ use tower_http::cors::CorsLayer;
 use tower_http::services::ServeDir;
 use utils::config::create_configuartion_file_setting;
 use utils::os_setup_and_info::setup_wayland;
+
 const PORT: u16 = 16780;
 
-#[tokio::main]
+#[tokio::main(worker_threads = 4)]
 async fn main() -> Result<(), Box<dyn std::error::Error>> {
-    #[cfg(target_os = "linux")]
+    // Reuse resources that don't depend on the target OS
     create_configuartion_file_setting();
+    #[cfg(target_os = "linux")]
     setup_wayland();
 
-    #[cfg(target_os = "windows")]
-    create_configuartion_file_setting();
     trace!("config directory location: {:?}", get_config_dir());
     debug!(
         "{:?}",
         tauri::api::path::app_log_dir(&tauri::Config::default())
             .unwrap()
             .to_str()
     );
+
     let context = tauri::generate_context!();
     let builder = tauri::Builder::default().plugin(
         tauri_plugin_log::Builder::default()

src/components/dropdowns/dropdown.tsx

@@ -2,20 +2,21 @@ import { useState } from "react";
 import { RxCaretDown, RxCaretUp } from "react-icons/rx";
 import { IDropdown } from "../../interfaces/IDropdown";
 
-function Dropdown({ options, value, onChange }: IDropdown) {
+function Dropdown({ options, value, onChange, className }: IDropdown) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
 
+  // Define the default class and allow it to be overridden by the parent
+  const dropdownClass =
+    "appearance-none py-2 pl-2 pr-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 " +
+    className;
+
   return (
-    <div className="relative mx-2 inline-block">
-      <select
-        className="appearance-none py-2 pl-2 pr-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-        value={value}
-        onChange={onChange}
-      >
+    <div className="relative mx-2  inline-block">
+      <select className={dropdownClass} value={value} onChange={onChange}>
         {options.map((option, index) => (
           <option
             onClick={toggleDropdown}

src/interfaces/IDropdown.ts

@@ -5,4 +5,5 @@ export interface IDropdown {
   options: (string | number)[];
   value: string | number;
   onChange: Event;
+  className?: string;
 }

src/interfaces/ISetting.ts

@@ -1,4 +1,3 @@
 export interface ISetting {
-  theme: string;
   placeholder: string;
 }

src/views/appSetting/appSetting.tsx

@@ -62,7 +62,6 @@ export default function GeneralSetting() {
   };
 
   const [tmpConf, setTmpConf] = useState<ISetting>({
-    theme: "",
     placeholder: ""
   });
   const [error, setError] = useState<string | null>(null);

src/views/serverSetting/LoggingSetting.tsx

@@ -50,42 +50,35 @@ export default function LoggingSetting({ settings, onSave }) {
               <h2 className="flex justify-center items-center text-center font-bold text-3xl">
                 Logging Settings
               </h2>
-              <div className="flex justify-between flex-col text-justify  items-center my-4 flex-1">
-                <label className="flex text-justify items-center">
-                  Log Level:
-                  <div className="mx-2">
-                    <Dropdown
-                      options={logLevels}
-                      value={logLevel}
-                      onChange={handleLogLevelChange}
-                    />
-                  </div>
-                </label>
-              </div>
-              <div className="flex justify-between flex-col text-justify  items-center my-4 flex-1">
-                <label className="flex text-justify items-center">
-                  Log Destinations:
+              <div className="flex flex-col my-4">
+                <div className="flex my-4   items-center">
+                  <label className="mr-2 text-left">Log Level:</label>
+                  <Dropdown
+                    options={logLevels}
+                    value={logLevel}
+                    onChange={handleLogLevelChange}
+                  />
+                </div>
+                <div className="flex my-4 items-center">
+                  <label className="text-left  mr-2">Log Destinations:</label>
                   <input
                     type="text"
-                    className="appearance-none   border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2 "
+                    className="appearance-none border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                     value={logDestinations}
                     onChange={handleLogDestinationsChange}
                   />
-                </label>
-              </div>
-              <div className="flex justify-between flex-col text-justify  items-center my-4 flex-1">
-                <label className="flex text-justify items-center">
-                  Log file:
+                </div>
+                <div className="flex my-4 items-center">
+                  <label className="mr-2 text-left">Log file:</label>
                   <input
                     type="text"
-                    className="appearance-none   border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2 "
+                    className="appearance-none border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                     value={logFile}
                     onChange={handleLogFileChange}
                   />
-                </label>
+                </div>
               </div>
-
-              <div className="absolute  mt-auto bottom-0 right-0 mb-4 flex justify-end items-center">
+              <div className="absolute mt-auto bottom-0 right-0 mb-4 flex justify-end items-center">
                 <button
                   type="button"
                   className="dark:text-text-dark text-text-light bg-accent-color1-700 hover:bg-accent-color1-800 ml-4 font-bold py-2 px-4 rounded"