Update and fix theming images

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

6 files changed, 64 insertions, 59 deletions

diff --git a/core/src/components/login/LoginButton.vue b/core/src/components/login/LoginButton.vue
index f7d426e6c63..e99398ba09a 100644
--- a/core/src/components/login/LoginButton.vue
+++ b/core/src/components/login/LoginButton.vue
@@ -20,25 +20,33 @@
   -->
 
 <template>
-	<div id="submit-wrapper" @click="$emit('click')">
-		<input id="submit-form"
-			type="submit"
-			class="login primary"
+	<div class="submit-wrapper" @click="$emit('click')">
+		<input type="submit"
+			class="submit-wrapper__input primary"
 			title=""
-			:value="!loading ? t('core', 'Log in') : t('core', 'Logging in …')">
-		<div class="submit-icon"
-			:class="{
-				'icon-confirm-white': !loading,
-				'icon-loading-small': loading && invertedColors,
-				'icon-loading-small-dark': loading && !invertedColors,
-			}" />
+			:value="!loading ? value : valueLoading">
+		<div v-if="loading" class="submit-wrapper__icon icon-loading-small-dark" />
+		<ArrowRight v-else class="submit-wrapper__icon" />
 	</div>
 </template>
 
 <script>
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+
 export default {
 	name: 'LoginButton',
+	components: {
+		ArrowRight,
+	},
 	props: {
+		value: {
+			type: String,
+			default: t('core', 'Log in'),
+		},
+		valueLoading: {
+			type: String,
+			default: t('core', 'Logging in …'),
+		},
 		loading: {
 			type: Boolean,
 			required: true,
@@ -51,6 +59,36 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.submit-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 5px;
+    position: relative;
+	margin: 0 auto;
 
+	&__input {
+		width: 260px;
+		height: 50px;
+	}
+
+	&__icon {
+		display: flex;
+		position: absolute;
+		right: 24px;
+		transition: right 100ms ease-in-out;
+		/* The submit icon is positioned on the submit button.
+		From the user point of view the icon is part of the
+		button, so the clicks on the icon have to be
+		applied to the button instead. */
+		pointer-events: none;
+	}
+
+	&__input:hover + &__icon:not(.icon-loading-small-dark),
+	&__input:focus + &__icon:not(.icon-loading-small-dark),
+	&__input:active + &__icon:not(.icon-loading-small-dark) {
+		right: 20px;
+	}
+}
 </style>
diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue
index e702961d50e..9114c0a728a 100644
--- a/core/src/components/login/LoginForm.vue
+++ b/core/src/components/login/LoginForm.vue
@@ -89,7 +89,7 @@
 				</a>
 			</p>
 
-			<LoginButton :loading="loading" :inverted-colors="invertedColors" />
+			<LoginButton :loading="loading" />
 
 			<p v-if="invalidPassword"
 				class="warning wrongPasswordMsg">
@@ -158,10 +158,6 @@ export default {
 			type: Number,
 			default: 0,
 		},
-		invertedColors: {
-			type: Boolean,
-			default: false,
-		},
 		autoCompleteAllowed: {
 			type: Boolean,
 			default: true,
diff --git a/core/src/components/login/PasswordLessLoginForm.vue b/core/src/components/login/PasswordLessLoginForm.vue
index 94e7b35fa0e..3c0013936f0 100644
--- a/core/src/components/login/PasswordLessLoginForm.vue
+++ b/core/src/components/login/PasswordLessLoginForm.vue
@@ -25,7 +25,6 @@
 
 			<LoginButton v-if="validCredentials"
 				:loading="loading"
-				:inverted-colors="invertedColors"
 				@click="authenticate" />
 		</fieldset>
 	</form>
@@ -74,10 +73,6 @@ export default {
 			type: [String, Boolean],
 			default: false,
 		},
-		invertedColors: {
-			type: Boolean,
-			default: false,
-		},
 		autoCompleteAllowed: {
 			type: Boolean,
 			default: true,
diff --git a/core/src/components/login/ResetPassword.vue b/core/src/components/login/ResetPassword.vue
index 79589a96aca..7a499baa2f0 100644
--- a/core/src/components/login/ResetPassword.vue
+++ b/core/src/components/login/ResetPassword.vue
@@ -37,17 +37,7 @@
 				<label for="user" class="infield">{{ t('core', 'Username or email') }}</label>
 			</p>
 			<div id="reset-password-wrapper">
-				<input id="reset-password-submit"
-					type="submit"
-					class="login primary"
-					title=""
-					:value="t('core', 'Reset password')">
-				<div class="submit-icon"
-					:class="{
-						'icon-confirm-white': !loading,
-						'icon-loading-small': loading && invertedColors,
-						'icon-loading-small-dark': loading && !invertedColors,
-					}" />
+				<LoginButton :value="t('core', 'Reset password')" />
 			</div>
 			<p v-if="message === 'send-success'"
 				class="update">
@@ -77,11 +67,14 @@
 
 <script>
 import axios from '@nextcloud/axios'
-
 import { generateUrl } from '@nextcloud/router'
+import LoginButton from './LoginButton.vue'
 
 export default {
 	name: 'ResetPassword',
+	components: {
+		LoginButton,
+	},
 	props: {
 		username: {
 			type: String,
@@ -91,10 +84,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		invertedColors: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	data() {
 		return {
diff --git a/core/src/components/login/UpdatePassword.vue b/core/src/components/login/UpdatePassword.vue
index 95778b993c8..36a63a6254a 100644
--- a/core/src/components/login/UpdatePassword.vue
+++ b/core/src/components/login/UpdatePassword.vue
@@ -49,18 +49,9 @@
 				</label>
 			</div>
 
-			<div id="submit-wrapper">
-				<input id="submit"
-					type="submit"
-					class="login primary"
-					title=""
-					:value="!loading ? t('core', 'Reset password') : t('core', 'Resetting password')">
-				<div class="submit-icon"
-					:class="{
-						'icon-loading-small': loading && invertedColors,
-						'icon-loading-small-dark': loading && !invertedColors
-					}" />
-			</div>
+			<LoginButton :loading="loading"
+				:value="t('core', 'Reset password')"
+				:value-loading="t('core', 'Resetting password')" />
 
 			<p v-if="error && message" :class="{warning: error}">
 				{{ message }}
@@ -71,9 +62,13 @@
 
 <script>
 import Axios from '@nextcloud/axios'
+import LoginButton from './LoginButton.vue'
 
 export default {
 	name: 'UpdatePassword',
+	components: {
+		LoginButton,
+	},
 	props: {
 		username: {
 			type: String,
@@ -83,10 +78,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		invertedColors: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	data() {
 		return {
diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue
index 70ac8da6f55..e2ca484126c 100644
--- a/core/src/views/Login.vue
+++ b/core/src/views/Login.vue
@@ -30,7 +30,6 @@
 					:messages="messages"
 					:errors="errors"
 					:throttle-delay="throttleDelay"
-					:inverted-colors="invertedColors"
 					:auto-complete-allowed="autoCompleteAllowed"
 					@submit="loading = true" />
 				<a v-if="canResetPassword && resetPasswordLink !== ''"
@@ -68,7 +67,6 @@
 				class="login-additional">
 				<PasswordLessLoginForm :username.sync="user"
 					:redirect-url="redirectUrl"
-					:inverted-colors="invertedColors"
 					:auto-complete-allowed="autoCompleteAllowed"
 					:is-https="isHttps"
 					:is-localhost="isLocalhost"
@@ -85,14 +83,12 @@
 					<ResetPassword v-if="resetPassword"
 						:username.sync="user"
 						:reset-password-link="resetPasswordLink"
-						:inverted-colors="invertedColors"
 						@abort="resetPassword = false" />
 				</div>
 			</div>
 			<div v-else-if="resetPasswordTarget !== ''">
 				<UpdatePassword :username.sync="user"
 					:reset-password-target="resetPasswordTarget"
-					:inverted-colors="invertedColors"
 					@done="passwordResetFinished" />
 			</div>
 		</transition>
@@ -150,7 +146,6 @@ export default {
 			messages: loadState('core', 'loginMessages', []),
 			redirectUrl: loadState('core', 'loginRedirectUrl', false),
 			throttleDelay: loadState('core', 'loginThrottleDelay', 0),
-			invertedColors: OCA.Theming && OCA.Theming.inverted,
 			canResetPassword: loadState('core', 'loginCanResetPassword', false),
 			resetPasswordLink: loadState('core', 'loginResetPasswordLink', ''),
 			autoCompleteAllowed: loadState('core', 'loginAutocomplete', true),
@@ -165,6 +160,7 @@ export default {
 			hideLoginForm: loadState('core', 'hideLoginForm', false),
 		}
 	},
+
 	methods: {
 		passwordResetFinished() {
 			this.resetPasswordTarget = ''