Home screen and PanelButtons

website/src/ui/style.js

@@ -1,4 +1,4 @@
-export const colorInfo = {
+let colorInfo = {
   text: '#000000',
   textInverse: '#FFFFFF',
   textPlaceholder: '#EEEEEE',
@@ -15,7 +15,14 @@ export const colorInfo = {
   uncheckedCheckboxHover: '#808080',
 }
 
-export const sizeInfo = {
+Object.assign(colorInfo, {
+  panelButtonBackground: colorInfo.headerButtonBackground,
+  panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
+  panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
+  disabledPanelButtonBackground: colorInfo.disabledButtonBackground,
+})
+
+const sizeInfo = {
   headerHeight: 60,
   imageMargin: 5, // The margin around images
   iconMargin: 10, // The margin around icons
@@ -23,9 +30,12 @@ export const sizeInfo = {
   buttonHeight: 40,
   minButtonWidth: 100,
   checkboxSize: 25,
+  panelButtonSize: 200,
+  panelIconSize: 170,
+  panelTextOffset: 130,
 }
 
-export const fontInfo = {
+const fontInfo = {
   family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind
   size: {
     small: '10pt',
@@ -40,3 +50,5 @@ export const fontInfo = {
     'dimmed': colorInfo.grayText,
   }
 }
+
+export { colorInfo, sizeInfo, fontInfo }