Clean up some client code

client/src/components/AssignmentWithSubmissions.vue

@@ -90,8 +90,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_functions.scss";
 
   .assignment-with-submissions {
     &__title {

client/src/components/StudentSubmission.vue

@@ -57,10 +57,10 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_functions.scss";
 
   .student-submission {
+    @include table-row;
 
     &__student-name {
       font-size: toRem(17px);

client/src/graphql/gql/moduleDetailsQuery.gql

@@ -3,7 +3,7 @@
 #import "./fragments/objectiveGroupParts.gql"
 #import "./fragments/objectiveParts.gql"
 #import "./fragments/moduleParts.gql"
-query ModulesQuery($slug: String!) {
+query ModuleDetailsQuery($slug: String!) {
   module(slug: $slug) {
     ...ModuleParts
     assignments {

client/src/pages/instrumentOverview.vue

@@ -61,16 +61,12 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .instrument-overview {
     display: grid;
     grid-template-rows: auto auto 1fr;
-    justify-items: center;
+    @include centered(800px);
-    justify-self: center;
-    width: 800px;
-    max-width: 100%;
 
     &__heading {
       padding: 2*$large-spacing 0;
@@ -99,12 +95,9 @@
 
     &__list-item {
       padding: $medium-spacing 0;
-      border-top: 1px solid $color-silver;
-      @include regular-text;
 
-      &:last-of-type {
+      @include regular-text;
-        border-bottom: 1px solid $color-silver;
+      @include table-row($color-silver);
-      }
     }
   }
 </style>

client/src/pages/me/myTeam.vue

@@ -12,7 +12,7 @@
       />
     </template>
     <template v-else>
-      <h1 class="my-team__heading">Mein Team {{ me.team }}</h1>
+      <h1 class="my-team__heading">Mein Team</h1>
       <div class="my-team__section">
         <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
         <router-link

client/src/pages/module/module-base.vue

@@ -28,7 +28,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .module-page {
     display: flex;
@@ -37,6 +37,8 @@
     }
     justify-items: center;
 
+    grid-auto-rows: max-content;
+
     @include desktop {
       grid-template-columns: 1fr;
     }

client/src/styles/_buttons.scss

@@ -1,27 +1,18 @@
 .button {
   background: transparent;
-  border: 2px solid $color-silver-dark;
   padding: 5px 15px;
-  border-radius: 3px;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   display: inline-flex;
   cursor: pointer;
+
   @include small-text;
-
+  @include button-border;
-  &--active {
-    border-color: $color-brand;
-  }
-
-  &--primary {
-    border-color: $color-brand;
-  }
 
   &--white-bg {
     background-color: $color-white;
   }
   &--disabled {
-    border: 2px solid $color-silver-light;
     background-color: $color-silver-light;
   }
   &--big {

client/src/styles/_mixins.scss

@@ -145,6 +145,12 @@
   font-weight: 600;
 }
 
+@mixin large-link {
+  font-family: $sans-serif-font-family;
+  font-size: toRem(18px);
+  font-weight: 400;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);
@@ -240,3 +246,38 @@
     margin-bottom: $section-spacing;
   }
 }
+
+
+@mixin button-border {
+  border: 2px solid $color-silver-dark;
+  border-radius: 3px;
+
+  &--active {
+    border-color: $color-brand;
+  }
+
+  &--primary {
+    border-color: $color-brand;
+  }
+
+  &--disabled {
+    border-color: $color-silver-light;
+  }
+}
+
+
+@mixin centered($width: 800px) {
+  width: $width;
+  max-width: 100%;
+  justify-self: center;
+}
+
+@mixin table-row($color: $color-silver-dark) {
+  border-top: 1px solid $color;
+  padding: 15px 0;
+  width: 100%;
+
+  &:last-of-type {
+    border-bottom: 1px solid $color;
+  }
+}

client/src/styles/_student-submission.scss

@@ -1,5 +1,4 @@
-@import "@/styles/_variables.scss";
+@import "~styles/helpers";
-@import "@/styles/_mixins.scss";
 
 .student-submission-row {
   display: grid;
@@ -12,6 +11,5 @@
   }
 
   align-items: center;
-  border-bottom: 1px solid $color-silver-dark;
   padding: 15px 0;
 }