theme: add modal styles (#143)

* basic modal styles * update styling * update paper styling * bump bpanel-ui
bpanel-org · Dec 7, 2018 · d88e391 · d88e391
1 parent b6bf2e2
commit d88e391
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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,
   /// ***********