Fix styling of ToS panel for consistency

src/components/terms_of_service_panel/terms_of_service_panel.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
-    <div class="panel panel-default">
-      <div class="panel-body">
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          class="tos-content"
-          v-html="content"
-        />
-      <!-- eslint-enable vue/no-v-html -->
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background">
+        <div class="panel-body">
+          <div class="title">
+            {{ $t('tos_panel.title') }}
+          </div>
+        </div>
       </div>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="tos-content"
+        v-html="content"
+      />
+      <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
 </template>

src/i18n/en.json

@@ -631,6 +631,9 @@
     "year_short": "{0}y",
     "years_short": "{0}y"
   },
+  "tos_panel": {
+    "title": "Terms of Service"
+  },
   "timeline": {
     "collapse": "Collapse",
     "conversation": "Conversation",