Added arrow for config collapse + fixes for list

src/components/DeviceConfiguration.js

@@ -12,6 +12,7 @@ import {
     CCardFooter,
     CButton
 } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
 import { useSelector } from 'react-redux';
 import { cleanTimestamp} from '../utils/helper';
 
@@ -28,7 +29,7 @@ const DeviceConfiguration = () => {
         return (
             <CCard>
                 <CCardHeader>
-                    Device #{device.serialNumber} Configuration
+                    #{device.serialNumber} Details
                 </CCardHeader>
                 <CCardBody>
                     <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
@@ -122,13 +123,9 @@ const DeviceConfiguration = () => {
                                 </CCol>
                             </CFormGroup>
                         </CCollapse>
-                        <CCardFooter>
-                            <CButton
-                            color="primary"
-                            onClick={toggle}
-                            className={'mb-1'}
-                            >{collapse ? 'Hide details' : 'Show Details'}</CButton>
-                        </CCardFooter>
+                        <CButton show={collapse} color="transparent" onClick = { toggle } block>
+                            <CIcon name={collapse ? "cilChevronTop" : "cilChevronBottom"} size="lg"/>
+                        </CButton>
                     </CForm>
                 </CCardBody>
             </CCard>

src/components/DeviceHealth.js

@@ -128,7 +128,7 @@ const DeviceHealth = () => {
                         </CCard>
                     </CCollapse>
                     <CButton show={collapse} color="transparent" onClick = { toggle } block>
-                        <CIcon name={collapse ? "cilChevronTop" : "cilChevronBottom"} style={{color: 'white'}} size="l"/>
+                        <CIcon name={collapse ? "cilChevronTop" : "cilChevronBottom"} style={{color: 'white'}} size="lg"/>
                     </CButton>
                 </div>
             }

src/components/DeviceList.js

@@ -119,14 +119,14 @@ const DeviceList = () => {
 
   	return (
 		<DeviceListDisplay 
-		devices={devices} 
-		toggleDetails={toggleDetails} 
-		details={details}
-		loading={loading} 
-		updateDevicesPerPage={updateDevicesPerPage}
-		pageCount={pageCount}
-		updatePage={updatePageCount}
-		pageRangeDisplayed={5}
+			devices={devices} 
+			toggleDetails={toggleDetails} 
+			details={details}
+			loading={loading} 
+			updateDevicesPerPage={updateDevicesPerPage}
+			pageCount={pageCount}
+			updatePage={updatePageCount}
+			pageRangeDisplayed={5}
 		/>
   	);
 }
@@ -277,7 +277,7 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
 				(item)=>(
 					<td className="py-2">
 						<CButton color="primary" variant="outline" size="sm">					
-							<CIcon name="cil-sync" content={cilSync} size="l"/>
+							<CIcon name="cil-sync" content={cilSync} size="sm"/>
 						</CButton>
 					</td>
 				),
@@ -295,7 +295,6 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
 								variant="outline"
 								shape="square"
 								size="sm"
-								onClick={()=>{toggleDetails(index)}}
 							>
 								<CIcon name="cil-info" content={cilInfo} size="l"/>
 							</CButton>