From c83b8eb8aa07b2f8731668d4dd671ccf970a59e0 Mon Sep 17 00:00:00 2001
From: bourquecharles <charles.bourque96@gmail.com>
Date: Wed, 30 Jun 2021 15:16:06 -0400
Subject: [PATCH] Device configuration CSS cleanup

---
 src/components/BlinkModal/index.js            |   2 +-
 src/components/CopyToClipboardButton/index.js |  21 +-
 src/components/DeviceActionCard/index.js      |   4 +-
 src/components/DeviceConfiguration/index.js   | 202 +++++++++---------
 .../DeviceConfiguration/index.module.scss     |   5 +
 5 files changed, 119 insertions(+), 115 deletions(-)

diff --git a/src/components/BlinkModal/index.js b/src/components/BlinkModal/index.js
index 0b2aa85..ee6a13a 100644
--- a/src/components/BlinkModal/index.js
+++ b/src/components/BlinkModal/index.js
@@ -39,7 +39,7 @@ const BlinkModal = ({ show, toggleModal }) => {
 
   const toggleNow = () => {
     setIsNow(!isNow);
-  }
+  };
 
   const setDate = (date) => {
     if (date) {
diff --git a/src/components/CopyToClipboardButton/index.js b/src/components/CopyToClipboardButton/index.js
index a584e81..b81371c 100644
--- a/src/components/CopyToClipboardButton/index.js
+++ b/src/components/CopyToClipboardButton/index.js
@@ -5,28 +5,29 @@ import { cilClone } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { CButton, CPopover } from '@coreui/react';
 
-const CopyToClipboardButton = ({content, size}) => {
+const CopyToClipboardButton = ({ content, size }) => {
   const { t } = useTranslation();
   const [result, setResult] = useState('');
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(content);
     setResult(t('common.copied'));
-  }
+  };
 
   return (
-      <CPopover content={t('common.copy_to_clipboard')}>
-        <CButton onClick={copyToClipboard} size={size}>
-          <CIcon content={cilClone} />
-          {'   '}{result || ''}
-        </CButton>
-      </CPopover>
+    <CPopover content={t('common.copy_to_clipboard')}>
+      <CButton onClick={copyToClipboard} size={size}>
+        <CIcon content={cilClone} />
+        {'   '}
+        {result || ''}
+      </CButton>
+    </CPopover>
   );
-}
+};
 
 CopyToClipboardButton.propTypes = {
   content: PropTypes.string.isRequired,
-  size: PropTypes.string
+  size: PropTypes.string,
 };
 
 CopyToClipboardButton.defaultProps = {
diff --git a/src/components/DeviceActionCard/index.js b/src/components/DeviceActionCard/index.js
index e5327db..93c86a3 100644
--- a/src/components/DeviceActionCard/index.js
+++ b/src/components/DeviceActionCard/index.js
@@ -78,7 +78,9 @@ const DeviceActions = ({ selectedDeviceId }) => {
 
   return (
     <CCard>
-      <CCardHeader><div className="text-value-lg">{t('actions.title')}</div></CCardHeader>
+      <CCardHeader>
+        <div className="text-value-lg">{t('actions.title')}</div>
+      </CCardHeader>
       <CCardBody>
         <CRow>
           <CCol>
diff --git a/src/components/DeviceConfiguration/index.js b/src/components/DeviceConfiguration/index.js
index ee4c0f4..8df373d 100644
--- a/src/components/DeviceConfiguration/index.js
+++ b/src/components/DeviceConfiguration/index.js
@@ -4,10 +4,8 @@ import {
   CCard,
   CCardHeader,
   CCardBody,
-  CFormGroup,
   CCol,
   CLabel,
-  CForm,
   CInput,
   CCollapse,
   CCardFooter,
@@ -66,7 +64,9 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
         <CCard>
           <CCardHeader>
             <CRow>
-              <CCol><div className="text-value-lg">{t('configuration.title')}</div></CCol>
+              <CCol>
+                <div className="text-value-lg">{t('configuration.title')}</div>
+              </CCol>
               <CCol>
                 <div className={styles.alignRight}>
                   <CPopover content={t('configuration.view_json')}>
@@ -79,122 +79,118 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
             </CRow>
           </CCardHeader>
           <CCardBody>
-            <CForm
-              action=""
-              method="post"
-              encType="multipart/form-data"
-              className="form-horizontal"
-            >
-              <CFormGroup row>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('common.uuid')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.UUID}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('common.serial_number')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.serialNumber}
+                <CopyToClipboardButton size="sm" content={device.serialNumber} />
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('configuration.type')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.deviceType}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('configuration.last_configuration_change')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {prettyDate(device.lastConfigurationChange)}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('common.mac')} :</CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.macAddress}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('configuration.created')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {prettyDate(device.createdTimestamp)}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3">
+                <CLabel>{t('configuration.last_configuration_download')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {prettyDate(device.lastConfigurationDownload)}
+              </CCol>
+            </CRow>
+            <CRow className={styles.spacedRow}>
+              <CCol md="3" className={styles.topPadding}>
+                <CLabel>{t('configuration.device_password')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.devicePassword === '' ? 'openwifi' : device.devicePassword}
+                <CopyToClipboardButton
+                  size="sm"
+                  content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}
+                />
+              </CCol>
+            </CRow>
+            <CCollapse show={collapse}>
+              <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel>{t('common.uuid')} : </CLabel>
+                  <CLabel>{t('common.manufacturer')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {device.UUID}
+                  {device.manufacturer}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel>{t('common.serial_number')} : </CLabel>
+                  <CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {device.serialNumber}
-                  <CopyToClipboardButton size="sm" content={device.serialNumber}/>
+                  <CInput id="text-input" name="text-input" placeholder={device.notes} />
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel>{t('configuration.type')} : </CLabel>
+                  <CLabel>{t('configuration.owner')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {device.deviceType}
+                  {device.owner}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel>{t('configuration.last_configuration_change')} : </CLabel>
+                  <CLabel>{t('configuration.location')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {prettyDate(device.lastConfigurationChange)}
+                  {device.location}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('common.mac')} :</CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {device.macAddress}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('configuration.created')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {prettyDate(device.createdTimestamp)}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('configuration.last_configuration_download')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {prettyDate(device.lastConfigurationDownload)}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3" className={styles.topPadding}>
-                  <CLabel>{t('configuration.device_password')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {device.devicePassword === '' ? 'openwifi' : device.devicePassword}
-                  <CopyToClipboardButton size="sm" content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}/>
-                </CCol>
-              </CFormGroup>
-              <CCollapse show={collapse}>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('common.manufacturer')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.manufacturer}
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    <CInput id="text-input" name="text-input" placeholder={device.notes} />
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('configuration.owner')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.owner}
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('configuration.location')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.location}
-                  </CCol>
-                </CFormGroup>
-              </CCollapse>
-              <CCardFooter>
-                <CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
-                  <CIcon
-                    className={styles.blackIcon}
-                    name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
-                    size="lg"
-                  />
-                </CButton>
-              </CCardFooter>
-            </CForm>
+              </CRow>
+            </CCollapse>
+            <CCardFooter>
+              <CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
+                <CIcon
+                  className={styles.blackIcon}
+                  name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
+                  size="lg"
+                />
+              </CButton>
+            </CCardFooter>
           </CCardBody>
         </CCard>
         <DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />
diff --git a/src/components/DeviceConfiguration/index.module.scss b/src/components/DeviceConfiguration/index.module.scss
index 364d894..6c9025c 100644
--- a/src/components/DeviceConfiguration/index.module.scss
+++ b/src/components/DeviceConfiguration/index.module.scss
@@ -13,3 +13,8 @@
 .topPadding {
   padding-top: 5px;
 }
+
+.spacedRow {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}