diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.styled.tsx b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.styled.tsx index 7ec741dbab36f2eedc37cfeda07728110adbe9dd..d7d68a0708b164d0622fdb7c3b37b5727f7d5e2b 100644 --- a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.styled.tsx +++ b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.styled.tsx @@ -10,7 +10,7 @@ export const MetabotSettingWidgetRoot = styled.div` `; export const MetabotContainer = styled.div` - padding: 2rem; + padding: 0.5rem 1rem 0.75rem 1.25rem; border-right: 1px solid ${color("border")}; `; diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.tsx b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.tsx index 5cacbe4a0e0f5ccccdb667c0751183e2d7006d00..4a32cd39f43225a948be35301c5cd0ce1ea166ab 100644 --- a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.tsx +++ b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.tsx @@ -11,11 +11,18 @@ import { import Toggle from "metabase/core/components/Toggle"; const MetabotSettingWidget = ({ setting, onChange }: any) => { + const isEnabled = setting.value ?? setting.defaultValue; + const metabotImage = isEnabled ? "metabot-happy" : "metabot-sad"; + const toggleId = useUniqueId("show-metabot-switch"); return ( <MetabotSettingWidgetRoot> <MetabotContainer> - <MetabotLogo /> + <img + src={`app/assets/img/${metabotImage}.gif`} + width="94px" + alt="Metabot" + /> </MetabotContainer> <ToggleContainer> <ToggleLabel @@ -25,7 +32,7 @@ const MetabotSettingWidget = ({ setting, onChange }: any) => { id={toggleId} aria-checked={setting.value} role="switch" - value={setting.value ?? setting.defaultValue} + value={isEnabled} onChange={onChange} /> </ToggleContainer> diff --git a/resources/frontend_client/app/assets/img/metabot-happy.gif b/resources/frontend_client/app/assets/img/metabot-happy.gif new file mode 100644 index 0000000000000000000000000000000000000000..febcb5902d02a49f046145c9e75187b6f93d73b6 Binary files /dev/null and b/resources/frontend_client/app/assets/img/metabot-happy.gif differ diff --git a/resources/frontend_client/app/assets/img/metabot-sad.gif b/resources/frontend_client/app/assets/img/metabot-sad.gif new file mode 100644 index 0000000000000000000000000000000000000000..bb6fab19eb332a4a6c9c378123890146870e0858 Binary files /dev/null and b/resources/frontend_client/app/assets/img/metabot-sad.gif differ