remove underused spacing style module

src/component/base/index.js

@@ -4,7 +4,6 @@ import '../../style/reset/index.css';
 // base styles for all components
 import '../../style/animation/index.css';
 import '../../style/font/index.css';
-import '../../style/spacing/index.css';
 import '../../style/state/index.css';
 import '../../style/typography/index.css';
 import '../../style/zindex/index.css';

src/component/bookmarkForm/index.css

@@ -16,6 +16,10 @@
   }
 }
 
+.bookmark-form-description {
+  margin-bottom: 3em;
+}
+
 .bookmark-form-main {
   padding-bottom: var(--bookmark-form-space);
 }

src/component/bookmarkForm/index.js

@@ -30,7 +30,7 @@ import { randomNumber } from '../../utility/randomNumber';
 
 import './index.css';
 
-export const BookmarkForm = function ({
+export const BookmarkForm = function({
   bookmarkData = false
 } = {}) {
 
@@ -768,8 +768,10 @@ export const BookmarkForm = function ({
       children: [
         form.wrap({
           children: [
-            node('h2:Visual & Name|class:mb-2'),
-            node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.|class:mb-5')
+            node('div|class:bookmark-form-description', [
+              node('h2:Visual & Name'),
+              node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.')
+            ])
           ]
         }),
         form.wrap({
@@ -796,8 +798,10 @@ export const BookmarkForm = function ({
       children: [
         form.wrap({
           children: [
-            node('h2:Address|class:mb-2'),
-            complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true, attr: [{ key: 'class', value: 'mb-5' }] })
+            node('div|class:bookmark-form-description', [
+              node('h2:Address'),
+              complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true })
+            ])
           ]
         }),
         form.wrap({
@@ -818,8 +822,10 @@ export const BookmarkForm = function ({
       children: [
         form.wrap({
           children: [
-            node('h2:Position|class:mb-2'),
-            node('p:The Group to place this Bookmark in.|class:mb-5')
+            node('div|class:bookmark-form-description', [
+              node('h2:Position'),
+              node('p:The Group to place this Bookmark in.')
+            ])
           ]
         }),
         form.wrap({
@@ -861,8 +867,10 @@ export const BookmarkForm = function ({
       children: [
         form.wrap({
           children: [
-            node('h2:Layout|class:mb-2'),
-            node('p:Change the Visual Element and Name position, scale and orientation.|class:mb-5')
+            node('div|class:bookmark-form-description', [
+              node('h2:Layout'),
+              node('p:Change the Visual Element and Name position, scale and orientation.')
+            ])
           ]
         }),
         form.wrap({
@@ -906,8 +914,10 @@ export const BookmarkForm = function ({
       children: [
         form.wrap({
           children: [
-            node('h2:Theme|class:mb-2'),
-            node('p:Override the Theme and Accent colour.|class:mb-5')
+            node('div|class:bookmark-form-description', [
+              node('h2:Theme'),
+              node('p:Override the Theme and Accent colour.')
+            ])
           ]
         }),
         form.wrap({

src/component/groupForm/index.css

@@ -1,3 +1,7 @@
 .group-form {
   display: block;
 }
+
+.group-form-description {
+  margin-bottom: 3em;
+}

src/component/groupForm/index.js

@@ -15,7 +15,7 @@ import { randomNumber } from '../../utility/randomNumber';
 
 import './index.css';
 
-export const GroupForm = function ({
+export const GroupForm = function({
   groupData = false
 } = {}) {
 
@@ -138,8 +138,10 @@ export const GroupForm = function ({
         children: [
           form.wrap({
             children: [
-              node('h2:Name|class:mb-2'),
-              node('p:Display a Name above this Group.|class:mb-5')
+              node('div|class:group-form-description', [
+                node('h2:Name'),
+                node('p:Display a Name above this Group.')
+              ])
             ]
           }),
           form.wrap({
@@ -174,8 +176,10 @@ export const GroupForm = function ({
         children: [
           form.wrap({
             children: [
-              node('h2:Toolbar|class:mb-2'),
-              node('p:Display controls to open all or show/hide the Bookmarks in this Group.|class:mb-5')
+              node('div|class:group-form-description', [
+                node('h2:Toolbar'),
+                node('p:Display controls to open all or show/hide the Bookmarks in this Group.')
+              ])
             ]
           }),
           form.wrap({
@@ -201,8 +205,10 @@ export const GroupForm = function ({
         children: [
           form.wrap({
             children: [
-              node('h2:Ordering|class:mb-2'),
-              node('p:The position of this Group.|class:mb-5')
+              node('div|class:group-form-description', [
+                node('h2:Ordering'),
+                node('p:The position of this Group.')
+              ])
             ]
           }),
           form.wrap({