updated

Author: jchan444

src/components/right-sidebar/ComponentDetails.vue

@@ -12,17 +12,17 @@ Description:
     <q-card id="code-window" class="no-shadow" v-if="this.activeComponentObj">
       <q-tabs
         v-model="tab"
-        dense
+        dense=""
         class="bg-subaccent text-white"
         active-color="secondary"
         indicator-color="secondary"
         align="left"
       >
         <q-tab name="code" label="Code Snippet" class="label-text" />
         <q-tab name="html" label="HTML Elements" class="label-text" />
-        <q-tab name="state" label="Component State" class="label-text" />
-        <q-tab name="actions" label="Component Actions" class="label-text" />
-        <q-tab name="props" label="Component Props" class="label-text" />
+        <q-tab name="state" label="Component Properties" class="label-text" />
+        <!-- <q-tab name="actions" label="Component Actions" class="label-text" />
+        <q-tab name="props" label="Component Props" class="label-text" /> -->
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
         <q-tab-panel name="code">
@@ -32,6 +32,8 @@ Description:
           <HTMLQueue />
         </q-tab-panel>
         <q-tab-panel name="state">
+        <div class ="componentProperties">
+          <q-expansion-item default-closed label="Component State">
           <p v-if="!this?.activeComponentObj?.state?.length">
              {{this.activeComponent ? `No state in ${this.activeComponent}` : 'Select a component.' }}
           </p>
@@ -43,9 +45,11 @@ Description:
               {{ comp }}
             </li>
           </ul>
-        </q-tab-panel>
-        <q-tab-panel name="actions">
-          <p v-if="!this?.activeComponentObj?.actions?.length">
+          </q-expansion-item>
+        </div>
+        <div class ="componentProperties">
+        <q-expansion-item default-closed label="Component Actions">
+                <p v-if="!this?.activeComponentObj?.actions?.length">
             {{this.activeComponent ? `No actions in ${this.activeComponent}` : 'Select a component.' }}
           </p>
           <p v-else>
@@ -56,9 +60,11 @@ Description:
               {{ comp }}
             </li>
           </ul>
-        </q-tab-panel>
-        <q-tab-panel name="props">
-          <p v-if="!this?.activeComponentObj?.props?.length">
+          </q-expansion-item>
+          </div>
+          <div class ="componentProperties">
+          <q-expansion-item default-closed label="Component Props">
+              <p v-if="!this?.activeComponentObj?.props?.length">
             {{this.activeComponent ? `No props in ${this.activeComponent}` : 'Select a component.' }}
           </p>
           <p v-else>
@@ -69,6 +75,8 @@ Description:
               {{ comp }}
             </li>
           </ul>
+          </q-expansion-item>
+          </div>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
@@ -195,4 +203,8 @@ i {
   align-content: stretch;
   max-height: 95%;
 }
+
+.componentProperties {
+  margin-bottom:2em;
+}
 </style>

src/css/quasar.variables.scss

@@ -26,7 +26,7 @@
 
 // **************** Taken from OverVue *******************
 $primary   : #737578;
-$secondary : #42B883;
+$secondary : #9c49a3;
 $accent    : #a1ddc2;
 $subaccent : #0d0d0d;
 $subaccentbtn : #2c384d;