instance specific panel: style differently if docked into the about page

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>

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
     }
   }
 }

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>