fix(styles): improve styles structure + fix some css

src/Layout.vue

@@ -1,7 +1,9 @@
 <template>
-  <div id="layout">
+  <div class="platform-layout">
     <PlatformHeader />
-    <router-view></router-view>
+    <div class="view-container">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 

src/components/platform-header/PlatformHeader.scss

@@ -1,12 +1,14 @@
 .platform-header {
   display: flex;
   align-items: center;
-  padding: $spacing-unit/2 $spacing-unit*2;
+  height: $platform-header-height;
+  padding: 0 $spacing-unit*2;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   background-color: $color-white;
 
   &__logo {
     cursor: pointer;
+    height: $platform-header-height - $spacing-unit;
   }
 
   &__user-menu {

src/components/platform-header/PlatformHeader.vue

@@ -4,8 +4,6 @@
       class="platform-header__logo"
       alt="BIMData Platform logo"
       src="@/assets/header-logo.svg"
-      width="110"
-      height="50"
       @click="goToDashboard"
     />
     <UserMenu

src/components/project-card/ProjectCard.scss

@@ -1,3 +1,4 @@
 .project-card {
-  // TODO
+  width: $platform-project-card-width;
+  height: $platform-project-card-height;
 }

src/components/project-creation-card/ProjectCreationCard.scss

@@ -1,3 +1,4 @@
 .project-creation-card {
-  // TODO
+  width: $platform-project-card-width;
+  height: $platform-project-card-height;
 }

src/components/recent-spaces-list/RecentSpacesList.scss

@@ -1,10 +1,13 @@
 .recent-spaces-list {
+
   &__title {
     padding: $spacing-unit/2 $spacing-unit;
   }
-
+  
   &__content {
     display: flex;
+    gap: $spacing-unit*2;
+    padding: $spacing-unit;
     overflow-x: auto;
   }
 }

src/components/space-card/SpaceCard.scss

@@ -1,6 +1,6 @@
 .space-card {
-  width: 215px;
-  height: 275px;
+  width: $platform-space-card-width;
+  height: $platform-space-card-height;
   transition-duration: 0.35s;
 
   &:deep() {

src/components/space-creation-card/SpaceCreationCard.scss

@@ -1,6 +1,6 @@
 .space-creation-card {
-  width: 215px;
-  height: 275px;
+  width: $platform-project-card-width;
+  height: $platform-space-card-height;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
   color: $color-primary;
 

src/styles/layout.scss

@@ -1,5 +1,11 @@
-#layout {
+.platform-layout {
   width: 100%;
-  min-height: 100vh;
+  height: 100vh;
   background-color: $color-tertiary-lightest;
+
+  .view-container {
+    height: calc(100% - #{$platform-header-height});
+    padding: $spacing-unit*2;
+    overflow-y: auto;
+  }
 }

src/styles/variables.scss

@@ -0,0 +1,6 @@
+// Sizing variables
+$platform-header-height: 62px;
+$platform-space-card-width: 215px;
+$platform-space-card-height: 275px;
+$platform-project-card-width: 215px;
+$platform-project-card-height: 275px;

src/views/dashboard/Dashboard.scss

@@ -1,10 +1,6 @@
 .dashboard-view {
-  height: calc(100% - 62px);
-  padding: $spacing-unit*2;
-
   &__head {
     display: grid;
-    // grid-template-rows: repeat( auto-fill, 220px );
     grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
     gap: $spacing-unit*2;
   }

src/views/projects/Projects.scss

@@ -1,6 +1,4 @@
 .projects-view {
-  padding: 0 $spacing-unit*2;
-
   .loader {
     position: absolute;
     top: calc(50% - 6px);
@@ -11,15 +9,33 @@
   .sub-header {
     display: flex;
     align-items: center;
-    padding: $spacing-unit/2 $spacing-unit*2;
 
-    > * {
-      margin: 0 $spacing-unit/2;
+    &--left {
+      margin-right: auto;
+      display: flex;
+    }
+
+    &--center {
+      margin: 0 auto;
+      display: flex;
+
+      .bimdata-search-bar {
+        background-color: $color-white;
+      }
+    }
+
+    &--right {
+      margin-left: auto;
+      display: flex;
+      gap: $spacing-unit;
     }
   }
 
   .projects-list {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, $platform-project-card-width);
+    justify-content: space-between;
+    gap: $spacing-unit*3 $spacing-unit*2;
+    padding: $spacing-unit*2 0;
   }
 }

src/views/projects/Projects.vue

@@ -6,8 +6,15 @@
     <template v-else>
 
       <div class="sub-header">
-        <GoBackButton />
-        <!-- TODO -->
+        <div class="sub-header--left">
+          <GoBackButton />
+        </div>
+        <div class="sub-header--center">
+          <!-- TODO -->
+        </div>
+        <div class="sub-header-right">
+          <!-- TODO -->
+        </div>
       </div>
 
       <transition name="fade" appear>

src/views/spaces/Spaces.scss

@@ -1,6 +1,4 @@
 .spaces-view {
-  padding: $spacing-unit*2;
-
   .loader {
     position: absolute;
     top: calc(50% - 6px);
@@ -29,17 +27,13 @@
     &--right {
       margin-left: auto;
       display: flex;
-
-      .bimdata-btn {
-        margin-left: $spacing-unit;
-      }
+      gap: $spacing-unit;
     }
-
   }
 
   .spaces-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 215px);
+    grid-template-columns: repeat(auto-fill, $platform-space-card-width);
     justify-content: space-between;
     gap: $spacing-unit*3 $spacing-unit*2;
     padding: $spacing-unit*2 0;

vue.config.js

@@ -4,6 +4,7 @@ module.exports = {
       sass: {
         prependData: `
           @import '~@bimdata/design-system/dist/scss/BIMDataVariables.scss';
+          @import '@/styles/variables.scss';
         `
       }
     }