Merge pull request #233 from bcgov/ticdi-81-provision-list-update

TICDI-81 checkbox update + TICDI-103 styling changes
bcgov · Sep 6, 2024 · 1b219f6 · 1b219f6
2 parents dbf3ac4 + a3ff90d
commit 1b219f6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 14 deletions.
diff --git a/frontend/public/css/new.css b/frontend/public/css/new.css
@@ -4,9 +4,10 @@
 }
 
 .collapsibleTitle {
-  font-size: 1.4rem;
-  /* font-family: Verdana, Geneva, sans-serif !important; */
+  font-size: 1.2rem;
+  font-family: Verdana, Geneva, sans-serif !important;
   cursor: pointer;
+  margin-bottom: 0.5rem;
 }
 
 hr {

diff --git a/frontend/src/app/components/common/Collapsible.tsx b/frontend/src/app/components/common/Collapsible.tsx
@@ -35,7 +35,7 @@ const Collapsible: FC<CollapsibleProps> = ({ title, children, isOpen, enabled =
           className={`inlineDiv collapsibleTitle`}
           onClick={toggleCollapsibleOnClick}
         />
-        <div className={`ml-2 inlineDiv collapsibleTitle boldText`} onClick={toggleCollapsibleOnClick}>
+        <div className={`ml-2 inlineDiv collapsibleTitle`} onClick={toggleCollapsibleOnClick}>
           {title}
         </div>
       </div>

diff --git a/frontend/src/app/components/modal/manage-provisions/AddProvisionModal.tsx b/frontend/src/app/components/modal/manage-provisions/AddProvisionModal.tsx
@@ -107,7 +107,13 @@ const AddProvisionModal: React.FC<AddProvisionModalProps> = ({ show, addProvisio
           </Form.Group>
 
           <Form.Group className="mb-3" style={{ marginLeft: '15px', marginTop: '30px' }}>
-            <Form.Check type="checkbox" label="Enable List" checked={listEnabled} onChange={handleListEnabledChange} />
+            <Form.Check
+              type="checkbox"
+              id="listEnabledCheckbox"
+              label={<label htmlFor="listEnabledCheckbox">Enable List</label>}
+              checked={listEnabled}
+              onChange={handleListEnabledChange}
+            />
           </Form.Group>
 
           {listEnabled ? (

diff --git a/frontend/src/app/components/modal/manage-provisions/forms/EditProvisionModalForm.tsx b/frontend/src/app/components/modal/manage-provisions/forms/EditProvisionModalForm.tsx
@@ -133,7 +133,13 @@ const EditProvisionModalForm: React.FC<EditProvisionModalFormProps> = ({
           </Form.Group>
 
           <Form.Group className="mb-3" style={{ marginLeft: '15px', marginTop: '30px' }}>
-            <Form.Check type="checkbox" label="Enable List" checked={listEnabled} onChange={handleListEnabledChange} />
+            <Form.Check
+              type="checkbox"
+              id="listEnabledCheckbox"
+              label={<label htmlFor="listEnabledCheckbox">Enable List</label>}
+              checked={listEnabled}
+              onChange={handleListEnabledChange}
+            />
           </Form.Group>
 
           {listEnabled ? (

diff --git a/frontend/src/app/content/pages/LandingPage.tsx b/frontend/src/app/content/pages/LandingPage.tsx
@@ -401,7 +401,9 @@ const LandingPage: FC = () => {
       <div className="h1">{documentType ? `Preview - ${documentType.name}` : 'Document Preview'}</div>
       <hr />
       <div className="mb-3 mt-3">
-        <div className="font-weight-bold inlineDiv">DTID:</div>
+        <div className="inlineDiv">
+          <b>DTID:</b>
+        </div>
         <div className="inlineDiv ml-4 mr-4">
           <input
             type="number"
@@ -432,29 +434,35 @@ const LandingPage: FC = () => {
           Clear
         </Button>
       </div>
-
       {showError && (
         <Alert variant="danger" className="mb-3 d-inline-block" style={{ width: 'auto', maxWidth: '100%' }}>
           {error}
         </Alert>
       )}
       <div className="mb-3">
-        <div className="font-weight-bold inlineDiv mr-1">Tenure File Number:</div>
+        <div className="inlineDiv mr-1">
+          <b>Tenure File Number:</b>
+        </div>
         <div className="inlineDiv" id="tfn">
           {data?.fileNum || <Skeleton />}
         </div>
       </div>
       <div className="mb-3">
-        <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
+        <div className="inlineDiv mr-1">
+          <b>Primary Contact Name:</b>
+        </div>
         <div className="inlineDiv">{data?.primaryContactName}</div>
       </div>
       <h3>Create Document</h3>
       <Row className="mb-3">
-        <div className="ml-3 mr-3">
+        <div className="ml-3">
           <b>Document Type:</b>
         </div>
-        <div>
+      </Row>
+      <Row className="mb-3">
+        <div className="ml-3">
           <select
+            className="form-control"
             value={selectedDocTypeId || ''}
             disabled={loading || !dtid || !data || showError}
             onChange={handleDocTypeChange}
@@ -477,19 +485,16 @@ const LandingPage: FC = () => {
       <Collapsible title="Interested Parties" isOpen={isOpen}>
         {data ? <InterestedParties data={data!} /> : <Skeleton />}
       </Collapsible>
-
       <Collapsible title="Provisions" isOpen={false} enabled={provisionGroups && dtid && documentType ? true : false}>
         {provisionGroups && dtid && documentType ? (
           <Provisions dtid={dtid} documentType={documentType} provisionGroups={provisionGroups} />
         ) : (
           <></>
         )}
       </Collapsible>
-
       <Collapsible title="Variables" isOpen={false} enabled={provisionGroups && dtid && documentType ? true : false}>
         {provisionGroups && dtid && documentType ? <VariablesTable onVariableEdit={handleVariableEdit} /> : <></>}
       </Collapsible>
-
       <>
         {' '}
         {showGenerateError && (