diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 84e50d1b..45a3d87d 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { prop, remSize } from '../../theme'; -const background = prop('Button.default.background'); +const background = prop('Panel.default.background'); const textColor = prop('primaryTextColor'); const Footer = styled.div` diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index d638c1ac..35ccf538 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { prop, remSize } from '../../theme'; -const background = prop('Button.default.background'); +const background = prop('Panel.default.background'); const textColor = prop('primaryTextColor'); const Header = styled.div` diff --git a/client/theme.js b/client/theme.js index 561fd835..cc9cb48f 100644 --- a/client/theme.js +++ b/client/theme.js @@ -88,6 +88,13 @@ export default { Icon: { default: grays.middleGray, hover: grays.darker + }, + Panel: { + default: { + foreground: colors.black, + background: grays.light, + border: grays.middleLight, + }, } }, [Theme.dark]: { @@ -120,6 +127,13 @@ export default { Icon: { default: grays.middleLight, hover: grays.lightest + }, + Panel: { + default: { + foreground: grays.light, + background: grays.dark, + border: grays.middleDark, + }, } }, [Theme.contrast]: { @@ -152,6 +166,13 @@ export default { Icon: { default: grays.mediumLight, hover: colors.yellow + }, + Panel: { + default: { + foreground: grays.light, + background: grays.dark, + border: grays.middleDark, + }, } }, };