Singleton themes

squarenotsquare/src/screens/styles/AppStyles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
-import * as colors from '../../themes/Colors';
+import Colors from '../../themes/Colors';
-import * as fonts from '../../themes/Fonts';
+import Fonts from '../../themes/Fonts';
-import * as metrics from '../../themes/Metrics';
+import Metrics from '../../themes/Metrics';
 
 export const styles = StyleSheet.create({
   flex: {flex: 1},
@@ -28,7 +28,7 @@ export const styles = StyleSheet.create({
   stretch: {alignSelf: 'stretch'},
   absolute: {
     position: 'absolute',
-    top: metrics.screenSections.headerHeight,
+    top: Metrics.screenSections.headerHeight,
     bottom: 0,
     left: 0,
     right: 0,
@@ -42,24 +42,20 @@ export const styles = StyleSheet.create({
   rightText: {textAlign: 'right'},
   leftText: {textAlign: 'left'},
   
-  headerTitleFont: {fontSize: fonts.headerTitle.size},
+  headerTitleFont: {fontSize: Fonts.headerTitle.size},
-  largeFont: {fontSize: fonts.large.size},
+  largeFont: {fontSize: Fonts.large.size},
-  mediumFont: {fontSize: fonts.medium.size},
+  mediumFont: {fontSize: Fonts.medium.size},
-  smallFont: {fontSize: fonts.small.size},
+  smallFont: {fontSize: Fonts.small.size},
-  tinyFont: {fontSize: fonts.tiny.size},
+  tinyFont: {fontSize: Fonts.tiny.size},
-  subFont: {fontSize: fonts.subFont.size},
+  subFont: {fontSize: Fonts.subFont.size},
-  tickFont: {fontSize: fonts.tickFont.size},
   
   italic: {fontStyle: 'italic'},
-  greyText: {color: colors.material.grey600},
+  greyText: {color: Colors.material.grey600},
-  redText: {color: colors.material.red800},
+  redText: {color: Colors.material.red800},
-  blueText: {color: colors.material.blue400},
+  blueText: {color: Colors.material.blue400},
   boldText: {fontWeight: 'bold'},
   
-  lightText: {color: colors.impulseColors.lightText},
-  darkText: {color: colors.impulseColors.black},
-  
   body: {
-    backgroundColor: colors.material.light,
+    backgroundColor: Colors.material.light,
   }
 })

squarenotsquare/src/themes/Colors.js

@@ -1,4 +1,5 @@
-export const material = {
+class AppColors {
+  material = {
     dark: '#212121',
     light: '#ffffff',
   
@@ -23,9 +24,13 @@ export const material = {
     grey800: '#424242',
     grey800dark: '#1b1b1b',
     green800: '#2e7d32',
-}
+  }
   
-export const fonts = {
+  fonts = {
     dark: '#000000',
     light: '#ffffff'
-};
+  };
+}
+
+const Colors = new AppColors();
+export default Colors;

squarenotsquare/src/themes/Fonts.js

@@ -1,49 +1,55 @@
 import {PixelRatio} from 'react-native';
 
-const scalar = PixelRatio.getFontScale();
+class AppFonts {
+  constructor() {
+    this.scalar = PixelRatio.getFontScale();
     
-function normalizeFont(size) {
+    this.headerTitle = {
-  return size * scalar
-};
-
-export const fonts = {
-  headerTitle: {
       fam: 'arial',
-    size: normalizeFont(30),
+      size: this.normalizeFont(30),
-  },
+    }
     
-  sectionHeader: {
+    this.sectionHeader = {
       fam: 'arial',
-    size: normalizeFont(26),
+      size: this.normalizeFont(26),
-  },
+    }
     
-  large: {
+    this.large = {
       fam: 'arial',
-    size: normalizeFont(22),
+      size: this.normalizeFont(22),
-  },
+    }
     
-  medium: {
+    this.medium = {
       fam: 'arial',
-    size: normalizeFont(20),
+      size: this.normalizeFont(20),
-  },
+    }
     
-  small: {
+    this.small = {
       fam: 'arial',
-    size: normalizeFont(16),
+      size: this.normalizeFont(16),
-  },
+    }
     
-  tiny: {
+    this.tiny = {
       fam: 'arial',
-    size: normalizeFont(14),
+      size: this.normalizeFont(14),
-  },
+    }
     
-  mini: {
+    this.mini = {
       fam: 'arial',
-    size: normalizeFont(10),
+      size: this.normalizeFont(10),
-  },
+    }
     
-  subFont: {
+    this.subFont = {
       fam: 'arial',
-    size: normalizeFont(8),
+      size: this.normalizeFont(8),
-  },
+    }
+  }
+
+  normalizeFont(size) {
+    let newSize = size * this.scalar;
+    return newSize;
+  };
 }
+
+const Fonts = new AppFonts();
+export default Fonts;

squarenotsquare/src/themes/Icons.js

@@ -1,5 +1,10 @@
-export const squareIcons = {
+class AppIcons {
+  squareIcons = {
     settings: 'cog-outline',
     toggleOn: 'toggle-switch-on',
     toggleOfff: 'toggle-switch-off'
-};
+  };
+}
+
+const Icons = new AppIcons();
+export default Icons;

squarenotsquare/src/themes/Metrics.js

@@ -1,25 +1,35 @@
 import { PixelRatio, Dimensions } from "react-native";
 
-let scalar = PixelRatio.get();
+class AppMetrics {
+  constructor(dimensions = Dimensions.get('window')) {
+    this.scalar = PixelRatio.get();
 
-function normalize(size){
+    let height = dimensions.height;
-  return (size * scalar);
+    let width = dimensions.width;
-}
-
-let dimensions = Dimensions.get('window');
     
-let height = dimensions.height;
+    if (width > height) {
-let width = dimensions.width;
+      this.screenHeight = width;
+      this.screenWidth = height;
+    } else {
+      this.screenWidth = width;
+      this.screenHeight = height;
+    }
+  }
 
-let screenWidth = width;
+  normalize(size){
-let screenHeight = height;
+    return (size * this.scalar);
+  }
 
-if (width > height) {
+  screenSections = {
-  screenHeight = width;
+    headerHeight: this.normalize(20),
-  screenWidth = height;
+    sectionWidth: this.screenWidth
+  }
 }
 
-export const screenSections = {
+const Metrics = new AppMetrics();
-  headerHeight: normalize(20),
+export default Metrics;
-  sectionWidth: screenWidth
+
+export function buildTestMetrics(dimensions){
+  const Metrics = new AppMetrics(dimensions);
+  return Metrics;
 }