Merge pull request #6838 from TheThingsNetwork/feature/add-utility-cl…

…asses

Add utility classes

config/storybook/preview.js

@@ -16,14 +16,16 @@
 
 import React from 'react'
 import { Provider } from 'react-redux'
-import { ConnectedRouter } from 'connected-react-router'
 import { IntlProvider } from 'react-intl'
 import { createMemoryHistory } from 'history'
+import { MemoryRouter } from 'react-router-dom'
 
 import messages from '@ttn-lw/locales/en.json'
 import backendMessages from '@ttn-lw/locales/.backend/en.json'
 
 import '../../pkg/webui/styles/main.styl'
+import '../../pkg/webui/styles/utilities/general.styl'
+import '../../pkg/webui/styles/utilities/spacing.styl'
 import 'focus-visible/dist/focus-visible'
 import createStore from './store'
 import Center from './center'
@@ -35,9 +37,9 @@ export const decorators = [
   Story => (
     <Provider store={store}>
       <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
-        <ConnectedRouter history={history}>
+        <MemoryRouter>
           <Center>{Story()}</Center>
-        </ConnectedRouter>
+        </MemoryRouter>
       </IntlProvider>
     </Provider>
   ),

pkg/webui/lib/components/init.js

@@ -39,6 +39,8 @@ import {
 import Message from './message'
 
 import '@ttn-lw/styles/main.styl'
+import '@ttn-lw/styles/utilities/general.styl'
+import '@ttn-lw/styles/utilities/spacing.styl'
 
 const m = defineMessages({
   initializing: 'Initializing…',

pkg/webui/styles/main.styl

@@ -73,7 +73,7 @@ code
   background-color: $c-text-backdrop
   padding: 0.1rem $cs.xxs
   color: $tc-black
-  
+
 summary
   display: revert
   cursor: pointer
@@ -107,51 +107,7 @@ summary
 
   .tc-deep-gray
     color: $tc-deep-gray
-
-  .p-0
-    padding: 0 !important
-
-  .pt-0
-    margin-top: 0 !important
-
-  .pb-0
-    margin-bottom: 0 !important
-
-  .m-0
-    margin: 0 !important
-
-  .mt-0
-    margin-top: 0 !important
-
-  .mb-0
-    margin-bottom: 0 !important
-
-  for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl'
-    .mt-cs-{$size}
-      margin-top: $cs[$size] !important
-
-    .mb-cs-{$size}
-      margin-bottom: $cs[$size] !important
-
-    .ml-cs-{$size}
-      margin-left: $cs[$size] !important
-
-    .mr-cs-{$size}
-      margin-right: $cs[$size] !important
-
-  for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl'
-    .mt-ls-{$size}
-      margin-top: $ls[$size] !important
-
-    .mb-ls-{$size}
-      margin-bottom: $ls[$size] !important
-
-    .ml-ls-{$size}
-      margin-left: $ls[$size] !important
-
-    .mr-ls-{$size}
-      margin-right: $ls[$size] !important
-
+
   .panel-title
     padding-bottom: $cs.xs
     border-bottom: 1px solid $c-divider