fix(sdk): generated cli components has inconsistent styles after the style...

fix(sdk): generated cli components has inconsistent styles after the style leak fix (#49723) (#49775)

Co-authored-by: Phoomparin Mano <poom@metabase.com>

enterprise/frontend/src/embedding-sdk/cli/snippets/analytics-css-snippet.ts

@@ -5,6 +5,14 @@ export const ANALYTICS_CSS_SNIPPET = `
   cursor: pointer;
 }
 
+.analytics-root.theme-light {
+  background: #F9FBFC;
+}
+
+.analytics-root.theme-dark {
+  background: #2D353A;
+}
+
 .analytics-container {
   width: 100%;
   max-width: 1000px;
@@ -36,6 +44,7 @@ export const ANALYTICS_CSS_SNIPPET = `
 
 .analytics-header-right > a {
   color: #509EE3;
+  text-decoration: none;
 }
 
 .dashboard-select {
@@ -43,7 +52,7 @@ export const ANALYTICS_CSS_SNIPPET = `
   color: #509EE3;
   border: none;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 16px;
   cursor: pointer;
 }
 

enterprise/frontend/src/embedding-sdk/cli/snippets/analytics-dashboard-snippet.ts

@@ -23,7 +23,7 @@ import { AnalyticsContext } from "./analytics-provider"
 ${imports}
 
 export const AnalyticsDashboard = () => {
-  const {email} = useContext(AnalyticsContext)
+  const {email, themeKey} = useContext(AnalyticsContext)
   const [dashboardId, setDashboardId] = useState(DASHBOARDS[0].id)
 
   const [isCreateQuestion, toggleCreateQuestion] = useReducer((s) => !s, false)
@@ -31,45 +31,47 @@ export const AnalyticsDashboard = () => {
   const isDashboard = !isCreateQuestion
 
   return (
-    <div className="analytics-container">
-      <div className="analytics-header">
-        <div>
-          ${userSwitcherEnabled ? "<UserSwitcher />" : ""}
+    <div className={\`analytics-root theme-\${themeKey}\`}>
+      <div className="analytics-container">
+        <div className="analytics-header">
+          <div>
+            ${userSwitcherEnabled ? "<UserSwitcher />" : ""}
+          </div>
+
+          <div className="analytics-header-right">
+            {isDashboard && (
+              <select
+                className="dashboard-select"
+                onChange={(e) => setDashboardId(e.target.value)}
+              >
+                {DASHBOARDS.map((dashboard) => (
+                  <option key={dashboard.id} value={dashboard.id}>
+                    {dashboard.name}
+                  </option>
+                ))}
+              </select>
+            )}
+
+            <a href="#!" onClick={toggleCreateQuestion}>
+              {isCreateQuestion ? 'Back to dashboard' : 'Create Question'}
+            </a>
+
+            <ThemeSwitcher />
+          </div>
         </div>
 
-        <div className="analytics-header-right">
-          {isDashboard && (
-            <select
-              className="dashboard-select"
-              onChange={(e) => setDashboardId(e.target.value)}
-            >
-              {DASHBOARDS.map((dashboard) => (
-                <option key={dashboard.id} value={dashboard.id}>
-                  {dashboard.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          <a href="#!" onClick={toggleCreateQuestion}>
-            {isCreateQuestion ? 'Back to dashboard' : 'Create Question'}
-          </a>
-
-          <ThemeSwitcher />
-        </div>
+        {/** Reload the dashboard when user changes with the key prop */}
+        {isDashboard && (
+          <InteractiveDashboard
+            dashboardId={dashboardId}
+            withTitle
+            withDownloads
+            key={email}
+          />
+        )}
+
+        {isCreateQuestion && <CreateQuestion />}
       </div>
-
-      {/** Reload the dashboard when user changes with the key prop */}
-      {isDashboard && (
-        <InteractiveDashboard
-          dashboardId={dashboardId}
-          withTitle
-          withDownloads
-          key={email}
-        />
-      )}
-
-      {isCreateQuestion && <CreateQuestion />}
     </div>
   )
 }

enterprise/frontend/src/embedding-sdk/cli/snippets/theme-switcher-snippet.ts

@@ -23,7 +23,7 @@ const ICONS = {
     <svg viewBox="0 0 24 24">
       <path
         fill="none"
-        stroke="currentColor"
+        stroke="#2D353A"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
@@ -35,7 +35,7 @@ const ICONS = {
     <svg viewBox="0 0 24 24">
       <path
         fill="none"
-        stroke="currentColor"
+        stroke="#FFF"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"