Updated spacing on nav bar buttons and adjusted size

Author: Julia Bakerink

src/components/file_system_interface/ExportProject.vue

@@ -10,7 +10,7 @@ Description:
   -->
 
 <template>
-  <q-btn class="export-btn" color="secondary" label="Export">
+  <q-btn class="nav-btn" color="secondary" label="Export">
     <q-menu class="dropdown">
       <div class="settings-dropdown column items-center"> 
       <p class="center">Export:</p>
@@ -523,13 +523,13 @@ export default {
 </script>
 
 <style>
-.export-btn {
+/* .nav-btn {
   min-height: 10px !important;
   width: auto;
   font-size: 11px;
   text-transform: capitalize;
   padding: 3px 8px;
-}
+} */
 .center{
   display:inline-block;
   text-align: center;

src/components/file_system_interface/OpenProjectComponent.vue

@@ -5,7 +5,7 @@ Description:
   -->
 
 <template>
-    <q-btn class="export-btn" color="secondary" label="Import">
+    <q-btn class="nav-btn" color="secondary" label="Import">
     <q-menu class="dropdown">
       <div class="settings-dropdown column items-center"> 
       <p class="center">Import:</p>

src/components/file_system_interface/SaveProjectComponent.vue

@@ -7,7 +7,7 @@ Description:
 
 <template>
   <q-btn
-    class="export-btn"
+    class="nav-btn"
     color="secondary"
     label="Save"
     @click="saveProjectJSON"

src/layouts/MyLayout.vue

@@ -44,7 +44,7 @@ Description:
         <OpenProjectComponent />
         <ExportProjectComponent />
 
-        <q-btn icon="fas fa-cog" size="sm">
+        <q-btn class="nav-btn" icon="fas fa-cog" size="sm">
           <!-- < fas => fontawesome, refers to icon style -->
           <q-menu class="dropdown">
 
@@ -345,11 +345,11 @@ q-btn > i {
   background-color: rgba(255, 255, 255, 0.301);
 }
 
-.fa-backward:hover,
-.fa-forward:hover {
-  cursor: pointer;
-  color: $secondary;
-}
+// .fa-backward:hover,
+// .fa-forward:hover {
+//   cursor: pointer;
+//   color: $secondary;
+// }
 
 #unavailable {
   color: grey;
@@ -366,8 +366,9 @@ q-btn > i {
   transition-timing-function: ease-in;
 }
 
-.export-btn {
-  margin-left: 0.3rem;
+.nav-btn {
+  margin-left: 0.5rem;
+  // height: 25px
 }
 
 .q-toolbar {
@@ -438,6 +439,9 @@ background: #5c5e61;
   width: 15%;
   height: auto;
 }
+/* Typescript toggle
+========================== */
+
 .switch {
 	position: relative;
 	display: block;