From b14a1d5ef0729b35401af67574854d48d695d207 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Thu, 18 Jul 2024 16:36:08 -0300
Subject: [PATCH] Edit Mode: New layout implementation

---
 src/App.vue                            |  38 +-
 src/components/EditMenu.vue            | 775 +++++++++++++++++--------
 src/components/ExpansiblePanel.vue     |  47 +-
 src/components/widgets/VideoPlayer.vue |  13 +-
 4 files changed, 597 insertions(+), 276 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dc606e9e7..eef53b480 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -89,11 +89,11 @@
                   :icon-class="
                     interfaceStore.isOnSmallScreen
                       ? 'scale-[100%] -mb-[1px] md:ml-[2px]'
-                      : 'scale-[95%] -mb-[1px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
+                      : 'scale-[95%] -mb-[2px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
                   "
                   :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
                   :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
-                  :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
+                  :button-class="!simplifiedMainMenu ? '-mt-[5px]' : undefined"
                   :width="buttonSize"
                   :selected="showConfigurationMenu"
                   @click="mainMenuStep = 2"
@@ -178,14 +178,32 @@
 
       <teleport to="body">
         <v-dialog v-model="showMissionOptionsDialog" width="50%">
-          <v-card class="pa-2">
-            <v-card-title>Mission configuration</v-card-title>
+          <v-card class="pa-2 bg-[#20202022] backdrop-blur-2xl text-white rounded-lg">
+            <v-card-title class="flex justify-between">
+              <div />
+              <div>Mission configuration</div>
+              <v-btn
+                icon
+                :width="38"
+                :height="34"
+                variant="text"
+                class="bg-transparent -mt-1 -mr-3"
+                @click="showMissionOptionsDialog = false"
+              >
+                <v-icon
+                  :size="interfaceStore.isOnSmallScreen ? 22 : 26"
+                  :class="interfaceStore.isOnSmallScreen ? '-mr-[10px] -mt-[10px]' : '-mr-[2px]'"
+                  >mdi-close</v-icon
+                >
+              </v-btn>
+            </v-card-title>
             <v-card-text>
-              <div class="flex">
+              <div class="flex flex-col">
+                <p>Misison Name</p>
                 <v-text-field
                   v-model="store.missionName"
-                  label="Mission name"
                   append-inner-icon="mdi-restore"
+                  class="mt-1"
                   @click:append-inner="store.missionName = store.lastMissionName"
                 />
               </div>
@@ -199,12 +217,14 @@
           <div id="mainTopBar" class="bar top-bar">
             <button
               class="flex items-center justify-center h-full aspect-square top-bar-hamburger"
+              :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
               @click="toggleMainMenu"
             >
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
             <div
               class="flex items-center justify-start h-full px-4 ml-3 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
+              :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
               @click="showMissionOptionsDialog = true"
             >
               <div class="flex items-center overflow-hidden text-lg font-medium text-white whitespace-nowrap">
@@ -671,9 +691,9 @@ body.hide-cursor {
 }
 
 .main-view.edit-mode {
-  transform: scale(0.8);
-  right: -10%;
-  top: -10%;
+  transform: scale(0.78);
+  right: -11%;
+  top: -11%;
 }
 
 .swal2-container {
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 812cbd947..2aa123f0c 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -1,295 +1,504 @@
 <template>
-  <div class="w-full h-full bg-slate-600 z-[60]"></div>
   <div
-    class="relative flex flex-col justify-between px-1 text-white edit-panel left-panel"
+    v-if="editMode"
+    class="flex fixed top-[50px] left-[430px] bg-[#334a5755] border-[1px] border-[#ffffff25] text-[#FFFFFF] backdrop-blur-lg elevation-5 pr-4 rounded-full cursor-pointer hover:brightness-125 scale-90"
+    @click="() => emit('update:editMode', false)"
+  >
+    <v-btn icon="mdi-close" size="54" class="bg-[#334a5755] text-[#FFFFFFCC] text-[28px] rounded-full elevation-5" />
+    <div class="ml-2 mt-[7px] text-[26px]">Exit</div>
+  </div>
+  <div v-if="editMode" class="flex fixed top-0 left-0 h-[100vh] w-[22vw] bg-[#031C2B]" />
+  <div
+    class="relative flex flex-col justify-start overflow-y-auto text-white edit-panel left-panel"
     :class="{ active: editMode }"
   >
-    <div
-      class="absolute text-2xl transition-all cursor-pointer text-slate-500 aspect-square mdi mdi-close hover:text-slate-300 left-2 top-2"
-      @click="emit('update:editMode', false)"
-    />
-    <div class="flex items-center justify-center mt-10 text-xl font-semibold select-none">
-      <p>Edit interface</p>
-      <div
-        class="absolute !bg-slate-600 right-2 icon-btn mdi mdi-dots-vertical"
-        @click.stop="editMenuDialogRevealed = true"
-      />
-    </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
-      <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
-      <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
-        <TransitionGroup name="fade-and-suffle">
-          <div
-            v-for="profile in store.savedProfiles"
-            :key="profile.hash"
-            class="flex items-center justify-between w-full my-1"
+    <div class="flex justify-between items-center w-full bg-[#CBCBCB2A] relative">
+      <img :src="pickVehicleImage" alt="current-vehicle" class="m-1 p-1" width="60" height="60" />
+      <div class="flex justify-between relative">
+        <div class="flex text-start w-[230px]">
+          <v-btn
+            id="profile"
+            variant="text"
+            size="sm"
+            class="w-[230px]"
+            :class="isDialOpen ? 'bg-[#49697c] p-3 border-b-2 border-[#041e2e55]' : 'bg-[#273842]'"
+            @click="toggleDial"
           >
-            <Button
-              class="flex items-center justify-center w-full h-8 overflow-auto"
-              :class="{ 'selected-view': profile.hash === store.currentProfile.hash }"
-              @click="store.loadProfile(profile)"
-            >
-              <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ profile.name }}</p>
-              <div class="grow" />
-              <div class="icon-btn mdi mdi-download" @click.stop="store.exportProfile(profile)" />
-              <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateProfile(profile)" />
-              <div class="icon-btn mdi mdi-cog" @click.stop="renameProfile(profile)" />
-              <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteProfile(profile)" />
-            </Button>
-          </div>
-        </TransitionGroup>
-      </div>
-      <div class="flex mt-2">
-        <div class="icon-btn mdi mdi-plus" @click="addNewProfile" />
-        <div class="icon-btn">
-          <label class="flex items-center justify-center w-full h-full cursor-pointer">
-            <input type="file" accept="application/json" hidden @change="(e: Event) => store.importProfile(e)" />
-            <span class="mdi mdi-upload" />
-          </label>
+            <span class="wrapclass text-none text-lg max-w-[230px]">{{ store.currentProfile.name }} profile</span>
+          </v-btn>
+        </div>
+        <div v-if="isDialOpen" class="absolute flex justify-start flex-col top-full mt-[0px] bg-[#273842] z-10">
+          <v-btn
+            v-for="profile in store.savedProfiles.filter((p) => p.hash !== store.currentProfile.hash)"
+            :key="profile.hash"
+            variant="text"
+            size="lg"
+            class="max-w-[230px] bg-[#49697c] p-3 text-white border-b-2 border-[#041e2e55]"
+            @click="
+              () => {
+                store.loadProfile(profile)
+                toggleDial()
+                isPanelExpanded = false
+              }
+            "
+            ><span class="wrapclass max-w-[220px]">{{ profile.name }} profile</span>
+          </v-btn>
         </div>
-        <div
-          v-tooltip="'Export profiles to vehicle.'"
-          class="icon-btn mdi mdi-briefcase-upload"
-          @click="store.exportProfilesToVehicle"
-        />
-        <div
-          v-tooltip="'Import profiles from vehicle.'"
-          class="icon-btn mdi mdi-briefcase-download"
-          @click="store.importProfilesFromVehicle"
-        />
-        <div
-          v-tooltip="'Reset profiles to default configuration.'"
-          class="icon-btn mdi mdi-restore"
-          @click="resetSavedProfiles"
-        />
       </div>
+      <v-btn
+        id="select-profile"
+        icon="mdi-swap-horizontal"
+        class="bg-transparent -mr-5"
+        variant="text"
+        @click="toggleDial"
+      />
+      <v-menu offset-y theme="dark">
+        <template #activator="{ props: buttonProps }">
+          <v-btn icon="mdi-dots-vertical" size="xs" variant="text" class="text-md mr-2" v-bind="buttonProps" />
+        </template>
+        <v-list>
+          <div class="flex justify-center max-w-[250px] px-2 gap-x-[5px] pb-2">
+            <p class="whitespace-nowrap">Settings -</p>
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ store.currentProfile.name }}</p>
+          </div>
+
+          <v-divider />
+          <v-list-item @click.stop="store.exportProfile(store.currentProfile)">
+            <div class="flex w-full justify-between">
+              <v-list-item-title>Export</v-list-item-title>
+              <v-icon size="20">mdi-download</v-icon>
+            </div>
+          </v-list-item>
+          <v-list-item @click.stop="store.duplicateProfile(store.currentProfile)">
+            <div class="flex w-full justify-between">
+              <v-list-item-title>Duplicate</v-list-item-title>
+              <v-icon size="20">mdi-content-copy</v-icon>
+            </div>
+          </v-list-item>
+          <v-list-item @click.stop="renameProfile(store.currentProfile)">
+            <div class="flex w-full justify-between">
+              <v-list-item-title>Config & rename</v-list-item-title>
+              <v-icon size="20">mdi-cog</v-icon>
+            </div>
+          </v-list-item>
+          <v-list-item @click.stop="store.deleteProfile(store.currentProfile)">
+            <div class="flex w-full justify-between">
+              <v-list-item-title>Delete</v-list-item-title>
+              <v-icon size="20">mdi-trash-can</v-icon>
+            </div>
+          </v-list-item>
+          <v-divider class="mb-1" />
+          <div class="flex justify-center max-w-[250px] px-2 gap-x-[5px] pb-2 pt-1">
+            <p class="whitespace-nowrap">General profile settings</p>
+          </div>
+          <v-divider class="mb-1" />
+          <v-list-item @click="addNewProfile">
+            <div class="flex w-full justify-between mt-[6px]">
+              <v-list-item-title>Add new profile</v-list-item-title>
+              <v-icon size="22">mdi-plus</v-icon>
+            </div>
+          </v-list-item>
+          <v-list-item @click="resetSavedProfiles">
+            <div class="flex w-full justify-between mt-[6px]">
+              <v-list-item-title>Reset saved profiles</v-list-item-title>
+              <v-icon size="20" class="mt-[2px]">mdi-reload</v-icon>
+            </div>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div ref="viewsContainer" class="flex flex-col items-center justify-between w-full shrink overflow-y-clip h-[30%]">
-      <p class="mb-3 text-lg font-semibold select-none">Views</p>
-      <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
-        <TransitionGroup name="fade-and-suffle">
+    <v-divider class="opacity-20" />
+    <div class="flex flex-row justify-start relative items-center bg-[#CBCBCB2A] elevation-5">
+      <v-icon
+        size="26"
+        :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        class="ml-1 mr-[6px]"
+        @click="toggleViewsPanel"
+      />
+      <v-divider vertical />
+      <v-btn-toggle theme="dark" tile divided>
+        <v-btn
+          v-for="view in store.currentProfile.views"
+          :key="view.hash"
+          :class="view === store.currentView ? 'bg-[#3B78A8]' : 'bg-transparent'"
+          class="wrapclass w-[129px] text-none overflow-x-hidden"
+          @click="store.selectView(view)"
+        >
+          <span class="wrapclass max-w-[110px]">{{ view.name }}</span>
+        </v-btn>
+      </v-btn-toggle>
+      <v-badge
+        v-if="store.currentProfile.views.length > 3"
+        :content="`+${store.currentProfile.views.length - 3}`"
+        color="#ad1f83"
+        overlap
+        class="absolute right-4 top-[9px] mr-0 elevation-4 cursor-pointer elevation-3 scale-[85%]"
+        @click="toggleViewsPanel"
+      />
+    </div>
+    <div
+      ref="content"
+      class="bg-[#041e2e99]"
+      :class="['content-expand-collapse', { expanding: isPanelExpanded, collapsing: !isPanelExpanded }]"
+    >
+      <div class="h-full pt-1 bg-[#041e2e99]">
+        <VueDraggable v-model="store.currentProfile.views" :animation="150" group="ViewsGroup">
+          <div class="flex justify-center w-full bg-[#CBCBCB09]">
+            <div class="flex w-[350px] justify-center py-[2px]">
+              <p class="overflow-hidden text-[12px] text-ellipsis whitespace-nowrap opacity-60">
+                Views on {{ store.currentProfile.name }}
+              </p>
+            </div>
+          </div>
           <div
             v-for="view in store.currentProfile.views"
             :key="view.hash"
-            class="flex items-center justify-between w-full my-1"
+            class="flex items-center justify-center border-[1px] border-[#FFFFFF24] rounded-md mx-2 my-[3px] p-1 cursor-pointer"
+            :class="view === store.currentView ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+            @click="store.selectView(view)"
           >
-            <Button
-              class="flex items-center justify-center w-full h-8 overflow-auto"
-              :class="{ 'selected-view': view === store.currentView }"
-              @click="store.selectView(view)"
-            >
-              <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ view.name }}</p>
-              <div class="grow" />
-              <div
-                class="icon-btn mdi mdi-eye"
-                :class="{ 'mdi-eye-closed': !view.visible }"
-                @click.stop="toggleViewVisibility(view)"
-              />
-              <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
-              <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateView(view)" />
-              <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
-              <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
-            </Button>
+            <v-icon icon="mdi-drag" class="cursor-grab mr-1 -ml-[1px] opacity-40" />
+            <v-divider vertical />
+            <p class="overflow-hidden text-sm text-ellipsis ml-3 whitespace-nowrap">{{ view.name }}</p>
+            <div class="grow" />
+            <div
+              class="icon-btn mdi mdi-eye"
+              :class="{ 'mdi-eye-closed': !view.visible }"
+              @click.stop="toggleViewVisibility(view)"
+            />
+            <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
+            <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateView(view)" />
+            <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
+            <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
+          </div>
+          <div ref="managementContainer" class="flex items-end justify-end w-full gap-x-2 mt-2 mb-2 -ml-3 opacity-80">
+            <v-icon size="18" icon="mdi-plus-circle" @click="addNewView" />
+            <div>
+              <label class="flex items-center justify-center w-full h-full cursor-pointer">
+                <input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
+                <v-icon size="18" icon="mdi-upload" class />
+              </label>
+            </div>
           </div>
-        </TransitionGroup>
+        </VueDraggable>
       </div>
-      <div class="grow" />
     </div>
-    <div ref="managementContainer" class="flex items-center justify-center w-full px-2 mt-2">
-      <div class="icon-btn mdi mdi-plus" @click="addNewView" />
-      <div class="icon-btn">
-        <label class="flex items-center justify-center w-full h-full cursor-pointer">
-          <input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
-          <span class="mdi mdi-upload" />
-        </label>
+    <v-divider />
+    <div id="view-widgets-list" class="overflow-y-auto max-h-[88vh]">
+      <div class="flex justify-center w-full bg-[#CBCBCB09]">
+        <div class="flex w-[350px] justify-center py-2 text-md">
+          <p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-60">
+            Widgets on {{ store.currentView.name }}
+          </p>
+        </div>
       </div>
-      <div />
-    </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div
-      v-show="widgetMode === WidgetMode.RegularWidgets"
-      class="flex flex-col items-center justify-between w-full overflow-y-clip h-[35%]"
-    >
-      <p class="text-lg font-semibold select-none">
-        <span class="mr-1 text-slate-400 mdi mdi-swap-vertical" />
-        Current widgets
-      </p>
-      <div class="grow" />
-      <VueDraggable
-        v-model="store.currentView.widgets"
-        class="flex flex-col items-center w-full px-2 overflow-x-hidden overflow-y-auto grow"
-        :animation="150"
-        group="regularWidgetsGroup"
+      <ExpansiblePanel
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-bottom-divider
+        :is-expanded="store.currentView.widgets.length > 0"
       >
-        <TransitionGroup name="fade">
-          <div
-            v-for="widget in store.currentView.widgets"
-            :key="widget.hash"
-            class="flex items-center justify-between w-full my-1"
+        <template #title>
+          <div class="flex items-center text-md font-normal ml-2">
+            Main view area
+            <v-badge :content="store.currentView.widgets.length" color="#3B78A8" rounded="md" class="ml-10 mb-1" />
+          </div>
+        </template>
+        <template #content>
+          <VueDraggable
+            v-model="store.currentView.widgets"
+            class="flex flex-col items-center w-full px-2 overflow-x-hidden overflow-y-auto grow my-1"
+            :animation="150"
+            group="regularWidgetsGroup"
           >
-            <Button
-              class="flex items-center justify-center w-full h-8 pl-3 overflow-auto cursor-grab active:cursor-grabbing"
-              :class="{ '!bg-slate-400': store.widgetManagerVars(widget.hash).highlighted }"
-              @mouseover="store.widgetManagerVars(widget.hash).highlighted = true"
-              @mouseleave="store.widgetManagerVars(widget.hash).highlighted = false"
-            >
-              <span class="mr-3 text-base text-slate-700">⠿</span>
-              <p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
-              <div class="grow" />
+            <TransitionGroup name="fade">
               <div
-                class="icon-btn mdi mdi-fullscreen"
-                :class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
-                @click="store.toggleFullScreen(widget)"
-              />
-              <div class="icon-btn mdi mdi-cog" @click="store.widgetManagerVars(widget.hash).configMenuOpen = true" />
-              <div class="icon-btn mdi mdi-trash-can" @click="store.deleteWidget(widget)" />
-            </Button>
-          </div>
-        </TransitionGroup>
-      </VueDraggable>
-      <div class="grow" />
-    </div>
-    <div
-      v-show="widgetMode === WidgetMode.MiniWidgets"
-      class="flex flex-col items-center justify-between w-full overflow-y-auto h-[35%]"
-    >
-      <p class="text-lg font-semibold select-none">Current mini-widgets</p>
-      <div class="grow" />
-      <div
-        v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
-        :key="miniWidgetContainer.name"
-        class="w-full"
+                v-for="widget in store.currentView.widgets"
+                :key="widget.hash"
+                class="flex items-center justify-between w-full"
+              >
+                <div
+                  class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md mx-2 my-[3px] p-1 cursor-pointer"
+                  :class="store.widgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                  @mouseover="store.widgetManagerVars(widget.hash).highlighted = true"
+                  @mouseleave="store.widgetManagerVars(widget.hash).highlighted = false"
+                >
+                  <v-icon icon="mdi-drag" class="cursor-grab mr-1 -ml-[1px] opacity-40" />
+                  <v-divider vertical />
+                  <p class="ml-3 overflow-hidden text-sm text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
+                  <div class="grow" />
+                  <v-divider vertical class="opacity-10 mr-[2px]" />
+                  <div
+                    class="icon-btn mdi mdi-fullscreen"
+                    :class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
+                    @click="store.toggleFullScreen(widget)"
+                  />
+                  <div
+                    class="icon-btn mdi mdi-cog"
+                    @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
+                  />
+                  <div class="icon-btn mdi mdi-trash-can" @click="store.deleteWidget(widget)" />
+                </div>
+              </div>
+            </TransitionGroup>
+          </VueDraggable>
+        </template>
+      </ExpansiblePanel>
+      <ExpansiblePanel
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-bottom-divider
+        :is-expanded="store.miniWidgetContainersInCurrentView.length > 0"
       >
-        <span class="w-full px-1 text-sm text-left select-none text-slate-400">{{ miniWidgetContainer.name }}</span>
-        <div class="flex flex-col items-center w-full px-3 overflow-x-hidden grow">
-          <TransitionGroup name="fade">
-            <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full my-1">
-              ---
+        <template #title>
+          <div class="flex items-center text-md font-normal ml-2">
+            Top Bar
+            <v-badge
+              :content="
+                store.miniWidgetContainersInCurrentView.reduce((count, container) => {
+                  return count + (container.name.startsWith('Top') ? container.widgets.length : 0)
+                }, 0)
+              "
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 mb-1"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div
+            v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
+            :key="miniWidgetContainer.name"
+            class="w-full mb-1"
+          >
+            <div v-if="miniWidgetContainer.name.startsWith('Top')">
+              <span class="w-full px-1 text-sm text-left select-none text-slate-400">{{
+                miniWidgetContainer.name
+              }}</span>
+              <div class="flex flex-col items-center w-full px-3 overflow-x-hidden grow">
+                <TransitionGroup name="fade">
+                  <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full">
+                    ---
+                  </div>
+                  <div
+                    v-for="widget in miniWidgetContainer.widgets"
+                    :key="widget.hash"
+                    class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md mx-2 my-[3px] p-1 cursor-pointer"
+                    :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                    @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                    @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                  >
+                    <div class="flex items-center justify-start w-full overflow-auto">
+                      <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap text-sm ml-3">
+                        {{ widget.name || widget.component }}
+                      </p>
+                    </div>
+                    <v-divider vertical class="opacity-10 mr-1" />
+                    <div class="icon-btn mdi mdi-cog" @click="widget.managerVars.configMenuOpen = true" />
+                    <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                  </div>
+                </TransitionGroup>
+              </div>
             </div>
-            <div
-              v-for="widget in miniWidgetContainer.widgets"
-              :key="widget.hash"
-              class="flex items-center justify-between w-full h-10 px-2 py-1 my-1 rounded-md"
-              :class="{ 'bg-slate-400': store.miniWidgetManagerVars(widget.hash).highlighted }"
-              @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
-              @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
-            >
-              <div class="flex items-center justify-start w-full overflow-auto">
-                <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">
-                  {{ widget.name || widget.component }}
-                </p>
+          </div>
+        </template>
+      </ExpansiblePanel>
+      <ExpansiblePanel
+        invert-chevron
+        hover-effect
+        elevation-effect
+        :is-expanded="store.miniWidgetContainersInCurrentView.length > 0"
+      >
+        <template #title>
+          <div class="flex items-center text-md font-normal ml-2">
+            Bottom Bar
+            <v-badge
+              :content="
+                store.miniWidgetContainersInCurrentView.reduce((count, container) => {
+                  return count + (container.name.startsWith('Bottom') ? container.widgets.length : 0)
+                }, 0)
+              "
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 mb-1"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div
+            v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
+            :key="miniWidgetContainer.name"
+            class="w-full overflow-y-auto mb-1"
+          >
+            <div v-if="miniWidgetContainer.name.startsWith('Bottom')">
+              <span class="w-full px-1 text-sm text-left select-none text-slate-400">{{
+                miniWidgetContainer.name
+              }}</span>
+              <div class="flex flex-col items-center w-full px-3 overflow-x-hidden grow">
+                <TransitionGroup name="fade">
+                  <div
+                    v-if="miniWidgetContainer.widgets.isEmpty()"
+                    class="flex items-center justify-between w-full my-1"
+                  >
+                    ---
+                  </div>
+                  <div
+                    v-for="widget in miniWidgetContainer.widgets"
+                    :key="widget.hash"
+                    class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md mx-2 my-[3px] p-1 cursor-pointer"
+                    :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                    @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                    @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                  >
+                    <div class="flex items-center justify-start w-full overflow-auto">
+                      <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap text-sm ml-3">
+                        {{ widget.name || widget.component }}
+                      </p>
+                    </div>
+                    <v-divider vertical class="opacity-10 mr-1" />
+                    <div class="icon-btn mdi mdi-cog" @click="widget.managerVars.configMenuOpen = true" />
+                    <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                  </div>
+                </TransitionGroup>
               </div>
-              <div
-                class="icon-btn mdi mdi-cog"
-                @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
-              />
-              <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
             </div>
-          </TransitionGroup>
+          </div>
+        </template>
+      </ExpansiblePanel>
+    </div>
+  </div>
+  <div class="flex items-center justify-between edit-panel bottom-panel" :class="{ active: editMode }">
+    <div class="w-px h-full mr-2 bg-[#FFFFFF18]" />
+    <div class="flex flex-col justify-between items-center w-[250px] h-full text-white px-2 py-5">
+      <div>
+        <p>Widget type:</p>
+        <v-select
+          v-model="widgetMode"
+          theme="dark"
+          variant="filled"
+          density="compact"
+          :items="['Regular widgets', 'Mini widgets']"
+          class="bg-[#27384255] mt-1"
+          hide-details
+          @change="widgetMode = $event"
+        />
+      </div>
+      <div class="flex flex-col items-center justify-start w-full mb-3 pl-2">
+        <div v-show="widgetMode === 'Regular widgets'" class="text-xs text-center">
+          To be placed on the main view area
+        </div>
+        <div v-show="widgetMode === 'Regular widgets'" class="text-md mt-3 px-3 bg-[#3B78A8] rounded-lg">
+          Click to add
+        </div>
+        <div v-show="widgetMode === 'Mini widgets'" class="text-xs text-center">
+          To be placed on the top and bottom bars
+        </div>
+        <div v-show="widgetMode === 'Mini widgets'" class="text-md mt-3 px-3 bg-[#3B78A8] rounded-lg">
+          Drag in place to add
         </div>
       </div>
-      <div class="grow" />
     </div>
-    <div class="w-full h-px mt-4 bg-slate-800/40" />
-  </div>
-  <div
-    class="flex flex-col items-center justify-center px-3 text-white edit-panel middle-panel"
-    :class="{ active: editMode }"
-  >
-    <Button
-      class="flex items-center justify-center w-full h-8 my-1 hover:bg-slate-500"
-      :class="{ 'bg-slate-700': widgetMode !== WidgetMode.RegularWidgets }"
-      @click="widgetMode = WidgetMode.RegularWidgets"
-    >
-      <p class="overflow-hidden text-ellipsis whitespace-nowrap">Regular widgets</p>
-    </Button>
-    <Button
-      class="flex items-center justify-center w-full h-8 my-1 hover:bg-slate-500"
-      :class="{ 'bg-slate-700': widgetMode !== WidgetMode.MiniWidgets }"
-      @click="widgetMode = WidgetMode.MiniWidgets"
-    >
-      <p class="overflow-hidden text-ellipsis whitespace-nowrap">Mini widgets</p>
-    </Button>
-  </div>
-  <div class="flex items-center justify-between py-2 edit-panel bottom-panel" :class="{ active: editMode }">
-    <div class="w-px h-full mr-2 bg-slate-800/40" />
+    <div class="w-px h-full mr-3 bg-[#FFFFFF18]" />
     <div
-      v-show="widgetMode === WidgetMode.RegularWidgets"
+      v-show="widgetMode === 'Regular widgets'"
       ref="availableWidgetsContainer"
-      class="flex items-center justify-between w-full h-full overflow-x-auto text-white aspect-square"
+      class="flex items-center justify-between w-full h-full gap-3 overflow-x-auto text-white aspect-square"
     >
       <div
         v-for="widgetType in availableWidgetTypes"
         :key="widgetType"
-        class="flex flex-col items-center justify-center p-2 mx-3 rounded-md bg-slate-500 h-5/6 aspect-square"
+        class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 w-[160px] h-[160px] cursor-pointer elevation-4"
+        @click="store.addWidget(widgetType, store.currentView)"
       >
-        <div
-          class="flex items-center justify-center w-8 m-2 transition-all rounded-md cursor-pointer bg-slate-700 aspect-square mdi mdi-plus hover:bg-slate-400"
-          @click="store.addWidget(widgetType, store.currentView)"
-        />
-        {{ widgetType }}
+        <v-tooltip text="Click to add" location="top" theme="light">
+          <template #activator="{ props: tooltipProps }">
+            <div />
+            <img
+              v-bind="tooltipProps"
+              :src="`../src/assets/widgets/${widgetType}.png`"
+              alt="widget-icon"
+              class="p-4 max-h-[130px] max-w-[180px]"
+            />
+            <div
+              class="flex items-center justify-center w-[160px] p-1 transition-all cursor-grab bg-[#3B78A8] rounded-b-md text-white"
+            >
+              <span class="whitespace-normal text-center">{{
+                widgetType.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
+                'Very Generic Indicator'
+              }}</span>
+            </div>
+          </template>
+        </v-tooltip>
       </div>
     </div>
     <div
-      v-show="widgetMode === WidgetMode.MiniWidgets"
+      v-show="widgetMode === 'Mini widgets'"
       ref="availableMiniWidgetsContainer"
-      class="flex items-center w-full h-full gap-2 overflow-auto"
+      class="flex items-center w-full h-full gap-3 overflow-auto"
     >
       <div
         v-for="miniWidget in availableMiniWidgetTypes"
         :key="miniWidget.hash"
-        class="flex flex-col items-center justify-center p-2 mx-3 transition-all rounded-md h-5/6 w-fit text-slate-100 cursor-grab"
-        :class="{ 'hover:bg-slate-400': !mousePressed }"
+        class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[160px] w-[160px] cursor-grab elevation-4"
       >
+        <div />
         <div class="m-2 pointer-events-none select-none">
           <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
+        <div
+          class="flex items-center justify-center w-[160px] p-1 transition-all cursor-grab bg-[#3B78A8] rounded-b-md text-white"
+        >
+          <span class="whitespace-normal text-center">{{
+            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
+            'Very Generic Indicator'
+          }}</span>
+        </div>
       </div>
     </div>
   </div>
   <teleport to="body">
-    <v-dialog v-model="viewRenameDialogRevealed" width="20rem">
-      <v-card class="pa-2">
+    <GlassModal :is-visible="viewRenameDialogRevealed" class="rounded-lg">
+      <v-card class="bg-transparent text-white w-[36rem] pt-6 px-4 pb-2">
         <v-card-text>
-          <v-text-field v-model="newViewName" counter="25" label="New view name" />
-          <v-switch
-            v-model="store.currentView.showBottomBarOnBoot"
-            label="Show bottom bar on boot"
-            class="m-2 text-slate-800"
-          />
+          <p>New view name</p>
+          <v-text-field v-model="newViewName" counter="25" variant="filled" />
+          <v-switch v-model="store.currentView.showBottomBarOnBoot" label="Show bottom bar on boot" class="mt-2 mx-2" />
         </v-card-text>
-        <v-card-actions class="flex justify-end">
-          <v-btn @click="viewRenameDialog.confirm">Save</v-btn>
+        <v-divider />
+        <v-card-actions class="flex justify-between pt-3">
           <v-btn @click="viewRenameDialog.cancel">Cancel</v-btn>
+          <v-btn @click="viewRenameDialog.confirm">Save</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
+    </GlassModal>
   </teleport>
   <teleport to="body">
-    <v-dialog v-model="profileConfigDialogRevealed" width="36rem">
-      <v-card class="pa-2">
+    <GlassModal :is-visible="profileConfigDialogRevealed" class="rounded-lg">
+      <v-card class="bg-transparent text-white w-[36rem] pt-6 px-4 pb-2">
         <v-card-text>
-          <v-text-field v-model="newProfileName" counter="25" label="New profile name" />
-          <div class="flex flex-col items-center w-full my-2">
-            <v-combobox
-              v-model="vehicleTypesAssignedToCurrentProfile"
-              :items="availableVehicleTypes"
-              label="Vehicle types that use this profile by default:"
-              chips
-              multiple
-              variant="outlined"
-              class="w-10/12 m-4"
-            />
-          </div>
+          <p>New profile name</p>
+          <v-text-field v-model="newProfileName" counter="25" variant="filled" density="compact" />
+          <p>Vehicle types that use this profile by default:</p>
+          <v-combobox
+            v-model="vehicleTypesAssignedToCurrentProfile"
+            :items="availableVehicleTypes"
+            chips
+            density="compact"
+            multiple
+            theme="dark"
+            variant="filled"
+            class="w-3/4"
+          />
         </v-card-text>
-        <v-card-actions class="flex justify-end">
-          <v-btn @click="profileConfigDialog.confirm">Save</v-btn>
+        <v-divider />
+        <v-card-actions class="flex justify-between pt-3">
           <v-btn @click="profileConfigDialog.cancel">Cancel</v-btn>
+          <v-btn @click="profileConfigDialog.confirm">Save</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
+    </GlassModal>
   </teleport>
   <teleport to="body">
     <v-dialog v-model="editMenuDialogRevealed" width="20rem">
@@ -303,7 +512,7 @@
 </template>
 
 <script setup lang="ts">
-import { useConfirmDialog, useMousePressed } from '@vueuse/core'
+import { useConfirmDialog } from '@vueuse/core'
 import Swal from 'sweetalert2'
 import { v4 as uuid } from 'uuid'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
@@ -316,7 +525,8 @@ import { isHorizontalScroll } from '@/libs/utils'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { type Profile, type View, type Widget, MiniWidgetType, WidgetType } from '@/types/widgets'
 
-import Button from './Button.vue'
+import ExpansiblePanel from './ExpansiblePanel.vue'
+import GlassModal from './GlassModal.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
 
 const store = useWidgetManagerStore()
@@ -325,6 +535,12 @@ watch(trashList, () => {
   nextTick(() => (trashList.value = []))
 })
 
+const isDialOpen = ref(false)
+
+const toggleDial = (): void => {
+  isDialOpen.value = !isDialOpen.value
+}
+
 const props = defineProps<{
   /**
    * Whether or not the interface is in edit mode
@@ -347,6 +563,43 @@ const availableMiniWidgetTypes = computed(() =>
   }))
 )
 
+const pickVehicleImage = computed(() => {
+  switch (store.currentProfile.name.toLowerCase()) {
+    case 'rov default':
+      return '../src/assets/vehicles/BlueROV_thumb.png'
+    case 'boat default':
+      return '../src/assets/vehicles/BlueBoat_thumb.png'
+    default:
+      return '../src/assets/vehicles/BlueRoboticsLogo.png'
+  }
+})
+
+const isPanelExpanded = ref(false)
+const toggleViewsPanel = (): void => {
+  isPanelExpanded.value = !isPanelExpanded.value
+}
+
+const content = ref<HTMLElement | null>(null)
+
+watch(isPanelExpanded, (newValue) => {
+  if (content.value) {
+    if (newValue) {
+      content.value.style.maxHeight = content.value.scrollHeight + 'px'
+    } else {
+      content.value.style.maxHeight = content.value.scrollHeight + 'px'
+      setTimeout(() => {
+        content.value!.style.maxHeight = '0px'
+      }, 0)
+    }
+  }
+})
+
+onMounted(() => {
+  if (content.value && !isPanelExpanded.value) {
+    content.value.style.maxHeight = '0px'
+  }
+})
+
 const widgetAddMenuGroupOptions = {
   name: 'generalGroup',
   pull: 'clone',
@@ -379,6 +632,7 @@ profileConfigDialog.onConfirm(() => {
 
 const addNewView = (): void => {
   store.addView()
+  isPanelExpanded.value = false
   renameView(store.currentView)
 }
 
@@ -449,15 +703,7 @@ onMounted(() => {
   })
 })
 
-// eslint-disable-next-line jsdoc/require-jsdoc, no-redeclare
-enum WidgetMode {
-  RegularWidgets,
-  MiniWidgets,
-}
-
-const widgetMode = ref(WidgetMode.RegularWidgets)
-
-const { pressed: mousePressed } = useMousePressed()
+const widgetMode = ref('Regular widgets' || 'Mini widgets')
 
 const availableVehicleTypes = computed(() => Object.keys(MavType))
 
@@ -489,13 +735,12 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   transition: all 0.2s;
   position: absolute;
   z-index: 60;
-  background-color: rgb(71 85 105);
+  background-color: #041e2e;
 }
 .left-panel {
   top: 0%;
-  height: 80%;
-  width: 20%;
-  left: -20%;
+  width: 22%;
+  left: -22%;
 }
 .left-panel.active {
   left: 0%;
@@ -504,7 +749,7 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   bottom: -20%;
   left: -20%;
   height: 20%;
-  width: 20%;
+  width: 22%;
 }
 .middle-panel.active {
   bottom: 0%;
@@ -512,9 +757,9 @@ const vehicleTypesAssignedToCurrentProfile = computed({
 }
 .bottom-panel {
   right: 0%;
-  bottom: -20%;
-  height: 20%;
-  width: 80%;
+  bottom: -22%;
+  height: 22%;
+  width: 78%;
 }
 .bottom-panel.active {
   bottom: 0%;
@@ -555,13 +800,37 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   transition: all;
   border-radius: 0.125rem;
   cursor: pointer;
-  @apply bg-slate-700;
+  opacity: 0.8;
 }
-.icon-btn:hover {
-  @apply bg-slate-500;
+.icon-bt {
+  opacity: 1;
 }
 
 .selected-view {
   @apply bg-slate-400;
 }
+
+.content-expand-collapse {
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.content-expand-collapse.expanding {
+  max-height: 10000px; /* Set a large enough value to cover the content */
+}
+
+.content-expand-collapse.collapsing {
+  max-height: 0;
+}
+
+.linear-gradient {
+  background: linear-gradient(90deg, rgba(39, 56, 66, 0) 0%, rgba(39, 56, 66, 1) 57%, rgba(39, 56, 66, 1) 100%);
+}
+
+.wrapclass {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
index e56d8d7e8..a933cc99a 100644
--- a/src/components/ExpansiblePanel.vue
+++ b/src/components/ExpansiblePanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-white w-full">
-    <div class="flex flex-col align-start">
+    <div class="flex flex-col align-start" :class="isElevationEffect && showElevationEffect ? 'elevation-5' : ''">
       <v-divider v-if="!noTopDivider" centered class="opacity-10 border-[#fafafa] w-full" />
       <div
         :class="[
@@ -10,12 +10,16 @@
         @click="togglePanel"
       >
         <div
-          class="flex flex-row align-center"
+          class="flex flex-row w-full align-center"
           :class="isCompact ? 'gap-x-[1vw] py-[0.8vh]' : 'gap-x-[3vw] py-[1.5vh]'"
         >
-          <div>
-            <div class="flex flex-row whitespace-nowrap">
+          <div class="flex flex-col w-full">
+            <div
+              class="flex flex-row whitespace-nowrap"
+              :class="isChevronInverted ? 'justify-between w-full' : 'justify-start'"
+            >
               <v-icon
+                v-if="!isChevronInverted"
                 :size="isCompact ? 20 : 24"
                 :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                 :class="interfaceStore.isOnSmallScreen ? '-mt-[2px] mr-[3px]' : 'mt-[2px] mr-[2px]'"
@@ -28,6 +32,12 @@
                   <slot name="title" />
                 </div>
               </div>
+              <v-icon
+                v-if="isChevronInverted"
+                :size="isCompact ? 20 : 24"
+                :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                :class="interfaceStore.isOnSmallScreen ? '-mt-[2px] mr-[3px]' : 'mt-[2px] mr-[2px]'"
+              />
             </div>
             <div
               class="font-normal"
@@ -37,7 +47,7 @@
             </div>
           </div>
         </div>
-        <div class="flex w-full justify-between ml-4">
+        <div class="flex justify-between ml-4">
           <div v-if="hasInfoSlot" class="flex items-center w-[10%]">
             <v-btn class="ml-auto rounded-full" size="small" color="transparent" elevation="0" @click.stop="toggleInfo">
               <v-icon :size="interfaceStore.isOnSmallScreen ? 15 : 18" color="white" icon="mdi-information-outline" />
@@ -112,15 +122,15 @@ const interfaceStore = useAppInterfaceStore()
 
 const props = defineProps<{
   /**
-   *
+   * Removes the top divider.
    */
   noTopDivider?: boolean
   /**
-   *
+   * Removes the bottom divider.
    */
   noBottomDivider?: boolean
   /**
-   *
+   * Whether the panel is expanded.
    */
   isExpanded?: boolean
   /**
@@ -139,6 +149,14 @@ const props = defineProps<{
    * Disable hover effect on the panel header.
    */
   hoverEffect?: boolean
+  /**
+   * Invert horizontal position of the chevron icon.
+   */
+  invertChevron?: boolean
+  /**
+   * Elevation effect on the panel header.
+   */
+  elevationEffect?: boolean
 }>()
 
 const slots = useSlots()
@@ -152,14 +170,25 @@ const isMarkExpanded = ref(props.markExpanded ?? false)
 const isCompact = ref(props.compact ?? false)
 const isDarkenContent = ref(props.darkenContent ?? false)
 const isHoverEffect = ref(props.hoverEffect ?? false)
+const isChevronInverted = ref(props.invertChevron ?? false)
+const isElevationEffect = ref(props.elevationEffect ?? false)
 
 const content = ref<HTMLElement | null>(null)
 const infoContent = ref<HTMLElement | null>(null)
 const warningContent = ref<HTMLElement | null>(null)
 const animateWarning = ref(true)
+const showElevationEffect = ref(isPanelExpanded.value || false)
 
 const togglePanel = (): void => {
-  isPanelExpanded.value = !isPanelExpanded.value
+  if (isPanelExpanded.value) {
+    isPanelExpanded.value = false
+    setTimeout(() => {
+      showElevationEffect.value = false
+    }, 300)
+  } else {
+    showElevationEffect.value = true
+    isPanelExpanded.value = true
+  }
 }
 
 const textSize = computed(() => {
diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 852f0d0cd..c67d8981f 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -40,9 +40,12 @@
     </video>
   </div>
   <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" width="auto">
-    <v-card class="pa-2">
-      <v-card-title>Video widget config</v-card-title>
-      <v-card-text>
+    <v-card
+      class="pa-4 bg-[#20202022] text-white backdrop-blur-2xl border-[1px] border-[#FAFAFA12]"
+      style="border-radius: 15px"
+    >
+      <v-card-title class="text-center">Video widget config</v-card-title>
+      <v-card-text class="flex flex-col gap-y-4">
         <v-select
           v-model="nameSelectedStream"
           label="Stream name"
@@ -72,14 +75,14 @@
           v-model="widget.options.flipHorizontally"
           class="my-1"
           label="Flip horizontally"
-          :color="widget.options.flipHorizontally ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.flipHorizontally ? 'yellow' : undefined"
           hide-details
         />
         <v-switch
           v-model="widget.options.flipVertically"
           class="my-1"
           label="Flip vertically"
-          :color="widget.options.flipVertically ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.flipVertically ? 'yellow' : undefined"
           hide-details
         />
         <div class="flex-wrap justify-center d-flex ga-5">