rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Decreasing contrast of card border.

Browse source
This commit is contained in:
Roland 2022-11-30 20:18:59 -07:00
parent 595e82b354
commit d284419eaf
No known key found for this signature in database
GPG key ID: 9D6DBD3ACF11AB93
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/src/components/Theme.js
View file

@ -23,7 +23,7 @@ import {
TabPane as TAB_PANE,
TextArea as TEXTAREA
} from "semantic-ui-react";
import {isEmpty, ColorToSemanticHexColor} from "./Common";
import {ColorToSemanticHexColor, isEmpty} from "./Common";
export const darkTheme = 'dark';
export const lightTheme = 'light';
@ -293,11 +293,14 @@ export function CardIcon(props) {
}
export function Card({color, ...props}) {
const {inverted} = useContext(ThemeContext);
props['style'] = props['style'] || {};
let hexColor = ColorToSemanticHexColor(color);
if (hexColor) {
let emphasisColor = ColorToSemanticHexColor(color);
if (emphasisColor) {
// Increase drop shadow to emphasize color.
props['style']['boxShadow'] = `0 0 0 2px #d4d4d5, 0 5px 0 0 ${hexColor}, 0 0px 3px 0 #d4d4d5`;
const borderColor = inverted ? '#888' : '#ddd';
props['style']['boxShadow'] = `0 0 0 2px ${borderColor}, 0 5px 0 0 ${emphasisColor}, 0 0px 3px 0 #d4d4d5`;
}
return <CARD {...props}/>
}