From 9ca0995461da854e6c7c52f95e6ad6bcb549fe38 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 29 Jun 2020 18:13:42 -0300
Subject: [PATCH] :ok_hand: create Panel color object in theme

---
 client/components/mobile/Footer.jsx |  2 +-
 client/components/mobile/Header.jsx |  2 +-
 client/theme.js                     | 21 +++++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

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