Update styling on room widget popover

client/src/components/rooms/RoomWidget.vue

@@ -1,17 +1,19 @@
 <template>
-  <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget" :class="roomClass">
-    <div class="room-widget__content">
+  <div class="room-widget" :class="roomClass">
+    <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
       <room-group-widget v-bind="userGroup"></room-group-widget>
       <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
-    </div>
+    </router-link>
     <div class="room-widget__footer">
-      <div class="room-widget__more-link">
-        <ellipses></ellipses>
-        <room-popover :id="id"></room-popover>
+      <div>
+        <a @click="showMenu = !showMenu" class="room-widget__more-link">
+          <ellipses></ellipses>
+        </a>
+        <room-popover :id="id" v-if="showMenu"></room-popover>
       </div>
     </div>
-  </router-link>
+  </div>
 </template>
 
 <script>
@@ -21,7 +23,7 @@
   import RoomPopover from '@/components/rooms/RoomPopover';
 
   export default {
-    props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup'],
+    props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup', 'id'],
 
     components: {
       RoomEntryCountWidget,
@@ -30,6 +32,12 @@
       RoomPopover
     },
 
+    data() {
+      return {
+        showMenu: false
+      }
+    },
+
     computed: {
       roomClass() {
         return `room-widget--${this.appearance}`
@@ -50,8 +58,7 @@
     grid-template-rows: 210px 1fr;
     /*overflow: hidden;*/
     @include widget-shadow;
-
-    cursor: pointer;
+    border: 0;
 
     /*
      * For IE10+
@@ -70,18 +77,25 @@
     &__content {
       padding: 22px;
       color: $color-darkgrey-1;
+      cursor: pointer;
     }
 
     &__title {
       font-size: 1.375rem;
     }
 
+    &__more-link {
+      cursor: pointer;
+    }
+
     &__footer {
       background-color: rgba(51, 51, 51, 0.18);
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
       position: relative;
+      border-bottom-left-radius: $default-border-radius;
+      border-bottom-right-radius: $default-border-radius;
 
       /*
        * For IE10+

client/src/styles/_mixins.scss

@@ -3,7 +3,7 @@
 @mixin widget-shadow {
   border-radius: $default-border-radius;
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-
+  border: 1px solid $color-lightgrey-2;
 }
 
 @mixin room-widget-text-style {