adjusted styling for navbar

Author: Julia Bakerink

src/components/file_system_interface/ExportProject.vue

@@ -14,7 +14,7 @@ Description:
     <q-menu class="dropdown">
       <div class="settings-dropdown column items-center"> 
       <p class="center">Export:</p>
-      <q-btn class="menu-btn" no-caps color="secondary" label="Current Project" @click="exportProject"/> 
+      <q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="exportProject"/> 
       <q-btn class="menu-btn" no-caps color="secondary" label="Active Component" @click="handleExportComponent" :disabled="!activeComponent.trim()"/> 
       </div>
     </q-menu>
@@ -523,19 +523,16 @@ export default {
 </script>
 
 <style>
-/* .nav-btn {
-  min-height: 10px !important;
-  width: auto;
-  font-size: 11px;
+.nav-btn {
+  min-height: 30px !important;
   text-transform: capitalize;
-  padding: 3px 8px;
-} */
+}
 .center{
   display:inline-block;
   text-align: center;
-  margin-top: 5px;
+  margin-top: 10px;
+  margin-bottom: 5px;
   font-weight: bold;
-  background-color: rgb(100, 99, 99);
   color: white;
   box-sizing: border-box;
 }

src/components/file_system_interface/OpenProjectComponent.vue

@@ -10,7 +10,7 @@ Description:
       <div class="settings-dropdown column items-center"> 
       <p class="center">Import:</p>
       <q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="openProjectJSON"/> 
-      <!-- <ImportComponent title="Component"/> -->
+      <ImportComponent no-caps title="Component"/>
       <!-- <q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/>  -->
       </div>
     </q-menu>
@@ -70,7 +70,7 @@ export default {
   margin-right: 0.2rem;
 }
 .menu-btn{
-  width: 85%;
+  width: 80%;
   margin: 10px 0px;
   box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
 }

src/components/slack_login/SlackLoginWindow.vue

@@ -1,18 +1,5 @@
 <!--<template v-if="show">-->
 <template>
-  <div>
-    <!-- <div>
-      <q-btn class="glossy bg-black openModalBtn" size="5px" @click="openLogin">
-      </q-btn>
-    </div> -->
-
-    <!--
-      Slack Login Button:
-      -->
-
-    <!--
-        Skip button:
-        -->
                 <q-btn
               class="menu-btn"
               color= "purple"
@@ -43,6 +30,20 @@
               </svg>
               Slack Login
             </q-btn>
+  <div>
+    <!-- <div>
+      <q-btn class="glossy bg-black openModalBtn" size="5px" @click="openLogin">
+      </q-btn>
+    </div> -->
+
+    <!--
+      Slack Login Button:
+      -->
+
+    <!--
+        Skip button:
+        -->
+
 
     <q-dialog
       v-model="showLogin"
@@ -211,8 +212,8 @@ export default {
   border: 1px solid #289ead;
 }
 .menu-btn{
-  width: 100%;
-  margin-bottom:20px;
+  width: 80%;
+  margin: 10px 0px;
 }
 
 

src/css/app.scss

@@ -25,7 +25,8 @@ main {
 }
 .q-btn {
     align-items: center;
-    height: 42px;
+    height: 20px;
+    width: 65px;
 }
 .q-item {
     background: $subsecondary;  

src/layouts/MyLayout.vue

@@ -59,7 +59,7 @@ Description:
 
         <SlackLoginWindow />
             <div class="typescript">
-              <p> <b>TypeScript: </b> </p> 
+              <p class="typescript-text"> <b>TypeScript: </b> </p> 
               <label for="typescript"  class="switch" >
               <input v-if="this.exportAsTypescript === 'on'" class="switch-input" type="checkbox" name="typescript" id="typescript" :value="this.exportAsTypescript" @change="syncTypescriptFlag" checked/>
               <input v-else class="switch-input" type="checkbox" name="typescript" id="typescript" :value="this.exportAsTypescript" @change="syncTypescriptFlag"/>  
@@ -428,7 +428,7 @@ q-btn > i {
   // overflow: hidden;
 }
 .menu-btn{
-  width: 85%;
+  width: 80%;
   margin: 10px 0px;
   box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
 }
@@ -446,7 +446,7 @@ background: #5c5e61;
 	position: relative;
 	display: block;
 	vertical-align: top;
-	width: 100%;
+	width: 65px;
 	height: 30px;
 	padding: 3px;
 	margin: 0 10px 10px 0;
@@ -477,8 +477,8 @@ background: #5c5e61;
 }
 .switch-label:before, .switch-label:after {
 	position: absolute;
-	top: 50%;
-	margin-top: -.5em;
+	top: 20px;
+	margin-top: -.8em;
 	line-height: 1;
 	-webkit-transition: inherit;
 	-moz-transition: inherit;
@@ -523,8 +523,8 @@ background: #5c5e61;
 .switch-handle:before {
 	content: "";
 	position: absolute;
-	top: 50%;
-	left: 50%;
+	top: 20px;
+	left: 20px;
 	margin: -6px 0 0 -6px;
 	width: 12px;
 	height: 12px ;
@@ -534,7 +534,7 @@ background: #5c5e61;
 	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
 }
 .switch-input:checked ~ .switch-handle {
-	left: 56%;
+	left: 40px;
 	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 }
  
@@ -548,9 +548,11 @@ background: #5c5e61;
 }
 .typescript{
   display: flex;
-  justify-content: space-around;
   align-items: flex-end;
-  width: 90%;
+  margin: 10px;
   flex-direction: row;
 }
+.typescript-text{
+  margin-right: 10px;
+}
 </style>