Merge pull request #1493 from IBMa/joho-DarkMode-1444

feature(extension): Complete dark theme for the browser extension
IBMa · Jun 28, 2023 · a46c3fe · a46c3fe
2 parents c04c2ea + 41f96cf
commit a46c3fe
Show file tree

Hide file tree

Showing 29 changed files with 390 additions and 292 deletions.
diff --git a/accessibility-checker-extension/src/assets/BE_for_DarkMode.svg b/accessibility-checker-extension/src/assets/BE_for_DarkMode.svg
diff --git a/...rc/assets/BE_for_Accessibility_darker.svg → ...extension/src/assets/BE_for_LightMode.svg b/...rc/assets/BE_for_Accessibility_darker.svg → ...extension/src/assets/BE_for_LightMode.svg
diff --git a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx b/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>
     }
 }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss b/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 {

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
@@ -287,7 +287,7 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
                         inline={true}
                         onClick={() => {
                             let appController = getDevtoolsAppController();
-                            appController.setSecondaryView("summary");
+                            getDevtoolsAppController().setSecondaryView("summary");
                             appController.openSecondary("totalIssuesCount");
                     }}>{totalCount} issues found</Link>
                 </Column>

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss b/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%;

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx b/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>
+                        );
                     }
                 }
             }

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/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;
     }
-}
+
+}
+
+
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -29,8 +29,7 @@ import {
     OverflowMenu,
     OverflowMenuItem,
     Switch,
-    Theme,
-    Tooltip
+    Tooltip,
 } from "@carbon/react";
 import {
     Keyboard,
@@ -41,7 +40,7 @@ import { IReport } from '../../interfaces/interfaces';
 import { ChevronDown } from "@carbon/react/icons";
 import "./scanSection.scss";
 import { getDevtoolsAppController } from '../devtoolsAppController';
-import { BrowserDetection } from '../../util/browserDetection';
+// import { BrowserDetection } from '../../util/browserDetection';
 
 let devtoolsController = getDevtoolsController();
 let bgController = getBGController();
@@ -190,49 +189,47 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                         }
                                     }>Scan</Button>
                                 </div>
-                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g100"} style={{flex: "0 1 2rem"}}>
-                                    <OverflowMenu 
-                                        size="sm" 
-                                        ariaLabel="stored scans" 
-                                        align="bottom" 
-                                        renderIcon={ChevronDown}
-                                    >
-                                        <OverflowMenuItem
-                                            disabled={!this.state.reportContent}
-                                            itemText="Download current scan" 
-                                            onClick={() => devtoolsController.exportXLS("last") }
-                                        />
-                                        <OverflowMenuItem 
-                                            // if scanStorage false not storing scans, if true storing scans
-                                            itemText= {this.state.storeReports ? "Stop storing scans" : "Start storing scans"}
-                                            onClick={() => {
-                                                devtoolsController.setStoreReports(!this.state.storeReports);
-                                            }}
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
-                                            itemText="Download stored scans" 
-                                            onClick={() => devtoolsController.exportXLS("all") }
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
-                                            itemText="View stored scans" 
-                                            onClick={async () => {
-                                                await devtoolsAppController.setSecondaryView("stored");
-                                                devtoolsAppController.openSecondary(".cds--overflow-menu[aria-label='stored scans']");
-                                            }}
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0}
-                                            isDelete={this.state.storedReportsCount > 0}
-                                            hasDivider
-                                            itemText="Delete stored scans" 
-                                            onClick={() => {
-                                                this.setState({ confirmClearStored: true });
-                                            }}
-                                        />
-                                    </OverflowMenu>
-                                </Theme>
+                                <OverflowMenu 
+                                    data-floating-menu-container
+                                    size="sm" 
+                                    ariaLabel="stored scans" 
+                                    renderIcon={ChevronDown}
+                                >
+                                    <OverflowMenuItem
+                                        disabled={!this.state.reportContent}
+                                        itemText="Download current scan" 
+                                        onClick={() => devtoolsController.exportXLS("last") }
+                                    />
+                                    <OverflowMenuItem 
+                                        // if scanStorage false not storing scans, if true storing scans
+                                        itemText= {this.state.storeReports ? "Stop storing scans" : "Start storing scans"}
+                                        onClick={() => {
+                                            devtoolsController.setStoreReports(!this.state.storeReports);
+                                        }}
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
+                                        itemText="Download stored scans" 
+                                        onClick={() => devtoolsController.exportXLS("all") }
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
+                                        itemText="View stored scans" 
+                                        onClick={async () => {
+                                            await devtoolsAppController.setSecondaryView("stored");
+                                            devtoolsAppController.openSecondary(".cds--overflow-menu[aria-label='stored scans']");
+                                        }}
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0}
+                                        isDelete={this.state.storedReportsCount > 0}
+                                        hasDivider
+                                        itemText="Delete stored scans" 
+                                        onClick={() => {
+                                            this.setState({ confirmClearStored: true });
+                                        }}
+                                    />
+                                </OverflowMenu>
                             </div>
                         </div>
                         <div style={{flex: "1 1 8.75rem"}}>

diff --git a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss
@@ -16,7 +16,7 @@
 
     .version {
         @include type-style("label-01");
-        color: $gray-70;
+        color: $gray-30;
         margin-top: .5rem;
     }
 

diff --git a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss
@@ -5,7 +5,8 @@
 .storedScreen {
     margin: 0rem;
     padding: 1rem 0rem;
-
+    min-height: 100%;
+
     h2 {
         @include type-style("heading-03");
     }