Merge pull request #6806 from TheThingsNetwork/fix/new-sidebar-fixes

Apply various fixes for new Sidebar/Header layout
TheThingsNetwork · Jan 12, 2024 · f5f7ca3 · f5f7ca3
2 parents 3adafb2 + 686a6e5
commit f5f7ca3
Show file tree

Hide file tree

Showing 74 changed files with 1,175 additions and 1,187 deletions.
diff --git a/config/eslintrc.yaml b/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

diff --git a/pkg/webui/account/containers/clients-table/index.js b/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}

diff --git a/pkg/webui/account/views/landing/index.js b/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'
 

diff --git a/pkg/webui/account/views/oauth-client/index.js b/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'
 

diff --git a/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl b/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl
@@ -14,29 +14,30 @@
 
 
 .container
+  display: flex
+
   &:not(:last-child):after
     material-icon()
+    nudge('down', 1px)
     margin: 0 $cs.xxs
     content: 'keyboard_arrow_right'
     color: $tc-subtle-gray
 
-
 .link
   one-liner()
   text-decoration: none
   color: $tc-subtle-gray
-  min-height: 18px
+  display: flex
+  align-items: center
   +focus-visible()
     text-decoration: underline
     color: $tc-deep-gray
 
-
 .last
   one-liner()
   display: flex
   align-items: center
   color: $tc-deep-gray
-  min-height: 18px
   font-weight: $fw.bold
   +media-query($bp.s)
     &:last-child

diff --git a/pkg/webui/components/breadcrumbs/breadcrumb/index.js b/pkg/webui/components/breadcrumbs/breadcrumb/index.js
@@ -30,17 +30,17 @@ const Breadcrumb = ({ className, path, content, isLast }) => {
   if (!isLast) {
     Component = Link
     componentProps = {
-      className: classnames(className, style.container, style.link),
+      className: style.link,
       to: path,
       secondary: true,
     }
   } else {
     Component = 'span'
-    componentProps = { className: classnames(className, style.container, style.last) }
+    componentProps = { className: classnames(className, style.last) }
   }
 
   return (
-    <span {...componentProps}>
+    <span className={classnames(className, style.container)}>
       <Component {...componentProps}>
         {isRawText ? content : <Message content={content} />}
       </Component>

diff --git a/pkg/webui/components/breadcrumbs/breadcrumbs.js b/pkg/webui/components/breadcrumbs/breadcrumbs.js
@@ -15,7 +15,6 @@
 import React from 'react'
 import ReactDom from 'react-dom'
 import classnames from 'classnames'
-import { Container } from 'react-grid-system'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -52,9 +51,7 @@ const PortalledBreadcrumbs = ({ className, ...rest }) => {
       nodes.push(
         ReactDom.createPortal(
           <div className={classnames(className, style.breadcrumbsContainer)}>
-            <Container>
-              <Breadcrumbs {...rest} />
-            </Container>
+            <Breadcrumbs {...rest} />
           </div>,
           element,
         ),

diff --git a/pkg/webui/components/breadcrumbs/breadcrumbs.styl b/pkg/webui/components/breadcrumbs/breadcrumbs.styl
@@ -14,10 +14,10 @@
 
 .breadcrumbs
   color: $tc-subtle-gray
-  height: $breadcrumbs-bar-height
   display: flex
   align-items: center
   overflow: hidden
+  height: 1rem
 
   +media-query($bp.s)
     overflow: auto
@@ -30,3 +30,5 @@
   &-container
     box-sizing: border-box
     height: $breadcrumbs-bar-height
+    display: flex
+    align-items: center
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
@@ -13,69 +13,64 @@
 // 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
-
-  .arrow-icon
-    transform: rotate(0deg)
-    transition: transform .2s
-
-  .arrow-icon-expanded
-    transform: rotate(180deg)
-    transition: transform .2s
+
+  &.primary, &.secondary, &.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
+    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
+
+  .icon
+    margin-left: - $cs.xxs
+
+    &:only-child
+      margin-right: - $cs.xxs
+
+  .expand-icon
+    color: $c.grey-500
+    font-size: 1.285rem
+    margin-right: - $cs.xxs
+
+  &.only-icon
+    gap: 0
+    padding: 0 $cs.s
 
   &.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 +83,7 @@
     &.danger
       background-color: $c-error
 
-      &:not(.disabled)
+      &:not(:disabled)
         &:hover
           background-color: hoverize($c-error)
 
@@ -98,112 +93,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
-
-    &.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
+    &.only-icon
+      width: 2.5rem
+      height: 2.5rem
 
-      +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
+      color: $c.red-error-500
 
-      &:not(.disabled)
-        &:hover
-          color: hoverize($tc-error)
-
-  &.only-icon
-    width: 2.5rem
-    padding: 0 $cs.xs 0 0.73rem
-
-  &.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 +172,7 @@
   &.error
     animation: shake .15s 4 linear
 
-  &.disabled
+  &:disabled
     cursor: default
 
   &.busy:not(.naked),
@@ -244,9 +194,6 @@
   left: - $cs.s
   right: - $cs.s
 
-.icon
-  margin-left: - $cs.xxs
-
 .button-group
   display: flex
   flex-direction: column