Design refresh + a bunch of stuff (#2864)

Co-authored-by: hfcRed <hfcred@gmx.net>

app/components/elements/DatePicker.module.css

@@ -0,0 +1,48 @@
+.group {
+	height: var(--field-size);
+	padding: 0 var(--field-padding);
+	border: var(--border-style);
+	border-radius: var(--radius-field);
+	background-color: var(--color-bg);
+	outline: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--s-1-5);
+	width: 100%;
+	cursor: pointer;
+}
+
+.root[data-open] .group {
+	border-color: transparent;
+	outline: var(--focus-ring);
+}
+
+.dateInput {
+	display: flex;
+}
+
+.segment:not([data-type="literal"]) {
+	padding: 0 var(--s-0-5);
+	border-radius: 5px;
+}
+
+.segment:focus-visible {
+	background-color: var(--color-bg-high);
+	color: var(--color-text-accent);
+	outline: none;
+}
+
+.button {
+	padding: 0;
+	margin-inline-start: auto;
+	background-color: transparent;
+	border: none;
+	outline: none;
+}
+
+.icon {
+	color: var(--color-text-high);
+	width: var(--field-size-icon);
+	height: var(--field-size-icon);
+}