From 69e551911c8855d72e32f04a09bf598b9defc9ea Mon Sep 17 00:00:00 2001
From: Ariadne Conill <ariadne@dereferenced.org>
Date: Tue, 1 Oct 2019 09:31:29 +0000
Subject: [PATCH] instance specific panel: style differently if docked into the
 about page

---
 src/components/about/about.vue                      |  2 +-
 .../instance_specific_panel.js                      |  6 ++++++
 .../instance_specific_panel.vue                     | 13 +++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 3d7a5775..db5d805c 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sidebar">
-    <instance-specific-panel v-if="isMobileLayout || showInstanceSpecificPanel" />
+    <instance-specific-panel v-if="isMobileLayout || showInstanceSpecificPanel" header="true" />
     <features-panel v-if="showFeaturesPanel" />
     <terms-of-service-panel />
   </div>
diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js
index 09e3d055..c0ef59bf 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.js
+++ b/src/components/instance_specific_panel/instance_specific_panel.js
@@ -1,7 +1,13 @@
 const InstanceSpecificPanel = {
+  props: [
+    'header'
+  ],
   computed: {
     instanceSpecificPanelContent () {
       return this.$store.state.instance.instanceSpecificPanelContent
+    },
+    sitename () {
+      return this.$store.state.instance.name
     }
   }
 }
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index 7448ca06..9e170ef5 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="instance-specific-panel">
-    <div class="panel panel-default">
-      <div class="panel-body">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04" v-if="header">
+        <div class="title">{{ $t('nav.about') }} {{ sitename }}</div>
+      </div>
+      <div class="panel-body isp-content">
         <!-- eslint-disable vue/no-v-html -->
         <div v-html="instanceSpecificPanelContent" />
         <!-- eslint-enable vue/no-v-html -->
@@ -11,3 +14,9 @@
 </template>
 
 <script src="./instance_specific_panel.js" ></script>
+
+<style lang="scss">
+.isp-content {
+  margin: 1em
+}
+</style>