Merge branch 'dev' into navBar

Author: megatera

src-electron/icons/icon.icns

@@ -39,23 +39,23 @@ Description:
       <q-menu context-menu>
         <q-list color="black" class="menu">
             <q-item clickable v-ripple v-close-popup @click="handleExportComponent">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Export Component</q-item-section
             >
             <q-item-section avatar>
                         <q-icon color="primary" name="upload" />
                       </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Update Children</q-item-section
             >
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup>
-            <q-item-section class="layer" style="color: white"
+            <q-item-section class="layer" style="color: menutext"
               >Layer</q-item-section
             >
             <q-btn
@@ -65,7 +65,7 @@ Description:
               label="-"
               @click="(e) => handleLayer(e)"
             />
-            <p id="counter" style="color: white">{{ componentData.z }}</p>
+            <p id="counter" style="color: menutext">{{ componentData.z }}</p>
             <q-btn
               class="btn"
               color="transparent"
@@ -208,7 +208,8 @@ export default {
     mockBg() {
       return this.imagePath[this.activeRoute]
         ? {
-            background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
+            background: `url("${this.userImage}") no-repeat rgba(223, 218, 218, 0.886) top left`,
+            "background-size": "contain"
           }
         : {};
     },
@@ -396,14 +397,14 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .component-title {
   position: relative;
   font-size: 16px;
   top: -18px;
   left: 2px;
   color: black;
-  -webkit-text-stroke: 0.4px white;
+  -webkit-text-stroke: 0.4px $menutext;
   font-weight: 800;
   line-height: 1.2;
   z-index: -1;
@@ -422,50 +423,54 @@ export default {
   list-style: none;
 }
 .component-display {
-  height: 95.4vh;
+  top: 0px;
+  left: 0px;
   width: 100%;
-  position: relative;
+  height: 100%;
+  min-width: 1600px;
+  min-height: 900px;
+  position: absolute;
 }
 .grid-bg {
   background-color: rgba(223, 218, 218, 0.886);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-  background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-    -webkit-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: -moz-linear-gradient(white 2px, transparent 2px),
-    -moz-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: linear-gradient(white 2px, transparent 2px),
-    linear-gradient(90deg, white 2px, transparent 2px),
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
-    linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
+  -pie-background: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
-    #269;
+    $secondary;
   behavior: url(/pie/PIE.htc);
 }
 .menu {
   margin-bottom: 0px !important;
 }
 .component-box {
-  color: white;
-  border: 1.2px dashed rgb(231, 203, 75);
-  background-color: rgba(172, 83, 83, 0.42);
+  color: $menutext;
+  border: 1.2px dashed $darktext;
+  background-color: rgba($darktext, .42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
   position: absolute;
 }
 .active {
-  background-color: rgba(105, 179, 190, 0.514);
-  border: 1px dashed rgb(227, 203, 71);
+  background-color: $accent;
+  border: 1px dashed $accent;
 }
 .btn {
   font-size: 25px;
@@ -477,7 +482,7 @@ export default {
 .btn:hover,
 .btn:focus,
 .btn:active {
-  color: white;
+  color: $menutext;
   background-color: transparent;
 }
 #counter {

src-electron/icons/icon.ico

@@ -6,7 +6,8 @@ Description:
   -->
 
 <template>
-  <q-card id="dashboard-cards" class="bord">
+<span v-if="showTutorial === false">
+  <q-card id="dashboard-cards" >
     <q-tabs
       v-model="tab"
       class="bg-subaccent text-white"
@@ -16,21 +17,14 @@ Description:
       dense
       breakpoint="1050"
     >
-      <q-tab
-        name="detail"
-        label="Component Details"
-        id="label-text"
-        style="border-right: 3px solid black"
-        ><i class="fas fa-code"></i
-      ></q-tab>
+      <q-tab name="detail" label="Component Details" id="label-text"
+        ></q-tab>
       <q-tab name="tree" label="Project Tree" id="label-text"
-        ><i class="fas fa-code-branch fa-flip-vertical"
-      /></q-tab>
+        ></q-tab>
       <q-tab name="routes" label="Routes" id="label-text"
-        ><i class="fas fa-project-diagram"></i
-      ></q-tab>
+        ></q-tab>
     </q-tabs>
-    <q-tab-panels v-model="tab" animated class="html-bg text-white">
+    <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="detail">
         <ComponentDetails />
       </q-tab-panel>
@@ -43,26 +37,33 @@ Description:
       </q-tab-panel>
     </q-tab-panels>
   </q-card>
+</span>
+<span v-else>
+  <GetStarted />
+</span>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
 import Tree from "./Tree.vue";
 import ComponentDetails from "./ComponentDetails.vue";
 import RouteDisplay from "./RouteDisplay.vue";
+import GetStarted from "./GetStarted.vue";
 
 export default {
   components: {
     Tree,
     ComponentDetails,
     RouteDisplay,
+    GetStarted,
   },
   computed: {
     ...mapState([
       "activeComponent",
       "componentNameInputValue",
       "selectedElementList",
       "activeHTML",
+      "showTutorial",
     ]),
   },
   data() {
@@ -119,15 +120,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-i {
-  font-size: 11px;
-}
 
 .home-sidebar {
-  margin: 1rem;
+  padding: 1rem;
   justify-content: center;
   border-radius: 5px;
-  padding: 0px;
   background: $subsecondary;
 }
 
@@ -142,57 +139,41 @@ i {
   padding: 5px;
 }
 
-/* this class selector does not change anything */
-.q-tab__label {
-  /* // font-size not changing */
-  font-size: 10px !important;
-  line-height: 1.718em;
-  font-weight: 500;
-}
-
 /* // changes the tab label styling */
 #label-text {
   font-size: 4px !important;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .q-tab-panel {
-  /* // matchs the code editor bg */
+  /* // matches the code editor bg */
   background: $subprimary;
 }
 
 // changes the length of the tab panels
 .q-tab-panels {
   padding: 0px !important;
-  border-top: 3px solid black;
+  background: $subprimary;
 }
 
 .q-tabs {
-  background: #11120f;
+  background: $subprimary;
 }
 
 .toolbar-background {
-  background: black;
+  background: $subprimary;
 }
 
 #dashboard-cards {
   display: flex;
   flex-direction: column;
   height: 100%;
   border-radius: 0px;
-  background: #737578;
-}
-.html-bg {
-  /* // give html background color of grey */
-  background-color: #202122;
+  background: $subprimary;
 }
 
 .inner-div {
   height: 100%;
 }
 
-.bord {
-  border-left: 3px solid black;
-  border-right: 3px solid black;
-}
 </style>