From c394ddcbad476b84540f690fd759fc39ae8ceeac Mon Sep 17 00:00:00 2001 From: Felix Ableitner <me@nutomic.com> Date: Tue, 1 Mar 2022 14:47:52 +0100 Subject: [PATCH] address review comments --- src/shared/components/app/app.tsx | 5 ++- src/shared/components/app/theme.tsx | 46 ++++++++++++++++++------ src/shared/components/home/site-form.tsx | 2 +- 3 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index 52e47a1..67816f6 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -26,7 +26,10 @@ export class App extends Component<AppProps, any> { <> <Provider i18next={i18n}> <div> - <Theme myUserInfo={siteRes.my_user} site={siteRes.site_view.site} /> + <Theme + myUserInfo={siteRes.my_user} + defaultTheme={siteRes.site_view.site.default_theme} + /> {siteRes && siteRes.site_view && this.props.siteRes.site_view.site.icon && ( diff --git a/src/shared/components/app/theme.tsx b/src/shared/components/app/theme.tsx index e048046..79d6567 100644 --- a/src/shared/components/app/theme.tsx +++ b/src/shared/components/app/theme.tsx @@ -1,10 +1,10 @@ import { Component } from "inferno"; import { Helmet } from "inferno-helmet"; -import { MyUserInfo, Site } from "lemmy-js-client"; +import { MyUserInfo } from "lemmy-js-client"; interface Props { myUserInfo: MyUserInfo | undefined; - site: Site; + defaultTheme: string; } export class Theme extends Component<Props> { @@ -12,22 +12,48 @@ export class Theme extends Component<Props> { let user = this.props.myUserInfo; let hasTheme = user && user.local_user_view.local_user.theme !== "browser"; - return ( - <Helmet> - {hasTheme ? ( + if (hasTheme) { + return ( + <Helmet> <link rel="stylesheet" type="text/css" href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`} /> - ) : ( + </Helmet> + ); + } else if (this.props.defaultTheme != "browser") { + return ( + <Helmet> <link rel="stylesheet" type="text/css" - href={`/static/assets/css/themes/${this.props.site.default_theme}.min.css`} + href={`/static/assets/css/themes/${this.props.defaultTheme}.min.css`} /> - )} - </Helmet> - ); + </Helmet> + ); + } else { + return ( + <Helmet> + [ + <link + rel="stylesheet" + type="text/css" + href="/static/assets/css/themes/litely.min.css" + id="default-light" + media="(prefers-color-scheme: light)" + /> + , + <link + rel="stylesheet" + type="text/css" + href="/static/assets/css/themes/darkly.min.css" + id="default-dark" + media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" + /> + ]; + </Helmet> + ); + } } } diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx index d37d712..09bf66e 100644 --- a/src/shared/components/home/site-form.tsx +++ b/src/shared/components/home/site-form.tsx @@ -324,7 +324,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { <div class="form-group row"> <div class="col-12"> <label - class="form-check-label" + class="form-check-label mr-2" htmlFor="create-site-default-theme" > {i18n.t("theme")} -- 2.44.1