code clean up, fix custom attestation layout

Author: Amy Chen

src/ui-client/src/components/Attestation/CustomAttestationConfirmation.tsx

@@ -39,8 +39,11 @@ export default class CustomAttestationConfirmation extends React.PureComponent<P
 
         return  (
             <div className={confirmationClass}>
+                  {!skipModeSelection && 
+                        <div  className={`${c}-confirmation-settings left`}>
+                            {useDisplay} - {phiDisplay}
+                        </div>}
                  <div>
-
                     {/* use custom text */}
                     {useHtml &&
                         <div className={`${c}-custom-html`} dangerouslySetInnerHTML={ {__html: config.attestation.text.join("")} }></div>
@@ -55,21 +58,18 @@ export default class CustomAttestationConfirmation extends React.PureComponent<P
                     }
                 </div>
                 {showText &&
+                <div className={`${c}-confirmation-settings`} key='1'>
+                    <Row className={`${c}-confirmation-settings custom`} key='1'>
 
-                <div>
-                    <Row className={`${c}-confirmation-settings`} key='1'>
-                        {!skipModeSelection && 
-                        <Col md={6} className="left">
-                            {useDisplay} - {phiDisplay}
-                        </Col>}
                         {!(isSubmittingAttestation || hasAttested) &&
-                        <Col md={nextButtonContainerColSize} className={nextButtonContainerClass}>
+                        <Col md={12}>
                             <Button 
                                 onClick={handleIAgreeClick} 
                                 tabIndex={-1}
                                 className="leaf-button leaf-button-primary">
                                 {nextButtonText}
                             </Button>
+                            {" "}
                             {!skipModeSelection &&
                             <Button 
                                 onClick={handleGoBackClick} 
@@ -81,8 +81,8 @@ export default class CustomAttestationConfirmation extends React.PureComponent<P
                         </Col>
                         }
                         {(isSubmittingAttestation || hasAttested) &&
-                        <Col md={6} className="right">
-                            <div className={`${c}-session-load-display-container`}>
+                        <Col md={12}>
+                            <div className={`${c}-session-load-display-container custom`}>
                                 <div className={`${c}-session-load-display`}>
                                     <span>...{sessionLoadDisplay}</span>
                                 </div>

src/ui-client/src/containers/Attestation/Attestation.tsx

@@ -181,11 +181,9 @@ class Attestation extends React.PureComponent<Props, State> {
                 </ModalHeader>
 
                 <div className={progressBarClasses.join(' ')} style={{ width: `${sessionLoadProgressPercent}%` }} />
-                {userContext && !userContext.isPhiOkay && 
                 <div className={`${c}-deidentonly`}>
                     <p>Participant data restricted to De-Identified mode only</p>
                 </div>
-                }
                 <ModalBody className={`${c}-body`}>
                     {auth.error && 
                     <div className={`${c}-error-text`}>

src/ui-client/src/styles/custom.css

@@ -153,10 +153,11 @@ button.concept-search-roots-dropdown-toggle.dropdown-toggle.btn.btn-secondary:ho
     margin-left: 4px;
     font-size: 2rem;
 }
-.attestation-confirmation-settings {
+.attestation-confirmation-settings.custom,
+.attestation-session-load-display-container.custom {
     text-align: center;
 }
-.attestation-confirmation-settings button {
+.attestation-confirmation-settings.custom button {
     font-size: 1.4rem;
 }
 .attestation-nida-logo {