Merge pull request #467 from thoughtspot/css-updates-in-product

theme-builder fix and light/dark mode setting for in-product presenta…

Author: ShashiSubramanya

src/assets/styles/index.scss

@@ -1106,7 +1106,7 @@ a.anchor {
     box-shadow: 0 2px 2px #1B3E61;
     padding: 30px 0 0 40px;
 
- 
+
     .header-banner-text {
         display: flex;
         flex-direction: column;
@@ -1126,6 +1126,27 @@ a.anchor {
     }
 }
 
+// In-product presentation only: override banner color to match product sidebar (#232F43).
+// Standalone light/dark banner gradient is preserved via var(--header-banner-background) above.
+.embedded-mode .header-banner {
+    background: #232F43;
+    box-shadow: none;
+}
+
+// Fluid home page cards for both standalone and embedded presentations.
+// Using flex shorthand so cards reflow naturally when the viewport or iframe width changes.
+.introCard,
+.boxHalfWidth {
+    flex: 1 1 260px;
+    width: auto;
+    max-width: 400px;
+}
+
+.boxDiv {
+    flex: 1 1 220px;
+    width: auto;
+}
+
 .cardHeading {
     font-size: $font-size-h2;
     color: var(--primary-color) #1d232f;

src/components/DevDocTemplate/index.tsx

@@ -103,6 +103,8 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
     });
     const [isDarkMode, setDarkMode] = useState<boolean>(() => {
         if (typeof window === 'undefined') return false;
+        // In-product (embedded) presentation always uses light mode — product UI has no theme toggle.
+        if (!isPublicSite(location.search)) return false;
         /* themeMode is only written when the user explicitly clicks the toggle.
            If absent, follow OS preference fresh every load. */
         const explicitChoice = localStorage.getItem('themeMode');
@@ -223,6 +225,12 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
 
     useEffect(() => {
         if (isBrowser()) {
+            // In-product (embedded) presentation always uses light mode.
+            if (!isPublicSiteOpen) {
+                setDarkMode(false);
+                setKey('dark');
+                return;
+            }
             /* Correct SSR mismatch on first hydration */
             const explicitChoice = localStorage.getItem('themeMode');
             let isDark: boolean;

src/components/Document/__snapshots__/index.test.tsx.snap

@@ -6,68 +6,6 @@ exports[`Document should render correctly if isPublicSiteOpen is false 1`] = `
     class="documentWrapper"
     style="width: 100%;"
   >
-    <div
-      class="document-toolbar"
-    >
-      <div
-        class="copy-page-dropdown"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="copy-page-dropdown__trigger "
-          title="Copy or share this page"
-        >
-          <svg
-            class="copy-page-icon"
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              height="13"
-              rx="2"
-              ry="2"
-              width="13"
-              x="9"
-              y="9"
-            />
-            <path
-              d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-            />
-          </svg>
-          <span>
-            Copy page
-          </span>
-          <span
-            aria-hidden="true"
-            class="copy-page-dropdown__trigger-divider"
-          />
-          <svg
-            class="copy-chevron"
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
     <div
       class="documentView"
       id="test title"

src/components/Document/index.tsx

@@ -137,7 +137,7 @@ const Document = (props: {
                     pageid={props.pageid}
                 />
             )}
-            {!isHomePage && (
+            {!isHomePage && props.isPublicSiteOpen && (
                 <div className="document-toolbar">
                     <CopyPageDropdown pageTitle={props.docTitle} markdownBody={props.markdownBody} />
                 </div>