Updated transparency of dropdown

Author: Julia Bakerink

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 no-caps title="Component"/>
+      <ImportComponent class="import-comp" no-caps title="Component"/>
       <!-- <q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/>  -->
       </div>
     </q-menu>
@@ -74,4 +74,10 @@ export default {
   margin: 10px 0px;
   box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
 }
+
+.import-comp{
+  width: 80% !important;
+  margin: 10px 0px;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+}
 </style>

src/components/home_sidebar_items/ComponentTab/ImportComponent.vue

@@ -257,9 +257,8 @@ export default {
 
 <style scoped>
 #import-component-btn{
-  width: 85%;
+  width: 100%;
   margin: 10px 0px;
-  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
 }
 </style>
 

src/components/slack_login/SlackLoginWindow.vue

@@ -1,35 +1,15 @@
 <!--<template v-if="show">-->
 <template>
-                <q-btn
-              class="menu-btn"
-              color= "purple"
-              no-caps
-              @click="openLogin"
-            >
-                 <svg
-                xmlns="http://www.w3.org/2000/svg"
-                style="height: 20px; width: 20px; margin-right: 12px"
-                viewBox="0 0 122.8 122.8"
-              >
-                <path
-                  d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
-                  fill="#e01e5a"
-                ></path>
-                <path 
-                  d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
-                  fill="#36c5f0"
-                ></path>
-                <path
-                  d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
-                  fill="#2eb67d"
-                ></path>
-                <path
-                  d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
-                  fill="#ecb22e"
-                ></path>
-              </svg>
-              Slack Login
-            </q-btn>
+  <q-btn class="menu-btn" color= "purple" no-caps @click="openLogin">
+    <!-- Slack logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" style="height: 20px; width: 20px; margin-right: 12px" viewBox="0 0 122.8 122.8">
+      <path d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z" fill="#e01e5a" ></path>
+      <path d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z" fill="#36c5f0"></path>
+      <path d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z" fill="#2eb67d"></path>
+      <path d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z" fill="#ecb22e" ></path>
+    </svg>
+      Slack Login
+  </q-btn>
   <div>
     <!-- <div>
       <q-btn class="glossy bg-black openModalBtn" size="5px" @click="openLogin">
@@ -182,6 +162,7 @@ export default {
   color: $menutext;
   background-color: purple;
   margin-bottom: 10px;
+  width: 100%
 
 }
 
@@ -190,7 +171,7 @@ export default {
   background-color: $subprimary;
   border: 1px solid $subprimary;
   text-decoration: underline;
-  margin-top: 30px;
+  margin-top: 20px;
 }
 
 #skipButton:hover {

src/layouts/MyLayout.vue

@@ -424,20 +424,23 @@ q-btn > i {
   height: 100%;
 }
 
-.scroll {
-  // overflow: hidden;
-}
 .menu-btn{
   width: 80%;
   margin: 10px 0px;
-  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0, 0, 0, 0.055);
 }
-.settings-dropdown {
-background: #5c5e61;
+
+.menu-btn:disabled{
+  background: #437962 !important;
+  opacity: 100% !important;
+  color: #959a98 !important;
 }
+
 .dropdown{
-  width: 15%;
+  width: 200px;
   height: auto;
+  overflow:visible;
+  background: rgba(#000000, .8);
 }
 /* Typescript toggle
 ========================== */