fixed the side bar shadow nonesense, fixed code snippet margin issue, increased height of footer from 35 to 40vh

Author: drewngyen

src/components/CodeSnippet.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="codesnippet-container">
     <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
-    <p v-if="activeComponent === ''">Select a component</p>
-    <p v-else >{{ `${activeComponent}.vue` }}</p>
+    <div class="top-p" v-if="activeComponent === ''" >Select a component</div>
+    <div v-else >{{ `${activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
       language="js"
@@ -121,7 +121,11 @@ export default {
 .code-editor {
   font-size: 12px;
 }
+.codesnippet-container {
+  margin-bottom: 1rem;  
+}
 ::-webkit-scrollbar {
     display: none;
 }
+
 </style>

src/components/ComponentDisplay.vue

@@ -218,13 +218,13 @@ export default {
 .component-box {
   color: white;
   border: 1px dashed rgb(227, 203, 71);
-  background-color: rgba(186, 99, 99, 0.529);
+  background-color: rgba(186, 99, 99, 0.420);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
 }
 .active {
-  background-color: rgba(57, 63, 84, 0.5);
+  background-color: rgba(39, 78, 223, 0.3);
   border: 1px dashed rgb(227, 203, 71);
 }
 </style>

src/components/ExportProject.vue

@@ -2,7 +2,7 @@
 <!-- electron build
   <q-btn class="glossy" color="secondary" label="Export Project" @click="exportProject"/>
   -->
-  <q-btn class="glossy export-btn" color="secondary" label="Export Project"/>
+  <q-btn class=" export-btn" color="secondary" label="Export Project"/>
 </template>
 
 <script>

src/components/Footer.vue

@@ -58,7 +58,7 @@ export default {
     return {
       tab: 'code',
       open: true,
-      height: 35,
+      height: 40,
       up: 'fas fa-chevron-up',
       down: 'fas fa-chevron-down'
     }
@@ -68,7 +68,7 @@ export default {
       // 15in mb pro - 1027 px 3.75
       // big ass screens 2.5
       let minHeight = (window.outerHeight < 900) ? 4.5 : (window.outerHeight < 1035) ? 3.75 : 2.5
-      this.height === 35 ? (this.height = minHeight) : (this.height = 35)
+      this.height === 40 ? (this.height = minHeight) : (this.height = 40)
       this.open === true ? this.open = false : this.open = true
     }
   }

src/components/OpenProjectComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="glossy export-btn" color="secondary" label="Open Project"/>
+  <q-btn class=" export-btn" color="secondary" label="Open Project"/>
   <!--<q-btn class="glossy mr-sm" color="secondary" label="Open Project" @click="openProjectJSON"/>-->
 </template>
 

src/components/SaveProjectComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="glossy export-btn" color="secondary" label="Save"/>
+  <q-btn class=" export-btn" color="secondary" label="Save"/>
   <!--<q-btn class="glossy mr-sm" color="secondary" label="Save" @click="saveProjectJSON"/>  Uncomment and delete line above for electron build-->
 </template>
 

src/css/quasar.variables.styl

@@ -10,7 +10,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   = #737578
-$secondary = #2D95CD
+$secondary = teal
 $accent    = #9C27B0
 $subaccent = #454d66
 $subaccentbtn = #2c384d

src/layouts/MyLayout.vue

@@ -15,7 +15,7 @@
 
     <q-drawer v-model="left" side="left" behavior="desktop" bordered>
       <!-- drawer content -->
-      <q-list>
+      <q-list class="q-list-drawer">
         <!-- <UploadImage /> -->
         <HomeSideDropDown />
         <CreateComponent />
@@ -74,12 +74,15 @@ export default {
   // background: #27282268;
 }
 // css styling for the drawer list (not entire bg)
-.q-list {
+.q-list-drawer {
   // background: gray;
+  height: 100vh;
+  border-radius: 5px;
+  box-shadow: none;
 }
 // styling between input and elements in q-list drawer
 .q-field--with-bottom {
-  padding-bottom: 5px;  
+  // pading-bottom:  
 }
 // css styling for entire drawer
 .q-drawer {