From d88e391d6ae59e1337fe6182a13881a55dc2c50c Mon Sep 17 00:00:00 2001
From: Buck Perley <bucko.perley@gmail.com>
Date: Fri, 7 Dec 2018 11:11:20 -0800
Subject: [PATCH] theme: add modal styles (#143)

* basic modal styles

* update styling

* update paper styling

* bump bpanel-ui
---
 package-lock.json                           |  6 +--
 package.json                                |  2 +-
 webapp/config/themeConfig/themeCreator.js   | 57 ++++++++++++++++++---
 webapp/config/themeConfig/themeVariables.js |  7 +--
 4 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a7975aa2..90d56005 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,9 +31,9 @@
       }
     },
     "@bpanel/bpanel-ui": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@bpanel/bpanel-ui/-/bpanel-ui-0.0.16.tgz",
-      "integrity": "sha512-pT5o4FkwqWwrf71vzVbmyO8CUTqUIT7wNtsG4dPop4ae9RBGAComvFJaa7gC9wizx3PlpoZVZERKDxzzywmmeA==",
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@bpanel/bpanel-ui/-/bpanel-ui-0.0.17.tgz",
+      "integrity": "sha512-QYSp9fBOu5bPx4Eptrb6V88vSUKijRBB4t3cY0MOm2hAtZ8brH+g4ykjfJt0smZd3Kdb4GBTLbjdmjeIaLyiGg==",
       "requires": {
         "bsert": "0.0.4",
         "font-awesome": "^4.7.0",
diff --git a/package.json b/package.json
index 19d047ef..667bf370 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "npm": ">=5.7.1"
   },
   "dependencies": {
-    "@bpanel/bpanel-ui": "0.0.16",
+    "@bpanel/bpanel-ui": "0.0.17",
     "@bpanel/bpanel-utils": "0.1.4",
     "aphrodite": "1.2.5",
     "autoprefixer": "7.1.5",
diff --git a/webapp/config/themeConfig/themeCreator.js b/webapp/config/themeConfig/themeCreator.js
index 026571a8..4f75cf7d 100644
--- a/webapp/config/themeConfig/themeCreator.js
+++ b/webapp/config/themeConfig/themeCreator.js
@@ -47,6 +47,7 @@ const themeCreator = (_themeVariables = {}, _themeConfig = {}) => {
     borderTransparent,
     border1,
     border2,
+    borderDark,
     borderRadius,
     /// ***********
     /// TRANSITIONS
@@ -84,9 +85,7 @@ const themeCreator = (_themeVariables = {}, _themeConfig = {}) => {
   const appHeight = `calc(100vh - ${footerHeight})`;
   const lowlightGradient =
     themeColors.lowlightGradient ||
-    `linear-gradient(to left, ${themeColors.lowlight1}, ${
-      themeColors.lowlight2
-    })`;
+    `linear-gradient(to left, ${themeColors.lowlight1}, ${themeColors.lowlight2})`;
 
   /// ******
   /// THEME CONFIG
@@ -523,14 +522,58 @@ const themeCreator = (_themeVariables = {}, _themeConfig = {}) => {
         lineHeight: makeRem(fontSizeNormal),
         color: themeColors.black,
         padding: makeRem(fontSizeBase),
-        boxShadow: '1px 0px 4px 3px black inset',
+        boxShadow: '1px 1px 3px 2px grey inset',
         ...makeGutter('margin', { bottom: 1 }),
         paddingBottom: '1px',
         backgroundColor: themeColors.white
       },
       error: {
         backgroundColor: themeColors.error,
-        color: themeColors.white
+        color: themeColors.white,
+        boxShadow: 'none'
+      }
+    },
+
+    modal: {
+      container: {
+        background: themeColors.darkerBg,
+        color: themeColors.black
+      },
+      dialoge: {
+        borderRadius: '0px',
+        border: borderDark,
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 9999,
+        maxWidth: '100%',
+        maxHeight: '100%',
+        overflow: 'auto'
+      },
+      content: {
+        backgroundColor: themeColors.primary,
+        border: 'none',
+        borderRadius: '0px'
+      },
+      header: {
+        backgroundColor: themeColors.lightBg,
+        border: 'none',
+        borderRadius: '0px'
+      },
+      footer: {
+        border: 'none',
+        height: makeRem(2, fontSizeBase),
+        fontSize: fontSizeSmall,
+        backgroundColor: themeColors.lightBg
+      },
+      hidden: {
+        display: 'none'
+      },
+      closeButton: {
+        ':hover': {
+          cursor: 'pointer'
+        }
       }
     }
   };
@@ -561,7 +604,8 @@ const themeCreator = (_themeVariables = {}, _themeConfig = {}) => {
     tableRowStyle,
     tabMenu,
     text,
-    paper
+    paper,
+    modal
   } = mergedThemeConfig;
 
   const styleSheet = {
@@ -581,6 +625,7 @@ const themeCreator = (_themeVariables = {}, _themeConfig = {}) => {
     tabMenu: StyleSheet.create(tabMenu),
     text: StyleSheet.create(text),
     paper: StyleSheet.create(paper),
+    modal: StyleSheet.create(modal),
     themeVariables: mergedThemeVariables,
     logoUrl,
     tableRowStyle
diff --git a/webapp/config/themeConfig/themeVariables.js b/webapp/config/themeConfig/themeVariables.js
index a9c54935..405b2f8d 100644
--- a/webapp/config/themeConfig/themeVariables.js
+++ b/webapp/config/themeConfig/themeVariables.js
@@ -71,6 +71,7 @@ const themeColors = {
   light2Bg: 'rgba(255, 255, 255, 0.2)', // transparent white 2
   mediumBg: 'rgba(0, 255, 224, .2)', // transparent teal
   darkBg: 'rgba(0, 0, 0, .4)', // transparent black
+  darkerBg: 'rgba(0, 0, 0, .7)', // transparent black
   // Constants
   white: '#fff',
   black: '#000',
@@ -86,9 +87,8 @@ const borderWidth = '1px';
 const borderStyle = 'solid';
 const border1 = `${borderWidth} ${borderStyle} ${themeColors.white}`;
 const border2 = `${borderWidth} ${borderStyle} ${themeColors.light2Bg}`;
-const borderTransparent = `${borderWidth} ${borderStyle} ${
-  themeColors.transparent
-}`;
+const borderDark = `${borderWidth} ${borderStyle} ${themeColors.lowlight1}`;
+const borderTransparent = `${borderWidth} ${borderStyle} ${themeColors.transparent}`;
 const borderRadius = '5px';
 
 /// ***********
@@ -160,6 +160,7 @@ const themeVariables = {
   borderStyle,
   border1,
   border2,
+  borderDark,
   borderTransparent,
   borderRadius,
   /// ***********