From 739e29d8722e38fb0727bcc594eb85376154d16f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 1 Sep 2021 16:49:01 +0200
Subject: [PATCH] Update styling for room entry actions

---
 client/src/components/rooms/MoreActions.vue | 19 ++++++++++++++++---
 client/src/components/rooms/RoomEntry.vue   |  4 ++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/rooms/MoreActions.vue b/client/src/components/rooms/MoreActions.vue
index 7ad12c3a..8ddcf15a 100644
--- a/client/src/components/rooms/MoreActions.vue
+++ b/client/src/components/rooms/MoreActions.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="more-actions">
     <a
-      class="room-actions__more-link"
+      :class="{'more-actions__toggle--background': background}"
+      class="more-actions__toggle"
       data-cy="toggle-more-actions-menu"
       @click="toggleMenu">
       <ellipses/>
     </a>
     <widget-popover
-      class="room-actions__popover"
+      class="more-actions__popover"
       v-if="showMenu"
       @hide-me="showMenu = false">
       <slot/>
@@ -20,6 +21,12 @@
   import WidgetPopover from '@/components/ui/WidgetPopover';
 
   export default {
+    props: {
+      background: {
+        type: Boolean,
+        default: false
+      }
+    },
 
     components: {
       Ellipses,
@@ -46,7 +53,13 @@
     svg {
       width: 30px;
       fill: $color-charcoal-dark;
-      margin-right: 15px;
+      //margin-right: 15px;
+    }
+
+    &__toggle {
+      background: white;
+      display: flex;
+      border-radius: 5px;
     }
   }
 </style>
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 7fa2a0bd..86ecc014 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -115,8 +115,8 @@
 
     &__more {
       position: absolute;
-      top: 0;
-      right: 0;
+      top: 10px;
+      right: 10px;
     }
 
   }