enhance inputDiv and optimize modals

Signed-off-by: dartcafe <github@dartcafe.de>

27 files changed, 236 insertions, 358 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index 88f0519d..babca8c1 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -310,7 +310,7 @@ export default {
 	gap: 8px;
 	justify-content: flex-end;
 	align-items: center;
-	margin-top: 14px;
+	margin-top: 36px;
 	.button {
 		margin-left: 10px;
 		margin-right: 0;
diff --git a/src/js/components/Base/InputDiv.vue b/src/js/components/Base/InputDiv.vue
index db4745af..a624f2f1 100644
--- a/src/js/components/Base/InputDiv.vue
+++ b/src/js/components/Base/InputDiv.vue
@@ -25,23 +25,26 @@
 		<h3 v-if="label">
 			{{ label }}
 		</h3>
+
 		<div class="input-wrapper">
 			<input ref="input"
 				:type="type"
 				:value="value"
 				:inputmode="inputmode"
 				:placeholder="placeholder"
-				:class="[{ 'has-modifier': useNumModifiers, 'has-submit': !noSubmit }, 'input', signalingClass]"
+				:class="[{ 'has-modifier': useNumModifiers, 'has-submit': submit }, signalingClass]"
 				@input="$emit('input', $event.target.value)"
 				@change="$emit('change', $event.target.value)"
 				@keyup.enter="$emit('submit', $event.target.value)">
+
 			<Spinner v-if="checking" class="signaling-icon spinner" />
-			<ArrowRight v-if="showSubmit" class="signaling-icon submit" @click="$emit('submit', $refs.input.value)" />
+			<ArrowRightIcon v-if="showSubmit" class="signaling-icon submit" @click="$emit('submit', $refs.input.value)" />
 			<AlertIcon v-if="error" class="signaling-icon error" fill-color="#f45573" />
 			<CheckIcon v-if="success" class="signaling-icon success" fill-color="#49bc49" />
-			<MinusIcon v-if="showModifiers" class="modifier subtract" @click="$emit('subtract')" />
-			<PlusIcon v-if="showModifiers" class="modifier add" @click="$emit('add')" />
+			<MinusIcon v-if="useNumModifiers" class="modifier subtract" @click="subtract()" />
+			<PlusIcon v-if="useNumModifiers" class="modifier add" @click="add()" />
 		</div>
+
 		<div v-if="helperText!==null" :class="['helper', signalingClass]">
 			{{ helperText }}
 		</div>
@@ -51,7 +54,7 @@
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import AlertIcon from 'vue-material-design-icons/AlertCircle.vue'
 import Spinner from '../AppIcons/Spinner.vue'
@@ -60,7 +63,7 @@ export default {
 	name: 'InputDiv',
 
 	components: {
-		ArrowRight,
+		ArrowRightIcon,
 		PlusIcon,
 		MinusIcon,
 		AlertIcon,
@@ -102,11 +105,23 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		modifierStepValue: {
+			type: Number,
+			default: 1,
+		},
+		modifierMax: {
+			type: Number,
+			default: null,
+		},
+		modifierMin: {
+			type: Number,
+			default: null,
+		},
 		focus: {
 			type: Boolean,
 			default: false,
 		},
-		noSubmit: {
+		submit: {
 			type: Boolean,
 			default: false,
 		},
@@ -125,13 +140,10 @@ export default {
 			return !this.checking && !this.useNumModifiers && this.signalingClass === 'error'
 		},
 		success() {
-			return !this.checking && !this.useNumModifiers && this.signalingClass === 'success' && this.noSubmit
+			return !this.checking && !this.useNumModifiers && this.signalingClass === 'success' && !this.submit
 		},
 		showSubmit() {
-			return !this.checking && !this.useNumModifiers && !this.noSubmit && this.signalingClass !== 'error'
-		},
-		showModifiers() {
-			return this.useNumModifiers
+			return !this.checking && !this.useNumModifiers && this.submit && this.signalingClass !== 'error'
 		},
 		checking() {
 			return !this.useNumModifiers && this.signalingClass === 'checking'
@@ -150,18 +162,44 @@ export default {
 				this.$refs.input.focus()
 			})
 		},
+
+		add() {
+			let newValue = this.value
+			if (this.modifierMax && (newValue + this.modifierStepValue) > this.modifierMax) {
+				if (this.modifierMin) {
+					newValue = this.modifierMin
+				}
+			} else {
+				newValue += this.modifierStepValue
+			}
+			this.$emit('input', newValue)
+		},
+
+		subtract() {
+			let newValue = this.value
+			if (this.modifierMin && (newValue - this.modifierStepValue) < this.modifierMin) {
+				if (this.modifierMax) {
+					newValue = this.modifierMax
+				}
+			} else {
+				newValue -= this.modifierStepValue
+			}
+			this.$emit('input', newValue)
+		},
 	},
 }
 
 </script>
 
 <style lang="scss" scoped>
-
+	$input-height: 34px;
 	.input-div {
 		position: relative;
+		flex: 1;
 
 		.input-wrapper {
 			position: relative;
+			display: flex;
 		}
 
 		.helper {
@@ -176,13 +214,17 @@ export default {
 
 		input {
 			width: 100%;
+			margin: 0;
 
-			&.has-submit {
-				padding-right: 34px;
+			&.has-submit,
+			&.error,
+			&.success,
+			&.checking {
+				padding-right: $input-height;
 			}
 
 			&.has-modifier {
-				padding: 0 34px;
+				padding: 0 $input-height;
 			}
 
 			&.error {
@@ -193,37 +235,25 @@ export default {
 		}
 
 		&.numeric {
-			min-width: 100px;
-			width: 110px;
+			min-width: 110px;
+			max-width: 150px;
 			display: block;
-
-			input {
+			.input-wrapper input {
 				text-align: center;
 			}
 		}
 
 		.signaling-icon {
-			&.material-design-icon {
-				position: absolute;
-				right: 6px;
-				top: 8px;
-			}
-		}
-
-		.submit {
 			position: absolute;
-			right: 6px;
-			top: 8px;
-			cursor: pointer;
+			right: 0;
+			width: $input-height;
+			height: $input-height;
 		}
 
 		.modifier {
-			flex: 0;
 			position: absolute;
-			top: 0;
-			height: 32px;
-			margin: 4px 1px;
-			padding: 0 4px;
+			height: $input-height;
+			width: $input-height;
 			border-color: var(--color-border-dark);
 			cursor: pointer;
 
@@ -238,7 +268,6 @@ export default {
 			}
 
 			&.subtract {
-				left: 0;
 				border-right: solid 1px var(--color-border-dark);
 				border-radius: var(--border-radius) 0 0 var(--border-radius);
 			}
diff --git a/src/js/components/Comments/CommentAdd.vue b/src/js/components/Comments/CommentAdd.vue
index 190570db..1de7413b 100644
--- a/src/js/components/Comments/CommentAdd.vue
+++ b/src/js/components/Comments/CommentAdd.vue
@@ -23,9 +23,11 @@
 <template lang="html">
 	<div class="comment-add">
 		<UserItem v-bind="acl" hide-names />
+
 		<InputDiv v-model="comment"
 			class="comment-add__input"
 			:placeholder="t('polls', 'New comment …')"
+			submit
 			@submit="writeComment()" />
 	</div>
 </template>
diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue
index f9c74965..48738834 100644
--- a/src/js/components/Configuration/ConfigOptionLimit.vue
+++ b/src/js/components/Configuration/ConfigOptionLimit.vue
@@ -25,14 +25,14 @@
 		<CheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per option') }}
 		</CheckboxRadioSwitch>
+
 		<InputDiv v-if="optionLimit"
 			v-model="optionLimit"
-			class="selectUnit indented"
+			class="indented"
 			type="number"
 			inputmode="numeric"
-			use-num-modifiers
-			@add="optionLimit += 1"
-			@subtract="optionLimit -= 1" />
+			use-num-modifiers />
+
 		<CheckboxRadioSwitch v-if="optionLimit"
 			class="indented"
 			:checked.sync="hideBookedUp"
diff --git a/src/js/components/Configuration/ConfigTitle.vue b/src/js/components/Configuration/ConfigTitle.vue
index 98d8d6ec..fe1521f5 100644
--- a/src/js/components/Configuration/ConfigTitle.vue
+++ b/src/js/components/Configuration/ConfigTitle.vue
@@ -21,24 +21,32 @@
   -->
 
 <template>
-	<input v-model="title"
-		:class="{ error: !poll.title }"
+	<InputDiv v-model="title"
+		:signaling-class="checkTitle"
 		type="text"
-		@change="$emit('change')"
-		@keyup.enter="$emit('change')">
+		@change="$emit('change')" />
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'ConfigTitle',
 
+	components: {
+		InputDiv,
+	},
+
 	computed: {
 		...mapState({
 			poll: (state) => state.poll,
 		}),
 
+		checkTitle() {
+			return this.poll.title ? '' : 'error'
+		},
+
 		title: {
 			get() {
 				return this.poll.title
diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue
index 09637945..871aa248 100644
--- a/src/js/components/Configuration/ConfigVoteLimit.vue
+++ b/src/js/components/Configuration/ConfigVoteLimit.vue
@@ -25,14 +25,13 @@
 		<CheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per user') }}
 		</CheckboxRadioSwitch>
+
 		<InputDiv v-if="voteLimit"
 			v-model="voteLimit"
-			class="selectUnit indented"
+			class="indented"
 			type="number"
 			inputmode="numeric"
-			use-num-modifiers
-			@add="voteLimit += 1"
-			@subtract="voteLimit -= 1" />
+			use-num-modifiers />
 	</div>
 </template>
 
diff --git a/src/js/components/Create/CreateDlg.vue b/src/js/components/Create/CreateDlg.vue
index bdf75776..df029b79 100644
--- a/src/js/components/Create/CreateDlg.vue
+++ b/src/js/components/Create/CreateDlg.vue
@@ -26,12 +26,11 @@
 			<template #icon>
 				<SpeakerIcon />
 			</template>
-			<input id="pollTitle"
-				ref="pollTitle"
+			<InputDiv ref="pollTitle"
 				v-model="title"
 				type="text"
 				:placeholder="t('polls', 'Enter Title')"
-				@keyup.enter="confirm">
+				@submit="confirm" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Poll type')">
@@ -59,6 +58,7 @@ import ConfigBox from '../Base/ConfigBox.vue'
 import RadioGroupDiv from '../Base/RadioGroupDiv.vue'
 import SpeakerIcon from 'vue-material-design-icons/Bullhorn.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
+import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'CreateDlg',
@@ -68,6 +68,7 @@ export default {
 		CheckIcon,
 		ConfigBox,
 		RadioGroupDiv,
+		InputDiv,
 	},
 
 	data() {
@@ -92,6 +93,11 @@ export default {
 	},
 
 	methods: {
+		/** @public */
+		setFocus() {
+			this.$refs.pollTitle.setFocus()
+		},
+
 		cancel() {
 			this.title = ''
 			this.pollType = 'datePoll'
@@ -108,13 +114,6 @@ export default {
 				showError(t('polls', 'Error while creating Poll "{pollTitle}"', { pollTitle: this.title }))
 			}
 		},
-
-		/** @public */
-		setFocus() {
-			this.$nextTick(() => {
-				this.$refs.pollTitle.focus()
-			})
-		},
 	},
 }
 </script>
diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 769cdc15..3487aeef 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -23,18 +23,26 @@
 <template>
 	<div class="option-clone-date">
 		<h2>{{ t('polls', 'Clone to option sequence') }}</h2>
-
 		<p>{{ t('polls', 'Create a sequence of date options starting with {dateOption}.', { dateOption: dateBaseOptionString }) }}</p>
-		<div>
-			<h3> {{ t('polls', 'Step unit:') }} </h3>
-			<Multiselect v-model="sequence.unit"
-				:options="dateUnits"
-				label="name"
-				track-by="value" />
-			<h3> {{ t('polls', 'Step width:') }} </h3>
-			<input v-model="sequence.step">
-			<h3>{{ t('polls', 'Number of items to create:') }}</h3>
-			<input v-model="sequence.amount">
+
+		<h3> {{ t('polls', 'Step unit') }} </h3>
+		<Multiselect v-model="sequence.unit"
+			:options="dateUnits"
+			label="name"
+			track-by="value" />
+
+		<div class="sideways">
+			<InputDiv v-model="sequence.step"
+				:label="t('polls', 'Step width')"
+				type="number"
+				inputmode="numeric"
+				use-num-modifiers />
+
+			<InputDiv v-model="sequence.amount"
+				:label="t('polls', 'Amount')"
+				type="number"
+				inputmode="numeric"
+				use-num-modifiers />
 		</div>
 
 		<div class="modal__buttons">
@@ -54,11 +62,13 @@
 import moment from '@nextcloud/moment'
 import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
+import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'OptionCloneDate',
 
 	components: {
+		InputDiv,
 		Multiselect,
 		VueButton,
 	},
@@ -103,14 +113,11 @@ export default {
 </script>
 
 <style lang="scss">
-.buttons {
+
+.sideways {
 	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	.button {
-		margin-left: 10px;
-		margin-right: 0;
-	}
+	column-gap: 48px;
+	flex-wrap: wrap;
 }
 
 </style>
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index ee7e6cf0..b3bfcd4f 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -26,10 +26,7 @@
 			{{ t('polls', 'Shifting dates is disabled to prevent shifting of other user\'s proposals.') }}
 		</div>
 		<div v-else class="select-unit">
-			<InputDiv v-model="shift.step"
-				use-num-modifiers
-				@add="shift.step += 1"
-				@subtract="shift.step -= 1" />
+			<InputDiv v-model="shift.step" use-num-modifiers />
 			<Multiselect v-model="shift.unit"
 				:options="dateUnits"
 				label="name"
diff --git a/src/js/components/Options/OptionsTextAdd.vue b/src/js/components/Options/OptionsTextAdd.vue
index 4dd19cbb..db01f743 100644
--- a/src/js/components/Options/OptionsTextAdd.vue
+++ b/src/js/components/Options/OptionsTextAdd.vue
@@ -23,6 +23,7 @@
 <template>
 	<InputDiv v-model="newPollText"
 		:placeholder="placeholder"
+		submit
 		@submit="addOption()" />
 </template>
 
diff --git a/src/js/components/Poll/PublicEmail.vue b/src/js/components/Poll/PublicEmail.vue
index f017bb36..4c56d94f 100644
--- a/src/js/components/Poll/PublicEmail.vue
+++ b/src/js/components/Poll/PublicEmail.vue
@@ -26,6 +26,7 @@
 			v-tooltip="check.result"
 			:signaling-class="check.status"
 			:placeholder="t('polls', 'Optional email address')"
+			submit
 			@submit="submitEmailAddress" />
 	</div>
 </template>
diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue
index f76a2d5b..c8da38f0 100644
--- a/src/js/components/Poll/PublicRegisterModal.vue
+++ b/src/js/components/Poll/PublicRegisterModal.vue
@@ -26,43 +26,36 @@
 			<div class="modal__registration">
 				<div class="registration__registration">
 					<h2>{{ t('polls', 'Public participation') }}</h2>
-					<div class="section__username">
-						<h3>{{ t('polls', 'To participate, tell us how we can call you!') }}</h3>
-						<InputDiv v-model="userName"
-							v-tooltip="userNameCheck.result"
-							:signaling-class="userNameCheck.status"
-							:placeholder="t('polls', 'Enter your name')"
-							no-submit
-							focus
-							@submit="submitRegistration" />
-						<CheckboxRadioSwitch :checked.sync="saveCookie">
-							{{ t('polls', 'Save username in cookie for 30 days') }}
-						</CheckboxRadioSwitch>
-					</div>
-
-					<div :class="['status-message', userNameCheck.status]">
-						{{ userNameCheck.result }}
-					</div>
+					<InputDiv v-model="userName"
+						v-tooltip="userNameCheck.result"
+						class="section__username"
+						:label="t('polls', 'To participate, tell us how we can call you!')"
+						:signaling-class="userNameCheck.status"
+						:placeholder="t('polls', 'Enter your name')"
+						:helper-text="userNameCheck.result"
+						focus
+						@submit="submitRegistration" />
+
+					<CheckboxRadioSwitch :checked.sync="saveCookie">
+						{{ t('polls', 'Save username in cookie for 30 days') }}
+					</CheckboxRadioSwitch>
+
+					<InputDiv v-if="share.publicPollEmail !== 'disabled'"
+						v-model="emailAddress"
+						v-tooltip="emailCheck.result"
+						class="section__email"
+						:label="emailLabel"
+						:signaling-class="emailCheck.status"
+						:placeholder="t('polls', share.publicPollEmail === 'mandatory' ? 'Mandatory email address' : 'Optional email address')"
+						:helper-text="emailCheck.result"
+						type="email"
+						inputmode="email"
+						@submit="submitRegistration" />
 
-					<div v-if="share.publicPollEmail !== 'disabled'" class="section__email">
-						<h3 v-if="share.publicPollEmail === 'mandatory'">
-							{{ t("polls", "Your email address is required. After the registration your personal link to the poll will be sent to this address.") }}
-						</h3>
-						<h3 v-else>
-							{{ t("polls", "With your email address you can subscribe to notifications and you will receive your personal link to this poll.") }}
-						</h3>
-						<InputDiv v-model="emailAddress"
-							v-tooltip="emailCheck.result"
-							type="email"
-							inputmode="email"
-							:signaling-class="emailCheck.status"
-							:placeholder="t('polls', share.publicPollEmail === 'mandatory' ? 'Mandatory email address' : 'Optional email address')"
-							no-submit
-							@submit="submitRegistration" />
-					</div>
 					<div v-if="privacyUrl" class="section__optin">
 						<RichText :text="privacyRich.subject" :arguments="privacyRich.parameters" />
 					</div>
+
 					<div class="modal__buttons">
 						<VueButton @click="closeModal">
 							{{ t('polls', 'Cancel') }}
@@ -143,6 +136,13 @@ export default {
 			imprintUrl: (state) => state.appSettings.useImprintUrl,
 		}),
 
+		emailLabel() {
+			if (this.share.publicPollEmail === 'mandatory') {
+				return t('polls', 'Your email address is required. After the registration your personal link to the poll will be sent to this address.')
+			}
+			return t('polls', 'With your email address you can subscribe to notifications and you will receive your personal link to this poll.')
+		},
+
 		registrationIsValid() {
 			return this.isValidName && (this.isValidEmailAddress || (this.emailAddress.length === 0 && this.share.publicPollEmail !== 'mandatory'))
 		},
@@ -181,9 +181,10 @@ export default {
 					status: 'checking',
 				}
 			}
-			if (this.userName.length === 0) {
+
+			if (this.userName.length < 1) {
 				return {
-					result: ' ',
+					result: t('polls', 'A name is required'),
 					status: 'empty',
 				}
 			}
@@ -196,7 +197,7 @@ export default {
 			}
 
 			return {
-				result: t('polls', 'The name {username} is valid.', { username: this.userName }),
+				result: '',
 				status: 'success',
 			}
 		},
@@ -208,10 +209,17 @@ export default {
 					status: 'checking',
 				}
 			}
+
 			if (this.emailAddress.length < 1) {
+				if (this.share.publicPollEmail === 'mandatory') {
+					return {
+						result: t('polls', 'An email address is required.'),
+						status: 'empty',
+					}
+				}
 				return {
 					result: '',
-					status: '',
+					status: 'empty',
 				}
 			}
 
@@ -223,7 +231,7 @@ export default {
 			}
 
 			return {
-				result: t('polls', 'Valid email address.'),
+				result: '',
 				status: 'success',
 			}
 		},
@@ -323,6 +331,8 @@ export default {
 
 <style lang="scss">
 	.section__optin {
+		align-self: end;
+
 		a {
 			text-decoration: underline;
 		}
@@ -399,12 +409,6 @@ export default {
 		}
 	}
 
-	.status-message {
-		hyphens: auto;
-		font-size: 0.9em;
-		min-height: 1.8em;
-	}
-
 	@media only screen and (max-width: 688px) {
 		.modal__content {
 			padding: 6px;
diff --git a/src/js/components/Settings/AdminSettings/AdminCombo.vue b/src/js/components/Settings/AdminSettings/AdminCombo.vue
index 2a2e1778..70e2ec44 100644
--- a/src/js/components/Settings/AdminSettings/AdminCombo.vue
+++ b/src/js/components/Settings/AdminSettings/AdminCombo.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Deactivate combo view for all users') }}
 		</CheckboxRadioSwitch>
 		<div v-if="comboLimited" class="settings_details">
-			<div>{{ t('polls','Allow combo view for the following groups') }}</div>
+			<h3>{{ t('polls','Allow combo view for the following groups') }}</h3>
 			<Multiselect v-model="comboGroups"
 				class="stretch"
 				label="displayName"
@@ -128,17 +128,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminEmail.vue b/src/js/components/Settings/AdminSettings/AdminEmail.vue
index ff4841f9..c3fcd41a 100644
--- a/src/js/components/Settings/AdminSettings/AdminEmail.vue
+++ b/src/js/components/Settings/AdminSettings/AdminEmail.vue
@@ -34,9 +34,7 @@
 		</div>
 		<textarea v-show="!preview" v-model="disclaimer" @change="saveSettings()" />
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<div v-show="preview" class="polls-markdown" v-html="markedDisclaimer">
-			{{ markedDisclaimer }}
-		</div>
+		<div v-show="preview" class="polls-markdown" v-html="markedDisclaimer" />
 	</div>
 </template>
 
@@ -117,21 +115,4 @@ export default {
 			flex-grow: 1;
 		}
 	}
-
-	.user_settings {
-		padding-top: 16px;
-		textarea {
-			width: 99%;
-			resize: vertical;
-			height: 230px;
-		}
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
 </style>
diff --git a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
index 270fae92..34523f85 100644
--- a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
+++ b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Hide email addresses of internal users') }}
 		</CheckboxRadioSwitch>
 		<div v-if="hideMailAddresses" class="settings_details">
-			<div>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</div>
+			<h3>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</h3>
 			<Multiselect v-model="showMailAddressesGroups"
 				class="stretch"
 				label="displayName"
@@ -129,17 +129,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminLegal.vue b/src/js/components/Settings/AdminSettings/AdminLegal.vue
index 543f9031..3ba1a8d0 100644
--- a/src/js/components/Settings/AdminSettings/AdminLegal.vue
+++ b/src/js/components/Settings/AdminSettings/AdminLegal.vue
@@ -26,18 +26,17 @@
 			{{ t('polls', 'The privacy link and the legal notice link are automatically added to the registration dialog of public polls.') }}
 			{{ t('polls', 'As a default the links configured in the theming app are used. For public polls these can be overriden by individual terms.') }}
 		</p>
-		<span>{{ t('polls', 'Privacy policy link:') }}</span>
+
 		<InputDiv v-model="privacyUrl"
 			type="url"
 			:placeholder="placeholder.privacy"
-			no-submit
+			:label="t('polls', 'Privacy policy link:')"
 			@change="saveSettings()" />
 
-		<span>{{ t('polls', 'Legal notice link:') }}</span>
 		<InputDiv v-model="imprintUrl"
 			type="url"
 			inputmode="url"
-			no-submit
+			:label="t('polls', 'Legal notice link:')"
 			:placeholder="placeholder.imprint"
 			@change="saveSettings()" />
 	</div>
@@ -99,22 +98,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-		textarea {
-			width: 99%;
-			resize: vertical;
-			height: 230px;
-		}
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminMisc.vue b/src/js/components/Settings/AdminSettings/AdminMisc.vue
index 74d279df..1090af36 100644
--- a/src/js/components/Settings/AdminSettings/AdminMisc.vue
+++ b/src/js/components/Settings/AdminSettings/AdminMisc.vue
@@ -26,22 +26,21 @@
 			<CheckboxRadioSwitch :checked.sync="useActivity" type="switch">
 				{{ t('polls', 'Track activities') }}
 			</CheckboxRadioSwitch>
+
 			<CheckboxRadioSwitch :checked.sync="hideLogin" type="switch">
 				{{ t('polls', 'Hide login option in public polls') }}
 			</CheckboxRadioSwitch>
+
 			<CheckboxRadioSwitch :checked.sync="autoArchive" type="switch">
 				{{ t('polls', 'Archive closed polls automatically') }}
 			</CheckboxRadioSwitch>
-			<div v-if="autoArchive" class="settings_details">
-				<span>{{ t('polls', 'After how many days are the closed polls to be archived:') }}</span>
-				<InputDiv v-model="autoArchiveOffset"
-					class="selectUnit"
-					type="number"
-					inputmode="numeric"
-					use-num-modifiers
-					@add="autoArchiveOffset += 1"
-					@subtract="autoArchiveOffset -= 1" />
-			</div>
+			<InputDiv v-if="autoArchive"
+				v-model="autoArchiveOffset"
+				class="settings_details"
+				type="number"
+				inputmode="numeric"
+				use-num-modifiers
+				:label="t('polls', 'After how many days are closed polls to be archived:')" />
 		</div>
 	</div>
 </template>
@@ -109,17 +108,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminPerformance.vue b/src/js/components/Settings/AdminSettings/AdminPerformance.vue
index adeb8a42..9cc208c5 100644
--- a/src/js/components/Settings/AdminSettings/AdminPerformance.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPerformance.vue
@@ -72,17 +72,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
index 8c310123..7195e10c 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Disallow poll creation for all users') }}
 		</CheckboxRadioSwitch>
 		<div v-if="createPollLimited" class="settings_details">
-			<div>{{ t('polls','Allow poll creation for the following groups') }}</div>
+			<h3>{{ t('polls','Allow poll creation for the following groups') }}</h3>
 			<Multiselect v-model="createPollGroups"
 				class="stretch"
 				label="displayName"
@@ -128,17 +128,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
index 49cba492..4384c02d 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Disallow poll download') }}
 		</CheckboxRadioSwitch>
 		<div v-if="pollDownloadLimited" class="settings_details">
-			<div>{{ t('polls','Allow poll download for the following groups') }}</div>
+			<h3>{{ t('polls','Allow poll download for the following groups') }}</h3>
 			<Multiselect v-model="pollDownloadGroups"
 				class="stretch"
 				label="displayName"
@@ -128,17 +128,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
index 9bd5a603..977858dd 100644
--- a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
+++ b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Disallow public shares') }}
 		</CheckboxRadioSwitch>
 		<div v-if="publicSharesLimited" class="settings_details">
-			<div>{{ t('polls','Allow public shares for the following groups') }}</div>
+			<h3>{{ t('polls','Allow public shares for the following groups') }}</h3>
 			<Multiselect v-model="publicSharesGroups"
 				class="stretch"
 				label="displayName"
@@ -45,7 +45,7 @@
 			{{ t('polls', 'Disallow openly accessible polls') }}
 		</CheckboxRadioSwitch>
 		<div v-if="allAccessLimited" class="settings_details">
-			<div>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</div>
+			<h3>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</h3>
 			<Multiselect v-model="allAccessGroups"
 				class="stretch"
 				label="displayName"
@@ -163,17 +163,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-bottom: 16px;
-		margin-left: 36px;
-		input, .stretch {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/components/Settings/UserSettings/CalendarSettings.vue b/src/js/components/Settings/UserSettings/CalendarSettings.vue
index 8489433f..a7b202d8 100644
--- a/src/js/components/Settings/UserSettings/CalendarSettings.vue
+++ b/src/js/components/Settings/UserSettings/CalendarSettings.vue
@@ -26,6 +26,7 @@
 			<CheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
 				{{ t('polls', 'Use calendar lookup for conflicting calendar events') }}
 			</CheckboxRadioSwitch>
+
 			<div v-show="calendarPeek" class="settings_details">
 				{{ t('polls', 'Select the calendars to use for lookup.') }}
 
@@ -41,29 +42,19 @@
 		</div>
 
 		<div class="user_settings">
-			<p class="settings-description">
-				{{ t('polls', 'Specify in which period (in hours) before the option existing appointments should be included in the search results.') }}
-			</p>
 			<InputDiv v-model="checkCalendarsBefore"
+				:label="t('polls', 'Specify in which period (in hours) before the option existing appointments should be included in the search results.')"
 				type="number"
 				inputmode="numeric"
-				use-num-modifiers
-				no-submit
-				@add="checkCalendarsBefore += 1"
-				@subtract="checkCalendarsBefore -= 1" />
+				use-num-modifiers />
 		</div>
 
 		<div class="user_settings">
-			<p class="settings-description">
-				{{ t('polls', 'Specify in which period (in hours) after the option existing appointments should be included in the search results.') }}
-			</p>
 			<InputDiv v-model="checkCalendarsAfter"
+				:label="t('polls', 'Specify in which period (in hours) after the option existing appointments should be included in the search results.')"
 				type="number"
 				inputmode="numeric"
-				use-num-modifiers
-				no-submit
-				@add="checkCalendarsAfter += 1"
-				@subtract="checkCalendarsAfter -= 1" />
+				use-num-modifiers />
 		</div>
 	</div>
 </template>
@@ -157,15 +148,6 @@ export default {
 </script>
 
 <style>
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-top: 8px;
-		margin-left: 36px;
-	}
-
 	.bully {
 		display: inline-block;
 		width: 11px;
diff --git a/src/js/components/Settings/UserSettings/FeatureSettings.vue b/src/js/components/Settings/UserSettings/FeatureSettings.vue
index 2344c5f7..ab8fffbb 100644
--- a/src/js/components/Settings/UserSettings/FeatureSettings.vue
+++ b/src/js/components/Settings/UserSettings/FeatureSettings.vue
@@ -93,22 +93,3 @@ export default {
 	},
 }
 </script>
-
-<style>
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-top: 8px;
-		margin-left: 36px;
-	}
-
-	.bully {
-		display: inline-block;
-		width: 11px;
-		height: 11px;
-		border-radius: 50%;
-		margin: 0 4px 0 0;
-	}
-</style>
diff --git a/src/js/components/Settings/UserSettings/PerformanceSettings.vue b/src/js/components/Settings/UserSettings/PerformanceSettings.vue
index 7e72a97a..880c74a1 100644
--- a/src/js/components/Settings/UserSettings/PerformanceSettings.vue
+++ b/src/js/components/Settings/UserSettings/PerformanceSettings.vue
@@ -22,20 +22,19 @@
 
 <template>
 	<div class="user_settings">
-		<span>
+		<h3>
 			{{ t('polls', 'A poll with many options and voters can have a heavy impact on client performance.') }}
 			{{ t('polls', 'Set the amount of voting cells (options x participants) up to which all voting cells should be displayed.') }}
 			{{ t('polls', 'If this threshold gets tresspasses only the current user will be displayed, to avoid a performance breakdown.') }}
 			{{ t('polls', 'The default threshold of 1000 should be a good and safe value.') }}
-		</span>
+		</h3>
 		<InputDiv v-model="threshold"
 			type="number"
 			inputmode="numeric"
 			use-num-modifiers
-			no-submit
 			:placeholder="'1000'"
-			@add="threshold += 100"
-			@subtract="threshold -= 100" />
+			:modifier-step-value="100"
+			:modifier-min="200" />
 	</div>
 </template>
 
@@ -77,15 +76,3 @@ export default {
 	},
 }
 </script>
-
-<style>
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-top: 8px;
-		margin-left: 36px;
-	}
-
-</style>
diff --git a/src/js/components/Settings/UserSettings/StyleSettings.vue b/src/js/components/Settings/UserSettings/StyleSettings.vue
index b62f6506..31a71705 100644
--- a/src/js/components/Settings/UserSettings/StyleSettings.vue
+++ b/src/js/components/Settings/UserSettings/StyleSettings.vue
@@ -46,9 +46,9 @@
 				</CheckboxRadioSwitch>
 
 				<div v-if="individualImage" class="settings_details">
-					<input v-model="individualImageUrl"
+					<InputDiv v-model="individualImageUrl"
 						type="text"
-						:placeholder="t('polls', 'Enter the URL of your favorite background image.')">
+						:placeholder="t('polls', 'Enter the URL of your favorite background image.')" />
 					<CheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch">
 						{{ t('polls', 'Dark picture') }}
 					</CheckboxRadioSwitch>
@@ -72,12 +72,14 @@
 
 import { mapState } from 'vuex'
 import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'StyleSettings',
 
 	components: {
 		CheckboxRadioSwitch,
+		InputDiv,
 	},
 
 	computed: {
@@ -159,17 +161,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-	.user_settings {
-		padding-top: 16px;
-	}
-
-	.settings_details {
-		padding-top: 8px;
-		margin-left: 36px;
-		input {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/js/views/AdminSettingsPage.vue b/src/js/views/AdminSettingsPage.vue
index 41d02af4..23dad191 100644
--- a/src/js/views/AdminSettingsPage.vue
+++ b/src/js/views/AdminSettingsPage.vue
@@ -110,4 +110,19 @@ export default {
 	margin-bottom: 1em;
 	opacity: .7;
 }
+
+.user_settings {
+	padding-top: 16px;
+
+	textarea {
+		width: 99%;
+		resize: vertical;
+		height: 230px;
+	}
+}
+
+.settings_details {
+	padding-bottom: 16px;
+	margin-left: 36px;
+}
 </style>
diff --git a/src/js/views/UserSettingsPage.vue b/src/js/views/UserSettingsPage.vue
index 87013991..64de3e7a 100644
--- a/src/js/views/UserSettingsPage.vue
+++ b/src/js/views/UserSettingsPage.vue
@@ -76,4 +76,20 @@ export default {
 		border-bottom: 1px solid var(--color-border);
 	}
 }
+
+.user_settings {
+	padding-top: 16px;
+
+	textarea {
+		width: 99%;
+		resize: vertical;
+		height: 230px;
+	}
+}
+
+.settings_details {
+	padding-bottom: 16px;
+	margin-left: 36px;
+}
+
 </style>