aboutsummaryrefslogtreecommitdiffstats
path: root/uidev/src/withTheme
diff options
context:
space:
mode:
authorLibravatar Vijay Aravamudhan <vraravam@users.noreply.github.com>2021-10-15 14:02:33 +0530
committerLibravatar GitHub <noreply@github.com>2021-10-15 14:02:33 +0530
commit184c8fbaa6ea3fb13af93ec023252af8802040a3 (patch)
treeba3671d972d74f524a07609a49b80a885ebe2115 /uidev/src/withTheme
parentupdate recipes to pull in pnpm upgrade and workspace fix. (diff)
downloadferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.gz
ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.zst
ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.zip
Remove unused 'uidev' folder. (#2076)
Diffstat (limited to 'uidev/src/withTheme')
-rw-r--r--uidev/src/withTheme/index.tsx56
1 files changed, 0 insertions, 56 deletions
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
deleted file mode 100644
index 0e39b4810..000000000
--- a/uidev/src/withTheme/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
1import { theme, Theme, ThemeType } from '@meetfranz/theme';
2import { Classes } from 'jss';
3import * as React from 'react';
4import injectSheet, { ThemeProvider } from 'react-jss';
5
6const defaultTheme = {
7 name: 'Default',
8 variables: theme(ThemeType.default),
9};
10
11const darkTheme = {
12 name: 'Dark Mode',
13 variables: theme(ThemeType.dark),
14};
15
16const themes = [defaultTheme, darkTheme];
17
18const styles = (theme: Theme) => ({
19 title: {
20 fontSize: 14,
21 },
22 container: {
23 border: theme.inputBorder,
24 borderRadius: theme.borderRadiusSmall,
25 marginBottom: 20,
26 padding: 20,
27 background: theme.colorContentBackground,
28 },
29});
30
31const Container = injectSheet(styles)(
32 ({
33 name,
34 classes,
35 story,
36 }: {
37 name: string;
38 classes: Classes;
39 story: React.ReactNode;
40 }) => (
41 <article>
42 <h1 className={classes.title}>{name}</h1>
43 <div className={classes.container}>{story}</div>
44 </article>
45 ),
46);
47
48export const WithTheme = ({ children }: { children: React.ReactChild }) => (
49 <>
50 {themes.map((theme, key) => (
51 <ThemeProvider key={key} theme={theme.variables}>
52 <Container story={children} name={theme.name} />
53 </ThemeProvider>
54 ))}
55 </>
56);