From 01252b3584ab95756e57fca4e7c2966e5cc7fd3f Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 10 Oct 2019 14:04:00 +0200
Subject: [PATCH] refactor: follow @mattwr18 code review

https://github.com/Human-Connection/Human-Connection/pull/1814#pullrequestreview-299434476
---
 webapp/components/PasswordReset/ChangePassword.vue   |  8 ++++++--
 webapp/components/PasswordReset/Request.vue          |  6 ------
 webapp/components/Registration/CreateUserAccount.vue |  8 ++++++--
 webapp/components/Registration/Signup.vue            |  8 ++++++--
 webapp/pages/registration/signup.vue                 | 10 ----------
 5 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index 8f6a4a0ec..e45612171 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -32,13 +32,17 @@
     </ds-form>
     <ds-space v-else>
       <template v-if="changePasswordResult === 'success'">
-        <sweetalert-icon icon="success" />
+        <transition name="ds-transition-fade">
+          <sweetalert-icon icon="success" />
+        </transition>
         <ds-text>
           {{ $t('components.password-reset.change-password.success') }}
         </ds-text>
       </template>
       <template v-else>
-        <sweetalert-icon icon="error" />
+        <transition name="ds-transition-fade">
+          <sweetalert-icon icon="error" />
+        </transition>
         <ds-text>
           <p>
             {{ $t(`components.password-reset.change-password.error`) }}
diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index c7dd759dd..bcececcca 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -102,9 +102,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-.login-image {
-  width: 90%;
-  max-width: 200px;
-}
-</style>
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index 3b2ec3399..be01e0bb0 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -1,12 +1,16 @@
 <template>
   <div v-if="response === 'success'">
-    <sweetalert-icon icon="success" />
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="success" />
+    </transition>
     <ds-text align="center" bold color="success">
       {{ $t('components.registration.create-user-account.success') }}
     </ds-text>
   </div>
   <div v-else-if="response === 'error'">
-    <sweetalert-icon icon="error" />
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="error" />
+    </transition>
     <ds-text align="center" bold color="danger">
       {{ $t('components.registration.create-user-account.error') }}
     </ds-text>
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index ce35c1fc8..00309b1c6 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -46,11 +46,15 @@
   </ds-space>
   <div v-else margin="large">
     <template v-if="!error">
-      <sweetalert-icon icon="info" />
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="info" />
+      </transition>
       <ds-text align="center" v-html="submitMessage" />
     </template>
     <template v-else>
-      <sweetalert-icon icon="error" />
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="error" />
+      </transition>
       <ds-text align="center">{{ error.message }}</ds-text>
     </template>
   </div>
diff --git a/webapp/pages/registration/signup.vue b/webapp/pages/registration/signup.vue
index bff658fa6..721cb6268 100644
--- a/webapp/pages/registration/signup.vue
+++ b/webapp/pages/registration/signup.vue
@@ -32,13 +32,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.signup-image {
-  width: 90%;
-  max-width: 200px;
-}
-.login-card {
-  position: relative;
-}
-</style>