PODCAT-1603: QA Round2 (#487)

* qa round 2

* fixed dataset detail page display issue

Author: RuoxiZhang08

src/assets/img/DataResource.svg

@@ -143,7 +143,7 @@ const ContributeContainer = styled.div`
     .contributeContentHeader1 {
         padding-bottom: 10px;
         /* color: #2dc799; */
-        color: #00a272;
+        color: #0052B3;
         font-weight: 300;
         font-family: Inter;
         font-size: 33px;

src/pages/contributePage/index.js

@@ -51,6 +51,7 @@ ul.breadcrumb li a:hover {
   background: linear-gradient(.25turn, #0c3561, 66%, #1b83d2);
   /* border-bottom: 1px solid lightgray; */
   position: relative;
+  margin-bottom: 23px;
 }
 
 .leftContainer {
@@ -69,7 +70,7 @@ ul.breadcrumb li a:hover {
 }
 
 .datasetDetailHeaderLabel {
-  padding: 0px 0px 60px 26px;
+  padding: 0px 0px 19px 26px;
   color: white;
   font-size: 34px;
   font-weight: medium;
@@ -133,7 +134,7 @@ ul.breadcrumb li a:hover {
   font-size: 17px;
   font-weight: bold;
   font-family: Lato;
-  width: 80%;
+  /* width: 80%; */
   display: -webkit-inline-box;
 }
 
@@ -342,7 +343,7 @@ ul.breadcrumb li a:hover {
 }
 
 .dataElementContentPublished {
-  color: #0B835F;
+  color: #00875E;
   font-family: Lato;
   font-weight: normal;
   max-height: 200px;
@@ -370,15 +371,15 @@ ul.breadcrumb li a:hover {
 
 .additionalDataLinks {
   margin-top: 10px;
-  color: #0B835F;
+  color: #00875E;
   /* color: black; */
   text-transform: none;
   max-width: 95%;
   word-break: break-all;
 }
 
 .additionalDataLinks:hover {
-  color: #0B835F;
+  color: #00875E;
 }
 
 .additionalDataContent {

src/pages/datasetDetailPage/datasetDetailPage.css

@@ -140,9 +140,14 @@ const SearchContent = styled.div`
 
 const SearchSummary = styled.div`
   width: 100%;
-  color: #004187;
-  font-size: 30px;
   padding: 20px;
+  color: #686868;
+  font-family: Lato;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 30px */
+  text-transform: uppercase;
 `;
 
 const useQuery = () => {

src/pages/documentSearchPage/DocumentSearchPage.js

@@ -20,7 +20,7 @@ const DocumentCard = styled.div`
   padding: 0 20px 40px 20px;
 
   b {
-    color: #00A272;
+    color: #00875E;
   }
 `;
 
@@ -31,7 +31,9 @@ const DocumentHeader = styled.div`
   font-size: 25px;
 
   a {
-    color: #00A272;
+    color: #00875E;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
   }
 `;
 
@@ -53,8 +55,9 @@ const DocumentLink = styled.div`
   font-size: 19px;
 
   a {
-    color: #00A272;
-    text-decoration: none;
+    color: #00875E;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
   }
 `;
 

src/pages/documentSearchPage/SearchResult/SearchResult.js

@@ -93,9 +93,13 @@ const GlossaryContainer = styled.div`
     }
 
     .glossaryItemHeader {
-        color: #008059;
+        color: #0052B3;
         font-family: Inter;
-        font-weight: 600;
+        font-size: 33px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: 120%; /* 39.6px */
+        letter-spacing: -0.165px;
         margin-bottom: 0px;
     }
 
@@ -115,15 +119,23 @@ const GlossaryContainer = styled.div`
     .glossaryItemLink {
         margin-top: -10px;
         color: #00875E;
+        font-family: Lato;
+        font-size: 17px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 150%; /* 25.5px */
     }
 
     .glossaryItemLink a {
         margin-top: -10px;
-        font-weight: 500;
+        color: #00875E;
         font-family: Lato;
         font-size: 17px;
-        color: #00875E;
-        text-decoration: none;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 150%; /* 25.5px */
+        text-underline-offset: 3px;
+        text-decoration-thickness: 1px;
     }
 `;
 

src/pages/glossaryPage/glossaryPageView.js

@@ -96,6 +96,11 @@ const DataLink = styled.li`
   text-decoration: none;
   list-style-type: none;
   display: inline;
+
+  a {
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
+  }
 `;
 
 const ExternalLink = styled.li`
@@ -469,7 +474,7 @@ const ParticipatingResourceDetail = ({
                     </DatasetTitle>
                   </DatasetHeader>
                   <DatasetDesc>
-                      {ds.case_disease_diagnosis ? <div className="summaryDataElementLabel">Case Disease Diagnosis</div> : null}
+                      {ds.case_disease_diagnosis ? <div className="summaryDataElementLabel">Case Disease Diagnosis:</div> : null}
                       <div className="summaryDataElementContent">
                         {
                           ds.case_disease_diagnosis
@@ -495,7 +500,7 @@ const ParticipatingResourceDetail = ({
                       : null
                     }
                     {ds.case_id
-                      ? <div className="summaryDataElementLabel">Number of Cases</div>
+                      ? <div className="summaryDataElementLabel">Number of Cases:</div>
                       : null}
                     {
                       ds.case_id
@@ -508,7 +513,7 @@ const ParticipatingResourceDetail = ({
                       : null
                     }
                     {ds.case_sex
-                        ? <div className="summaryDataElementLabel">Case Sex</div>
+                        ? <div className="summaryDataElementLabel">Case Sex:</div>
                         : null}
                       <div className="summaryDataElementContent">
                         {
@@ -534,7 +539,7 @@ const ParticipatingResourceDetail = ({
                       : null
                     }
                     {ds.case_age_at_diagnosis
-                        ? <div className="summaryDataElementLabel">Case Age At Diagnosis</div>
+                        ? <div className="summaryDataElementLabel">Case Age At Diagnosis:</div>
                         : null}
                       <div className="summaryDataElementContent">
                         {
@@ -559,7 +564,7 @@ const ParticipatingResourceDetail = ({
                       ? <br />
                       : null
                     }
-                    {ds.published_in ? <div className="summaryDataElementLabel">Published In</div> : null}
+                    {ds.published_in ? <div className="summaryDataElementLabel">Published In:</div> : null}
                     {
                       ds.published_in && ds.published_in.split(";").map((link, linkidx) => {
                         const newlink = link.trim();

src/pages/participatingResourceDetailPage/ParticipatingResourceDetail.js

@@ -9,7 +9,7 @@
   /* padding: 0px 0 20px 20px; */
   padding: 16px 0 10px 0px;
   width: 100%;
-  background: linear-gradient(to right, #05296b,#79291b,#e78709);
+  background: linear-gradient(to right, #05296b,#79291b,#AE640A);
   /* border-bottom: 1px solid lightgray; */
   position: relative;
 }

src/pages/participatingResourceDetailPage/participatingResourceDetailPage.css

@@ -96,8 +96,9 @@ const POCInfo = styled.div`
 
   a {
     margin-left: 5px;
-    text-decoration: none;
-    color: #008059;
+    color: #00875E;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
     font-weight: 500;
   }
 `;
@@ -108,8 +109,9 @@ const SiteInfo = styled.div`
   margin-bottom: 10px;
 
   a {
-    text-decoration: none;
     color: #00875E;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
     font-weight: 500;
   }
 `;

src/pages/participatingResourcesPage/SearchResult/SearchResult.js

@@ -209,7 +209,7 @@ const SearchResultContainer = styled.div`
   .bodyRow .sampleCountHighlight {
     font-family: 'Inter';
     font-weight: 600;
-    color: #0D826C;
+    color: #0C79CC;
   }
 
   .bodyRow .itemContinued {
@@ -700,9 +700,11 @@ const SearchResult = ({
                 </div>
                 <div className="row align-items-start subHeaderRow">
                   <div className="col-sm">
-                    <img src={dataResourceIcon} alt="data-resource" />
-                    &nbsp;
-                    <Link to={`/resource/${rst.content.data_resource_id}`}>{rst.highlight && rst.highlight.data_resource_name ? ReactHtmlParser(rst.highlight.data_resource_name[0]) : rst.content.data_resource_id}</Link>
+                    <Link to={`/resource/${rst.content.data_resource_id}`}>
+                      <img src={dataResourceIcon} alt="data-resource" />
+                      &nbsp;
+                      {rst.highlight && rst.highlight.data_resource_name ? ReactHtmlParser(rst.highlight.data_resource_name[0]) : rst.content.data_resource_id}
+                    </Link>
                   </div>
                 </div>
                 {