Merge pull request #37 from drewngyen/master

added ui changes, made the tab-panel full length

Author: drewngyen

src/components/ComponentDisplay.vue

@@ -217,14 +217,14 @@ export default {
 }
 .component-box {
   color: white;
-  border: 1px dashed rgb(227, 203, 71);
-  background-color: rgba(186, 99, 99, 0.420);
+  border: 1.2px dashed rgb(231, 203, 75);
+  background-color: rgba(172, 83, 83, 0.42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
 }
 .active {
-  background-color: rgba(39, 78, 223, 0.3);
+  background-color: rgba(105, 179, 190, 0.514);
   border: 1px dashed rgb(227, 203, 71);
 }
 </style>

src/components/CreateComponent.vue

@@ -4,7 +4,7 @@
     <br />
     <form v-on:submit.prevent="handleClick" v-on:click="resetActiveComponent">
       <q-input
-        standout="secondary text-secondary"
+        standout="bg-secondary text-white"
         bottom-slots
         v-model="componentNameInputValue"
         label="Component Name"

src/components/Footer.vue

@@ -4,7 +4,7 @@
       <q-btn flat color="subaccent" round @click="openBottomDrawer">
         <i :class="[open ? down : up]" id="btn" ></i>
       </q-btn>
-      <q-toolbar-title>Dashboard</q-toolbar-title>
+      <q-toolbar-title >Dashboard</q-toolbar-title>
     </q-toolbar>
     <q-card>
       <q-tabs
@@ -21,7 +21,7 @@
         <q-tab name="html" label="HTML Elements" id="label-text"/>
       </q-tabs>
 
-      <q-tab-panels v-model="tab" animated class="bg-primary text-white">
+      <q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -80,7 +80,7 @@ i {
   font-size: 11px;
 }
 .q-btn {
-  background: $secondary;
+  // background: $secondary;
   font-size: 8px;
   margin: 5px;
 }
@@ -124,9 +124,12 @@ i {
 // changes the length of the tab panels
 .q-tab-panels {
   height: 31vh;
+  padding: 0px !important;
 }
-
 .q-tabs {
   background: #11120F;
 }
+.full-footer {
+  height: 100vh;  
+}
 </style>

src/layouts/MyLayout.vue

@@ -2,8 +2,9 @@
   <q-layout view="hHh LpR lFf">
     <q-header elevated class="gradient text-white">
       <q-toolbar>
-        <q-btn dense flat round icon="menu" @click="left = !left" />
-
+        <q-btn dense flat color="subaccent" round @click="left = !left" >
+          <i :class="[left ? 'fas fa-chevron-left' : 'fas fa-list-ul']" id="btn" ></i>
+        </q-btn>
         <q-toolbar-title>
           <q-avatar></q-avatar>PreVue 2.0
         </q-toolbar-title>
@@ -58,6 +59,10 @@ export default {
 </script>
 
 <style lang="stylus">
+.q-layout {
+  transition-timing-function: ease-in;
+  transition: 0.2s;
+}
 .export-btn {
   margin-left: 0.3rem;
 }