[layout] update styles for weather and calendar (#3894)

modules/default/calendar/calendar.css

@@ -2,23 +2,14 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-left: 0;
-  padding-right: 10px;
-  font-size: var(--font-size-small);
-}
-
-.calendar .symbol span {
-  padding-top: 4px;
+  gap: 5px;
 }
 
 .calendar .title {
-  padding-left: 0;
-  padding-right: 0;
-  vertical-align: top;
+  padding: 0 10px;
 }
 
 .calendar .time {
-  padding-left: 30px;
+  padding-left: 20px;
   text-align: right;
-  vertical-align: top;
 }

modules/default/calendar/calendar.js

@@ -168,8 +168,8 @@ Module.register("calendar", {
 
 		this.selfUpdate();
 	},
-	notificationReceived (notification, payload, sender) {
 
+	notificationReceived (notification, payload, sender) {
 		if (notification === "FETCH_CALENDAR") {
 			if (this.hasCalendarURL(payload.url)) {
 				this.sendSocketNotification(notification, { url: payload.url, id: this.identifier });
@@ -217,7 +217,6 @@ Module.register("calendar", {
 
 	// Override dom generator.
 	getDom () {
-		const ONE_SECOND = 1000; // 1,000 milliseconds
 		const events = this.createEventList(true);
 		const wrapper = document.createElement("table");
 		wrapper.className = this.config.tableClass;
@@ -308,15 +307,12 @@ Module.register("calendar", {
 				}
 
 				const symbolClass = this.symbolClassForUrl(event.url);
-				symbolWrapper.className = `symbol align-right ${symbolClass}`;
+				symbolWrapper.className = `symbol ${symbolClass}`;
 
 				const symbols = this.symbolsForEvent(event);
-				symbols.forEach((s, index) => {
+				symbols.forEach((s) => {
 					const symbol = document.createElement("span");
 					symbol.className = s;
-					if (index > 0) {
-						symbol.style.paddingLeft = "5px";
-					}
 					symbolWrapper.appendChild(symbol);
 				});
 				eventWrapper.appendChild(symbolWrapper);
@@ -601,7 +597,6 @@ Module.register("calendar", {
 	 */
 	createEventList (limitNumberOfEntries) {
 		let now = moment();
-		let today = now.clone().startOf("day");
 		let future = now.clone().startOf("day").add(this.config.maximumNumberOfDays, "days");
 
 		let events = [];

modules/default/weather/current.njk

@@ -43,7 +43,7 @@
       {% endif %}
     </div>
   {% endif %}
-  <div class="large type-temp">
+  <div class="flex large type-temp">
     {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
       <span class="medium fas fa-home"></span>
       <span style="display: inline-block">

modules/default/weather/weather.css

@@ -44,6 +44,6 @@
 
 .weather .type-temp {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 10px;
 }