console: Use color utility classes to achieve label states

TheThingsNetwork · Jan 24, 2024 · 108c673 · 108c673
1 parent c54c135
commit 108c673
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 26 deletions.
diff --git a/pkg/webui/components/status-label/index.js b/pkg/webui/components/status-label/index.js
@@ -24,16 +24,12 @@ import Icon from '../icon'
 import style from './status-label.styl'
 
 const StatusLabel = ({ success, warning, error, info, content }) => {
-  const statusClassName = classnames(
-    style.label,
-    {
-      [style.success]: success,
-      [style.warning]: warning,
-      [style.error]: error,
-      [style.info]: info,
-    },
-    'd-flex gap-cs-xs al-center j-center p-vert-cs-s p-sides-cs-m',
-  )
+  const statusClassName = classnames(style.label, {
+    'c-bg-success-light c-text-success-bold': success,
+    'c-bg-warning-light c-text-warning-bold': warning,
+    'c-bg-error-light c-text-error-bold': error,
+    'c-bg-info-light c-text-info-bold': info,
+  })
 
   const labelIcon = success ? 'check_circle' : warning ? 'warning' : error ? 'error' : 'info'
 

diff --git a/pkg/webui/components/status-label/status-label.styl b/pkg/webui/components/status-label/status-label.styl
@@ -13,22 +13,11 @@
 // limitations under the License.
 
 .label
+  display: flex
+  gap: $cs.xs
+  align-items: center
+  justify-content: center
+  padding: $cs.s $cs.m
   border-radius: 2rem
   font-weight: $fwv2.semibold
   width: fit-content
-
-  &.success
-    background: var(--c-bg-success-light)
-    color: var(--c-text-success-bold)
-
-  &.warning
-    background: var(--c-bg-warning-light)
-    color: var(--c-text-warning-bold)
-
-  &.error
-    background: var(--c-bg-error-light)
-    color: var(--c-text-error-bold)
-
-  &.info
-    background: var(--c-bg-info-light)
-    color: var(--c-text-info-bold)