fix About page

js/src/components/Settings/SettingMenuItem.vue

@@ -32,8 +32,6 @@ export default class SettingMenuItem extends Vue {
 <style lang="scss" scoped>
 li.setting-menu-item {
   font-size: 1.05rem;
-  background-color: #fff1de;
-  color: $background-color;
   margin: auto;
 
   span {
@@ -49,7 +47,6 @@ li.setting-menu-item {
   &:hover,
   &.active {
     cursor: pointer;
-    background-color: lighten(#fea72b, 10%);
   }
 }
 </style>

js/src/views/About.vue

@@ -1,29 +1,30 @@
 <template>
   <div class="container content">
-    <div class="hero intro is-small is-primary">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">{{ $t("About Mobilizon") }}</h1>
-          <p>
-            {{
-              $t(
-                "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
-              )
-            }}
-          </p>
-          <b-button
-            icon-left="open-in-new"
-            size="is-large"
-            type="is-secondary"
-            tag="a"
-            href="https://joinmobilizon.org"
-            >{{ $t("Learn more") }}</b-button
-          >
+    <main>
+      <div class="hero intro has-background-primary has-text-primary-dark">
+        <div class="hero-body">
+          <div class="container">
+            <h1 class="title">{{ $t("About Mobilizon") }}</h1>
+            <p>
+              {{
+                $t(
+                  "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
+                )
+              }}
+            </p>
+            <b-button
+              icon-left="open-in-new"
+              size="is-large"
+              type="is-secondary"
+              tag="a"
+              href="https://joinmobilizon.org"
+              >{{ $t("Learn more") }}</b-button
+            >
+          </div>
         </div>
       </div>
-    </div>
-    <main class="container">
-      <div class="columns">
+
+      <div class="columns main-section">
         <div class="column is-one-quarter-desktop">
           <aside class="menu">
             <p class="menu-list">
@@ -65,9 +66,9 @@
     </main>
 
     <!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker -->
-    <div class="hero register is-primary is-medium">
+    <div class="hero register has-background-black">
       <div class="hero-body">
-        <div class="container has-text-centered">
+        <div class="has-text-centered">
           <div class="columns">
             <div class="column" v-if="config && config.registrationsOpen">
               <h2 class="title">{{ $t("Register on this instance") }}</h2>
@@ -118,7 +119,8 @@ export default class About extends Vue {
 
 <style lang="scss" scoped>
 .hero.is-primary {
-  background: $background-color;
+  background: $primary;
+  margin: 0;
 
   .title {
     margin: 30px auto 1rem auto;
@@ -149,4 +151,12 @@ aside.menu {
 ul.menu-list > li > a {
   text-decoration: none;
 }
+
+.hero {
+  margin: 1em 0;
+}
+
+.main-section {
+  margin: 1em 0;
+}
 </style>

js/src/views/About/AboutInstance.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="config">
-    <section class="hero is-primary">
+    <section class="hero has-background-dark">
       <div class="hero-body">
         <div class="container">
           <h2 class="title">{{ config.name }}</h2>

js/src/views/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="section container">
-    <h1 class="title">{{ $t("Explore") }} IN DEV MODE</h1>
+    <h1 class="title">{{ $t("Explore") }}</h1>
     <section v-if="tag">
       <i18n path="Events tagged with {tag}">
         <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
@@ -370,6 +370,9 @@ export default class Search extends Vue {
   }
 
   get geohash(): string | undefined {
+    if (!this.location) {
+      return undefined;
+    }
     console.info("geohash location", this.location);
 
     if (this.location && this.location.geom) {