Merge pull request #6692 from TheThingsNetwork/feature/css-groundwork

Console redesign ground work - css refactor

config/webpack.config.babel.js

@@ -230,7 +230,7 @@ export default {
         },
       },
       {
-        test: /\.(woff|woff2|ttf|eot|jpg|jpeg|png|svg)$/i,
+        test: /\.(woff|woff2|ttf|eot|otf|jpg|jpeg|png|svg)$/i,
         type: 'asset/resource',
         generator: {
           filename: '[name].[contenthash:20][ext]',

pkg/webui/components/delete-modal-button/index.js

@@ -26,8 +26,6 @@ import Message from '@ttn-lw/lib/components/message'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-import style from './delete-modal-button.styl'
-
 const DeleteModalButton = props => {
   const {
     confirmMessage,
@@ -83,7 +81,7 @@ const DeleteModalButton = props => {
           <div>
             <Message
               content={title}
-              values={{ entityName: name, pre: name => <pre className={style.id}>{name}</pre> }}
+              values={{ entityName: name, pre: name => <pre className="d-inline">{name}</pre> }}
               component="span"
             />
             <Message
@@ -95,7 +93,7 @@ const DeleteModalButton = props => {
               {mayPurge && (
                 <Form.Field
                   name="purge"
-                  className={style.hardDeleteCheckbox}
+                  className="mt-ls-xxs"
                   component={Checkbox}
                   onChange={handlePurgeEntityChange}
                   title={sharedMessages.deleteModalReleaseIdTitle}
@@ -121,11 +119,11 @@ const DeleteModalButton = props => {
                 <>
                   <Message
                     content={confirmMessage}
-                    values={{ entityId, pre: id => <pre className={style.id}>{id}</pre> }}
+                    values={{ entityId, pre: id => <pre className="d-inline">{id}</pre> }}
                     component="span"
                   />
                   <Input
-                    className={style.confirmInput}
+                    className="mt-ls-xxs"
                     data-test-id="confirm_deletion"
                     value={confirmId}
                     onChange={setConfirmId}

pkg/webui/components/icon/index.js

@@ -22,7 +22,7 @@ import style from './icon.styl'
 // Keep these sorted alphabetically.
 const hardcoded = {
   access: 'lock',
-  api_keys: 'vpn_key',
+  api_keys: 'key',
   application: 'web_asset',
   cluster: 'language',
   collaborators: 'people',

pkg/webui/components/key-value-map/entry.js

@@ -104,11 +104,11 @@ const Entry = ({
   const showRemoveButton = atLeastOneEntry ? index !== 0 : true
 
   return (
-    <div className={style.entriesRow}>
+    <div className="d-flex j-start mb-cs-s">
       {!indexAsKey && (
         <InputElement
           data-test-id={_getKeyInputName}
-          className={style.input}
+          className="flex-grow mr-cs-s"
           name={_getKeyInputName}
           placeholder={keyPlaceholder}
           type="text"

pkg/webui/components/key-value-map/index.js

@@ -23,8 +23,6 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import Entry from './entry'
 
-import style from './key-value-map.styl'
-
 const m = defineMessages({
   addEntry: 'Add entry',
 })
@@ -76,7 +74,7 @@ const KeyValueMap = ({
   }, [indexAsKey, onChange, value])
 
   return (
-    <div data-test-id={'key-value-map'} className={classnames(className, style.container)}>
+    <div data-test-id={'key-value-map'} className={classnames(className, 'direction-column')}>
       <div>
         {value &&
           value.map((individualValue, index) => (

pkg/webui/components/key-value-map/key-value-map.styl

@@ -12,14 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.container
-  flex-direction: column
-
-.entries-row
-  display: flex
-  margin-bottom: $cs.s
-  justify-content: flex-start
-
 .input
   margin-right: $cs.s
   flex-grow: 1

pkg/webui/components/rights-group/index.js

@@ -140,7 +140,7 @@ const RightsGroup = ({
       children={
         Boolean(m[`${right}_DESCRIPTION`]) && (
           <Message
-            className={style.description}
+            className="tc-subtle-gray w-full"
             component="div"
             content={m[`${right}_DESCRIPTION`]}
           />
@@ -162,7 +162,7 @@ const RightsGroup = ({
         />
       )}
       <Radio.Group
-        className={style.grantType}
+        className="mb-cs-s"
         name="grant_type"
         value={grantType}
         onChange={handleGrantTypeChange}
@@ -172,7 +172,7 @@ const RightsGroup = ({
         <Radio label={m.selectIndividualRights} value="individual" />
       </Radio.Group>
       <Checkbox
-        className={classnames(style.selectAll, style.rightLabel)}
+        className={classnames(style.rightLabel, 'mb-cs-s')}
         name={selectAllName}
         label={selectAllTitle}
         onChange={handleChangeAll}
@@ -181,7 +181,7 @@ const RightsGroup = ({
         disabled={allDisabled}
       />
       <Checkbox.Group
-        className={style.group}
+        className={classnames(style.group, 'pl-ls-xxs')}
         name={name}
         value={rightsValues}
         onChange={handleChange}

pkg/webui/components/rights-group/rights-group.styl

@@ -12,21 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.select-all
-  margin-bottom: $cs.s
-
 .group
   border-normal('left')
-  padding-left: $ls.xxs
 
 .right-label
   span::first-letter
     text-transform: uppercase
   flex-wrap: wrap
-
-.grant-type
-  margin-bottom: $cs.s
-
-.description
-  color: $tc-subtle-gray
-  width: 100%

pkg/webui/components/table/sort-button/index.js

@@ -33,15 +33,10 @@ const SortButton = ({ name, onSort, className, active, direction, title }) => {
     [style.buttonDesc]: active && direction === 'desc',
   })
 
-  let icon = 'sort_order'
-  if (active && direction) {
-    icon += `_${direction}`
-  }
-
   return (
     <button className={buttonClassNames} type="button" onClick={handleSort}>
       <Message content={title} />
-      <Icon className={style.icon} icon={icon} nudgeUp />
+      <Icon className={style.icon} icon="sort" nudgeUp />
     </button>
   )
 }

pkg/webui/console/components/device-import-form/index.js

@@ -46,8 +46,6 @@ import { selectNsFrequencyPlans } from '@console/store/selectors/configuration'
 
 import FallbackVersionIdsSection from './fallback-version-ids-section'
 
-import style from './device-import-form.styl'
-
 const m = defineMessages({
   file: 'File',
   formatInfo: 'Format information',
@@ -113,7 +111,7 @@ const DeviceBulkCreateFormInner = props => {
     <>
       <Message
         content={m.infoText}
-        className={style.info}
+        className="mt-0"
         values={{
           DocLink: msg => (
             <Link.DocLink secondary path="/the-things-stack/migrating/import-devices/">
@@ -122,7 +120,7 @@ const DeviceBulkCreateFormInner = props => {
           ),
         }}
       />
-      <hr className={style.hRule} />
+      <hr className="mt-ls-s mb-ls-xs" />
       <DeviceTemplateFormatSelect onChange={handleSelectChange} name="format_id" required />
       <Form.InfoField disabled={!formatSelected} title={m.formatInfo}>
         {formatDescription ? formatDescription : <Message content={m.fileInfoPlaceholder} />}

pkg/webui/console/components/gateway-api-keys-modal/index.js

@@ -23,8 +23,6 @@ import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-import style from './gateway-api-key-modal.styl'
-
 const m = defineMessages({
   modalTitle: 'Download gateway API keys',
   buttonMessage: 'I have downloaded the keys',
@@ -43,7 +41,7 @@ const GatewayApiKeysModal = ({
   downloadCups,
 }) => (
   <PortalledModal
-    className={style.gatewayApiKeyModal}
+    className="d-flex direction-column"
     visible={modalVisible}
     title={m.modalTitle}
     approval={false}

pkg/webui/console/components/last-seen/index.js

@@ -23,8 +23,6 @@ import Message from '@ttn-lw/lib/components/message'
 import PropTypes from '@ttn-lw/lib/prop-types'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
-import style from './last-seen.styl'
-
 const computeDeltaInSeconds = (from, to) => {
   // Avoid situations when server clock is ahead of the browser clock.
   if (from > to) {
@@ -49,8 +47,8 @@ const LastSeen = React.forwardRef((props, ref) => {
 
   return (
     <Status status={status} pulseTrigger={lastSeen} flipped={flipped} ref={ref}>
-      <div className={classnames(className, style.container)}>
-        {!short && <Message className={style.message} content={message} />}
+      <div className={classnames(className, 'd-inline-block')}>
+        {!short && <Message className="mr-cs-xxs" content={message} />}
         <DateTime.Relative
           value={lastSeen}
           computeDelta={computeDeltaInSeconds}

pkg/webui/console/components/payload-formatters-form/index.js

@@ -44,8 +44,6 @@ import { address as addressRegexp } from '@console/lib/regexp'
 import { getDefaultGrpcServiceFormatter, getDefaultJavascriptFormatter } from './formatter-values'
 import TestForm from './test-form'
 
-import style from './payload-formatters-form.styl'
-
 const m = defineMessages({
   repository: 'Use Device Repository formatters',
   customJavascipt: 'Custom Javascript formatter',
@@ -465,7 +463,7 @@ const PayloadFormattersForm = ({
         {_showTestSection() && (
           <Col sm={12} lg={6}>
             <TestForm
-              className={style.testForm}
+              className="m:mt-ls-s"
               onSubmit={handleTestSubmit}
               uplink={uplink}
               testResult={testResult}