👌 create Panel color object in theme

Author: ghalestrilo

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`

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`

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,
+      },
     }
   },
 };