Faster styles (#120)

* separate dynamic and static styles to decrease load time

* back to standard names

Author: alexpareto

renderer/components/eyelogo.js

@@ -3,26 +3,38 @@ import * as globalStyles from '../globalStyles';
 export default props => {
   return (
     <div className="holder">
-      <img className="eyelogo" src="/static/icons/splish-eyelogo.png" />
+      <img
+        className="eyelogo"
+        src="/static/icons/splish-eyelogo.png"
+        height={props.height}
+      />
       {props.withText ? <span className="text">splish</span> : null}
       <style jsx>{`
         .holder {
           display: flex;
-          height: ${props.height}px;
           flex-direction: row;
           align-items: center;
           justify-content: center;
         }
         .eyelogo {
-          height: ${props.height}px;
           margin-right: 7px;
         }
 
         .text {
-          font-size: ${props.height - 5}px;
           font-weight: bold;
         }
       `}</style>
+      <style jsx>{`
+        .text {
+          font-size: ${props.height - 5}px;
+        }
+        .holder {
+          height: ${props.height}px;
+        }
+        .text {
+          height: ${props.height}px;
+        }
+      `}</style>
     </div>
   );
 };

renderer/containers/login/login.js

@@ -247,12 +247,8 @@ class Login extends React.Component {
             overflow: 'visible',
           }}
         >
-          <div className="eye-logo">
-            <EyeLogo height={30} withText={true} />
-          </div>
-
           <div className="logo">
-            <Logo size={170} />
+            <EyeLogo height={40} withText={true} />
           </div>
           {this.renderLogin()}
           {this.renderSignUp()}

renderer/containers/mainMenu/mainMenu.js

@@ -54,7 +54,7 @@ class MainMenu extends React.Component {
           <Link href="/movingStill" prefetch>
             <div className="action-button">
               <img className="icon" src="/static/icons/splish-liquidlogo.png" />
-              <span>liquigrapher</span>
+              <span>animagrapher</span>
             </div>
           </Link>
         </div>
@@ -82,11 +82,11 @@ class MainMenu extends React.Component {
             }
 
             .action-button {
-              height: 80px;
+              height: 100px;
               font-size: 24px;
               font-weight: normal;
               cursor: pointer;
-              line-height: 80px;
+              line-height: 100px;
               display: flex;
               flex-direction: row;
               align-items: center;

renderer/containers/profile/profile.js

@@ -242,7 +242,7 @@ class Profile extends React.Component {
           .export-holder {
             display: inline-flex;
             box-sizing: border-box;
-            padding: 40px 20px;
+            padding: 80px 20px;
             width: 69%;
             height: 100%;
             overflow: scroll;