3 files changed, 37 insertions, 30 deletions
diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
index 595f3b4e..9e043e48 100644
--- a/src/components/announcement/announcement.js
+++ b/src/components/announcement/announcement.js
@@ -6,6 +6,16 @@ const Announcement = {
   computed: {
     content () {
       return this.announcement.content
+    },
+    isRead () {
+      return this.announcement.read
+    }
+  },
+  methods: {
+    markAsRead () {
+      if (!this.isRead) {
+        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+      }
     }
   }
 }
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index c31328ee..d8591468 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -1,6 +1,24 @@
 <template>
   <div class="announcement">
-    <rich-content :html="content" />
+    <div class="heading">
+      <h4>{{ $t('announcements.title') }}</h4>
+    </div>
+    <div class="body">
+      <rich-content
+        :html="content"
+        :emoji="announcement.emojis"
+        :handle-links="true"
+      />
+    </div>
+    <div class="footer">
+      <button
+        class="btn button-default"
+        :class="{ toggled: isRead }"
+        @click="markAsRead"
+      >
+        {{ $t('announcements.mark_as_read_action') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -15,5 +33,9 @@
   border-bottom-color: var(--border, $fallback--border);
   border-radius: 0;
   padding: var(--status-margin, $status-margin);
+
+  .heading, .body {
+    margin-bottom: var(--status-margin, $status-margin);
+  }
 }
 </style>
diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
index 716468e6..a2a218fd 100644
--- a/src/components/announcements_page/announcements_page.js
+++ b/src/components/announcements_page/announcements_page.js
@@ -4,37 +4,12 @@ const AnnouncementsPage = {
   components: {
     Announcement
   },
+  mounted () {
+    this.$store.dispatch('fetchAnnouncements')
+  },
   computed: {
     announcements () {
-      return [{
-        "id": "8",
-        "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
-        "starts_at": null,
-        "ends_at": null,
-        "all_day": false,
-        "published_at": "2020-07-03T01:27:38.726Z",
-        "updated_at": "2020-07-03T01:27:38.752Z",
-        "read": true,
-        "mentions": [],
-        "statuses": [],
-        "tags": [],
-        "emojis": [],
-        "reactions": []
-      }, {
-        "id": "8",
-        "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
-        "starts_at": null,
-        "ends_at": null,
-        "all_day": false,
-        "published_at": "2020-07-03T01:27:38.726Z",
-        "updated_at": "2020-07-03T01:27:38.752Z",
-        "read": true,
-        "mentions": [],
-        "statuses": [],
-        "tags": [],
-        "emojis": [],
-        "reactions": []
-      }]
+      return this.$store.state.announcements.announcements
     }
   }
 }