fixed sidebar button height; updated undo/redo button styling; updated mockup upload buttons

Author: megatera

src/components/ComponentDisplay.vue

@@ -640,7 +640,7 @@ li:hover{
   position: absolute;
 }
 .active {
-  background-color: $accent;
+  background-color: rgba($accent, .7);
   border: 1px dashed $accent;
 }
 .minorAction {

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -49,6 +49,7 @@ Description:
 
       <q-btn
         id="create-component-btn"
+        class="sidebar-btn"
         v-if="activeComponent === ''"
         color="secondary"
         label="Create Component"
@@ -180,6 +181,7 @@ export default {
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    margin: 4px;
   }
   .create-component-form {
     display: flex;

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -296,7 +296,7 @@ export default {
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
-  margin: 20px;
+  margin: 4px;
 }
 
 .menu-link{

src/components/home_sidebar_items/ComponentTab/ImportComponent.vue

@@ -1,6 +1,7 @@
 <template>
     <q-btn
       id="import-component-btn"
+      class="sidebar-btn"
       size="md"
       color="secondary"
       :label=title
@@ -258,7 +259,7 @@ export default {
 <style scoped>
 #import-component-btn{
   width: 100%;
-  margin: 10px 0px;
+  margin: 30px 0px;
 }
 </style>
 

src/components/home_sidebar_items/ComponentTab/UploadImage.vue

@@ -142,7 +142,7 @@ export default {
   }
 
 .upload-btn {
-  text-transform: capitalize;
+  text-transform: uppercase;
   font-size: 12px;
   width: 150px;
   height: auto;

src/css/app.scss

@@ -33,6 +33,10 @@ main {
     text-transform: capitalize;
 }
 
+.sidebar-btn {
+    min-height: 42px !important;
+}
+
 .q-item {
     background: $subsecondary;  
 }

src/layouts/MyLayout.vue

@@ -44,27 +44,7 @@ Description:
         <i v-else class="fa fa-redo" id="unavailable" aria-hidden="true"></i>
         </q-btn>
       </div></q-toolbar-title>
-        <!-- <SlackLoginWindow /> -->
         <div></div>
-        <!-- <i
-          v-if="doneAction.length"
-          class="fa fa-backward"
-          aria-hidden="true"
-          @click="undo"
-        ></i>
-        <i
-          v-else
-          class="fa fa-backward"
-          id="unavailable"
-          aria-hidden="true"
-        ></i>
-        <i
-          v-if="undoneAction.length"
-          class="fa fa-forward"
-          aria-hidden="true"
-          @click="redo"
-        ></i>
-        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i> -->
 
         <SaveProjectComponent />
         <OpenProjectComponent />
@@ -312,6 +292,8 @@ q-btn > i {
   flex-grow: 1;
   align-items: center;
   margin-right: 5px;
+  width: 40px;
+  border: 1px solid rgba($primary, .5);
 }
 
 // Must change style lang='scss'