Skip to content
Snippets Groups Projects
Unverified Commit df321012 authored by Phoomparin Mano's avatar Phoomparin Mano Committed by GitHub
Browse files

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

parent 9d013a5f
No related branches found
No related tags found
No related merge requests found
......@@ -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;
}
......
......@@ -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>
)
}
......
......@@ -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"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment