console,account: Apply various fixes

config/eslintrc.yaml

@@ -141,6 +141,8 @@ rules:
   react/forbid-foreign-prop-types: off
   # Prevent undefined components.
   react/jsx-no-undef: warn
+  # Allow arrow functions as props
+  react/jsx-no-bind: off
   # Prevent vague prop types.
   react/forbid-prop-types:
     - warn

pkg/webui/account/containers/clients-table/index.js

@@ -151,7 +151,7 @@ const ClientsTable = () => {
         }),
         render: details => (
           <ButtonGroup align="end">
-            <Button message={sharedMessages.restore} onClick={details.restore} />
+            <Button message={sharedMessages.restore} onClick={details.restore} secondary />
             <DeleteModalButton
               entityId={details.id}
               entityName={name}

pkg/webui/account/views/landing/index.js

@@ -18,7 +18,7 @@ import classnames from 'classnames'
 
 import authRoutes from '@account/constants/auth-routes'
 
-import sidebarStyle from '@ttn-lw/components/navigation/side/side.styl'
+import sidebarStyle from '@ttn-lw/components/sidebar/side-menu/side.styl'
 
 import Footer from '@ttn-lw/containers/footer'
 

pkg/webui/account/views/oauth-client/index.js

@@ -19,7 +19,7 @@ import { Routes, Route, useParams } from 'react-router-dom'
 import applicationIcon from '@assets/misc/application.svg'
 
 import { useBreadcrumbs } from '@ttn-lw/components/breadcrumbs/context'
-import SideNavigation from '@ttn-lw/components/navigation/side'
+import SideNavigation from '@ttn-lw/components/sidebar/side-menu'
 import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
 import Breadcrumbs from '@ttn-lw/components/breadcrumbs'
 

pkg/webui/components/button/button.styl

@@ -13,69 +13,67 @@
 // limitations under the License.
 
 .button
+  // Without secondary or primary style,
+  // the button should not apply any styling.
+  // This is to cater for special situations
+  // where the button is used as a container.
   reset-button()
-  position: relative
-  display: inline-flex
-  transition: 0.2s all ease-in-out
-  border-radius: $br.l
-  outline: 0
-  cursor: pointer
-  justify-content: center
-  align-items: center
-  gap: $cs.xxs
-  height: 2.5rem
-  text-decoration: none
-  padding: 0 $cs.m
-  white-space: nowrap
+
+  &.primary, &.secondary, &.naked
+    position: relative
+    display: inline-flex
+    transition: 80ms all ease-in-out
+    border-radius: $br.m
+    outline: 0
+    cursor: pointer
+    justify-content: center
+    align-items: center
+    gap: $cs.xxs
+    height: 2.5rem
+    text-decoration: none
+    padding: 0 $cs.m
+    white-space: nowrap
+    box-sizing: border-box
 
   .arrow-icon
     transform: rotate(0deg)
-    transition: transform .2s
+    transition: transform .2s ease-in-out
+    margin-right: - $cs.xs
 
   .arrow-icon-expanded
     transform: rotate(180deg)
-    transition: transform .2s
+    transition: transform .2s ease-in-out
+
+  .icon
+    margin-left: - $cs.xxs
+
+    &:only-child
+      margin-right: - $cs.xxs
+
+  &.only-icon
+    gap: 0
 
   &.primary
-    transition: 0.2s all ease-in-out
     color: white
     background-color: $c-active-blue
 
-    &.disabled
+    &:disabled
       background-color: $c-divider-dark
 
-    &:not(.disabled)
+    &:not(:disabled)
       &:hover
-        transition: 0.2s all ease-in-out
         background-color: hoverize($c-active-blue)
 
       +focus-visible()
         background-color: hoverize($c-active-blue)
 
       &:active
-        transition: 0.2s all ease-in-out
         background-color: activize($c-active-blue)
 
-    &.grey
-      background-color: $c.grey-500
-
-      &:not(.disabled)
-        &:hover
-          background-color: hoverize($c.grey-500)
-
-        +focus-visible()
-          background-color: hoverize($c.grey-500)
-
-        &:active
-          background-color: activize($c.grey-500)
-
-      &.disabled
-        background-color: transparentify($c.grey-500, #fff, .25)
-
     &.warning
       background-color: $c-warning
 
-      &:not(.disabled)
+      &:not(:disabled)
         &:hover
           background-color: hoverize($c-warning)
 
@@ -88,7 +86,7 @@
     &.danger
       background-color: $c-error
 
-      &:not(.disabled)
+      &:not(:disabled)
         &:hover
           background-color: hoverize($c-error)
 
@@ -98,112 +96,67 @@
         &:active
           background-color: activize($c-error)
 
-      &.disabled
+      &:disabled
         background-color: transparentify($c-error, #fff, .25)
 
   &.secondary
-    transition: 0.2s all ease-in-out
     color: $tc-deep-gray
     background-color: white
     box-shadow: 0px 2px 2px 0px rgba(0 0 0 4.5%), inset 0px 0px 0px 1px white
     background: linear-gradient(to bottom, white, white) padding-box, linear-gradient(to bottom, #E8E7EC, #D7D7D7) border-box
     border: 1px solid transparent
 
-
     &:hover
-      transition: 0.2s all ease-in-out
       background: linear-gradient(to bottom, $c-focus, $c-focus) padding-box, linear-gradient(to bottom, #E8E7EC, #D7D7D7) border-box
 
     +focus-visible()
       background: linear-gradient(to bottom, $c-focus, $c-focus) padding-box, linear-gradient(to bottom, #E8E7EC, #D7D7D7) border-box
 
     &:active
-      transition: 0.2s all ease-in-out
       background: linear-gradient(to bottom, $c-focus, $c-focus) padding-box, linear-gradient(to bottom, #E8E7EC, #D7D7D7) border-box
       box-shadow: none
 
   &.naked
-    transition: 0.2s all ease-in-out
-    border: none
-    background-color: none
-    box-shadow: unset
     color: $tc-subtle-gray
 
-    &.disabled
+    &:disabled
       color: transparentify($tc-subtle-gray, #fff, .25) !important
 
-    &:not(.disabled)
+    &:not(:disabled)
       &:hover
-        background-color: $c-backdrop
+        background-color: rgba(0,0,0,.04)
+        color: $c.grey-700
 
       +focus-visible()
-        background-color: $c-backdrop
+        background-color: rgba(0,0,0,.04)
+        color: $c.grey-700
 
       &:active
-        transition-duration: $ad.xs
         background-color: $c-backdrop
 
-    &.warning
-      color: $tc-warning
+    &.only-icon
+      width: 2.5rem
+      height: 2.5rem
 
-    &.danger
-      color: $tc-error
-
-  &:not(.primary):not(.naked)
-    border-dark()
-    border: 1px solid #d3d3d3
-    box-sizing: border-box
-    background-color: #fff
-    color: $tc-deep-gray
-
-    &:not(:active)
-      box-shadow: 0px 1px 1px #efefef, inset 0 1px 0 white
-
-    &.disabled
-      border-color: transparentify(#d3d3d3, #fff, .1)
-
-      &:not(.busy)
-        color: transparentify($tc-deep-gray, #fff, .25)
-
-    &:not(.disabled)
-      &:hover
-        background-color: #fafafa
-
-      +focus-visible()
-        border: 1px solid $c-active-blue
-        background-color: #fafafa
-
-      &:active
-        transition-duration: $ad.xs
-        background-color: #f6f6f6
+    &.small
+      width: 2rem
+      height: 2rem
+      border-radius: $br.s
 
     &.warning
-      border-color: $tc-warning
-      color: $tc-warning
+      color: $c.orange-warning-500
 
-      &:not(.disabled)
-        &:hover
-          color: hoverize($tc-warning)
+      &:hover
+        color: $c.orange-warning-600
 
     &.danger
-      border-color: $tc-error
-      color: $tc-error
-
-      &:not(.disabled)
-        &:hover
-          color: hoverize($tc-error)
-
-  &.only-icon
-    width: 2.5rem
-    padding: 0 $cs.xs 0 0.73rem
+      color: $c.red-error-500
 
-  &.with-dropdown
-    padding: 0 $cs.xxs 0 $cs.xs
+      &:hover
+        color: $c.red-error-600
 
   &.with-dropdown&.only-icon
     width: fit-content
-    .icon
-      margin-left: 0
 
   &.with-icon
     line-height: 1.3
@@ -222,7 +175,7 @@
   &.error
     animation: shake .15s 4 linear
 
-  &.disabled
+  &:disabled
     cursor: default
 
   &.busy:not(.naked),
@@ -244,9 +197,6 @@
   left: - $cs.s
   right: - $cs.s
 
-.icon
-  margin-left: - $cs.xxs
-
 .button-group
   display: flex
   flex-direction: column