Additional shrinkage

website/src/Home/Home.js

@@ -13,7 +13,7 @@ export class Home extends Component {
     this.props.onChangeTitle('Home')
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     this.props.onChangeTitle('')
   }
 

website/src/Modal/MessageModal.js

@@ -37,7 +37,7 @@ export class MessageModal extends React.Component {
         <form onSubmit={this.onSubmit} id='messageModal'>
           <Row>
             <Row.Item>
-              <Icon name={icon} size={sizeInfo.messageModalIcon} />
+              <Icon name={icon} size={sizeInfo.modalMessageIcon} />
             </Row.Item>
             <Row.Item grow>
               <Column height='100%'>

website/src/Modal/YesNoMessageModal.js

@@ -35,7 +35,7 @@ export class YesNoMessageModal extends React.Component {
         <form onSubmit={this.onSubmit} id='messageModal'>
           <Row>
             <Row.Item>
-              <Icon name='help' size={sizeInfo.messageModalIcon} />
+              <Icon name='help' size={sizeInfo.modalMessageIcon} />
             </Row.Item>
             <Row.Item grow>
               <Column height='100%'>

website/src/ui/Button.js

@@ -49,7 +49,7 @@ class Button extends Component {
     return (
       <input name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
         disabled={disabled} form={submit}
-        style={[Button.style.button, { width, minWidth: sizeInfo.minButtonWidth }]}
+        style={[Button.style.button, { width, minWidth: sizeInfo.buttonMinWidth }]}
         onClick={onClick} value={text} />
     )
   }

website/src/ui/HeaderButton.js

@@ -12,18 +12,16 @@ class HeaderButton extends Component {
   }
 
   static style = {
-    button: {
+    background: colorInfo.headerButtonBackground,
-      background: colorInfo.headerButtonBackground,
+    verticalAlign: 'middle',
-      verticalAlign: 'middle',
+    borderWidth: 0,
-      borderWidth: 0,
+    padding: '0 0 0 0',
-      padding: '0 0 0 0',
+    outline: 'none',
-      outline: 'none',
+    ':hover': {
-      ':hover': {
+      background: colorInfo.headerButtonBackgroundHover,
-        background: colorInfo.headerButtonBackgroundHover,
+    },
-      },
+    ':active': {
-      ':active': {
+      background: colorInfo.headerButtonBackgroundActive,
-        background: colorInfo.headerButtonBackgroundActive,
-      }
     }
   }
 
@@ -33,13 +31,13 @@ class HeaderButton extends Component {
     let content = null
 
     if (image) {
-      content = (<Image source={image} width={size} height={size} />)
+      content = (<Image source={image} width={size} height={size} margin={sizeInfo.headerButtonMargin} />)
     } else if (icon) {
-      content = (<Icon name={icon} size={size} />)
+      content = (<Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />)
     }
 
     return (
-      <button type='button' style={[{ height: size, width: size }, HeaderButton.style.button]} onClick={onClick}>
+      <button type='button' style={[{ height: size, width: size }, HeaderButton.style]} onClick={onClick}>
         {content}
       </button>
     )

website/src/ui/HeaderText.js

@@ -10,16 +10,16 @@ class HeaderText extends Component {
 
   static style = {
     position: 'relative',
-    top: 3,
+    top: sizeInfo.headerTextOffset,
     display: 'inline-block',
-    fontSize: fontInfo.size.huge,
+    fontSize: fontInfo.size.header,
     fontFamily: fontInfo.family,
     color: fontInfo.color.normal,
     textAlign: 'left',
     background: 'transparent',
     verticalAlign: 'middle',
     borderWidth: 0,
-    paddingLeft: 10,
+    paddingLeft: sizeInfo.headerPaddingLeft,
   }
 
   render() {

website/src/ui/Image.js

@@ -8,11 +8,12 @@ class Image extends Component {
     source: PropTypes.string,
     width: PropTypes.number,
     height: PropTypes.number,
+    margin: PropTypes.number,
   }
 
   render() {
     let { source, width, height } = this.props
-    const margin = sizeInfo.imageDefaultMargin
+    const margin = this.props.margin || sizeInfo.imageDefaultMargin
 
     width = width ? (width - margin * 2) : null
     height = height ? (height - margin * 2) : null

website/src/ui/PanelButton.js

@@ -45,7 +45,7 @@ class PanelButton extends Component {
           <Icon name={icon} size={sizeInfo.panelButtonIcon} margin={sizeInfo.panelButtonIconMargin} />
           <span style={{
             position: 'absolute',
-            top: sizeInfo.panelTextOffset,
+            top: sizeInfo.panelButtonTextOffset,
             left: 0,
             display: 'block',
             fontSize: fontInfo.size.huge,

website/src/ui/Text.js

@@ -7,7 +7,7 @@ class Text extends Component {
   static propTypes = {
     size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
     color: PropTypes.oneOf(['normal', 'inverse', 'alert', 'dimmed']),
-    margin: PropTypes.number,
+    margin: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     children: PropTypes.node,
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     hidden: PropTypes.bool,

website/src/ui/style.js

@@ -41,41 +41,54 @@ Object.assign(colorInfo, {
 })
 
 const sizeInfo = {
-  headerHeight: 60,
   imageDefaultMargin: 5,
   iconDefaultMargin: 10,
+
+  headerHeight: 40,
   headerBorderWidth: 1,
-  listBorderWidth: 1,
+  headerPaddingLeft: 10,
+  headerTextOffset: 2,
+  headerButtonMargin: 8,
+
+  footerTextMargin: '5px 0px 5px 10px',
+
   buttonHeight: 40,
   buttonPadding: '0 15px 0 15px',
-  minButtonWidth: 100,
+
   checkboxSize: 25,
   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,
+  panelButtonTextOffset: 125,
+  panelButtonSpacing: 30,
+
+  formBoxRadius: 5,
   formColumnSpacing: 20,
   formRowSpacing: 20,
-  loginLogoWidth: 250,
-  footerTextMargin: 10,
-  panelButtonSpacing: 30,
   formBoundIcon: 30,
   formBoundIconMargin: 0,
-  listIcon: 25,
   formButtonLarge: 225,
+
+  listBorderWidth: 1,
+  listTopBottomGap: 10,
+  listIcon: 25,
+  listIconMargin: '5px 10px 5px 10px',
+
+  modalWidth: 450,
+  modalShadowWidth: 25,
+  modalMessageIcon: 150,
+
+  inputPadding: 5,
+  inputBorderRadius: 5,
+
+  loaderSize: 20,
+  loaderSpacing: 5,
+
+  loginLogoWidth: 250,
 }
 
 const fontInfo = {
@@ -85,6 +98,8 @@ const fontInfo = {
     medium: '12pt',
     large: '14pt',
     huge: '26pt',
+    header: '18pt',
+    footer: '8pt',
   },
   color: {
     'normal': colorInfo.text,