From 7f65ff4620d47137e2e0d68a89d3200d62d0e95c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Thu, 23 Feb 2023 13:15:52 +0100
Subject: [PATCH] Adjust NcDatetimePicker style and icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcDatetimePicker/NcDatetimePicker.vue     | 20 ++++++++++++++-----
 src/components/NcDatetimePicker/index.scss    |  8 +++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/NcDatetimePicker/NcDatetimePicker.vue b/src/components/NcDatetimePicker/NcDatetimePicker.vue
index d4f702a8ff..d260726816 100644
--- a/src/components/NcDatetimePicker/NcDatetimePicker.vue
+++ b/src/components/NcDatetimePicker/NcDatetimePicker.vue
@@ -140,13 +140,16 @@ export default {
 		@select-year="handleSelectYear"
 		@select-month="handleSelectMonth"
 		@update:value="$emit('update:value', value)">
-		<template v-if="showTimezoneSelect" #icon-calendar>
-			<NcPopover :open.sync="showTimezonePopover"
+		<template #icon-calendar>
+			<NcPopover v-if="showTimezoneSelect"
+				:open.sync="showTimezonePopover"
 				open-class="timezone-popover-wrapper">
 				<template #trigger>
-					<button class="datetime-picker-inline-icon icon-timezone icon"
+					<button class="datetime-picker-inline-icon"
 						:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
-						@mousedown.stop.prevent="() => {}" />
+						@mousedown.stop.prevent="() => {}">
+						<Web :size="20" />
+					</button>
 				</template>
 
 				<div class="timezone-popover-wrapper__title">
@@ -158,6 +161,7 @@ export default {
 					class="timezone-popover-wrapper__timezone-select"
 					@input="$emit('update:timezone-id', arguments[0])" />
 			</NcPopover>
+			<CalendarBlank v-else :size="20" />
 		</template>
 		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
 			<slot :name="slot" v-bind="scope" />
@@ -170,6 +174,9 @@ import NcTimezonePicker from '../NcTimezonePicker/index.js'
 import NcPopover from '../NcPopover/index.js'
 import l10n from '../../mixins/l10n.js'
 
+import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import Web from 'vue-material-design-icons/Web.vue'
+
 import {
 	getFirstDay,
 	getDayNames,
@@ -194,9 +201,11 @@ export default {
 	name: 'NcDatetimePicker',
 
 	components: {
+		CalendarBlank,
 		DatePicker,
 		NcPopover,
 		NcTimezonePicker,
+		Web,
 	},
 
 	mixins: [l10n],
@@ -391,7 +400,8 @@ export default {
 	border: none;
 	background-color: transparent;
 	border-radius: 0;
-	padding: 6px !important;
+	padding: 0 !important;
+	margin: 0;
 
 	&--highlighted {
 		opacity: .7;
diff --git a/src/components/NcDatetimePicker/index.scss b/src/components/NcDatetimePicker/index.scss
index 849c419d34..f7ec08d466 100644
--- a/src/components/NcDatetimePicker/index.scss
+++ b/src/components/NcDatetimePicker/index.scss
@@ -15,9 +15,15 @@ $cell_height: 32px;
 		// input
 		.mx-input {
 			width: 100%;
-			border: 1px solid var(--color-border);
+			border: 2px solid var(--color-border-maxcontrast);
 			background-color: var(--color-main-background);
 			background-clip: content-box;
+			
+			&:active:not(.disabled),
+			&:hover:not(.disabled),
+			&:focus:not(.disabled) {
+				border-color: var(--color-primary-element);
+			}
 		}
 
 		&:disabled,