1 files changed, 36 insertions, 16 deletions
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index e7118d81..793966eb 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -1,36 +1,56 @@
 <template>
   <Modal
-    :is-open="true"
+    :is-open="shouldShow"
     class="UpdateNotification"
-    :class="{ peek: modalPeeked }"
     :no-background="true"
   >
-    <div class="UpdateNotificationModal panel">
+    <div
+      class="UpdateNotificationModal panel"
+      :class="{ '-peek': !showingMore }"
+    >
       <div class="panel-heading">
         <span class="title">
           {{ $t('update.big_update_title') }}
         </span>
       </div>
       <div class="panel-body">
-        <p>
-          {{ $t('update.big_update_content') }}
-        </p>
-        <p>
+        <div class="content" ref="content">
+          <img class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles"/>
+          <div class="spacer-top"/>
+          <div class="text">
+            <p>
+                {{ $t('update.big_update_content') }}
+            </p>
+            <p class="extra-info">
+                {{ $t('update.update_bugs') }}
+            </p>
+            <p class="extra-info">
+                {{ $t('update.update_changelog') }}
+            </p>
+            </div>
+            <div class="spacer-bottom"/>
+        </div>
+      </div>
+      <div class="panel-footer">
+        <button
+          class="button-default"
+          @click.prevent="neverShowAgain"
+          >
+          {{ $t("general.never_show_again") }}
+        </button>
         <button
-          class="button-unstyled -link tall-status-hider"
+          class="button-default"
           @click.prevent="toggleShowMore"
-        >
+          v-if="!showingMore"
+          >
           {{ $t("general.show_more") }}
         </button>
-        {{ ' ' }}
         <button
-          class="button-unstyled -link tall-status-hider"
-          @click.prevent="toggleShowMore"
-        >
-          {{ $t("general.never_show_again") }}
+          class="button-default"
+          @click.prevent="dismiss"
+          >
+          {{ $t("general.dismiss") }}
         </button>
-          </p>
-        <img class="pleroma-tan" :src="pleromaTanVariant"/>
       </div>
     </div>
   </Modal>