Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import * as MobileDetect from "mobile-detect";
const md = new MobileDetect(window.navigator.userAgent);
import Theme from "react-uwp/Theme";
import getTheme from "react-uwp/styles/getTheme";
import Wrapper from "../components/Wrapper";
import WrapperWithCategories from "../components/WrapperWithCategories";
export interface RouterCallback {
(error: any, component?: any): void;
}
const useFluentDesign = true;
const desktopBackgroundImage = require("assets/images/blurBackground/jennifer-bailey-10753.jpg");
// const theme = getTheme({ useFluentDesign, desktopBackgroundImage, materialBackground: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='hsla(0, 0%, 100%, 0.3)' width='1' height='1'/%3E%3C/svg%3E") repeat top right / 16px` });
const theme = getTheme({ useFluentDesign, desktopBackgroundImage });
const isMobile = Boolean(md.mobile());
const useBackdropCSS = {
enableNoiseTexture: true,
forceGenerateAcrylicTextures: false
};
const useCanvasAcrylic = {
enableNoiseTexture: true,
forceGenerateAcrylicTextures: true
};
export class ThemeWrapper extends React.Component {
render() {
const { children } = this.props;
return (
onChangeValue={value => {
theme.updateTheme(getTheme({
themeName: value.toLowerCase() as any,
accent: theme.accent,
useFluentDesign: theme.useFluentDesign,
desktopBackgroundImage: theme.desktopBackgroundImage
}));
}}
/>
onClick: () => {
theme.updateTheme(getTheme({
themeName: theme.isDarkTheme ? "light" : "dark",
accent: theme.accent,
useFluentDesign: theme.useFluentDesign,
desktopBackgroundImage: theme.desktopBackgroundImage
}));
}
}]}
render() {
const { userAgent } = this.props
return (
<button>Test Button</button>
<p style="{{">{userAgent.slice(12)}...</p>
)
}
}
render() {
const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, newTheme, ...attributes } = this.props;
const darkTheme = getTheme({ themeName: "dark", accent: this.context.theme.accent });
const { prefixStyle } = darkTheme;
const lightTheme = getTheme({ themeName: "light", accent: this.context.theme.accent });
const isColumn = direction === "column";
const currThemeStyle: React.CSSProperties = prefixStyle({
width: "50%",
minHeight: 240,
display: "flex",
alignItems: "center",
justifyContent: "center",
...themeStyle
});
const { theme } = this.context;
return useSingleTheme || theme.useFluentDesign ? (
onCheck={useFluentDesign => {
theme.updateTheme(getTheme({
themeName: theme.themeName,
accent: theme.accent,
useFluentDesign,
desktopBackgroundImage: theme.desktopBackgroundImage
}));
}}
/>
render() {
const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, newTheme, ...attributes } = this.props;
const darkTheme = getTheme({ themeName: "dark", accent: this.context.theme.accent });
const { prefixStyle } = darkTheme;
const lightTheme = getTheme({ themeName: "light", accent: this.context.theme.accent });
const isColumn = direction === "column";
const currThemeStyle: React.CSSProperties = prefixStyle({
width: "50%",
minHeight: 240,
display: "flex",
alignItems: "center",
justifyContent: "center",
...themeStyle
});
const { theme } = this.context;
return useSingleTheme || theme.useFluentDesign ? (