Merge pull request #370 from flexion/111-design-tweaks

111 Design Tweaks
flexion · Dec 13, 2018 · 1537f3c · 1537f3c
2 parents a1a7c2b + 6214c7a
commit 1537f3c
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 32 deletions.
diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss
@@ -1,3 +1,7 @@
+h1.captioned {
+  margin-bottom: 0;
+}
+
 .spinner {
   display: inline-block;
   width: 1rem;
@@ -29,6 +33,10 @@
   color: $color-red;
 }
 
+.fa-cloud-upload-alt {
+  margin-right: 1rem;
+}
+
 .label {
   margin-bottom: 0;
 }
@@ -147,6 +155,10 @@ iframe {
   border: none;
 }
 
+.party-information p {
+  margin-bottom: 0.7rem;
+}
+
 .horizontal-tabs {
   ul {
     padding: 0;
@@ -170,6 +182,14 @@ iframe {
 .tab-content {
   padding: 2rem;
   border: 2px solid $color-gray-lightest;
+
+  h3 {
+    margin-bottom: 3rem;
+  }
+}
+
+.address-line {
+  display: block;
 }
 
 .float-right {

diff --git a/web-client/src/styles/overrides.scss b/web-client/src/styles/overrides.scss
@@ -24,7 +24,12 @@ label {
 }
 
 h1 {
+  font-size: 32px;
+}
+
+h2 {
   margin-bottom: 0;
+  font-size: 26px;
 }
 
 legend {
@@ -48,6 +53,10 @@ p {
   content: '';
 }
 
+.usa-nav-secondary-links li {
+  padding-left: 1rem;
+}
+
 .usa-section {
   padding-top: 0;
 }
@@ -65,6 +74,6 @@ table {
   margin: 0;
 }
 
-button {
-  margin: 0 1rem 2rem 0;
+.usa-button {
+  margin: 0 2rem 2rem 0;
 }
diff --git a/web-client/src/views/CaseDetailInternal.jsx b/web-client/src/views/CaseDetailInternal.jsx
@@ -38,9 +38,12 @@ export default connect(
           </a>
         </div>
         <section className="usa-section usa-grid">
-          <h1 tabIndex="-1">Docket number: {caseDetail.docketNumber}</h1>
+          <h1 className="captioned" tabIndex="-1">
+            Docket number: {caseDetail.docketNumber}
+          </h1>
           <p>
-            {caseDetail.petitioners[0].name} v. Commissioner of Internal Revenue, Respondent
+            {caseDetail.petitioners[0].name} v. Commissioner of Internal
+            Revenue, Respondent
           </p>
           <p>
             <span className="usa-label case-status-label">

diff --git a/web-client/src/views/CaseDetailPetitioner.jsx b/web-client/src/views/CaseDetailPetitioner.jsx
@@ -16,7 +16,6 @@ export default connect(
     showDetails: state.paymentInfo.showDetails,
     togglePaymentDetailsSequence: sequences.togglePaymentDetailsSequence,
     updateCurrentTabSequence: sequences.updateCurrentTabSequence,
-    user: state.user,
     viewDocumentSequence: sequences.viewDocumentSequence,
   },
   function CaseDetail({
@@ -25,7 +24,6 @@ export default connect(
     showDetails,
     togglePaymentDetailsSequence,
     updateCurrentTabSequence,
-    user,
     viewDocumentSequence,
   }) {
     return (
@@ -37,7 +35,9 @@ export default connect(
           </a>
         </div>
         <section className="usa-section usa-grid">
-          <h1 tabIndex="-1">Docket number: {caseDetail.docketNumber}</h1>
+          <h1 className="captioned" tabIndex="-1">
+            Docket number: {caseDetail.docketNumber}
+          </h1>
           <p>
             {caseDetail.petitioners[0].name} Petitioner v. Commissioner of
             Internal Revenue, Respondent

diff --git a/web-client/src/views/CaseDetailPublic.jsx b/web-client/src/views/CaseDetailPublic.jsx
@@ -17,7 +17,9 @@ export default connect(
           </a>
         </div>
         <section className="usa-section usa-grid">
-          <h1 tabIndex="-1">Docket number: {caseDetail.docketNumber}</h1>
+          <h1 className="captioned" tabIndex="-1">
+            Docket number: {caseDetail.docketNumber}
+          </h1>
           <p>Petitioner v. Commissioner of Internal Revenue, Respondent</p>
         </section>
       </React.Fragment>

diff --git a/web-client/src/views/CaseDetailRespondent.jsx b/web-client/src/views/CaseDetailRespondent.jsx
@@ -31,9 +31,12 @@ export default connect(
           </a>
         </div>
         <section className="usa-section usa-grid">
-          <h1 tabIndex="-1">Docket number: {caseDetail.docketNumber}</h1>
+          <h1 className="captioned" tabIndex="-1">
+            Docket number: {caseDetail.docketNumber}
+          </h1>
           <p>
-            {caseDetail.petitioners[0].name} v. Commissioner of Internal Revenue, Respondent
+            {caseDetail.petitioners[0].name} v. Commissioner of Internal
+            Revenue, Respondent
           </p>
           <hr />
           <SuccessNotification />
@@ -78,11 +81,13 @@ export default connect(
             <div className="tab-content" role="tabpanel">
               <button
                 id="button-file-document"
+                className="usa-button"
                 onClick={() =>
                   updateCurrentTabSequence({ value: 'File Document' })
                 }
               >
-                <FontAwesomeIcon icon="cloud-upload-alt" /> File Document
+                <FontAwesomeIcon icon="cloud-upload-alt" />
+                File Document
               </button>
               <table className="responsive-table">
                 <thead>

diff --git a/web-client/src/views/DashboardPetitioner.jsx b/web-client/src/views/DashboardPetitioner.jsx
@@ -13,7 +13,6 @@ export default connect(
         <h1 tabIndex="-1">Dashboard</h1>
         <SuccessNotification />
         <ErrorNotification />
-        <h2>Cases</h2>
         <p>
           <a
             className="usa-button"

diff --git a/web-client/src/views/DashboardPetitionsClerk.jsx b/web-client/src/views/DashboardPetitionsClerk.jsx
@@ -14,7 +14,6 @@ export default connect(
         <h1 tabIndex="-1">Petitions section work queue</h1>
         <SuccessNotification />
         <ErrorNotification />
-        <h2>Cases</h2>
         <table className="responsive-table" id="workQueue">
           <thead>
             <tr>

diff --git a/web-client/src/views/DashboardRespondent.jsx b/web-client/src/views/DashboardRespondent.jsx
@@ -14,7 +14,6 @@ export default connect(
         <h1 tabIndex="-1">Respondent Dashboard</h1>
         <SuccessNotification />
         <ErrorNotification />
-        <h2>Cases</h2>
         <table className="responsive-table" id="workQueue">
           <thead>
             <tr>

diff --git a/web-client/src/views/PartyInformation.jsx b/web-client/src/views/PartyInformation.jsx
@@ -9,22 +9,26 @@ export default connect(
   },
   function PartyInformation({ caseDetail }) {
     return (
-      <div className="subsection">
-        <div className="usa-font-lead">Party Information</div>
+      <div className="subsection party-information">
+        <h3>Party Information</h3>
         <div className="usa-grid-full">
           <div className="usa-width-one-half">
             {caseDetail.petitioners && (
               <React.Fragment>
-                <b>Petitioner</b>
+                <h4>Petitioner</h4>
                 {caseDetail.petitioners.map((petitioner, key) => (
                   <address key={key}>
                     <p>{petitioner.name}</p>
                     <p>
-                      {petitioner.addressLine1}
-                      <br />
-                      {petitioner.addressLine2}
-                      <br />
-                      {petitioner.city} {petitioner.state} {petitioner.zip}
+                      <span className="address-line">
+                        {petitioner.addressLine1}
+                      </span>
+                      <span className="address-line">
+                        {petitioner.addressLine2}
+                      </span>
+                      <span className="address-line">
+                        {petitioner.city}, {petitioner.state} {petitioner.zip}
+                      </span>
                     </p>
                     <p>{petitioner.phone}</p>
                     <p>{petitioner.email}</p>
@@ -36,17 +40,23 @@ export default connect(
           <div className="usa-width-one-half">
             {caseDetail.respondent && (
               <React.Fragment>
-                <b>Respondent</b>
+                <h4>Respondent</h4>
                 <address>
-                  {caseDetail.respondent.name} <br />
-                  <br />
-                  {caseDetail.respondent.address} <br />
-                  {caseDetail.respondent.city} {caseDetail.respondent.state}{' '}
-                  {caseDetail.respondent.zip} <br />
-                  <br />
-                  {caseDetail.respondent.phone} <br />
-                  <br />
-                  {caseDetail.respondent.email} <br />
+                  <p>{caseDetail.respondent.name}</p>
+                  <p>
+                    <span className="address-line">
+                      {caseDetail.respondent.addressLine1}
+                    </span>
+                    <span className="address-line">
+                      {caseDetail.respondent.addressLine2}
+                    </span>
+                    <span className="address-line">
+                      {caseDetail.respondent.city},{' '}
+                      {caseDetail.respondent.state} {caseDetail.respondent.zip}
+                    </span>
+                  </p>
+                  <p>{caseDetail.respondent.phone}</p>
+                  <p>{caseDetail.respondent.email}</p>
                 </address>
               </React.Fragment>
             )}