From 3df134b5587fdd18c7de2aa5e33013be2c97094b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 29 Mar 2020 22:04:38 -0700
Subject: [PATCH] Make sizing across margins/padding/width/height the same

---
 .../server/users/UsersContainer.tsx           |   2 +-
 resources/styles/components/modal.css         |   2 +-
 tailwind.js                                   | 209 +++++-------------
 3 files changed, 57 insertions(+), 156 deletions(-)

diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx
index e2361684f..a6c863ea0 100644
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@@ -43,7 +43,7 @@ export default () => {
     }
 
     return (
-        <div className={'my-10'}>
+        <div className={'mt-10 mb-6'}>
             <FlashMessageRender byKey={'users'} className={'mb-4'}/>
             {!subusers.length ?
                 <p className={'text-center text-sm text-neutral-400'}>
diff --git a/resources/styles/components/modal.css b/resources/styles/components/modal.css
index 03e41eb4f..5fdceaa87 100644
--- a/resources/styles/components/modal.css
+++ b/resources/styles/components/modal.css
@@ -4,7 +4,7 @@
   transition: opacity 250ms ease;
 
   & > .modal-container {
-    @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
+    @apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex;
 
     /*&.top {
       margin-top: 10%;
diff --git a/tailwind.js b/tailwind.js
index e83e6d675..90a7e5782 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -120,6 +120,52 @@ let colors = {
     'green-900': 'hsl(125, 97%, 14%)',
 };
 
+/*
+|-------------------------------------------------------------------------------
+| Sizes
+|-------------------------------------------------------------------------------
+|
+| Here you can specify the sizes that should be available to all of the height,
+| width, padding, and margin utilities.
+|
+*/
+
+let sizes = {
+    'auto': 'auto',
+    '0': '0',
+    'px': '1px',
+    '1': '0.25rem',
+    '2': '0.5rem',
+    '3': '0.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '8': '2rem',
+    '10': '2.5rem',
+    '12': '3rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '28': '7rem',
+    '32': '8rem',
+    '48': '12rem',
+    '64': '16rem',
+    '96': '24rem',
+    '1/2': '50%',
+    '1/3': '33.33333%',
+    '2/3': '66.66667%',
+    '1/4': '25%',
+    '3/4': '75%',
+    '1/5': '20%',
+    '2/5': '40%',
+    '3/5': '60%',
+    '4/5': '80%',
+    '1/6': '16.66667%',
+    '5/6': '83.33333%',
+    'full': '100%',
+    'screen': '100vw',
+};
+
 module.exports = {
 
     /*
@@ -452,38 +498,7 @@ module.exports = {
     |
     */
 
-    width: {
-        'auto': 'auto',
-        'px': '1px',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '24': '6rem',
-        '32': '8rem',
-        '48': '12rem',
-        '64': '16rem',
-        '96': '24rem',
-        '1/2': '50%',
-        '1/3': '33.33333%',
-        '2/3': '66.66667%',
-        '1/4': '25%',
-        '3/4': '75%',
-        '1/5': '20%',
-        '2/5': '40%',
-        '3/5': '60%',
-        '4/5': '80%',
-        '1/6': '16.66667%',
-        '5/6': '83.33333%',
-        'full': '100%',
-        'screen': '100vw',
-    },
+    width: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -500,26 +515,7 @@ module.exports = {
     |
     */
 
-    height: {
-        'auto': 'auto',
-        'px': '1px',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '24': '6rem',
-        '32': '8rem',
-        '48': '12rem',
-        '64': '16rem',
-        'full': '100%',
-        'screen': '100vh',
-    },
+    height: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -535,25 +531,7 @@ module.exports = {
     |
     */
 
-    minWidth: {
-        '0': '0',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '24': '6rem',
-        '32': '8rem',
-        '48': '12rem',
-        '64': '16rem',
-        '96': '24rem',
-        'full': '100%',
-    },
+    minWidth: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -569,11 +547,7 @@ module.exports = {
     |
     */
 
-    minHeight: {
-        '0': '0',
-        'full': '100%',
-        'screen': '100vh',
-    },
+    minHeight: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -590,19 +564,7 @@ module.exports = {
     |
     */
 
-    maxWidth: {
-        'xxs': '10rem',
-        'xs': '20rem',
-        'sm': '30rem',
-        'md': '40rem',
-        'lg': '50rem',
-        'xl': '60rem',
-        '2xl': '70rem',
-        '3xl': '80rem',
-        '4xl': '90rem',
-        '5xl': '100rem',
-        'full': '100%',
-    },
+    maxWidth: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -618,10 +580,7 @@ module.exports = {
     |
     */
 
-    maxHeight: {
-        'full': '100%',
-        'screen': '100vh',
-    },
+    maxHeight: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -638,23 +597,7 @@ module.exports = {
     |
     */
 
-    padding: {
-        'px': '1px',
-        '0': '0',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '20': '5rem',
-        '24': '6rem',
-        '32': '8rem',
-    },
+    padding: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -671,33 +614,7 @@ module.exports = {
     |
     */
 
-    margin: {
-        'n-12': '-3rem',
-        'n-10': '-2.5rem',
-        'n-8': '-2rem',
-        'n-6': '-1.5rem',
-        'n-4': '-1rem',
-        'n-3': '-0.75rem',
-        'n-2': '-0.5rem',
-        'n-1': '-0.25rem',
-        'n-px': '-1px',
-        'auto': 'auto',
-        'px': '1px',
-        '0': '0',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '20': '5rem',
-        '24': '6rem',
-        '32': '8rem',
-    },
+    margin: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------
@@ -714,23 +631,7 @@ module.exports = {
     |
     */
 
-    negativeMargin: {
-        'px': '1px',
-        '0': '0',
-        '1': '0.25rem',
-        '2': '0.5rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '20': '5rem',
-        '24': '6rem',
-        '32': '8rem',
-    },
+    negativeMargin: { ...sizes },
 
     /*
     |-----------------------------------------------------------------------------