Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-27 23:09:35 +02:00
Code Issues Releases Wiki Activity

Changed how theme is set and stored on client

Browse source
This commit is contained in:
Paweł Malak 2022-03-23 14:49:35 +01:00
parent e427fbf54c
commit 89bd921875
12 changed files with 92 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx
View file

@ -1,8 +1,3 @@
// Redux
import { useDispatch } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../../store';
// Components
import { ThemePreview } from '../ThemePreview/ThemePreview';
@ -15,14 +10,11 @@ interface Props {
}
export const ThemeGrid = ({ themes }: Props): JSX.Element => {
const dispatch = useDispatch();
const { setTheme } = bindActionCreators(actionCreators, dispatch);
return (
<div className={classes.ThemerGrid}>
{themes.map(
(theme: Theme, idx: number): JSX.Element => (
<ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
<ThemePreview key={idx} theme={theme} />
)
)}
</div>

26
client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx
View file

@ -1,32 +1,38 @@
// Redux
import { useDispatch } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../../store';
// Other
import { Theme } from '../../../../interfaces/Theme';
import classes from './ThemePreview.module.css';
interface Props {
theme: Theme;
applyTheme: Function;
}
export const ThemePreview = (props: Props): JSX.Element => {
export const ThemePreview = ({
theme: { colors, name },
}: Props): JSX.Element => {
const { setTheme } = bindActionCreators(actionCreators, useDispatch());
return (
<div
className={classes.ThemePreview}
onClick={() => props.applyTheme(props.theme.name)}
>
<div className={classes.ThemePreview} onClick={() => setTheme(colors)}>
<div className={classes.ColorsPreview}>
<div
className={classes.ColorPreview}
style={{ backgroundColor: props.theme.colors.background }}
style={{ backgroundColor: colors.background }}
></div>
<div
className={classes.ColorPreview}
style={{ backgroundColor: props.theme.colors.primary }}
style={{ backgroundColor: colors.primary }}
></div>
<div
className={classes.ColorPreview}
style={{ backgroundColor: props.theme.colors.accent }}
style={{ backgroundColor: colors.accent }}
></div>
</div>
<p>{props.theme.name}</p>
<p>{name}</p>
</div>
);
};

10
client/src/components/Settings/Themer/Themer.tsx
View file

@ -9,12 +9,11 @@ import { actionCreators } from '../../../store';
import { Theme, ThemeSettingsForm } from '../../../interfaces';
// Components
import { Button, InputGroup, SettingsHeadline } from '../../UI';
import { Button, InputGroup, SettingsHeadline, Spinner } from '../../UI';
import { ThemeBuilder } from './ThemeBuilder/ThemeBuilder';
import { ThemeGrid } from './ThemeGrid/ThemeGrid';
// Other
import { themes } from './themes.json';
import { State } from '../../../store/reducers';
import { inputHandler, themeSettingsTemplate } from '../../../utility';
@ -22,6 +21,7 @@ export const Themer = (): JSX.Element => {
const {
auth: { isAuthenticated },
config: { loading, config },
theme: { themes },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
@ -63,10 +63,10 @@ export const Themer = (): JSX.Element => {
return (
<Fragment>
<SettingsHeadline text="App themes" />
<ThemeGrid themes={themes} />
{!themes.length ? <Spinner /> : <ThemeGrid themes={themes} />}
<SettingsHeadline text="User themes" />
<ThemeBuilder />
{/* <SettingsHeadline text="User themes" />
<ThemeBuilder /> */}
{isAuthenticated && (
<form onSubmit={formSubmitHandler}>

124
client/src/components/Settings/Themer/themes.json
View file

@ -1,124 +0,0 @@
{
"themes": [
{
"name": "blackboard",
"colors": {
"background": "#1a1a1a",
"primary": "#FFFDEA",
"accent": "#5c5c5c"
}
},
{
"name": "gazette",
"colors": {
"background": "#F2F7FF",
"primary": "#000000",
"accent": "#5c5c5c"
}
},
{
"name": "espresso",
"colors": {
"background": "#21211F",
"primary": "#D1B59A",
"accent": "#4E4E4E"
}
},
{
"name": "cab",
"colors": {
"background": "#F6D305",
"primary": "#1F1F1F",
"accent": "#424242"
}
},
{
"name": "cloud",
"colors": {
"background": "#f1f2f0",
"primary": "#35342f",
"accent": "#37bbe4"
}
},
{
"name": "lime",
"colors": {
"background": "#263238",
"primary": "#AABBC3",
"accent": "#aeea00"
}
},
{
"name": "white",
"colors": {
"background": "#ffffff",
"primary": "#222222",
"accent": "#dddddd"
}
},
{
"name": "tron",
"colors": {
"background": "#242B33",
"primary": "#EFFBFF",
"accent": "#6EE2FF"
}
},
{
"name": "blues",
"colors": {
"background": "#2B2C56",
"primary": "#EFF1FC",
"accent": "#6677EB"
}
},
{
"name": "passion",
"colors": {
"background": "#f5f5f5",
"primary": "#12005e",
"accent": "#8e24aa"
}
},
{
"name": "chalk",
"colors": {
"background": "#263238",
"primary": "#AABBC3",
"accent": "#FF869A"
}
},
{
"name": "paper",
"colors": {
"background": "#F8F6F1",
"primary": "#4C432E",
"accent": "#AA9A73"
}
},
{
"name": "neon",
"colors": {
"background": "#091833",
"primary": "#EFFBFF",
"accent": "#ea00d9"
}
},
{
"name": "pumpkin",
"colors": {
"background": "#2d3436",
"primary": "#EFFBFF",
"accent": "#ffa500"
}
},
{
"name": "onedark",
"colors": {
"background": "#282c34",
"primary": "#dfd9d6",
"accent": "#98c379"
}
}
]
}