From 0571a698146b00d10eeb61610db58331645abf6f Mon Sep 17 00:00:00 2001
From: "Scott E. Graves" <scott.e.graves@protonmail.com>
Date: Tue, 22 Oct 2019 13:28:50 -0500
Subject: [PATCH] Layout changes

---
 src/App.css                                          |  4 ++--
 src/App.js                                           |  6 +++---
 src/components/ErrorDetails/ErrorDetails.css         |  2 +-
 src/components/ErrorDetails/ErrorDetails.js          |  2 +-
 src/components/InfoDetails/InfoDetails.css           |  2 +-
 src/components/InfoDetails/InfoDetails.js            |  2 +-
 src/components/Reboot/Reboot.css                     |  2 +-
 src/components/Reboot/Reboot.js                      |  2 +-
 src/components/YesNo/YesNo.js                        |  2 +-
 src/containers/AddRemoteMount/AddRemoteMount.js      | 10 +++++-----
 src/containers/Configuration/Configuration.js        |  4 ++--
 src/containers/MountItems/MountItems.js              | 12 ++++++------
 .../SelectAppPlatform/SelectAppPlatform.css          |  2 +-
 .../SelectAppPlatform/SelectAppPlatform.js           |  2 +-
 src/index.css                                        |  3 ++-
 15 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4c9c728..876ccd7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,6 @@
 .App {
   margin: 0;
-  padding: 8px;
+  padding: var(--default_spacing);
   box-sizing: border-box;
   height: 100vh;
   width: 100vw;
@@ -16,7 +16,7 @@
 
 .AppHeader {
   height: 28px;
-  margin-bottom: 8px;
+  margin-bottom: var(--default_spacing);
   box-sizing: border-box;
 }
 
diff --git a/src/App.js b/src/App.js
index e860e7b..1c90f12 100644
--- a/src/App.js
+++ b/src/App.js
@@ -141,16 +141,16 @@ class App extends IPCContainer {
       let key = 0;
       mainContent.push((
         <Box key={'md_' + key++}
-             dxStyle={{padding: '8px', height: 'auto'}}>
+             dxStyle={{padding: 'var(--default_spacing)', height: 'auto'}}>
           <ReleaseVersionDisplay downloadDisabled={!downloadEnabled}
                                  version={selectedVersion}/>
         </Box>
       ));
       mainContent.push(<div key={'md_' + key++}
-                            style={{paddingTop: '8px'}}/>);
+                            style={{paddingTop: 'var(--default_spacing)'}}/>);
       if (allowMount) {
         mainContent.push((
-          <Box dxStyle={{padding: '8px', height: 'auto'}}
+          <Box dxStyle={{padding: 'var(--default_spacing)', height: 'auto'}}
                key={'md_' + key++}>
             <MountItems allowConfig={allowConfig}
                         allowSiaPrime={allowSiaPrime}
diff --git a/src/components/ErrorDetails/ErrorDetails.css b/src/components/ErrorDetails/ErrorDetails.css
index 0c6efbd..338b0ed 100644
--- a/src/components/ErrorDetails/ErrorDetails.css
+++ b/src/components/ErrorDetails/ErrorDetails.css
@@ -7,5 +7,5 @@
 .ErrorDetailsContent {
   max-height: 60vh;
   overflow-y: auto;
-  margin-bottom: 8px;
+  margin-bottom: var(--default_spacing);
 }
\ No newline at end of file
diff --git a/src/components/ErrorDetails/ErrorDetails.js b/src/components/ErrorDetails/ErrorDetails.js
index a0894b6..409efb8 100644
--- a/src/components/ErrorDetails/ErrorDetails.js
+++ b/src/components/ErrorDetails/ErrorDetails.js
@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
 
 export default connect(mapStateToProps, mapDispatchToProps)(props => {
   return (
-    <Box dxDark dxStyle={{padding: '8px'}}>
+    <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
       <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
       <div className={'ErrorDetailsContent'}>
         <p>{props.ErrorMessage}</p>
diff --git a/src/components/InfoDetails/InfoDetails.css b/src/components/InfoDetails/InfoDetails.css
index ae9a3ae..5034a36 100644
--- a/src/components/InfoDetails/InfoDetails.css
+++ b/src/components/InfoDetails/InfoDetails.css
@@ -7,5 +7,5 @@
   max-height: 60vh;
   min-width: 80vw;
   overflow-y: auto;
-  margin-bottom: 8px;
+  margin-bottom: var(--default_spacing);
 }
\ No newline at end of file
diff --git a/src/components/InfoDetails/InfoDetails.js b/src/components/InfoDetails/InfoDetails.js
index 2bbcc7e..afc6f04 100644
--- a/src/components/InfoDetails/InfoDetails.js
+++ b/src/components/InfoDetails/InfoDetails.js
@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
 
 export default connect(mapStateToProps, mapDispatchToProps)(props => {
   return (
-    <Box dxDark dxStyle={{padding: '8px'}}>
+    <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
       <h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1>
       <div className={'InfoDetailsContent'}>
         <p style={{textAlign: 'left', whiteSpace: 'pre-line'}}>{props.InfoMessage.message}</p>
diff --git a/src/components/Reboot/Reboot.css b/src/components/Reboot/Reboot.css
index 26160e5..3ba26f7 100644
--- a/src/components/Reboot/Reboot.css
+++ b/src/components/Reboot/Reboot.css
@@ -7,5 +7,5 @@
 .RebootContent {
   max-height: 60vh;
   overflow-y: auto;
-  margin-bottom: 8px;
+  margin-bottom: var(--default_spacing);
 }
\ No newline at end of file
diff --git a/src/components/Reboot/Reboot.js b/src/components/Reboot/Reboot.js
index 242a3e9..4700cdf 100644
--- a/src/components/Reboot/Reboot.js
+++ b/src/components/Reboot/Reboot.js
@@ -13,7 +13,7 @@ const mapDispatchToProps = dispatch => {
 
 export default connect(null, mapDispatchToProps)(props => {
   return (
-    <Box dxDark dxStyle={{padding: '8px'}}>
+    <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
       <h1 className={'RebootHeading'}>Reboot System</h1>
       <div className={'RebootContent'}>
         <p>Repertory requires a system reboot to continue.</p>
diff --git a/src/components/YesNo/YesNo.js b/src/components/YesNo/YesNo.js
index 323a9ab..444ee4a 100644
--- a/src/components/YesNo/YesNo.js
+++ b/src/components/YesNo/YesNo.js
@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
 
 export default connect(mapStateToProps, mapDispatchToProps)(props => {
   return (
-    <Box dxStyle={{minWidth: '180px', height: 'auto', padding: '8px'}}>
+    <Box dxStyle={{minWidth: '180px', height: 'auto', padding: 'var(--default_spacing)'}}>
       <div style={{width: '100%', height: 'auto'}}>
         <h1 style={{width: '100%', textAlign: 'center'}}>{props.Title}</h1>
       </div>
diff --git a/src/containers/AddRemoteMount/AddRemoteMount.js b/src/containers/AddRemoteMount/AddRemoteMount.js
index c41674e..52a8a00 100644
--- a/src/containers/AddRemoteMount/AddRemoteMount.js
+++ b/src/containers/AddRemoteMount/AddRemoteMount.js
@@ -61,8 +61,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
   render() {
     const displayAdd = createModalConditionally(this.state.Display, (
       <Box dxDark
-           dxStyle={{width: 'auto', height: 'auto', padding: '8px'}}>
-        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: '8px'}}>Add Remote Mount</h1>
+           dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
+        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
         <Text text={'Hostname or IP'}
               textAlign={'left'}
               type={'Heading1'}/>
@@ -70,7 +70,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
                className={'ConfigurationItemInput'}
                type={'text'}
                value={this.state.HostNameOrIp}/>
-        <div style={{paddingTop: '8px'}}/>
+        <div style={{paddingTop: 'var(--default_spacing)'}}/>
         <Text text={'Port'}
               textAlign={'left'}
               type={'Heading1'}/>
@@ -80,7 +80,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
                className={'ConfigurationItemInput'}
                type={'number'}
                value={this.state.Port}/>
-        <div style={{paddingTop: '8px'}}/>
+        <div style={{paddingTop: 'var(--default_spacing)'}}/>
         <Text text={'Remote Token'}
               textAlign={'left'}
               type={'Heading1'}/>
@@ -88,7 +88,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
                className={'ConfigurationItemInput'}
                type={'text'}
                value={this.state.Token}/>
-        <div style={{paddingTop: '8px'}}/>
+        <div style={{paddingTop: 'var(--default_spacing)'}}/>
         <table cellSpacing={1}
                width="100%">
           <tbody>
diff --git a/src/containers/Configuration/Configuration.js b/src/containers/Configuration/Configuration.js
index 193402f..16c2c9d 100644
--- a/src/containers/Configuration/Configuration.js
+++ b/src/containers/Configuration/Configuration.js
@@ -252,7 +252,7 @@ class Configuration extends IPCContainer {
     if ((this.state.ChangedItems.length > 0) || this.state.ChangedObjectLookup) {
       confirmSave = (
         <Modal>
-          <Box dxStyle={{width: '40vw', padding: '4px'}}>
+          <Box dxStyle={{width: '40vw', padding: 'var(--default_spacing)'}}>
             <h1 style={{width: '100%', textAlign: 'center'}}>Save Changes?</h1>
             <table width='100%'><tbody>
               <tr>
@@ -310,7 +310,7 @@ class Configuration extends IPCContainer {
     return (
       <div className={'Configuration'}>
         {confirmSave}
-        <Box dxDark dxStyle={{padding: '8px'}}>
+        <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
           <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
             <b style={{cursor: 'pointer'}}
                onClick={this.checkSaveRequired}>X</b>
diff --git a/src/containers/MountItems/MountItems.js b/src/containers/MountItems/MountItems.js
index 41cb9da..06fff27 100644
--- a/src/containers/MountItems/MountItems.js
+++ b/src/containers/MountItems/MountItems.js
@@ -292,7 +292,7 @@ class MountItems extends IPCContainer {
           retryList.push(<Button clicked={()=>this.cancelRetryMount(provider, ()=> this.detectMounts())}
                                  key={'rl_' + retryList.length}>Cancel {provider} Remount ({this.state.RetryItems[provider].RetrySeconds}s)</Button>);
           if (retryCount++ < Object.keys(this.state.RetryItems).length) {
-            retryList.push(<div style={{paddingTop: '8px'}}
+            retryList.push(<div style={{paddingTop: 'var(--default_spacing)'}}
                                 key={'rl_' + retryList.length}/>);
           }
         }
@@ -300,8 +300,8 @@ class MountItems extends IPCContainer {
 
       retryDisplay = (
         <Modal>
-          <Box dxDark dxStyle={{padding: '8px', minWidth: '70vw'}}>
-            <h1 style={{textAlign: 'center', paddingBottom: '8px', color: 'var(--text_color_error)'}}>Mount Failed</h1>
+          <Box dxDark dxStyle={{padding: 'var(--default_spacing)', minWidth: '70vw'}}>
+            <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)', color: 'var(--text_color_error)'}}>Mount Failed</h1>
             {retryList}
           </Box>
         </Modal>
@@ -328,7 +328,7 @@ class MountItems extends IPCContainer {
                    provider={provider}/>
       ));
       items.push(<div key={'it_' + items.length}
-                      style={{paddingTop: '8px'}} />)
+                      style={{paddingTop: 'var(--default_spacing)'}} />)
     }
 
     if (this.props.remoteSupported) {
@@ -344,7 +344,7 @@ class MountItems extends IPCContainer {
                      remote/>
         ));
         items.push(<div key={'it_' + items.length}
-                        style={{paddingTop: '8px'}}/>)
+                        style={{paddingTop: 'var(--default_spacing)'}}/>)
       }
       items.splice(items.length - 1, 1);
     } else {
@@ -357,7 +357,7 @@ class MountItems extends IPCContainer {
         <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
           {items}
         </div>
-        <div style={{paddingTop: '8px'}}/>
+        <div style={{paddingTop: 'var(--default_spacing)'}}/>
         {footerItems}
       </div>);
   }
diff --git a/src/containers/SelectAppPlatform/SelectAppPlatform.css b/src/containers/SelectAppPlatform/SelectAppPlatform.css
index 723c7f6..b1eacb2 100644
--- a/src/containers/SelectAppPlatform/SelectAppPlatform.css
+++ b/src/containers/SelectAppPlatform/SelectAppPlatform.css
@@ -8,7 +8,7 @@
   max-height: 60vh;
   width: 255px;
   overflow-y: auto;
-  margin-bottom: 8px;
+  margin-bottom: var(--default_spacing);
 }
 
 .SAPActions {
diff --git a/src/containers/SelectAppPlatform/SelectAppPlatform.js b/src/containers/SelectAppPlatform/SelectAppPlatform.js
index c24e200..141b8c5 100644
--- a/src/containers/SelectAppPlatform/SelectAppPlatform.js
+++ b/src/containers/SelectAppPlatform/SelectAppPlatform.js
@@ -50,7 +50,7 @@ class SelectAppPlatform extends IPCContainer {
 
   render() {
     return (
-      <Box dxDark dxStyle={{padding: '8px'}}>
+      <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
         <h1 className={'SAPHeading'}>Select Linux Platform</h1>
         <div className={'SAPContent'}>
           <p>Repertory was unable to detect your Linux distribution. Please select one of the following and click <b>Test</b> to continue:</p>
diff --git a/src/index.css b/src/index.css
index bba0d46..0fdc626 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,7 +15,8 @@
   --heading_other_text_color: var(--heading_text_color);
   --text_color_transition: color 0.3s;
 
-  --default_font_size: 14px
+  --default_font_size: 14px;
+  --default_spacing: 8px;
 }
 
 * {