Clean all sizes, fonts and colors into style.js

website/src/ui/style.js

@@ -2,26 +2,38 @@ let colorInfo = {
   text: '#000000',
   textInverse: '#FFFFFF',
   textPlaceholder: '#EEEEEE',
-  alertText: '#FF0000',
-  grayText: '#B0B0B0',
+  textAlert: '#FF0000',
+  textGray: '#B0B0B0',
+  textDisabled: '#AAAAAA',
+
+  border: '#B2B2B2',
+
+  modalShadow: '#000000',
+  modalBackground: '#FFFFFF',
+
+  inputBackground: '#FFFFFF',
+
   buttonBackground: '#3498DB',
   buttonBackgroundHover: '#3CB0FD',
   buttonBackgroundActive: '#1A72AC',
+  buttonDisabledBackground: '#E0E0E0',
+
+  headerBorder: '#B2B2B2',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
   headerButtonBackgroundActive: '#AAAAAA',
-  headerBorder: '#B2B2B2',
-  disabledButtonBackground: '#E0E0E0',
-  modalBackground: '#FFFFFF',
-  uncheckedCheckbox: '#A0A0A0',
-  uncheckedCheckboxHover: '#808080',
+
+  checkboxUnchecked: '#A0A0A0',
+  checkboxUncheckedHover: '#808080',
+  checkmark: '#FFFFFF',
 }
 
 Object.assign(colorInfo, {
   panelButtonBackground: colorInfo.headerButtonBackground,
   panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
   panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
-  disabledPanelButtonBackground: colorInfo.disabledButtonBackground,
+  panelDisabledButtonBackground: colorInfo.buttonDisabledBackground,
+
   listBackground: '#FFFFFF',
   listBackgroundHover: colorInfo.headerButtonBackgroundHover,
   listBackgroundActive: '#E7E5E5',
@@ -30,18 +42,40 @@ Object.assign(colorInfo, {
 
 const sizeInfo = {
   headerHeight: 60,
-  imageMargin: 5, // The margin around images
-  iconMargin: 10, // The margin around icons
+  imageDefaultMargin: 5,
+  iconDefaultMargin: 10,
   headerBorderWidth: 1,
   listBorderWidth: 1,
   buttonHeight: 40,
+  buttonPadding: '0 15px 0 15px',
   minButtonWidth: 100,
   checkboxSize: 25,
-  panelButtonSize: 200,
-  panelIconSize: 170,
+  checkmarkBorder: '0 3px 3px 0',
+  panelButton: 200,
+  panelButtonIcon: 170,
+  panelButtonIconMargin: 0,
   panelTextOffset: 120,
   formBoxRadius: 5,
   listTopBottomGap: 10,
+  modalWidth: 450,
+  modalShadowWidth: 25,
+  inputPadding: 5,
+  inputBorderRadius: 5,
+  listIconMargin: '5px 10px 5px 10px',
+  loaderSize: 20,
+  loaderSpacing: 5,
+  panelButtonBorderRadius: 25,
+  panelButtonBorderWidth: 2,
+  messageModalIcon: 150,
+  formColumnSpacing: 20,
+  formRowSpacing: 20,
+  loginLogoWidth: 250,
+  footerTextMargin: 10,
+  panelButtonSpacing: 30,
+  formBoundIcon: 30,
+  formBoundIconMargin: 0,
+  listIcon: 25,
+  formButtonLarge: 225,
 }
 
 const fontInfo = {
@@ -55,8 +89,8 @@ const fontInfo = {
   color: {
     'normal': colorInfo.text,
     'inverse': colorInfo.textInverse,
-    'alert': colorInfo.alertText,
-    'dimmed': colorInfo.grayText,
+    'alert': colorInfo.textAlert,
+    'dimmed': colorInfo.textGray,
   }
 }