UX-revamp

package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-log": "~2",
     "@tauri-apps/plugin-shell": ">=2.0.0",
+    "@vicons/antd": "^0.13.0",
     "naive-ui": "^2.39.0",
     "pinia": "^2.2.2",
     "vue": "^3.3.4",

src-tauri/src/lib.rs

@@ -267,7 +267,7 @@ async fn get_available_targets(app_handle: AppHandle) -> Vec<Value> {
     let mut available_targets = idf_im_lib::idf_versions::get_avalible_targets()
         .await
         .unwrap();
-    available_targets.insert(0, "all".to_string());
+    // available_targets.insert(0, "all".to_string());
     available_targets
         .into_iter()
         .map(|t| {
@@ -780,7 +780,7 @@ async fn setup_tools(
                 send_tools_message(app_handle, filename.to_string(), "match".to_string());
             }
             _ => {
-                error!(
+                debug!(
                     "Checksum verification failed or file does not exists: {}",
                     full_path_str
                 );

src/App.vue

@@ -2,12 +2,10 @@
   <div class="installer">
     <!-- Header -->
     <header class="header">
+      <img src="./assets/Espressif_White_Logo_EN_Horizontal.svg" alt="ESP-IDF Logo" />
       <h2>ESP-IDF Installation Manager</h2>
-      <img src="./assets/espressif_logo_white.svg" alt="ESP-IDF Logo" />
     </header>
     <router-view></router-view>
-    <message-display />
-    <global-progress />
     <!-- Footer -->
     <footer class="footer">
       ESP-IDF Installation Manager {{ appVersion }}
@@ -19,8 +17,6 @@
 import { NConfigProvider, NLayout, NLayoutHeader, NLayoutContent, useOsTheme } from 'naive-ui'
 import { darkTheme } from 'naive-ui'
 import { ref, onMounted } from 'vue'
-import MessageDisplay from './components/MessageDisplay.vue'
-import GlobalProgress from './components/GlobalProgress.vue'
 import { attachConsole } from '@tauri-apps/plugin-log'
 import { getVersion } from '@tauri-apps/api/app';
 

src/assets/main.css

@@ -3,12 +3,49 @@
   --text-color: #333333;
   --primary-color: #f0f0f0;
   --secondary-color: #5AC8FA;
+  --espressif-red-color: #E8362D;
   --border-color: #d1d1d1;
   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
+@font-face {
+  font-family: 'Trueno-bold';
+  src: url('./trueno/TruenoBd.otf') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trueno-regular';
+  src: url('./trueno/TruenoRg.otf') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trueno-light';
+  src: url('./trueno/TruenoLt.otf') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+}
+.n-result .n-result-icon .n-base-icon {
+  color: #1290d8;
+}
+.n-checkbox.n-checkbox--checked .n-checkbox-box,
+.n-checkbox.n-checkbox--indeterminate .n-checkbox-box {
+  background-color: #1290d8;
+}
+.n-button {
+  background-color: var(--espressif-red-color)
+}
+.n-card {
+  border: none;
+}
+.n-radio .n-radio__dot {
+  display: none;
+}
 body {
-  font-family: var(--font-family);
+  font-family: 'Trueno-regular', var(--font-family);
   background-color: var(--background-color);
   color: var(--text-color);
   margin: 0;
@@ -34,6 +71,8 @@ body {
 
 .wizard-container {
   padding: 2rem;
+  padding-top: 0px;
+  padding-bottom: 0px;
   max-width: 1200px;
   margin: 0 auto;
   align-items: center;
@@ -43,9 +82,6 @@ body {
 }
 
 .wizard-step-container {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 20px;
   max-width: 1024px;
   margin: 0 auto;
@@ -105,20 +141,14 @@ h2 {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background-color: #f5f5f5;
 }
 
 .header {
-  background-color: #e7352c;
-  color: white;
-  padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.header {
-  background-color: #e7352c;
+  background-color: var(--espressif-red-color);
   color: white;
   padding: 1rem;
+  padding-left: 80px;
+  padding-right: 80px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: space-between;
@@ -137,12 +167,20 @@ h2 {
   font-size: 1.25rem;
 }
 
+#app {
+  background-color: #f5f5f5;
+  background-image: url('./bg.png');
+  background-size: cover;
+  background-position: center;
+}
+
 .main-content {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
+
 }
 
 .welcome-card {
@@ -184,7 +222,7 @@ h2 {
 
 .feature-icon {
   background-color: #fee2e2;
-  color: #e7352c;
+  color: var(--espressif-red-color);
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -204,4 +242,39 @@ h2 {
   text-align: center;
   color: #6b7280;
   font-size: 0.875rem;
+}
+
+.title {
+  font-size: 27px;
+  font-family: 'Trueno-bold', sans-serif;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.complete-result .n-base-icon svg {
+  margin-top: 15px;
+  width: 60px;
+  text-align: center;
+  align-content: center;
+}
+
+.simple_install_result_positive .n-base-icon svg {
+  margin-top: 15px;
+  width: 60px;
+  text-align: center;
+  align-content: center;
+}
+
+.status-message .n-base-icon svg {
+  color: var(--espressif-red-color);
+  margin-top: 15px;
+  width: 60px;
+  text-align: center;
+  align-content: center;
+}
+
+.status-message .n-button--ghost {
+  background-color: white;
+  border-color: var(--espressif-red-color);
+  color: black;
 }

src/components/GlobalProgress.vue

@@ -1,17 +1,17 @@
 <template>
-  <transition name="slide">
-    <div class="progress-container" v-if="display_progress">
-      <div class="progress-content">
-        <span class="progress-message">{{ message }}</span>
-        <n-progress type="line" :color="themeVars.errorColor" :status="status" :percentage="percentage" :height="36"
-          :show-indicator="true" indicator-placement="inside" class="progress-bar" processing>
-          <template #indicator>
-            {{ percentage }}%
-          </template>
-        </n-progress>
-      </div>
+  <div class="progress-container">
+    <div class="progress-content">
+      <span v-if="messagePosition === 'left'" class="progress-message">{{ message }}</span>
+      <n-progress type="line" color="#E8362D" :status="status" :percentage="percentage" :height="16"
+        :show-indicator="false" class="progress-bar" processing v-if="message.length > 0">
+        <template #indicator>
+          {{ percentage }}%
+        </template>
+      </n-progress>
+      <n-spin size="small" v-else stroke="#E8362D" />
+      <span v-if="messagePosition === 'right'" class="progress-message">{{ message }}</span>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -23,6 +23,13 @@ import { useThemeVars } from "naive-ui";
 export default {
   name: 'GlobalProgress',
   components: { NProgress },
+  props: {
+    messagePosition: {
+      type: String,
+      default: 'left',
+      validator: (value) => ['left', 'right'].includes(value)
+    }
+  },
   data: () => ({
     percentage: "0",
     status: "info",
@@ -41,7 +48,6 @@ export default {
         this.status = event.payload.status;
         this.percentage = event.payload.percentage;
         this.display_progress = event.payload.display;
-
       })
     }
   },
@@ -59,26 +65,29 @@ export default {
 
 <style scoped>
 .progress-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(4px);
-  z-index: 999;
-  padding: 1rem;
+  width: 75%;
+  margin: auto;
 }
 
 .progress-content {
-  max-width: 800px;
-  margin: 0 auto;
+  display: flex;
+  vertical-align: middle;
+  justify-content: center;
+}
+
+.n-progress {
+  width: 50%;
+  margin-top: 6px;
+  margin-right: 6px;
+  ;
 }
 
 .progress-message {
   display: block;
-  color: white;
   font-size: 1rem;
   font-weight: 500;
+  margin-right: 5px;
+  margin-left: 5px;
   margin-bottom: 0.75rem;
   text-align: center;
 }