feature(extension): Complete dark theme for the browser extension

accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx

@@ -19,6 +19,7 @@ import React from "react";
 import { Column, Grid, Checkbox, Theme } from '@carbon/react';
 import { ISettings } from "../../interfaces/interfaces";
 import { getBGController } from "../../background/backgroundController";
+import { BrowserDetection } from '../../util/browserDetection';
 
 import "./kcmOverviewScreen.scss";
 
@@ -49,6 +50,7 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
     }
 
     render() {
+        BrowserDetection.setDarkLight();
         let showAgainChecked: boolean = this.state.settings ? !this.state.settings?.tabStopAlerts : false;
         return <aside className="kcmOverview">
             {/* KCM Overview Title */}
@@ -130,7 +132,7 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                     </div>
                     <div style={{clear: "both", marginTop: "1rem"}} />
                     <div className="iconText">
-                        <Theme theme="g90" className="iconBox">
+                        <Theme theme="g100" className="iconBox">
                             <KeyboardOff size={16} />
                         </Theme>
                         Click on the keyboard icon to return to the regular view.
@@ -157,6 +159,6 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                     </div>
                 </Column>
             </Grid>
-        </aside>;
+        </aside>
     }
 }

accessibility-checker-extension/src/ts/devtools/components/reportSection.scss

@@ -16,7 +16,7 @@
 
 .reportSection {
     .reportSectionColumn {
-        border-top: solid $gray-20 1px;
+        border-top: solid $gray-40 1px;
     }
     margin-top: 1rem;
     .cds--tab-content {
@@ -58,7 +58,7 @@
 }
 
 .reportFilterBorder {
-    border-top: solid $gray-20 1px;    
+    border-top: solid $gray-40 1px;    
 }
 
 .reportFilterSection {

accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx

@@ -287,8 +287,8 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
                         inline={true}
                         onClick={() => {
                             let appController = getDevtoolsAppController();
-                            appController.setSecondaryView("summary");
-                            appController.openSecondary("totalIssuesCount");
+                            ("summary");
+                            appController.openSecondary("tappController.setSecondaryViewotalIssuesCount");
                     }}>{totalCount} issues found</Link>
                 </Column>
             </Grid>

accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss

@@ -23,8 +23,8 @@
         @include type-style('label-01');
         > div { // column
             > div { // cell
-                border-top: solid var(--cds-background) var(--border-width);
-                border-bottom: solid $gray-30 var(--border-width);
+                border-top: solid $gray-40 var(--border-width);
+                border-bottom: solid $gray-40 var(--border-width);
                 margin: 0rem -1rem;
                 padding: 0.5rem 0rem .5rem 1rem;
                 height: 100%;

accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx

@@ -569,7 +569,8 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                         let selectedDescendant: boolean = !!this.props.selectedPath 
                             && thisIssue.path.dom.startsWith(this.props.selectedPath);
                         let focused: boolean = this.state.tabRowId === rowId
-                        bodyContent.push(<Grid 
+                        bodyContent.push(
+                        <Grid 
                             id={rowId}
                             role="row" 
                             aria-level="2" 
@@ -586,6 +587,7 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                 this.onRow(group, thisIssue);
                             }}
                         >
+
                             <Column className="gridChild" role="gridcell" aria-selected={selectedIssue} sm={4} md={8} lg={8}>
                                 <div className="gridDataCell">
                                     {UtilIssueReact.valueToIcon(thisIssue.value, "levelIcon")} {thisIssue.message} <a 
@@ -605,7 +607,8 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                     >Learn more</a>
                                 </div>
                             </Column>
-                        </Grid>);
+                        </Grid>
+                        );
                     }
                 }
             }

accessibility-checker-extension/src/ts/devtools/components/scanSection.scss

@@ -1,18 +1,80 @@
 @use '@carbon/styles/scss/type'as *;
 @use '@carbon/styles/scss/theme'as *;
 
+
+
 .cds--overflow-menu-options[aria-label='stored scans'] {
     min-width: 12rem;
     .cds--overflow-menu-options__btn {
         min-width: 12rem;
     }
 }
 
-.scanSection {
-    .cds--overflow-menu--sm {
-        min-height: 2rem;
+
+
+.cds--g100 {
+    .scanSection {
+        .cds--overflow-menu__wrapper {
+            button {
+                height: 2rem;
+                width: 2rem;
+                background-color: #393939; // color of initial menu button and menu items
+                // border: 1px solid gray;
+                min-height: 2rem;
+                .cds--overflow-menu__icon {
+                    fill: white;
+                }
+                .cds--btn--md.cds--btn--icon-only {
+                    padding-right: 0.5rem;
+                    padding-left: 0.5rem;
+                }
+            }
+        }
+        .cds--overflow-menu.cds--overflow-menu--open:hover {
+            background-color: #595959; // color of button on hover
+        }
+        .cds--overflow-menu.cds--overflow-menu--open {
+            height: 2rem;
+            min-height: 2rem;
+            background-color: #393939; // color of secondary button
+            .cds--overflow-menu__icon {
+                fill: white;
+            }
+        }
     }
-
+}
+
+.cds--white {
+    .scanSection {
+        .cds--overflow-menu__wrapper {
+            button { height: 2rem;
+                width: 2rem;
+                min-height: 2rem;
+                background-color: #e0e0e0; // color of initial menu button and menu items
+                .cds--overflow-menu__icon {
+                    fill: black;
+                }
+                .cds--btn--md.cds--btn--icon-only {
+                    padding-right: 0.5rem;
+                    padding-left: 0.5rem;
+                }
+            }
+        }
+        .cds--overflow-menu.cds--overflow-menu--open:hover {
+            background-color: #e0e0e0; // color of button on hover
+        }
+        .cds--overflow-menu.cds--overflow-menu--open {
+            height: 2rem;
+            min-height: 2rem;
+            background-color: #e0e0e0; // color of secondary button 
+            .cds--overflow-menu__icon {
+                fill: black;
+            }
+        }
+    }
+}
+
+.scanSection {
     .storedCount {
         margin-top:.5rem;
         @include type-style("label-01");
@@ -21,4 +83,7 @@
     .inlineLoading {
         background-color: $layer;
     }
-}
+
+}
+
+