From bfcd8a3297661200249bd3cf0c8f6fa1b8c238e7 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 4 Aug 2022 17:30:30 +0300
Subject: [PATCH] feat(frontend): viewer help styling

---
 .../components/viewer/dialogs/ViewerHelp.vue  | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/main/components/viewer/dialogs/ViewerHelp.vue b/packages/frontend/src/main/components/viewer/dialogs/ViewerHelp.vue
index 917cdbe70..7c5aab66b 100644
--- a/packages/frontend/src/main/components/viewer/dialogs/ViewerHelp.vue
+++ b/packages/frontend/src/main/components/viewer/dialogs/ViewerHelp.vue
@@ -1,38 +1,43 @@
 <template>
   <v-card>
     <div>
-      <v-expansion-panels>
+      <v-expansion-panels v-model="panel" accordion>
         <v-expansion-panel>
           <v-expansion-panel-header>Rotation</v-expansion-panel-header>
-          <v-expansion-panel-content>
+          <v-expansion-panel-content class="caption">
             Simply click and drag with your left mouse button.
-            <v-img src="@/assets/rotating.gif" max-height="350" contain />
+            <v-img class="mt-4" src="@/assets/rotating.gif" max-height="350" contain />
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
           <v-expansion-panel-header>Panning</v-expansion-panel-header>
-          <v-expansion-panel-content>
+          <v-expansion-panel-content class="caption">
             Simply click and drag with your right mouse button.
-            <v-img src="@/assets/panning.gif" max-height="350" contain />
+            <v-img class="mt-4" src="@/assets/panning.gif" max-height="350" contain />
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
           <v-expansion-panel-header>Zooming</v-expansion-panel-header>
-          <v-expansion-panel-content>
+          <v-expansion-panel-content class="caption">
             Double click on an object to zoom to it.
             <br />
             Double click anywhere else to zoom to the entire scene.
             <br />
             Use your mouse's scroll wheel to zooom in and out.
-            <v-img src="@/assets/zooming.gif" max-height="350" contain />
+            <v-img class="mt-4" src="@/assets/zooming.gif" max-height="350" contain />
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
           <v-expansion-panel-header>Sections</v-expansion-panel-header>
-          <v-expansion-panel-content>
+          <v-expansion-panel-content class="caption">
             The section box can be moved around as a whole. You can also move individual
             faces of the section box by clicking on them.
-            <v-img src="@/assets/sectionbox.gif" max-height="350" contain />
+            <v-img
+              class="mt-4"
+              src="@/assets/sectionbox.gif"
+              max-height="350"
+              contain
+            />
           </v-expansion-panel-content>
         </v-expansion-panel>
       </v-expansion-panels>
@@ -49,5 +54,11 @@
   </v-card>
 </template>
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      panel: 0
+    }
+  }
+}
 </script>