From f0b47373135b83e62213f267cf60e8f5cd8f03af Mon Sep 17 00:00:00 2001
From: Tanuj Mittal <tamitta@microsoft.com>
Date: Sat, 6 Feb 2021 01:19:36 +0530
Subject: [PATCH] Update gallery colors (#430)

* Update gallery colors

* fix lint error

* Fix test
---
 less/Common/Constants.less                            |  2 ++
 .../NotebookGallery/Cards/GalleryCardComponent.tsx    |  7 ++-----
 .../__snapshots__/GalleryCardComponent.test.tsx.snap  | 11 ++++++++---
 .../NotebookGallery/GalleryViewerComponent.less       |  1 +
 src/GalleryViewer/GalleryViewer.less                  |  5 +++++
 src/GalleryViewer/GalleryViewer.tsx                   |  5 +++--
 6 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 src/GalleryViewer/GalleryViewer.less

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index bc8616929..a9c3672fd 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -57,6 +57,8 @@
 
 @FocusColor: #605e5c;
 
+@GalleryBackgroundColor: #fdfdfd;
+
 /******************************************************************************
                                 METRICS
 /******************************************************************************/
diff --git a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
index 333905659..7fd7f6ff7 100644
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -18,7 +18,6 @@ import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
-import { StyleConstants } from "../../../../Common/Constants";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;
@@ -54,6 +53,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
     return (
       <Card
+        style={{ background: "white" }}
         aria-label={cardTitle}
         data-is-focusable="true"
         tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
@@ -159,10 +159,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
   private generateIconText = (iconName: string, text: string): JSX.Element => {
     return (
-      <Text
-        variant="tiny"
-        styles={{ root: { color: StyleConstants.BaseMediumHigh, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
-      >
+      <Text variant="tiny" styles={{ root: { color: "#605E5C", paddingRight: GalleryCardComponent.cardItemGapSmall } }}>
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
     );
diff --git a/src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap b/src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
index d3d4d69e0..17b066081 100644
--- a/src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
@@ -5,6 +5,11 @@ exports[`GalleryCardComponent renders 1`] = `
   aria-label="name"
   data-is-focusable="true"
   onClick={[Function]}
+  style={
+    Object {
+      "background": "white",
+    }
+  }
   tokens={
     Object {
       "childrenGap": 0,
@@ -88,7 +93,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -112,7 +117,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -136,7 +141,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
index ae87fe42c..2fcbdd780 100644
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
@@ -6,6 +6,7 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background: @GalleryBackgroundColor;
 }
 
 .publicGalleryTabContainer {
diff --git a/src/GalleryViewer/GalleryViewer.less b/src/GalleryViewer/GalleryViewer.less
new file mode 100644
index 000000000..2eab230e9
--- /dev/null
+++ b/src/GalleryViewer/GalleryViewer.less
@@ -0,0 +1,5 @@
+@import "../../less/Common/Constants";
+
+.standalone-gallery-root {
+  background: @GalleryBackgroundColor;
+}
\ No newline at end of file
diff --git a/src/GalleryViewer/GalleryViewer.tsx b/src/GalleryViewer/GalleryViewer.tsx
index 1eb18c538..1a49c22cf 100644
--- a/src/GalleryViewer/GalleryViewer.tsx
+++ b/src/GalleryViewer/GalleryViewer.tsx
@@ -1,4 +1,5 @@
 import "bootstrap/dist/css/bootstrap.css";
+import "./GalleryViewer.less";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import { Text, Link } from "office-ui-fabric-react";
 import * as React from "react";
@@ -32,7 +33,7 @@ const onInit = async () => {
   };
 
   const element = (
-    <>
+    <div className="standalone-gallery-root">
       <header>
         <GalleryHeaderComponent />
       </header>
@@ -53,7 +54,7 @@ const onInit = async () => {
 
         <GalleryAndNotebookViewerComponent {...props} />
       </div>
-    </>
+    </div>
   );
 
   ReactDOM.render(element, document.getElementById("galleryContent"));