fix badge font color (openWB#1728)

ndrsnhs · Jul 5, 2024 · 79e75d9 · 79e75d9
1 parent c0bf390
commit 79e75d9
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 44 deletions.
diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css
@@ -194,7 +194,7 @@ body>.container-fluid {
 	--font-medium: 1.2rem;
 	--font-small: 1rem;
 	--font-verysmall: 0.7rem;
-	--font-extralarge: 1.6rem;
+	--font-extralarge: 1.7rem;
 	--font-settings: 16px;
 }
 

diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue
@@ -7,7 +7,7 @@ Hagen */
 			<span class="battery-title">{{ bat.name }}</span>
 		</template>
 		<template #buttons>
-			<WbBadge :bgcolor="statusbg" color="black">{{ batteryState }}</WbBadge>
+			<WbBadge :bgcolor="statusbg">{{ batteryState }}</WbBadge>
 		</template>
 		<div class="subgrid pt-1">
 			<InfoItem heading="Geliefert:" :small="true" class="grid-left grid-col-4">

diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue
@@ -14,12 +14,12 @@ Hagen */
 			<span>Speicher</span>
 		</template>
 		<template #buttons>
-			<WbBadge :bgcolor="statusbg" color="black">
+			<WbBadge :bgcolor="statusbg">
 				{{ batteryState }}
 			</WbBadge>
-			<WbBadge bgcolor="var(--color-battery)" color="black">
+			<WbBadge bgcolor="var(--color-battery)">
 				<BatterySymbol
-					color="black"
+					color="var(--color-bg)"
 					:soc="globalData.batterySoc"
 				></BatterySymbol>
 			</WbBadge>

diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/ChargePointList.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/ChargePointList.vue
@@ -27,7 +27,6 @@ import { computed, onMounted } from 'vue'
 import { chargePoints } from './model'
 import { globalConfig, widescreen } from '@/assets/js/themeConfig'
 import CPChargePoint from './CPChargePoint.vue'
-// import CPSimpleList from './cpSimpleList/CPSimpleList.vue'
 import Swiper from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'

diff --git a/...les/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CpsListItem2.vue b/...les/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CpsListItem2.vue
@@ -3,10 +3,7 @@
 		<template #title>
 			<div class="d-flex align-items-center">
 				<span class="cpname">{{ chargepoint.name }} </span>
-				<span
-					class="WbBadge rounded-pill statusWbBadge mx-2"
-					:style="statusColor"
-				>
+				<span class="badge rounded-pill statusbadge mx-2" :style="statusColor">
 					<i :class="statusIcon" class="me-1" />
 					{{ statusString }}</span
 				>
@@ -15,7 +12,7 @@
 		<template #buttons>
 			<div class="d-flex float-right justify-content-end align-items-center">
 				<span
-					class="WbBadge rounded-pill modeWbBadge mx-2"
+					class="badge rounded-pill modebadge mx-2"
 					type="button"
 					:style="modeStyle"
 					data-bs-toggle="modal"
@@ -68,7 +65,7 @@
 						<span>{{ chargePowerString }}</span>
 
 						<span class="d-flex align-items-center">
-							<span class="WbBadge phasesInUse rounded-pill">
+							<span class="badge phasesInUse rounded-pill">
 								{{ chargePhasesString }}</span
 							>
 							<span>
@@ -304,7 +301,7 @@ const statusString = computed(() => {
 	color: var(--color-fg);
 }
 
-.statusWbBadge {
+.statusbadge {
 	background-color: var(--color-bg);
 	font-weight: bold;
 	font-size: var(--font-verysmall);

diff --git a/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue b/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
 const WbBadgestyle = computed(() => {
 	let result = {
 		'background-color': props.bgcolor ?? 'var(--color-menu)',
-		color: props.color ?? 'black',
+		color: props.color ?? 'var(--color-bg)',
 	}
 	return result
 })

diff --git a/packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue b/packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue
@@ -15,15 +15,16 @@
 				v-if="props.device.canSwitch"
 				:class="switchIcon"
 				:style="switchStyle"
-				class="fa statusbutton mr-2 ms-4"
+				class="fa-solid statusbutton mr-2 ms-2"
 				@click="statusButtonClicked"
 			/>
-			<span
+			<WbBadge
 				v-if="props.device.canSwitch"
-				class="WbBadge rounded-pill modebutton mx-2"
+				type="button"
 				@click="modeButtonClicked"
-				>{{ deviceMode }}</span
 			>
+				{{ deviceMode }}
+			</WbBadge>
 		</template>
 		<div class="subgrid">
 			<InfoItem heading="Leistung:" class="grid-col-4 grid-left">
@@ -55,10 +56,10 @@ const props = defineProps<{
 
 const switchIcon = computed(() => {
 	return props.device.status == 'on'
-		? 'fa-toggle-on'
+		? 'fa-toggle-on fa-xl'
 		: props.device.status == 'waiting'
 			? 'fa-spinner fa-spin'
-			: 'fa-toggle-off'
+			: 'fa-toggle-off fa-xl'
 })
 const switchStyle = computed(() => {
 	let swColor = 'var(--color-switchRed)'
@@ -110,22 +111,6 @@ const deviceMode = computed(() => {
 
 <style scoped>
 .statusbutton {
-	font-size: var(--font-large);
-}
-
-.modebutton {
-	background-color: var(--color-menu);
-	font-size: var(--font-verysmall);
-	font-weight: normal;
-}
-
-.tempWbBadge {
-	background-color: var(--color-battery);
-	color: var(--color-bg);
-	font-size: var(--font-verysmall);
-	font-weight: normal;
-}
-.infolist {
-	justify-content: center;
+	font-size: var(--font-extralarge);
 }
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue b/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue
@@ -245,7 +245,7 @@ const shortListOptions: [string, string][] = [
 </script>
 <style scoped>
 .fa-circle-check {
-	font-size: var(--font-extralarge);
+	font-size: var(--font-large);
 	background-color: var(--color-bg);
 	color: var(--color-menu);
 }

diff --git a/...emes/colors/web/assets/index-I4G-eoQw.css → ...emes/colors/web/assets/index-CMDnrXDa.css b/...emes/colors/web/assets/index-I4G-eoQw.css → ...emes/colors/web/assets/index-CMDnrXDa.css
diff --git a/...hemes/colors/web/assets/index-BfezLEEg.js → ...hemes/colors/web/assets/index-DNPzLOl7.js b/...hemes/colors/web/assets/index-BfezLEEg.js → ...hemes/colors/web/assets/index-DNPzLOl7.js
diff --git a/packages/modules/web_themes/colors/web/index.html b/packages/modules/web_themes/colors/web/index.html
@@ -23,9 +23,9 @@
 	<link rel="apple-touch-icon" sizes="57x57" href="/openWB/web/img/favicons/apple-touch-icon-57x57.png">
 	<link rel="apple-touch-icon" sizes="60x60" href="/openWB/web/img/favicons/apple-touch-icon-60x60.png">
 	<title>openWB</title>
-  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-BfezLEEg.js"></script>
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-DNPzLOl7.js"></script>
   <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-DXWWyQ_6.js">
-  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-I4G-eoQw.css">
+  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-CMDnrXDa.css">
 </head>
 
 <body>