From 353b846124b734fc502f1b2d311a7e557f7ee2cf Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Mon, 23 Sep 2019 15:04:33 +0200
Subject: [PATCH] Fix #1631

I don't have time to really test this right now, feel free to do that
before merge.
---
 .../Registration/CreateUserAccount.vue        | 170 ++++++++++--------
 1 file changed, 92 insertions(+), 78 deletions(-)

diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index ebcfb9691..cc16c6e22 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -8,80 +8,98 @@
         </ds-text>
       </ds-space>
     </ds-card>
-    <ds-form
-      v-else
-      class="create-user-account"
-      v-model="formData"
-      :schema="formSchema"
-      @submit="submit"
-    >
-      <template slot-scope="{ errors }">
-        <ds-card class="create-account-card" :header="$t('registration.create-user-account.title')">
+    <ds-card v-else class="create-account-card">
+      <ds-flex gutter="small">
+        <ds-flex-item width="100%">
           <client-only>
-            <locale-switch class="create-account-locale-switch" offset="5" />
+            <locale-switch />
           </client-only>
-          <ds-input
-            id="name"
-            model="name"
-            icon="user"
-            :label="$t('settings.data.labelName')"
-            :placeholder="$t('settings.data.namePlaceholder')"
-          />
-          <ds-input
-            id="about"
-            model="about"
-            type="textarea"
-            rows="3"
-            :label="$t('settings.data.labelBio')"
-            :placeholder="$t('settings.data.labelBio')"
-          />
-          <ds-input
-            id="password"
-            model="password"
-            type="password"
-            autocomplete="off"
-            :label="$t('settings.security.change-password.label-new-password')"
-          />
-          <ds-input
-            id="passwordConfirmation"
-            model="passwordConfirmation"
-            type="password"
-            autocomplete="off"
-            :label="$t('settings.security.change-password.label-new-password-confirm')"
-          />
-          <password-strength :password="formData.password" />
-
-          <ds-text>
-            <input
-              id="checkbox"
-              type="checkbox"
-              v-model="termsAndConditionsConfirmed"
-              :checked="termsAndConditionsConfirmed"
+          <ds-space centered>
+            <img
+              class="create-account-image"
+              alt="Create an account for Human Connection"
+              src="/img/sign-up/nicetomeetyou.svg"
             />
-            <label
-              for="checkbox"
-              v-html="$t('termsAndConditions.termsAndConditionsConfirmed')"
-            ></label>
-          </ds-text>
+          </ds-space>
+        </ds-flex-item>
+        <ds-flex-item width="100%">
+          <ds-space>
+            <ds-heading size="h3">
+              {{ $t('registration.create-user-account.title') }}
+            </ds-heading>
+          </ds-space>
 
-          <template slot="footer">
-            <ds-space class="backendErrors" v-if="backendErrors">
-              <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
-            </ds-space>
-            <ds-button
-              style="float: right;"
-              icon="check"
-              type="submit"
-              :loading="$apollo.loading"
-              :disabled="errors || !termsAndConditionsConfirmed"
-              primary
-            >
-              {{ $t('actions.save') }}
-            </ds-button>
-          </template>
-        </ds-card>
-      </template>
-    </ds-form>
+          <ds-form
+            class="create-user-account"
+            v-model="formData"
+            :schema="formSchema"
+            @submit="submit"
+          >
+            <template slot-scope="{ errors }">
+              <ds-input
+                id="name"
+                model="name"
+                icon="user"
+                :label="$t('settings.data.labelName')"
+                :placeholder="$t('settings.data.namePlaceholder')"
+              />
+              <ds-input
+                id="about"
+                model="about"
+                type="textarea"
+                rows="3"
+                :label="$t('settings.data.labelBio')"
+                :placeholder="$t('settings.data.labelBio')"
+              />
+              <ds-input
+                id="password"
+                model="password"
+                type="password"
+                autocomplete="off"
+                :label="$t('settings.security.change-password.label-new-password')"
+              />
+              <ds-input
+                id="passwordConfirmation"
+                model="passwordConfirmation"
+                type="password"
+                autocomplete="off"
+                :label="$t('settings.security.change-password.label-new-password-confirm')"
+              />
+              <password-strength :password="formData.password" />
+
+              <ds-text>
+                <input
+                  id="checkbox"
+                  type="checkbox"
+                  v-model="termsAndConditionsConfirmed"
+                  :checked="termsAndConditionsConfirmed"
+                />
+                <label
+                  for="checkbox"
+                  v-html="$t('termsAndConditions.termsAndConditionsConfirmed')"
+                ></label>
+              </ds-text>
+
+              <template slot="footer">
+                <ds-space class="backendErrors" v-if="backendErrors">
+                  <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
+                </ds-space>
+                <ds-button
+                  style="float: right;"
+                  icon="check"
+                  type="submit"
+                  :loading="$apollo.loading"
+                  :disabled="errors || !termsAndConditionsConfirmed"
+                  primary
+                >
+                  {{ $t('actions.save') }}
+                </ds-button>
+              </template>
+            </template>
+          </ds-form>
+        </ds-flex-item>
+      </ds-flex>
+    </ds-card>
   </ds-container>
 </template>
 
@@ -157,13 +175,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.create-account-card {
-  position: relative;
-}
-.create-account-locale-switch {
-  position: absolute;
-  top: 1em;
-  right: 1em;
+<style lang="scss" scoped>
+.create-account-image {
+  width: 50%;
+  max-width: 200px;
 }
 </style>