Refine new ui; contrasts, legibility, logo in nightly, reduced margins on mobile (#3318)

assets/css/app.css

@@ -17,6 +17,7 @@
 	--evcc-yellow: #faf000;
 	--bs-gray-dark: #28293e;
 	--bs-gray-medium: #93949e;
+	--bs-gray-light: #b5b6c3;
 
 	--evcc-grid: var(--bs-gray-dark);
 	--evcc-self: var(--evcc-dark-green);
@@ -125,6 +126,9 @@ a {
 .text-gray-medium {
 	color: var(--bs-gray-medium);
 }
+.text-gray-light {
+	color: var(--bs-gray-light);
+}
 .bg-dark {
 	background-color: var(--bs-gray-dark) !important;
 }

assets/js/components/Energyflow/Visualization.vue

@@ -220,7 +220,7 @@ export default {
 }
 .self-consumption {
 	background-color: var(--evcc-self);
-	color: var(--bs-white);
+	color: var(--bs-dark);
 }
 .pv-export {
 	background-color: var(--evcc-export);

assets/js/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
 	<footer class="footer">
-		<div class="container py-3">
+		<div class="container py-2">
 			<div class="d-flex justify-content-between">
 				<Version v-bind="version" />
 				<!--

assets/js/components/LabelAndValue.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="root">
+	<div class="root" :class="{ 'root--dark': onDark }">
 		<div class="mb-2 label">{{ label }}</div>
 		<slot>
 			<h3 class="value m-0">
@@ -19,6 +19,7 @@ export default {
 		label: String,
 		value: String,
 		extraValue: String,
+		onDark: Boolean,
 	},
 };
 </script>
@@ -38,4 +39,9 @@ export default {
 	color: var(--bs-gray-medium);
 	font-size: 14px;
 }
+
+.root--dark .extraValue,
+.root--dark .label {
+	color: var(--bs-gray-light);
+}
 </style>

assets/js/components/Loadpoints.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="container container--loadpoint px-0 mb-3 mb-md-4 d-flex flex-column justify-content-center"
+		class="container container--loadpoint px-0 mb-md-2 d-flex flex-column justify-content-center"
 	>
 		<div ref="carousel" class="carousel d-lg-flex flex-wrap">
 			<div

assets/js/components/TargetCharge.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<LabelAndValue class="flex-grow-1" :label="$t('main.targetCharge.title')">
+		<LabelAndValue class="flex-grow-1" :label="$t('main.targetCharge.title')" on-dark>
 			<button
 				class="btn btn-link p-0 value text-end"
-				:class="buttonIsEnabled ? 'text-white' : 'text-gray'"
+				:class="buttonIsEnabled ? 'text-white' : 'text-gray-light'"
 				data-bs-toggle="modal"
 				:data-bs-target="`#${modalId}`"
 			>

assets/js/components/Vehicle.vue

@@ -15,12 +15,14 @@
 					:label="$t('main.vehicle.vehicleSoC')"
 					:value="`${vehicleSoC || '--'} %`"
 					:extraValue="vehicleRange ? `${vehicleRange} km` : null"
+					on-dark
 				/>
 				<LabelAndValue
 					class="flex-grow-1 text-center"
 					:label="$t('main.vehicle.targetSoC')"
 					:value="`${displayTargetSoC} %`"
 					:extraValue="estimatedTargetRange"
+					on-dark
 				/>
 				<TargetCharge
 					class="flex-grow-1 text-end target-charge"

assets/js/components/VehicleStatus.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="d-block text-gray">{{ message }}&nbsp;</div>
+	<div class="d-block text-gray-light">{{ message }}&nbsp;</div>
 </template>
 
 <script>

assets/js/components/Version.vue

@@ -6,9 +6,10 @@
 			target="_blank"
 			class="btn btn-link ps-0 text-decoration-none text-white text-nowrap d-flex align-items-end"
 		>
-			<shopicon-regular-moonstars class="me-2 text-gray-medium"></shopicon-regular-moonstars>
+			<Logo class="logo me-2" />
 			v{{ installed }}
-			<span class="ms-2 text-gray-medium">[{{ commit }}]</span>
+			<shopicon-regular-moonstars class="ms-2 text-gray-light"></shopicon-regular-moonstars>
+			<span class="ms-2 text-gray-light d-none d-sm-inline">[{{ commit }}]</span>
 		</a>
 		<button
 			v-else-if="newVersionAvailable"

dist/index.html

@@ -20,8 +20,8 @@
     <meta name="theme-color" content="#28293e" />
 
     <title>evcc</title>
-    <script type="module" crossorigin src="./assets/index.9c0e6ab3.js"></script>
-    <link rel="stylesheet" href="./assets/index.94c74e6c.css">
+    <script type="module" crossorigin src="./assets/index.eb012e12.js"></script>
+    <link rel="stylesheet" href="./assets/index.9aa9be50.css">
   </head>
   <body>
     <script>