From 01b2dce74d0bfb797b251b2adb0487e2384ef019 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:29:58 +0200
Subject: [PATCH 1/7] Fix search field

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/SearchField.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/src/components/SearchField.vue b/js/src/components/SearchField.vue
index bc83c04ca..275e91948 100644
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-input icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
+    <b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
@@ -20,3 +20,10 @@ export default class SearchField extends Vue {
   }
 }
 </script>
+
+<style lang="scss">
+    input.searchField {
+        box-shadow: none;
+        border-color: #b5b5b5;
+    }
+</style>
\ No newline at end of file

From 98dcbbe5b0d6f85a052098118f7956843ee7712d Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:36:11 +0200
Subject: [PATCH 2/7] Change base colors

Also fixes the navbar Create button issue

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/variables.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/js/src/variables.scss b/js/src/variables.scss
index 3fb70b1d2..5921c99cc 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -5,11 +5,21 @@ $primary-invert: findColorInvert($primary);
 $secondary: #FAB12D;
 $secondary-invert: findColorInvert($secondary);
 
+$success: #78cc8a;
+$success-invert: findColorInvert($success);
+$info: #36bcd4;
+$info-invert: findColorInvert($info);
+$danger: #ff7061;
+$danger-invert: findColorInvert($danger);
+
 $colors: map-merge(
     $colors,
     (
         "primary": ($primary, $primary-invert),
-        "secondary": ($secondary, $secondary-invert)
+        "secondary": ($secondary, $secondary-invert),
+        "success": ($success, $success-invert),
+        "info": ($info, $info-invert),
+        "danger": ($danger, $danger-invert),
     )
 );
 

From dff27cad9d520bc281501cbfda313ce67c1be5cc Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:39:24 +0200
Subject: [PATCH 3/7] Add margin below description instance on homepage

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Home.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index a5c98a1f9..c20c5d4b1 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -5,7 +5,7 @@
           <div class="container">
             <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
             <p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}
-            <p>{{ config.description }}</p>
+            <p class="instance-description">{{ config.description }}</p>
             <!-- We don't invite to find other instances yet -->
             <!-- <p v-if="!config.registrationsOpen">
               {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
@@ -325,5 +325,9 @@ export default class Home extends Vue {
     .column figure.image img {
       max-width: 400px;
     }
+
+    .instance-description {
+      margin-bottom: 1rem;
+    }
   }
 </style>

From ac05baf1a8d798c0e18c941277ad58c8a76c563a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:48:03 +0200
Subject: [PATCH 4/7] Fix padding on organizer / city section on event card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/EventCard.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 653f593ee..018d717f3 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -46,8 +46,9 @@ A simple card for an event
       </div>
       <span class="organizer-place-wrapper">
         <span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span>
+        <span v-if="actorDisplayName && actorDisplayName !== '@'">-</span>
         <span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)">
-          - {{ event.physicalAddress.locality || event.physicalAddress.description }}
+          {{ event.physicalAddress.locality || event.physicalAddress.description }}
         </span>
       </span>
     </div>
@@ -201,6 +202,11 @@ export default class EventCard extends Vue {
       }
       span.organizer-place-wrapper {
         display: flex;
+        padding: 0 0.5rem 0.3rem;
+
+        span {
+          padding-right: 0.25rem;
+        }
 
         span:last-child {
           flex: 1;

From cab4ebf64e93a2e82c53b297c4f1a494d5bb3314 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:50:23 +0200
Subject: [PATCH 5/7] Add margin above title in Explore section

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/Explore.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/js/src/views/Event/Explore.vue b/js/src/views/Event/Explore.vue
index 909abd301..489820449 100644
--- a/js/src/views/Event/Explore.vue
+++ b/js/src/views/Event/Explore.vue
@@ -58,6 +58,10 @@ export default class Explore extends Vue {
 </script>
 
 <style scoped lang="scss">
+  h1.title {
+    margin-top: 1.5rem;
+  }
+
   h3.title {
     margin-bottom: 1.5rem;
   }

From e56854f13bd7713e7ceee491156c2e4b610dd815 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 13:56:54 +0200
Subject: [PATCH 6/7] Change external link to joinmobilizon to about page on
 register page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/User/Register.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 589da6977..4b330f924 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -17,9 +17,9 @@
               <li>{{ $t('Other stuff…') }}</li>
             </ul>
           </div>
-          <i18n path="Learn more on" tag="p">
-            <a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
-          </i18n>
+          <router-link :to="{ name: RouteName.ABOUT }">
+            {{ $t('Learn more') }}
+          </router-link>
           <hr>
           <div class="content">
             <h3 class="title">{{ $t('About this instance') }}</h3>

From 8d88aa1450c1c905e3b278def1c06f98660fca6a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 14:20:09 +0200
Subject: [PATCH 7/7] Improve Registration / Login UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Account/Register.vue        | 112 +++++++++++------------
 js/src/views/User/Login.vue              |  29 +++---
 js/src/views/User/Register.vue           |  56 ++++++------
 js/src/views/User/ResendConfirmation.vue |  48 ++++++----
 js/src/views/User/SendPasswordReset.vue  |  50 ++++++----
 5 files changed, 157 insertions(+), 138 deletions(-)

diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index d0144e041..c6840ee7f 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -1,70 +1,60 @@
 <template>
-  <div>
-    <section class="hero">
-      <div class="hero-body">
+  <section class="container">
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
         <h1 class="title">
           {{ $t('Register an account on Mobilizon!') }}
         </h1>
-      </div>
-    </section>
-    <section>
-      <div class="container">
-        <div class="columns is-mobile">
-          <div class="column">
-            <form v-if="!validationSent">
-              <b-field
-                :label="$t('Username')"
-                :type="errors.preferred_username ? 'is-danger' : null"
-                :message="errors.preferred_username"
-              >
-                <b-field>
-                  <b-input
-                    aria-required="true"
-                    required
-                    expanded
-                    v-model="person.preferredUsername"
-                  />
-                  <p class="control">
-                    <span class="button is-static">@{{ host }}</span>
-                  </p>
-                </b-field>
-              </b-field>
+        <form v-if="!validationSent">
+          <b-field
+            :label="$t('Username')"
+            :type="errors.preferred_username ? 'is-danger' : null"
+            :message="errors.preferred_username"
+          >
+            <b-field>
+              <b-input
+                aria-required="true"
+                required
+                expanded
+                v-model="person.preferredUsername"
+              />
+              <p class="control">
+                <span class="button is-static">@{{ host }}</span>
+              </p>
+            </b-field>
+          </b-field>
 
-              <b-field :label="$t('Displayed name')">
-                <b-input v-model="person.name"/>
-              </b-field>
+          <b-field :label="$t('Displayed name')">
+            <b-input v-model="person.name"/>
+          </b-field>
 
-              <b-field :label="$t('Description')">
-                <b-input type="textarea" v-model="person.summary"/>
-              </b-field>
+          <b-field :label="$t('Description')">
+            <b-input type="textarea" v-model="person.summary"/>
+          </b-field>
 
-              <b-field grouped>
-                <div class="control">
-                  <button type="button" class="button is-primary" @click="submit()">
-                     {{ $t('Create my profile') }}
-                  </button>
-                </div>
-              </b-field>
-            </form>
+          <p class="control has-text-centered">
+            <b-button type="is-primary" size="is-large" @click="submit()">
+               {{ $t('Create my profile') }}
+            </b-button>
+          </p>
+        </form>
 
-            <div v-if="validationSent && !userAlreadyActivated">
-              <b-message title="Success" type="is-success">
-                <h2 class="title">
-                  {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
-                </h2>
-                <p>
-                  {{ $t('A validation email was sent to {email}', { email }) }}
-                </p>
-                <p>
-                  {{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
-                </p>
-              </b-message>
-            </div>
-          </div>
+        <div v-if="validationSent && !userAlreadyActivated">
+          <b-message title="Success" type="is-success" closable="false">
+            <h2 class="title">
+              {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
+            </h2>
+            <p>
+              {{ $t('A validation email was sent to {email}', { email }) }}
+            </p>
+            <p>
+              {{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
+            </p>
+          </b-message>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -88,7 +78,7 @@ export default class Register extends Vue {
   validationSent: boolean = false;
   sendingValidation: boolean = false;
 
-  async mounted() {
+  async created() {
     // Make sure no one goes to this page if we don't want to
     if (!this.email) {
       await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
@@ -134,7 +124,7 @@ export default class Register extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .avatar-enter-active {
   transition: opacity 1s ease;
 }
@@ -147,4 +137,8 @@ export default class Register extends Vue {
 .avatar-leave {
   display: none;
 }
+
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
 </style>
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 12f2af73a..08a631516 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="container">
-    <section class="hero">
-      <h1 class="title">
-        {{ $t('Welcome back!') }}
-      </h1>
-    </section>
-
     <b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
       {{ $t('You need to login.') }}
     </b-message>
 
     <section v-if="!currentUser.isLoggedIn">
       <div class="columns is-mobile is-centered">
-        <div class="column is-half">
+        <div class="column is-half-desktop">
+          <h1 class="title">
+            {{ $t('Welcome back!') }}
+          </h1>
           <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
           <form @submit="loginAction">
             <b-field :label="$t('Email')">
@@ -29,27 +26,27 @@
               />
             </b-field>
 
-            <div class="control has-text-centered">
+            <p class="control has-text-centered">
               <button class="button is-primary is-large">
                 {{ $t('Login') }}
               </button>
-            </div>
-            <div class="control">
+            </p>
+            <p class="control">
               <router-link
                 class="button is-text"
                 :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
               >
                 {{ $t('Forgot your password ?') }}
               </router-link>
-            </div>
-            <div class="control" v-if="config && config.registrationsOpen">
+            </p>
+            <p class="control" v-if="config && config.registrationsOpen">
               <router-link
                 class="button is-text"
                 :to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
               >
                 {{ $t('Register') }}
               </router-link>
-            </div>
+            </p>
           </form>
         </div>
       </div>
@@ -166,3 +163,9 @@ export default class Login extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
\ No newline at end of file
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 4b330f924..cdfc2139e 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -11,7 +11,7 @@
       <div class="columns">
         <div class="column">
           <div class="content">
-            <h3 class="title">{{ $t('Features') }}</h3>
+            <h2 class="title">{{ $t('Features') }}</h2>
             <ul>
               <li>{{ $t('Create your communities and your events') }}</li>
               <li>{{ $t('Other stuff…') }}</li>
@@ -22,7 +22,7 @@
           </router-link>
           <hr>
           <div class="content">
-            <h3 class="title">{{ $t('About this instance') }}</h3>
+            <h2 class="title">{{ $t('About this instance') }}</h2>
             <p>
               {{ $t("Your local administrator resumed it's policy:") }}
             </p>
@@ -67,30 +67,28 @@
               />
             </b-field>
 
-            <b-field grouped>
-              <div class="control">
-                <button class="button is-primary">
-                  {{ $t('Register') }}
-                </button>
-              </div>
-              <div class="control">
-                <router-link
-                  class="button is-text"
-                  :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
-                >
-                  {{ $t("Didn't receive the instructions ?") }}
-                </router-link>
-              </div>
-              <div class="control">
-                <router-link
-                  class="button is-text"
-                  :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
-                  :disabled="sendingValidation"
-                >
-                  {{ $t('Login') }}
-                </router-link>
-              </div>
-            </b-field>
+            <p class="control has-text-centered">
+              <button class="button is-primary is-large">
+                {{ $t('Register') }}
+              </button>
+            </p>
+            <p class="control">
+              <router-link
+                class="button is-text"
+                :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
+              >
+                {{ $t("Didn't receive the instructions ?") }}
+              </router-link>
+            </p>
+            <p class="control">
+              <router-link
+                class="button is-text"
+                :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
+                :disabled="sendingValidation"
+              >
+                {{ $t('Login') }}
+              </router-link>
+            </p>
           </form>
 
           <div v-if="errors.length > 0">
@@ -167,7 +165,11 @@ export default class Register extends Vue {
   display: none;
 }
 
-  h3.title {
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+
+  h2.title {
     background: $secondary;
     display: inline;
   }
diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index afb34c854..4ffec0a4b 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -1,24 +1,28 @@
 <template>
   <section class="container">
-    <div class="column">
-      <h1 class="title">
-        {{ $t('Resend confirmation email') }}
-      </h1>
-      <form v-if="!validationSent" @submit="resendConfirmationAction">
-        <b-field label="Email">
-          <b-input aria-required="true" required type="email" v-model="credentials.email"/>
-        </b-field>
-        <button class="button is-primary">
-          {{ $t('Send confirmation email again') }}
-        </button>
-      </form>
-      <div v-else>
-        <b-message type="is-success" :closable="false" title="Success">
-          {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
-        </b-message>
-        <b-message type="is-info">
-          {{ $t("Please check your spam folder if you didn't receive the email.") }}
-        </b-message>
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
+        <h1 class="title">
+          {{ $t('Resend confirmation email') }}
+        </h1>
+        <form v-if="!validationSent" @submit="resendConfirmationAction">
+          <b-field label="Email">
+            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
+          </b-field>
+          <p class="control has-text-centered">
+            <b-button type="is-primary">
+            {{ $t('Send me the confirmation email once again') }}
+            </b-button>
+          </p>
+        </form>
+        <div v-else>
+          <b-message type="is-success" :closable="false" title="Success">
+            {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
+          </b-message>
+          <b-message type="is-info">
+            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+          </b-message>
+        </div>
       </div>
     </div>
   </section>
@@ -73,3 +77,9 @@ export default class ResendConfirmation extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
\ No newline at end of file
diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue
index 5ad1150ed..29b9c24bd 100644
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@@ -1,25 +1,29 @@
 <template>
   <section class="container">
-    <div class="column">
-      <h1 class="title">
-        {{ $t('Password reset') }}
-      </h1>
-      <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
-      <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
-        <b-field label="Email">
-          <b-input aria-required="true" required type="email" v-model="credentials.email"/>
-        </b-field>
-        <button class="button is-primary">
-          {{ $t('Send email to reset my password') }}
-        </button>
-      </form>
-      <div v-else>
-        <b-message type="is-success" :closable="false" title="Success">
-          {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
-        </b-message>
-        <b-message type="is-info">
-          {{ $t("Please check your spam folder if you didn't receive the email.") }}
-        </b-message>
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
+        <h1 class="title">
+          {{ $t('Password reset') }}
+        </h1>
+        <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
+        <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
+          <b-field label="Email">
+            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
+          </b-field>
+          <p class="control has-text-centered">
+              <b-button type="is-primary">
+              {{ $t('Send me an email to reset my password') }}
+            </b-button>
+          </p>
+        </form>
+        <div v-else>
+          <b-message type="is-success" :closable="false" title="Success">
+            {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
+          </b-message>
+          <b-message type="is-info">
+            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+          </b-message>
+        </div>
       </div>
     </div>
   </section>
@@ -85,3 +89,9 @@ export default class SendPasswordReset extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>