fix checkbox order and icons

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

apps/dashboard/src/App.vue

@@ -39,7 +39,7 @@
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
 				<ol class="panels">
-					<li v-for="(cb, status) in allCallbacksStatus" :key="status">
+					<li v-for="status in sortedAllStatuses" :key="status">
 						<input :id="'status-checkbox-' + status"
 							type="checkbox"
 							class="checkbox"
@@ -105,11 +105,11 @@ const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
 const statusInfo = {
 	weather: {
 		text: t('dashboard', 'Weather'),
-		icon: 'icon-github',
+		icon: 'icon-weather-status',
 	},
 	status: {
 		text: t('dashboard', 'User status'),
-		icon: 'icon-discourse',
+		icon: 'icon-user-status-online',
 	},
 }
 
@@ -190,6 +190,9 @@ export default {
 		isStatusActive() {
 			return (status) => !(status in this.enabledStatuses) || this.enabledStatuses[status]
 		},
+		sortedAllStatuses() {
+			return Object.keys(this.allCallbacksStatus).slice().sort((a, b) => a > b)
+		},
 		sortedPanels() {
 			return Object.values(this.panels).sort((a, b) => {
 				const indexA = this.layout.indexOf(a.id)

apps/weather_status/src/App.vue

@@ -360,6 +360,12 @@ export default {
 </script>
 
 <style lang="scss">
+.icon-weather-status {
+	background-image: url('./../img/app-dark.svg');
+}
+body.theme--dark .icon-weather-status {
+	background-image: url('./../img/app.svg');
+}
 .icon-clearsky-day {
 	background-image: url('./../img/sun.svg');
 }