some basic expiration modal. "don't as again" doesn't work yet

src/components/user_card/user_card.js

@@ -8,7 +8,8 @@ import UserNote from '../user_note/user_note.vue'
 import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import MuteConfirm from '../confirm_modal/mute_confirm.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
+
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { usePostStatusStore } from 'src/stores/post_status'
@@ -48,6 +49,19 @@ export default {
     'onClose',
     'hasNoteEditor'
   ],
+  components: {
+    UserAvatar,
+    RemoteFollow,
+    ModerationTools,
+    AccountActions,
+    ProgressButton,
+    FollowButton,
+    Select,
+    RichContent,
+    UserLink,
+    UserNote,
+    UserTimedFilterModal
+  },
   data () {
     return {
       followRequestInProgress: false,
@@ -63,6 +77,7 @@ export default {
       return this.$store.getters.findUser(this.userId)
     },
     relationship () {
+      console.log(this.$store.getters.relationship(this.userId))
       return this.$store.getters.relationship(this.userId)
     },
     classes () {
@@ -144,22 +159,9 @@ export default {
     },
     ...mapGetters(['mergedConfig'])
   },
-  components: {
-    UserAvatar,
-    RemoteFollow,
-    ModerationTools,
-    AccountActions,
-    ProgressButton,
-    FollowButton,
-    Select,
-    RichContent,
-    UserLink,
-    UserNote,
-    MuteConfirm
-  },
   methods: {
     muteUser () {
-      this.$refs.confirmation.optionallyPrompt()
+      this.$refs.timedMuteDialog.optionallyPrompt()
     },
     unmuteUser () {
       this.$store.dispatch('unmuteUser', this.user.id)

src/components/user_card/user_card.scss

@@ -8,6 +8,11 @@
     --_still-image-label-visibility: hidden;
   }
 
+  .btn-mute, .btn-mention {
+    display: block;
+    width: 100%;
+  }
+
   .panel-heading {
     padding: 0.5em 0;
     text-align: center;

src/components/user_card/user_card.vue

@@ -232,7 +232,7 @@
           <div>
             <button
               v-if="relationship.muting"
-              class="btn button-default btn-block toggled"
+              class="btn button-default btn-mute toggled"
               :disabled="user.deactivated"
               @click="unmuteUser"
             >
@@ -240,7 +240,7 @@
             </button>
             <button
               v-else
-              class="btn button-default btn-block"
+              class="btn button-default btn-mute"
               :disabled="user.deactivated"
               @click="muteUser"
             >
@@ -249,7 +249,7 @@
           </div>
           <div>
             <button
-              class="btn button-default btn-block"
+              class="btn button-default btn-mention"
               :disabled="user.deactivated"
               @click="mentionUser"
             >
@@ -314,10 +314,10 @@
       />
     </div>
     <teleport to="#modal">
-      <MuteConfirm
-        ref="confirmation"
-        type="user"
+      <UserTimedFilterModal
         :user="user"
+        :is-mute="true"
+        ref="timedMuteDialog"
       />
     </teleport>
   </div>