From 35858b37420d48ed40ebb05c86fa92910fb81a70 Mon Sep 17 00:00:00 2001
From: Petr Gadorek <petr.gadorek@espressif.com>
Date: Wed, 20 Nov 2024 14:34:32 +0100
Subject: [PATCH] othe minor css tweeks

---
 src/assets/main.css                           | 10 ++++++++
 src/components/GlobalProgress.vue             |  4 ++--
 src/components/LoadConfig.vue                 |  7 ++++--
 src/components/WizardStep.vue                 | 24 ++++++++-----------
 .../wizard_steps/InstallationPathSelect.vue   |  4 ++--
 .../wizard_steps/PrerequisitiesCheck.vue      | 15 ++++++++----
 src/components/wizard_steps/TargetSelect.vue  | 10 ++++----
 7 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 8d3b21e..9105489 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -33,6 +33,16 @@ body {
 }
 
 .wizard-container {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+  text-align: center;
+}
+
+.wizard-step-container {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
diff --git a/src/components/GlobalProgress.vue b/src/components/GlobalProgress.vue
index 09c65c2..6cc40ae 100644
--- a/src/components/GlobalProgress.vue
+++ b/src/components/GlobalProgress.vue
@@ -3,8 +3,8 @@
     <div class="progress-container" v-if="display_progress">
       <div class="progress-content">
         <span class="progress-message">{{ message }}</span>
-        <n-progress type="line" :status="status" :percentage="percentage" :height="36" :show-indicator="true"
-          indicator-placement="inside" class="progress-bar" processing>
+        <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>
diff --git a/src/components/LoadConfig.vue b/src/components/LoadConfig.vue
index 593e336..96ff97b 100644
--- a/src/components/LoadConfig.vue
+++ b/src/components/LoadConfig.vue
@@ -88,6 +88,9 @@ export default {
   padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
 }
 
 .title {
@@ -98,7 +101,7 @@ export default {
 }
 
 .content-split {
-  height: 500px;
+  height: 550px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -110,7 +113,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: top;
 }
 
 .option-content {
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
index 32a6547..f057bdc 100644
--- a/src/components/WizardStep.vue
+++ b/src/components/WizardStep.vue
@@ -1,19 +1,15 @@
 <template>
   <div class="wizard-container">
-    <h2>Step {{ currentStep }}: {{ stepTitle }}</h2>
-    <PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
-    <PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
-    <TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
-    <VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
-    <MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
-    <InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
-    <InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
-    <Complete v-if="currentStep === 8" />
-    <div>
-      <!-- <n-button @click="previousStep" :disabled="currentStep === 1">Previous</n-button>
-      <n-button @click="nextStep" :disabled="currentStep === totalSteps" type="primary">
-        {{ currentStep === totalSteps ? 'Finish' : 'Next' }}
-      </n-button> -->
+    <div class="wizard-step-container">
+      <!-- <h2>Step {{ currentStep }}: {{ stepTitle }}</h2> -->
+      <PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
+      <PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
+      <TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
+      <VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
+      <MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
+      <InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
+      <InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
+      <Complete v-if="currentStep === 8" />
     </div>
   </div>
 </template>
diff --git a/src/components/wizard_steps/InstallationPathSelect.vue b/src/components/wizard_steps/InstallationPathSelect.vue
index 3dd33ce..2d045da 100644
--- a/src/components/wizard_steps/InstallationPathSelect.vue
+++ b/src/components/wizard_steps/InstallationPathSelect.vue
@@ -9,7 +9,7 @@
           <p class="info-desc">Choose where to install ESP-IDF and its tools. Ensure you have sufficient disk space.</p>
         </div>
 
-        <div class="space-required">
+        <!-- <div class="space-required">
           <div class="space-icon">
             <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -20,7 +20,7 @@
             <span class="space-label">Required Space:</span>
             <span class="space-value">2.5 GB TODO: add some real value</span>
           </div>
-        </div>
+        </div> -->
 
         <div class="path-input">
           <n-input-group>
diff --git a/src/components/wizard_steps/PrerequisitiesCheck.vue b/src/components/wizard_steps/PrerequisitiesCheck.vue
index c7f99cc..3647a18 100644
--- a/src/components/wizard_steps/PrerequisitiesCheck.vue
+++ b/src/components/wizard_steps/PrerequisitiesCheck.vue
@@ -8,9 +8,7 @@
         <template #header>
           <div class="card-header">
             <span class="header-title">Required Prerequisites</span>
-            <n-button @click="check_prerequisites" type="error" :loading="loading">
-              {{ loading ? 'Checking...' : 'Check Prerequisites' }}
-            </n-button>
+
           </div>
         </template>
 
@@ -23,7 +21,11 @@
             </li>
           </ul>
         </n-spin>
+
       </n-card>
+      <n-button @click="check_prerequisites" type="error" :loading="loading">
+        {{ loading ? 'Checking...' : 'Check Prerequisites' }}
+      </n-button>
 
       <!-- Results Section -->
       <div v-if="did_the_check_run" class="results-section">
@@ -126,8 +128,11 @@ export default {
 <style scoped>
 .prerequisites {
   padding: 2rem;
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 
 .title {
@@ -153,7 +158,7 @@ export default {
 
 .card-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 }
 
diff --git a/src/components/wizard_steps/TargetSelect.vue b/src/components/wizard_steps/TargetSelect.vue
index b82f208..7adc387 100644
--- a/src/components/wizard_steps/TargetSelect.vue
+++ b/src/components/wizard_steps/TargetSelect.vue
@@ -107,18 +107,18 @@ export default {
 
 .selection-card {
   background: white;
-  padding: 1rem;
+  padding: 0.001rem;
 }
 
 .targets-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
+  gap: 0.3rem;
+  margin-bottom: 0.5rem;
 }
 
 .target-item {
-  padding: 1rem;
+  padding: 0.5rem;
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;
   cursor: pointer;
@@ -138,7 +138,7 @@ export default {
 .target-content {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0rem;
 }
 
 .target-name {