From f2ed09861e1b2e502de31fed9e4221d723ad97bb Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Wed, 21 Aug 2024 18:49:26 +0200
Subject: [PATCH] web: modify theming and add info to landing page

---
 web/explorer/src/components/UploadOptions.vue | 102 ++++++++----------
 web/explorer/src/main.js                      |  17 +--
 2 files changed, 47 insertions(+), 72 deletions(-)

diff --git a/web/explorer/src/components/UploadOptions.vue b/web/explorer/src/components/UploadOptions.vue
index 2127c24d..962cd320 100644
--- a/web/explorer/src/components/UploadOptions.vue
+++ b/web/explorer/src/components/UploadOptions.vue
@@ -1,70 +1,58 @@
 <template>
-    <Card>
-        <template #content>
-            <div class="flex flex-wrap align-items-center justify-content-center gap-3">
-                <div class="flex-grow-1 flex align-items-center justify-content-center">
-                    <FileUpload
-                        mode="basic"
-                        name="model[]"
-                        accept=".json,.gz"
-                        :max-file-size="10000000"
-                        :auto="true"
-                        :custom-upload="true"
-                        choose-label="Upload from local"
-                        @uploader="$emit('load-from-local', $event)"
-                    />
-                </div>
+    <div class="flex flex-wrap align-items-center justify-content-center gap-3">
+        <div class="flex-grow-1 flex align-items-center justify-content-center">
+            <FileUpload
+                mode="basic"
+                name="model[]"
+                accept=".json,.gz"
+                :max-file-size="10000000"
+                :auto="true"
+                :custom-upload="true"
+                choose-label="Upload from local"
+                @uploader="$emit('load-from-local', $event)"
+            />
+        </div>
 
-                <Divider layout="vertical" class="hidden-mobile">
-                    <b>OR</b>
-                </Divider>
-                <Divider layout="horizontal" class="visible-mobile" align="center">
-                    <b>OR</b>
-                </Divider>
+        <div class="hidden-mobile">
+            <b>OR</b>
+        </div>
+        <Divider layout="horizontal" class="visible-mobile" align="center">
+            <b>OR</b>
+        </Divider>
+        <div class="flex-grow-1 flex align-items-center justify-content-center gap-2">
+            <FloatLabel>
+                <InputText id="url" type="text" v-model="loadURL" />
+                <label for="url">Load from URL</label>
+            </FloatLabel>
+            <Button icon="pi pi-arrow-right" @click="$emit('load-from-url', loadURL)" :disabled="!loadURL" />
+        </div>
+        <template v-if="!isBundle">
+            <div class="hidden-mobile">
+                <b>OR</b>
+            </div>
+            <Divider layout="horizontal" class="visible-mobile" align="center">
+                <b>OR</b>
+            </Divider>
+            <div class="flex-grow-1 flex align-items-center justify-content-center">
+                <Button label="Preview Static" @click="router.push({ path: '/', query: { rdoc: staticURL } })" />
+            </div>
 
-                <div class="flex-grow-1 flex align-items-center justify-content-center gap-2">
-                    <FloatLabel>
-                        <InputText id="url" type="text" v-model="loadURL" />
-                        <label for="url">Load from URL</label>
-                    </FloatLabel>
-                    <Button icon="pi pi-arrow-right" @click="$emit('load-from-url', loadURL)" :disabled="!loadURL" />
-                </div>
-                <template v-if="!isBundle">
-                    <Divider layout="vertical" class="hidden-mobile">
-                        <b>OR</b>
-                    </Divider>
-                    <Divider layout="horizontal" class="visible-mobile" align="center">
-                        <b>OR</b>
-                    </Divider>
+            <div class="hidden-mobile">
+                <b>OR</b>
+            </div>
+            <Divider layout="horizontal" class="visible-mobile" align="center">
+                <b>OR</b>
+            </Divider>
 
-                    <div class="flex-grow-1 flex align-items-center justify-content-center">
-                        <Button
-                            label="Preview Static"
-                            @click="router.push({ path: '/', query: { rdoc: staticURL } })"
-                        />
-                    </div>
-
-                    <Divider layout="vertical" class="hidden-mobile">
-                        <b>OR</b>
-                    </Divider>
-                    <Divider layout="horizontal" class="visible-mobile" align="center">
-                        <b>OR</b>
-                    </Divider>
-                    <div class="flex-grow-1 flex align-items-center justify-content-center">
-                        <Button
-                            label="Preview Dynamic"
-                            @click="router.push({ path: '/', query: { rdoc: dynamicURL } })"
-                        />
-                    </div>
-                </template>
+            <div class="flex-grow-1 flex align-items-center justify-content-center">
+                <Button label="Preview Dynamic" @click="router.push({ path: '/', query: { rdoc: dynamicURL } })" />
             </div>
         </template>
-    </Card>
+    </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import Card from "primevue/card";
 import FileUpload from "primevue/fileupload";
 import Divider from "primevue/divider";
 import FloatLabel from "primevue/floatlabel";
diff --git a/web/explorer/src/main.js b/web/explorer/src/main.js
index 0e0cd00d..bf3db802 100644
--- a/web/explorer/src/main.js
+++ b/web/explorer/src/main.js
@@ -30,26 +30,13 @@ import { definePreset } from "@primevue/themes";
 
 const Noir = definePreset(Aura, {
     semantic: {
-        primary: {
-            50: "{zinc.50}",
-            100: "{zinc.100}",
-            200: "{zinc.200}",
-            300: "{zinc.300}",
-            400: "{zinc.400}",
-            500: "{zinc.500}",
-            600: "{zinc.600}",
-            700: "{zinc.700}",
-            800: "{zinc.800}",
-            900: "{zinc.900}",
-            950: "{zinc.950}"
-        },
         colorScheme: {
             light: {
                 primary: {
                     color: "{slate.800}",
                     inverseColor: "#ffffff",
-                    hoverColor: "{zinc.900}",
-                    activeColor: "{zinc.800}"
+                    hoverColor: "{sky.800}",
+                    activeColor: "{sky.800}"
                 }
             }
         }