console: Fix button alert styling

TheThingsNetwork · Feb 6, 2024 · aa6187a · aa6187a
1 parent cbc8667
commit aa6187a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
@@ -41,14 +41,16 @@
     &:only-child
       margin-right: - $cs.xxs
 
-  .alert
-    left: 17px
+  &.with-alert:after
+    content: ''
     position: absolute
-    top: 1px
-    background: white
-    width: 7px
-    height: 14px
-    padding-left: $cs.xxs
+    top: 4px
+    left: 17px
+    border: 3px solid var(--c-border-neutral-min)
+    border-radius: 100%
+    size: 13px
+    box-sizing: border-box
+    background-color: var(--c-bg-brand-normal)
 
   .expand-icon
     color: var(--c-icon-neutral-light)

diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js
@@ -52,6 +52,7 @@ const assembleClassnames = ({
   dropdownItems,
   className,
   error,
+  withAlert,
 }) =>
   classnames(style.button, {
     [className]: !Boolean(dropdownItems), // If there are dropdown items, the button is wrapped in a div with the className.
@@ -67,15 +68,15 @@ const assembleClassnames = ({
     [style.onlyIcon]: icon !== undefined && !message,
     [style.withDropdown]: Boolean(dropdownItems),
     [style.error]: error && !busy,
+    [style.withAlert]: withAlert,
   })
 
 const buttonChildren = props => {
-  const { dropdownItems, icon, busy, message, noDropdownIcon, withAlert, children } = props
+  const { dropdownItems, icon, busy, message, noDropdownIcon, children } = props
 
   const content = (
     <>
       {icon && <Icon className={style.icon} icon={icon} />}
-      {withAlert && <Status pulse={false} status="good" flipped className={style.alert} />}
       {message && <Message content={message} className={style.linkButtonMessage} />}
       {children}
       {dropdownItems && (