Fix styling issues

Author: mchudy

example/src/@types/redux-devtools-themes.d.ts

@@ -3,4 +3,5 @@ declare module 'redux-devtools-themes' {
 
 declare module 'react-base16-styling' {
     export const createStyling: any;
+    export const invertTheme: any;
 }

example/src/ReactNativeMonitor.tsx

@@ -107,11 +107,8 @@ function createIntermediateState(
 }
 
 function createThemeState(props: any) {
-  const base16Theme = getBase16Theme(props.theme, base16Themes);
-  console.warn(base16Theme);
-  console.warn(props);
-  const styling = createStylingFromTheme(props.theme);
-  console.warn(styling('inspector').style);
+  const base16Theme = getBase16Theme('nicinabox', base16Themes);
+  const styling = createStylingFromTheme('nicinabox');
   return { base16Theme, styling };
 }
 
@@ -123,7 +120,7 @@ export class ReactNativeMonitor extends React.Component<
   static defaultProps = {
     select: (state: any) => state,
     supportImmutable: false,
-    theme: 'inspector',
+    theme: 'nicinabox',
     invertTheme: false
   };
 
@@ -179,7 +176,7 @@ export class ReactNativeMonitor extends React.Component<
     const { action, nextState, delta, error, themeState } = this.state;
     const { base16Theme, styling } = themeState;
     return (
-      <View style={styles.container}>
+      <View {...styling('inspector')}>
         <ActionList
           {...{
             actions,

example/src/themes/inspector.ts

@@ -18,4 +18,3 @@ export default {
     base0E: '#EC31C0',
     base0F: '#a16946'
   };
-  

example/src/utils/createStylingFromTheme.ts

@@ -1,8 +1,7 @@
-import { createStyling } from 'react-base16-styling';
+import { createStyling, invertTheme } from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import inspector from '../themes/inspector';
 import * as reduxThemes from 'redux-devtools-themes';
-import * as inspectorThemes from '../themes';
 import { StyleSheet } from 'react-native';
 
 const colorMap = (theme: any) => ({
@@ -33,7 +32,15 @@ const colorMap = (theme: any) => ({
 
 const getSheetFromColorMap = (map: ReturnType<typeof colorMap>) => ({
   inspector: {
-    flex: 1
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    left: 0,
+    height: 200,
+    padding: 5,
+    borderTopWidth: 1,
+    borderTopColor: map.BORDER_COLOR,
+    backgroundColor: map.BACKGROUND_COLOR
   }
   //   'flex-direction': 'column',
   //   width: '100%',
@@ -368,27 +375,20 @@ const getSheetFromColorMap = (map: ReturnType<typeof colorMap>) => ({
   // }
 });
 
-let themeSheet;
 
 const getDefaultThemeStyling = (theme: string) => {
-  themeSheet = getSheetFromColorMap(colorMap(theme));
+  const themeSheet = getSheetFromColorMap(colorMap(theme));
   return StyleSheet.create(themeSheet as any);
 };
 
-export const base16Themes = { ...reduxThemes, ...inspectorThemes };
+export const base16Themes = reduxThemes;
 
 export const createStylingFromTheme = createStyling(getDefaultThemeStyling, {
-  defaultBase16: inspector,
+  defaultBase16: (reduxThemes as any).nicinabox,
   reduxThemes
 });
 
-const styling = createStylingFromTheme('inspector');
-console.warn(styling);
-console.warn(styling('rightSliderRotateShown'));
-
-
-
 // export const createStylingFromTheme = createStyling(getStylingFromBase16, {
 //   defaultBase16: inspector,
 //   base16Themes
-// });
+// });