Refactor simple list styling, also some other style polishing

client/src/components/WidgetPopover.vue

@@ -27,7 +27,7 @@
     display: flex;
     flex-direction: column;
     background-color: $color-white;
-    padding: 20px;
+    padding: 0;
     z-index: 100;
     @include widget-shadow;
 
@@ -43,6 +43,9 @@
     display: grid;
 
     &__link {
+      cursor: pointer;
+      padding: 0 $medium-spacing;
+
       & > a {
         display: inline-block;
         color: $color-silver-dark;
@@ -55,6 +58,7 @@
 
       &--large {
         line-height: 40px;
+        padding: $small-spacing $medium-spacing;
         & > a, & {
           @include small-text;
         }
@@ -64,5 +68,9 @@
         font-weight: 600;
       }
     }
+
+    &__divider {
+      border-top: 1px solid $color-silver-dark;
+    }
   }
 </style>

client/src/components/profile/ClassList.vue

@@ -2,9 +2,9 @@
   <div class="school-class">
     <h2 class="school-class__name">{{name}}</h2>
     <div class="school-class__members school-class-members">
-      <ul class="school-class-members__list members-list members-list--active" data-cy="active-class-members-list">
+      <ul class="school-class-members__list simple-list simple-list--active" data-cy="active-class-simple-list">
         <li
-          class="members-list__item member-item"
+          class="simple-list__item member-item"
           data-cy="school-class-member"
           v-for="member in activeMembers"
           :key="member.id">
@@ -18,16 +18,16 @@
         </li>
       </ul>
       <h3 class="school-class__inactive-heading">Deaktivierte Benutzer</h3>
-      <ul data-cy="inactive-class-members-list" class="members-list members-list--inactive">
+      <ul data-cy="inactive-class-simple-list" class="simple-list simple-list--inactive">
         <li
-          class="members-list__item member-item"
+          class="simple-list__item member-item"
           data-cy="school-class-member"
           v-for="member in inactiveMembers"
           :key="member.id">
           <span class="member-item__name">{{fullName(member)}}</span>
           <span class="member-item__role">{{role(member)}}</span>
           <a
-            class="member-item__action"
+            class="member-item__action simple-list__action"
             data-cy="add-to-class"
             v-if="teacher"
             @click="$emit('add', member)">Aktivieren</a>
@@ -63,8 +63,6 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  $height: 52px;
-
   .school-class {
     &__inactive-heading {
       @include heading-4;
@@ -72,27 +70,7 @@
     }
   }
 
-  .members-list {
-    border-top: 1px solid $color-silver-dark;
-
-    &--active {
-      margin-bottom: 2*$large-spacing;
-    }
-
-    &__item {
-      line-height: $height;
-      height: $height;
-      border-bottom: 1px solid $color-silver-dark;
-    }
-  }
-
   .member-item {
-    line-height: $height;
-    height: $height;
-
-    display: flex;
-    flex-direction: row;
-
     &__name {
       font-family: $sans-serif-font-family;
       font-weight: $font-weight-bold;
@@ -105,8 +83,6 @@
     }
 
     &__action {
-      @include default-link;
-      color: $color-brand;
       flex: 0 1 110px;
       padding-left: $large-spacing;
     }

client/src/styles/_simple-list.scss

@@ -0,0 +1,24 @@
+@import "variables";
+
+.simple-list {
+  border-top: 1px solid $color-silver-dark;
+
+  &--active {
+    margin-bottom: 2*$large-spacing;
+  }
+
+  &__item {
+    line-height: $list-height;
+    height: $list-height;
+    border-bottom: 1px solid $color-silver-dark;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__action {
+    @include default-link;
+    color: $color-brand;
+  }
+}

client/src/styles/_variables.scss

@@ -56,6 +56,9 @@ $red: #FA5F5F;
 $green: #6DD79A;
 $brown: #EB9E77;
 
+$list-height: 52px;
+
+
 
 $default-border-radius: 13px;
 $input-border-radius: 3px;

client/src/styles/main.scss

@@ -23,3 +23,4 @@
 @import "student-submission";
 @import "module-activity";
 @import "book-subnavigation";
+@import "simple-list";