Fixes issues mentioned in comments.

- [x] Highlight for selected date should be bold text.
- [x] Hover highlight for day should be the same as for the selected date.
- [x] Remove hover effect on the week.
- [x] Row for days of the week should indeed stay, but non-bold and at 50% opacity so it doesn't take away the focus.
- [x] Dates of previous and next months a bit lighter.
- [x] Remove marking the weekend blue.
- [x] The box centered below the date field, with triangle in the middle.

Signed-off-by: Marin Treselj <marin@pixelipo.com>

2 files changed, 19 insertions, 15 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 2e06c13d223..41bb5783090 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -211,7 +211,8 @@ nav {
 	margin-left: -54px;
 }
 
-#navigation {
+#navigation,
+.ui-datepicker {
 	position: relative;
 	left: -100%;
 	width: 160px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 8cb3033be51..a2e8288910a 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -966,9 +966,7 @@ code {
 
 /* ---- jQuery UI datepicker ---- */
 .ui-widget.ui-datepicker {
-	margin-left: -110px !important;
 	margin-top: 10px;
-	border-radius: 3px;
 
 	.ui-state-default,
 	.ui-widget-content .ui-state-default,
@@ -977,12 +975,6 @@ code {
 		background: inherit;
 	}
 
-	.ui-state-hover,
-	.ui-state-focus {
-		background: inherit;
-		color: $color-primary;
-	}
-
 	.ui-widget-header {
 		margin: 3px 3px 3px 0;
 		padding: 7px 6px;
@@ -1014,8 +1006,13 @@ code {
 	}
 
 	.ui-datepicker-calendar {
-		th.ui-datepicker-week-end {
-			color: $color-primary;
+		th {
+			font-weight: normal;
+			color: nc-lighten($color-main-text, 33%);
+		}
+
+		tr:hover {
+			background-color: inherit;
 		}
 
 		td {
@@ -1024,19 +1021,25 @@ code {
 			a {
 				border-radius: 3px;
 				text-align: center;
+				font-weight: normal;
+				color: $color-main-text;
 			}
 
-			&.ui-datepicker-week-end a {
-				color: $color-primary;
+			&.ui-datepicker-week-end a:not(.ui-state-hover),
+			.ui-priority-secondary {
+				color: nc-lighten($color-main-text, 33%);
 			}
 
-			&.ui-datepicker-today a {
+			&.ui-datepicker-today a:not(.ui-state-hover) {
 				background-color: nc-lighten($color-main-text, 86%);
 			}
 
-			&.ui-datepicker-current-day .ui-state-active {
+			&.ui-datepicker-current-day .ui-state-active,
+			.ui-state-hover,
+			.ui-state-focus {
 				background-color: $color-primary;
 				color: $color-primary-text;
+				font-weight: bold;
 			}
 		}
 	}