css fixes and removed placeholder (kubeflow#1260)

StatCan · Jul 24, 2018 · 7b16bef · 7b16bef
1 parent 8deef2d
commit 7b16bef
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 204 deletions.
diff --git a/components/gcp-click-to-deploy/src/App.tsx b/components/gcp-click-to-deploy/src/App.tsx
@@ -1,5 +1,7 @@
+import { MuiThemeProvider } from '@material-ui/core';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import { CommonCss, theme } from './Css';
 import DeployForm from './DeployForm';
 import Gapi from './Gapi';
 import Header from './Header';
@@ -16,7 +18,7 @@ declare global {
 
 const styles: { [p: string]: React.CSSProperties } = {
   app: {
-    backgroundColor: '#3b78e7',
+    backgroundColor: CommonCss.accent,
     display: 'flex',
     flexFlow: 'column',
     fontFamily: '"google sans", Helvetica',
@@ -53,7 +55,7 @@ const styles: { [p: string]: React.CSSProperties } = {
   rightPane: {
     backgroundColor: '#fff',
     borderRadius: 5,
-    boxShadow: '0px 3 10px 0 #555',
+    boxShadow: '0 5px 15px 0 #666',
     margin: 'auto',
     position: 'relative',
     width: 600,
@@ -91,41 +93,44 @@ class App extends React.Component<any, { signedIn: boolean }> {
 
   public render() {
     return (
-      <div style={styles.app}>
-        <Header />
-        <div style={styles.container}>
-          <div style={styles.content}>
-            <div style={styles.leftPane}>
-              <div style={styles.logoContainer}>
-                <img src={logo} style={styles.logoImg} />
-                <img src={kubeflowText} style={styles.logoText} />
+      <MuiThemeProvider theme={theme}>
+        <div style={styles.app}>
+          <Header />
+          <div style={styles.container}>
+            <div style={styles.content}>
+              <div style={styles.leftPane}>
+                <div style={styles.logoContainer}>
+                  <img src={logo} style={styles.logoImg} />
+                  <img src={kubeflowText} style={styles.logoText} />
+                </div>
+                <div style={styles.title}>Deploy on GCP</div>
+                <div>
+                  This deployer will guide you through the process of deploying
+                  Kubeflow on Google Cloud Platform. It also eliminates the
+                  need to install any tools on your machine.
+                </div>
+                <br />
+                <div>
+                  Specify details such as project, zone, name to create a
+                  Kubeflow deployment. Learn more at
+                  <a style={{ color: 'inherit', marginLeft: 5 }}
+                    href="https://kubeflow.org">https://kubeflow.org</a>
+                </div>
               </div>
-              <div style={styles.title}>Deploy on GCP</div>
-              <div>
-                This deployer will guide you through the process of deploying
-                Kubeflow on Google Cloud Platform. It also eliminates the
-                need to install any tools on your machine.
+              <div style={styles.rightPane}>
+                <Switch>
+                  <Route exact={true} path="/" component={Splash} />
+                  <PrivateRoute signedIn={this.state.signedIn} exact={true} path="/deploy" component={DeployForm} />
+                  <Route component={Page404} />
+                </Switch>
               </div>
-              <br />
-              <div>
-                Specify details such as project, zone, name to create a
-                Kubeflow deployment. Learn more at
-                <a style={{ color: 'inherit', marginLeft: 5 }}
-                  href='https://kubeflow.org'>https://kubeflow.org</a>
-              </div>
-            </div>
-            <div style={styles.rightPane}>
-              <Switch>
-                <Route exact={true} path='/' component={Splash} />
-                <PrivateRoute signedIn={this.state.signedIn} exact={true} path='/deploy' component={DeployForm} />
-                <Route component={Page404} />
-              </Switch>
             </div>
           </div>
         </div>
-      </div>
+      </MuiThemeProvider >
     );
   }
+
 }
 
 export default App;
diff --git a/components/gcp-click-to-deploy/src/Css.ts b/components/gcp-click-to-deploy/src/Css.ts
@@ -0,0 +1,62 @@
+import { createMuiTheme } from '@material-ui/core';
+
+export const CommonCss = {
+  accent: '#3b78e7',
+};
+
+export const theme = createMuiTheme({
+  overrides: {
+    MuiButton: {
+      containedPrimary: {
+        '&:hover': {
+          backgroundColor: '#3d8df5',
+        },
+        backgroundColor: '#1a73e8',
+      },
+      root: {
+        color: CommonCss.accent,
+        fontFamily: '"google sans", Helvetica',
+        fontWeight: 'inherit',
+        textTransform: 'none',
+      },
+    },
+    MuiFormLabel: {
+      focused: {
+        color: CommonCss.accent + ' !important',
+      },
+      root: {
+        color: '#333',
+        fontSize: 18,
+        fontWeight: 500,
+        margin: '12px 10px',
+      },
+    },
+    MuiInput: {
+      input: {
+        color: '#555',
+        fontSize: 15,
+        height: 40,
+        padding: '0 10px',
+      },
+      root: {
+        marginTop: '25px !important',
+      },
+      underline: {
+        '&:after': {
+          borderBottom: `2px solid ${CommonCss.accent}`,
+        },
+        '&:before': {
+          borderBottom: '1px solid #ccc',
+        },
+        '&:hover:not($disabled):not($focused):not($error):before': {
+          borderBottom: '1px solid #555',
+        },
+      },
+    },
+    MuiInputLabel: {
+      root: {
+        color: '#555',
+      },
+    },
+  },
+});