Merge pull request #7397 from TheThingsNetwork/fix/button

Fix/button
TheThingsNetwork · Dec 16, 2024 · a1e2469 · a1e2469
2 parents 0186265 + 268c14d
commit a1e2469
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 20 deletions.
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
@@ -19,10 +19,10 @@
   // where the button is used as a container.
   reset-button()
 
-  &.primary, &.secondary, &.naked
+  &.primary, &.secondary, &.tertiary, &.naked
     position: relative
     display: inline-flex
-    transition: 80ms background ease-in-out, 80ms color ease-in-out, 80ms border-color ease-in-out, 80ms box-shadow ease-in-out
+    transition: .1s background ease-in-out, .1s color ease-in-out, .1s border-color ease-in-out, .1s box-shadow ease-in-out
     border-radius: $br.m
     outline: 0
     cursor: pointer
@@ -31,6 +31,7 @@
     gap: $cs.xxs
     height: $default-input-height
     text-decoration: none
+    font-weight: $fw.bold
     padding: 0 $cs.m
     white-space: nowrap
     box-sizing: border-box
@@ -72,7 +73,6 @@
 
     &.primary:not(.naked)
       color: var(--c-text-neutral-min)
-
       background-color: var(--c-text-brand-normal)
 
       &:disabled
@@ -123,19 +123,17 @@
     &.secondary
       color: var(--c-text-neutral-heavy)
       background-color: var(--c-bg-neutral-min)
-      box-shadow: 0px 2px 2px 0px rgba(0 0 0 4.5%), inset 0px 0px 0px 1px var(--c-bg-neutral-min)
-      gradient-border(var(--c-bg-neutral-min), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
-      border: 1px solid transparent
+      border: solid 1px var(--c-border-neutral-light)
 
       &:not(:disabled)
         &:hover
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          background-color: var(--c-bg-neutral-light)
 
         +focus-visible()
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          gradient-border(var(--c-bg-neutral-light), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
 
         &:active
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          gradient-border(var(--c-bg-neutral-light), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
           box-shadow: none
 
       &.warning
@@ -182,6 +180,58 @@
           width: 1.2rem
           height: 1.2rem
 
+    &.tertiary
+      color: var(--c-text-brand-normal)
+      background-color: var(--c-bg-brand-light)
+
+      &:disabled
+        color: var(--c-text-neutral-light)
+        background-color: var(--c-border-neutral-light)
+
+      &:not(:disabled)
+        &:hover
+          background-color: var(--c-bg-brand-semilight)
+
+        +focus-visible()
+          background-color: var(--c-bg-brand-light)
+
+        &:active
+          background-color: var(--c-text-brand-light)
+
+      &.warning
+        color: var(--c-text-warning-normal)
+        background-color: var(--c-bg-warning-light)
+
+        &:not(:disabled)
+          &:hover
+            background-color: var(--c-bg-warning-semilight)
+
+          +focus-visible()
+            background-color: var(--c-bg-warning-semilight)
+
+          &:active
+            background-color: var(--c-bg-warning-ligth)
+
+        &:disabled
+          background-color: var(--c-bg-warning-normal-disabled)
+
+      &.danger
+        color: var(--c-text-danger-normal)
+        background-color: var(--c-bg-error-light)
+
+        &:not(:disabled)
+          &:hover
+            background-color: var(--c-bg-error-semilight)
+
+          +focus-visible()
+            background-color: var(--c-bg-error-semilight)
+
+          &:active
+            background-color: var(--c-bg-error-normal-active)
+
+        &:disabled
+          background-color: var(--c-bg-error-normal-disabled)
+
     &.naked:not(.primary)
       color: var(--c-text-neutral-light)
 

diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js
@@ -38,6 +38,7 @@ const assembleClassnames = ({
   warning,
   primary,
   secondary,
+  tertiary,
   naked,
   icon,
   small,
@@ -54,6 +55,7 @@ const assembleClassnames = ({
     [style.warning]: warning,
     [style.primary]: primary,
     [style.secondary]: secondary,
+    [style.tertiary]: tertiary,
     [style.naked]: naked,
     [style.busy]: busy,
     [style.small]: small,

diff --git a/pkg/webui/console/components/blurry-noc-metrics-panel/index.js b/pkg/webui/console/components/blurry-noc-metrics-panel/index.js
@@ -65,15 +65,11 @@ const BlurryNocMetricsPanel = ({ title, icon }) => {
             content={sharedMessages.quicklyTroubleshoot}
           />
           <Button.AnchorLink
-            naked
+            tertiary
             message={sharedMessages.upgradeNow}
             icon={IconBolt}
             href={upgradeUrl}
             target="_blank"
-            className={classnames(
-              style.upgradeButton,
-              'c-bg-brand-extralight c-text-brand-normal fw-bold',
-            )}
           />
         </div>
       </div>

diff --git a/pkg/webui/console/components/total-end-devices-upseller-panel/index.js b/pkg/webui/console/components/total-end-devices-upseller-panel/index.js
@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react'
-import classnames from 'classnames'
 
 import { IconBolt, IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
@@ -48,15 +47,11 @@ const TotalEndDevicesUpsellerPanel = () => {
           content={sharedMessages.quicklyTroubleshoot}
         />
         <Button.AnchorLink
-          naked
+          tertiary
           message={sharedMessages.upgradeNow}
           icon={IconBolt}
           href={upgradeUrl}
           target="_blank"
-          className={classnames(
-            style.upgradeButton,
-            'c-bg-brand-extralight c-text-brand-normal fw-bold',
-          )}
         />
       </div>
     </Panel>