From 274165dc02f104d80be7b0c831a4defb193eb7d2 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Fri, 13 Sep 2024 13:50:50 +0530
Subject: [PATCH 1/7] css changes

---
 report-react/src/SavedReport.tsx      | 10 +++++-----
 report-react/src/ScoreCard.scss       |  6 +-----
 report-react/src/SummScoreCard.scss   | 22 ++++++++--------------
 report-react/src/SummScoreCard.tsx    |  2 +-
 report-react/src/report/ReportRow.tsx |  6 +++---
 5 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
index 4e3032368..103399a9b 100644
--- a/report-react/src/SavedReport.tsx
+++ b/report-react/src/SavedReport.tsx
@@ -157,7 +157,7 @@ const filteredReport = {
             <Theme theme="g10">
                 <div>
                     <Grid>
-                        <Column sm={2} md={8} lg={4}>
+                        <Column sm={4} md={8} lg={4}>
                             <div className="summInfo">
                                 <h1 className="prodName">
                                     IBM <strong>Accessibility</strong><br />
@@ -173,22 +173,22 @@ const filteredReport = {
                     </Grid>
                     <section aria-label="Report overview: score cards">
                         <Grid>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <div className="time" style={{paddingTop:"12px"}}>{new Date(this.props.reportData.report.timestamp).toLocaleString()}</div>
                                 <div className="url"><strong>Scanned page:</strong> {this.props.reportData.tabURL}</div>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={violations} title="Violations" icon={Violation16} checked={this.state.selectedItems.some((item)=>item.text==="Violations")}
                                     handleCardClick={this.handleCardClick}>
                                     Accessibility failures that need to be corrected
                                 </ScoreCard>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={needReview} title="Needs review" icon={NeedsReview16} checked={this.state.selectedItems.some((item)=>item.text==="Needs review")}  handleCardClick={this.handleCardClick}>
                                     Issues that may not be a violation; manual review is needed
                                 </ScoreCard>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={recommendation} title="Recommendations" icon={Recommendation16} checked={this.state.selectedItems.some((item)=>item.text==="Recommendations")}  handleCardClick={this.handleCardClick}>
                                     Opportunities to apply best practices to further improve accessibility
                                 </ScoreCard>
diff --git a/report-react/src/ScoreCard.scss b/report-react/src/ScoreCard.scss
index 1aaac672e..0616a63d8 100644
--- a/report-react/src/ScoreCard.scss
+++ b/report-react/src/ScoreCard.scss
@@ -27,11 +27,7 @@
     }
 }
 
-@include breakpoint.breakpoint('sm') {
-    .cds--css-grid-column:nth-child(even) .scoreCard {
-        margin-right: -1rem;
-    }
-}
+
 @include breakpoint.breakpoint('md') {
     .cds--css-grid-column:nth-child(even) .scoreCard {
         margin-right: 0rem;
diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index 7444bfec1..92b824bf2 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -3,25 +3,18 @@
 .summScoreCard {
     margin: 1rem -1rem 0rem -1rem;
     padding: 1rem;
-
-    box-sizing: border-box;
-
+    min-height: 12rem;
     border: 1px solid #9E63FB;
-    background-color: #E8DAFF;
-
+    background-color:#be95ff ;
     .summaryTitleDetail {
         @include type.type-style('helper-text-01');
     }
     
     .scLeft {
-        flex: 0 0 51.25%;
-        max-width: 51.25%;
-
-        @media (min-width: 66rem) {
-            flex: 0 0 33.75%;
-            max-width: 33.75%;
-        }
+        @include type.type-style('helper-text-01');
     }
+ 
+        
 
     .title {
         @include type.type-style('heading-02');
@@ -29,9 +22,10 @@
 
     .score {
         // @include type.type-style('display-03');
-        font-size: 96px;
+        @include type.type-style('heading-07');
+        font-size: 54px;
+        margin: 1rem 0rem;
     }
-
     @media (min-width: 42rem) {
         margin: 1rem 0rem 0rem -1rem;
     }
diff --git a/report-react/src/SummScoreCard.tsx b/report-react/src/SummScoreCard.tsx
index 242ec4cf2..41cca96a5 100644
--- a/report-react/src/SummScoreCard.tsx
+++ b/report-react/src/SummScoreCard.tsx
@@ -65,7 +65,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
         let summaryNumbers = this.calcSummary(this.props.report);
         let currentStatus = summaryNumbers[3].toFixed(0);
 
-        return <div className="scoreCard" style={{border: "1px solid #9E63FB", backgroundColor:'#be95ff'}}>
+        return <div className="summScoreCard" >
             
             <Grid>
                 <Column sm={2} md={4} lg={4} className="scLeft">
diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx
index bcbad4e55..5448ba151 100644
--- a/report-react/src/report/ReportRow.tsx
+++ b/report-react/src/report/ReportRow.tsx
@@ -109,15 +109,15 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
         }
         return <div className="itemRow">
             <Grid role="row" aria-expanded={open} className="itemHeader" onClick={this.toggleRow.bind(this)} tabIndex={0} onKeyDown={this.onKeyDown.bind(this)}>
-                <Column sm={1} md={2} lg={4} role="cell">
+                <Column sm={2} md={2} lg={4} role="cell" >
                     {this.state.scrollTo && <div ref={this.scrollRef}></div>}
                     <span style={{ paddingRight: "14px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
                     {vCount > 0 && <> <span>{Violation16}</span><span style={{verticalAlign: "text-top",lineHeight: "8px",  margin: ".25rem" }}>{vCount}</span></>}
                     {nrCount > 0 && <> <span>{NeedsReview16}</span><span style={{verticalAlign: "text-top", lineHeight: "8px" , margin: ".25rem" }}>{nrCount}</span></>}
                     {rCount > 0 && <><span>&nbsp;{Recommendation16}</span><span style={{ verticalAlign: "text-top", lineHeight: "8px", margin: ".25rem"  }}>{rCount}</span> </>}
                 </Column>
-                <Column sm={3} md={6} lg={8} role="cell">
-                    <span >{group.title.length === 0 ? "Page" : group.title}</span>
+                <Column sm={2} md={6} lg={8} role="cell">
+                    <span  style={{wordWrap:"break-word"}}>{group.title.length === 0 ? "Page" : group.title}</span>
                 </Column>
             </Grid>
             {!open && <Grid className="itemDetail" />}

From 033b150c88691c45dddbbd7b392917df2b69b8b0 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Fri, 13 Sep 2024 14:51:29 +0530
Subject: [PATCH 2/7] css changes

---
 report-react/src/SummScoreCard.scss | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index 92b824bf2..681e5b8fd 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -6,16 +6,12 @@
     min-height: 12rem;
     border: 1px solid #9E63FB;
     background-color:#be95ff ;
+
     .summaryTitleDetail {
         @include type.type-style('helper-text-01');
+        font-size: 14px;
     }
-    
-    .scLeft {
-        @include type.type-style('helper-text-01');
-    }
- 
-        
-
+   
     .title {
         @include type.type-style('heading-02');
     }

From e376c8df4ae5a59d57e8917bfbf29966bccd6354 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Tue, 17 Sep 2024 20:51:29 +0530
Subject: [PATCH 3/7] score css change

---
 report-react/src/SummScoreCard.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index 681e5b8fd..c47589d00 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -18,7 +18,6 @@
 
     .score {
         // @include type.type-style('display-03');
-        @include type.type-style('heading-07');
         font-size: 54px;
         margin: 1rem 0rem;
     }

From e53ff56e37fcbc9e023d363069d5189183d989b4 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Tue, 17 Sep 2024 23:21:57 +0530
Subject: [PATCH 4/7] font weight of score

---
 report-react/src/SummScoreCard.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index c47589d00..09874ad46 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -19,6 +19,7 @@
     .score {
         // @include type.type-style('display-03');
         font-size: 54px;
+        font-weight: 400;
         margin: 1rem 0rem;
     }
     @media (min-width: 42rem) {

From 99f79069a6daee5ebc76355dd094a67bac236315 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Wed, 18 Sep 2024 10:26:28 +0530
Subject: [PATCH 5/7] change in icon order and summary card border

---
 report-react/src/SavedReport.tsx    | 2 +-
 report-react/src/SummScoreCard.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
index 103399a9b..de0740343 100644
--- a/report-react/src/SavedReport.tsx
+++ b/report-react/src/SavedReport.tsx
@@ -202,8 +202,8 @@ const filteredReport = {
                                     <div className="reportGroupFilter">
                                         <div className="iconGroup">
                                     <span className="iconSummary">{Violation16}&nbsp;{violations}</span>
-                                    <span className="iconSummary">{Recommendation16}&nbsp;{recommendation}</span>
                                     <span className="iconSummary">{NeedsReview16}&nbsp;{needReview}</span>
+                                    <span className="iconSummary">{Recommendation16}&nbsp;{recommendation}</span>
                                     <span className="iconSummary">{ViewOff16}&nbsp;{hidden}</span>
                                     <span style={{paddingLeft:"1rem"}}>{total} issues found</span>
                                     </div>
diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index 09874ad46..9aca21fb8 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -4,7 +4,7 @@
     margin: 1rem -1rem 0rem -1rem;
     padding: 1rem;
     min-height: 12rem;
-    border: 1px solid #9E63FB;
+    border: 1px solid #8A3FFC;
     background-color:#be95ff ;
 
     .summaryTitleDetail {

From ef876168e78c65116a41db42229bf27d8a440cec Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Wed, 18 Sep 2024 20:38:09 +0530
Subject: [PATCH 6/7] color change for summary card

---
 report-react/src/SummScoreCard.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
index 9aca21fb8..1a9bcb961 100644
--- a/report-react/src/SummScoreCard.scss
+++ b/report-react/src/SummScoreCard.scss
@@ -5,7 +5,7 @@
     padding: 1rem;
     min-height: 12rem;
     border: 1px solid #8A3FFC;
-    background-color:#be95ff ;
+    background-color:#E8DAFF;
 
     .summaryTitleDetail {
         @include type.type-style('helper-text-01');

From e54b485c3683544c87cd75194ad22483cf37e1a9 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Wed, 18 Sep 2024 21:11:08 +0530
Subject: [PATCH 7/7] bg color of extenstion summ & border in html report

---
 .../src/ts/devtools/components/summaryScreen.scss               | 2 +-
 report-react/src/SavedReport.scss                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
index 692fafefd..48603ce6d 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
@@ -65,7 +65,7 @@
 
     &.cds--g10 {
         .status-score-tile {
-            background-color: #BE95FF; // purple / 40
+            background-color:#E8DAFF ; // purple / 20
         }
     }
 
diff --git a/report-react/src/SavedReport.scss b/report-react/src/SavedReport.scss
index 0efacf1e4..508fc2693 100644
--- a/report-react/src/SavedReport.scss
+++ b/report-react/src/SavedReport.scss
@@ -23,7 +23,7 @@
     .summReport, .summCard {
         margin: 1rem -1rem 0rem -1rem;
         padding: 1rem;
-
+        border:solid #a8a8a8;
         background-color: #FFFFFF;
 
         .title {