Update styling for room entry actions

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>

client/src/components/rooms/RoomEntry.vue

@@ -115,8 +115,8 @@
 
     &__more {
       position: absolute;
-      top: 0;
-      right: 0;
+      top: 10px;
+      right: 10px;
     }
 
   }