[Feat] Tabelau UI redesign

* update splash and config screens to look more like Tableau native UI Signed-off-by: Valentine <vpanch@softserveinc.com>
keplergl · May 20, 2020 · 72bfb25 · 72bfb25
1 parent a7c802b
commit 72bfb25
Show file tree

Hide file tree

Showing 15 changed files with 367 additions and 235 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,7 +5,9 @@ html {
 html, body {
   max-width: 100%;
   overflow-x: hidden;
-  font-family: "Avenir";
+  font-family: "Roboto", "Helvetica", "Arial";
+  background-color: #F5F5F5;
+  font-size: 12px;
 }
 ::-webkit-scrollbar {
   width: 0px;  /* remove scrollbar space */

diff --git a/src/App.js b/src/App.js
@@ -72,6 +72,7 @@ import {
 import dbLogo from './assets/dblogo.png';
 import ssLogo from './assets/sslogo.jpg';
 import kepLogo from './assets/kepler.gl-logo_2x.png';
+import { Typography } from '@material-ui/core';
 
 const MAPBOX_ACCESS_TOKEN =
   'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2p2OGVvejQwMDJxZzRma2dvdWQ2OTQwcSJ9.VbuIamTa_JayuD2yr5tjaA';
@@ -714,13 +715,17 @@ class App extends Component {
         // Placeholder sheet names. TODO: Bind to worksheet data
         return (
           <React.Fragment>
-            <Stepper stepIndex={this.state.stepIndex} steps={stepNames} />
-            <PickSheets
-              sheetNames={this.state.sheetNames}
-              configCallBack={this.configCallBack}
-              field={'ConfigSheet'}
-              ConfigSheet={tableauSettingsState.ConfigSheet || ''}
-            />
+            <div style={{padding: '24px'}}>
+              <Typography variant={'display1'} style={{color: '#333'}}>
+                Kepler.gl within Tableau Configuration
+              </Typography>
+              <PickSheets
+                sheetNames={this.state.sheetNames}
+                configCallBack={this.configCallBack}
+                field={'ConfigSheet'}
+                ConfigSheet={tableauSettingsState.ConfigSheet || ''}
+              />
+            </div>
             <StepButtons
               onNextClick={this.onNextStep}
               onPrevClick={this.onPrevStep}
@@ -738,14 +743,18 @@ class App extends Component {
       if (this.state.stepIndex === 2) {
         return (
           <React.Fragment>
-            <Stepper stepIndex={this.state.stepIndex} steps={stepNames} />
-            <CustomizeViolin
-              handleChange={this.handleChange}
-              customCallBack={this.customCallBack}
-              field={'configuration'}
-              tableauSettings={tableauSettingsState}
-              configSheetColumns={this.state.ConfigSheetStringColumns || []}
-            />
+            <div style={{padding: '24px'}}>
+              <Typography variant={'display1'} style={{color: '#333'}}>
+                Kepler.gl within Tableau Configuration
+              </Typography>
+              <CustomizeViolin
+                handleChange={this.handleChange}
+                customCallBack={this.customCallBack}
+                field={'configuration'}
+                tableauSettings={tableauSettingsState}
+                configSheetColumns={this.state.ConfigSheetStringColumns || []}
+              />
+            </div>
             <StepButtons
               onNextClick={this.onNextStep}
               onPrevClick={this.onPrevStep}
@@ -770,6 +779,7 @@ class App extends Component {
           <SplashScreen
             configure={this.configure}
             title="Kepler.gl within Tableau"
+            version={KEPLER_GL_VERSION}
             desc="Leverage the brilliance of Kepler.gl functionality, directly within Tableau!"
             ctaText="Configure"
             poweredBy={
@@ -786,30 +796,35 @@ class App extends Component {
                   <br /> Tableau Requirements: Tableau Desktop (Mac Only) 2018.3
                   or >= 2019.1.2 or Tableau Server >= 2018.3
                 </p>
-                <p className="info">Brought to you by: </p>
-                <a
-                  href="http://www.datablick.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={dbLogo} />
-                </a>{' '}
-                <a
-                  href="https://starschema.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={ssLogo} />
-                </a>
-                <p className="info">Powered by: </p>
-                <a
-                  href="https://github.com/uber/kepler.gl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={kepLogo} />
-                </a>
-            <p className="info">Version: {KEPLER_GL_VERSION}</p>
+                <div className="inline">
+                  <div>
+                    <p className="info">Brought to you by: </p>
+                    <a
+                      href="http://www.datablick.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={dbLogo} />
+                    </a>{' '}
+                    <a
+                      href="https://starschema.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={ssLogo} />
+                    </a>
+                  </div>
+                  <div>
+                    <p className="info">Powered by: </p>
+                    <a
+                      href="https://github.com/uber/kepler.gl"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={kepLogo} />
+                    </a>
+                  </div>
+                </div>
               </React.Fragment>
             }
           />

diff --git a/src/assets/tableau/css/style.css b/src/assets/tableau/css/style.css
@@ -3160,7 +3160,7 @@ Style guide: buttons-links.cta
   cursor: pointer;
   letter-spacing: 1px;
   line-height: 1;
-  font-size: 11px;
+  font-size: 12px;
   font-family: "Benton Sans Medium", Helvetica, sans-serif;
   color: #fff;
   text-transform: uppercase;
@@ -3510,7 +3510,7 @@ Style guide: buttons-links.toggle-links
     cursor: pointer;
     letter-spacing: 1px;
     line-height: 1;
-    font-size: 11px;
+    font-size: 12px;
     text-transform: uppercase;
     font-family: "Benton Sans Book", Helvetica, sans-serif;
     color: #e8762c;
@@ -14119,3 +14119,4 @@ Style guide: typography.text-stat
   @media (max-width: 960px) {
     .text-stat {
       font-size: 4em; } }
+
diff --git a/src/components/Configuration/ConfigScreen.js b/src/components/Configuration/ConfigScreen.js
@@ -38,18 +38,16 @@ const styles = {
 
 function ConfigScreen(props) {
   const {
-    classes,
     selectSheet,
     sheetNames,
     configTitle,
     listTitle,
     field,
     selectedValue } = props;
 
-  console.log('configScreen', props);
   return (
     <React.Fragment>
-      <div className="sheetScreen" style={{padding : 10, paddingBottom: 100 }}>
+      <div className="sheetScreen">
         <Grid
           container
           alignItems="center"