From fe8ecdf1d286fb12232a6c2a44730edc18dc2586 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 27 Aug 2021 18:39:15 +0200
Subject: [PATCH] Update room onboarding styling

---
 client/src/components/rooms/RoomsOnboarding.vue | 15 ++++++++++++---
 client/src/pages/rooms.vue                      |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue
index e99603a2..0e1d2550 100644
--- a/client/src/components/rooms/RoomsOnboarding.vue
+++ b/client/src/components/rooms/RoomsOnboarding.vue
@@ -3,7 +3,9 @@
     <h1
       class="rooms-onboarding__heading"
       data-cy="page-title">Räume</h1>
-    <p data-cy="rooms-onboarding-text">
+    <p
+      data-cy="rooms-onboarding-text"
+      class="rooms-onboarding__text">
       Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
     </p>
     <div class="rooms-onboarding__button">
@@ -46,9 +48,16 @@
     width: 100vw;
     max-width: 800px;
     flex-direction: column;
-    justify-items: center;
-    justify-content: center;
     justify-self: center;
     margin: 0 auto;
+    grid-column: 1 / -1;
+    align-items: center;
+
+    &__text {
+      @include regular-text;
+      text-align: center;
+      max-width: 500px;
+      margin-bottom: $large-spacing;
+    }
   }
 </style>
diff --git a/client/src/pages/rooms.vue b/client/src/pages/rooms.vue
index acee8d7e..7fd66aa5 100644
--- a/client/src/pages/rooms.vue
+++ b/client/src/pages/rooms.vue
@@ -4,6 +4,7 @@
       <room-widget
         v-bind="room"
         :key="room.name"
+        class="rooms-page__widget"
         data-cy="room-widget"
         v-for="room in filteredRooms"/>
       <add-room
@@ -112,7 +113,7 @@
       }
     }
 
-    & > div {
+    &__widget, &__add-room {
       flex: 0 0 30%;
       margin-bottom: $large-spacing;
       margin-right: 1%;
@@ -122,6 +123,5 @@
         margin-right: inherit;
       }
     }
-
   }
 </style>