Web: fix default logo import
This commit is contained in:
parent
205fc24365
commit
774065c165
@ -3,7 +3,7 @@ import styled from "styled-components";
|
|||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
import { hugeMobile } from "@docspace/components/utils/device";
|
import { hugeMobile } from "@docspace/components/utils/device";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
import { getLogoFromPath } from "@docspace/common/utils";
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
.logo-wrapper {
|
.logo-wrapper {
|
||||||
|
@ -12,7 +12,7 @@ import { combineUrl } from "@docspace/common/utils";
|
|||||||
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
||||||
import HeaderCatalogBurger from "./header-catalog-burger";
|
import HeaderCatalogBurger from "./header-catalog-burger";
|
||||||
import { Base } from "@docspace/components/themes";
|
import { Base } from "@docspace/components/themes";
|
||||||
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
import { getLogoFromPath } from "@docspace/common/utils";
|
||||||
|
|
||||||
const Header = styled.header`
|
const Header = styled.header`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -8,7 +8,7 @@ import { ReactSVG } from "react-svg";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||||
import logoPersonalAboutUrl from "ASSETS_DIR/images/logo_personal_about.svg?url";
|
import logoPersonalAboutUrl from "ASSETS_DIR/images/logo_personal_about.svg?url";
|
||||||
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
import { getLogoFromPath } from "@docspace/common/utils";
|
||||||
|
|
||||||
const StyledAboutBody = styled.div`
|
const StyledAboutBody = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -11,6 +11,7 @@ import {
|
|||||||
StyledHeading,
|
StyledHeading,
|
||||||
StyledIconBox,
|
StyledIconBox,
|
||||||
} from "../styled-article";
|
} from "../styled-article";
|
||||||
|
import { getLogoFromPath } from "../../../utils";
|
||||||
|
|
||||||
const ArticleHeader = ({
|
const ArticleHeader = ({
|
||||||
showText,
|
showText,
|
||||||
@ -28,12 +29,12 @@ const ArticleHeader = ({
|
|||||||
|
|
||||||
const burgerLogo =
|
const burgerLogo =
|
||||||
userTheme === "Dark"
|
userTheme === "Dark"
|
||||||
? whiteLabelLogoUrls[5].path.dark
|
? getLogoFromPath(whiteLabelLogoUrls[5].path.dark)
|
||||||
: whiteLabelLogoUrls[5].path.light;
|
: getLogoFromPath(whiteLabelLogoUrls[5].path.light);
|
||||||
const logo =
|
const logo =
|
||||||
userTheme === "Dark"
|
userTheme === "Dark"
|
||||||
? whiteLabelLogoUrls[0].path.dark
|
? getLogoFromPath(whiteLabelLogoUrls[0].path.dark)
|
||||||
: whiteLabelLogoUrls[0].path.light;
|
: getLogoFromPath(whiteLabelLogoUrls[0].path.light);
|
||||||
|
|
||||||
if (isMobileOnly) return <></>;
|
if (isMobileOnly) return <></>;
|
||||||
return (
|
return (
|
||||||
|
@ -1,3 +1,12 @@
|
|||||||
|
//TODO: fix routes
|
||||||
|
import LoginPageSvgUrl from "../../client/public/images/logo/loginpage.svg?url";
|
||||||
|
import DarkLoginPageSvgUrl from "../../client/public/images/logo/dark_loginpage.svg?url";
|
||||||
|
import LeftMenuSvgUrl from "../../client/public/images/logo/leftmenu.svg?url";
|
||||||
|
import DocseditorSvgUrl from "../../client/public/images/logo/docseditor.svg?url";
|
||||||
|
import LightSmallSvgUrl from "../../client/public/images/logo/lightsmall.svg?url";
|
||||||
|
import DocsEditoRembedSvgUrl from "../../client/public/images/logo/docseditorembed.svg?url";
|
||||||
|
import DarkLightSmallSvgUrl from "../../client/public/images/logo/dark_lightsmall.svg?url";
|
||||||
|
|
||||||
import { LANGUAGE } from "../constants";
|
import { LANGUAGE } from "../constants";
|
||||||
import sjcl from "sjcl";
|
import sjcl from "sjcl";
|
||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
@ -467,6 +476,7 @@ export const getConvertedSize = (t, size) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//TODO: add for url use
|
||||||
export const getBgPattern = (colorSchemeId: number) => {
|
export const getBgPattern = (colorSchemeId: number) => {
|
||||||
switch (colorSchemeId) {
|
switch (colorSchemeId) {
|
||||||
case 1:
|
case 1:
|
||||||
@ -487,3 +497,33 @@ export const getBgPattern = (colorSchemeId: number) => {
|
|||||||
return "url('/static/images/background.pattern.react.svg')";
|
return "url('/static/images/background.pattern.react.svg')";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//TODO: check for custom logo
|
||||||
|
export const getLogoFromPath = (path) => {
|
||||||
|
if (!path || path.indexOf("images/logo/") === -1) return path;
|
||||||
|
|
||||||
|
const name = path.split("/").pop();
|
||||||
|
switch (name) {
|
||||||
|
case "aboutpage.svg":
|
||||||
|
case "loginpage.svg":
|
||||||
|
return LoginPageSvgUrl;
|
||||||
|
case "dark_loginpage.svg":
|
||||||
|
return DarkLoginPageSvgUrl;
|
||||||
|
case "leftmenu.svg":
|
||||||
|
case "dark_leftmenu.svg":
|
||||||
|
return LeftMenuSvgUrl;
|
||||||
|
case "dark_aboutpage.svg":
|
||||||
|
case "dark_lightsmall.svg":
|
||||||
|
return DarkLightSmallSvgUrl;
|
||||||
|
case "docseditor.svg":
|
||||||
|
return DocseditorSvgUrl;
|
||||||
|
case "lightsmall.svg":
|
||||||
|
return LightSmallSvgUrl;
|
||||||
|
case "docseditorembed.svg":
|
||||||
|
return DocsEditoRembedSvgUrl;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return path;
|
||||||
|
};
|
||||||
|
@ -9,11 +9,10 @@ import { ReactSVG } from "react-svg";
|
|||||||
import { LoginContainer, LoginFormWrapper } from "./StyledLogin";
|
import { LoginContainer, LoginFormWrapper } from "./StyledLogin";
|
||||||
import BarLogo from "../../../../../public/images/danger.alert.react.svg";
|
import BarLogo from "../../../../../public/images/danger.alert.react.svg";
|
||||||
import { Dark, Base } from "@docspace/components/themes";
|
import { Dark, Base } from "@docspace/components/themes";
|
||||||
import { getBgPattern } from "@docspace/common/utils";
|
import { getBgPattern, getLogoFromPath } from "@docspace/common/utils";
|
||||||
import { useMounted } from "../helpers/useMounted";
|
import { useMounted } from "../helpers/useMounted";
|
||||||
import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
|
import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
|
||||||
|
|
||||||
|
|
||||||
interface IBarProp {
|
interface IBarProp {
|
||||||
t: TFuncType;
|
t: TFuncType;
|
||||||
expired: boolean;
|
expired: boolean;
|
||||||
@ -44,7 +43,7 @@ const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
|
|||||||
useIsomorphicLayoutEffect(() => {
|
useIsomorphicLayoutEffect(() => {
|
||||||
const theme =
|
const theme =
|
||||||
window.matchMedia &&
|
window.matchMedia &&
|
||||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
? Dark
|
? Dark
|
||||||
: Base;
|
: Base;
|
||||||
setTheme(theme);
|
setTheme(theme);
|
||||||
@ -65,7 +64,9 @@ const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const logo = Object.values(logoUrls)[1];
|
const logo = Object.values(logoUrls)[1];
|
||||||
const logoUrl = !theme.isBase ? logo.path.dark : logo.path.light;
|
const logoUrl = !theme?.isBase
|
||||||
|
? getLogoFromPath(logo?.path?.dark)
|
||||||
|
: getLogoFromPath(logo?.path?.light);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LoginContainer id="code-page" theme={theme}>
|
<LoginContainer id="code-page" theme={theme}>
|
||||||
|
Loading…
Reference in New Issue
Block a user