[Canvas] K7 design related fixes (#30833)

* K7 design related fixes * remove compressed from table for consistency * remove fullscreen styles related to K6 nav elements
elastic · Feb 13, 2019 · 8c8a4a2 · 8c8a4a2
1 parent 747bf2a
commit 8c8a4a2
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 21 deletions.
diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
@@ -1,3 +1,5 @@
+$canvasLayoutFontSize: $euiFontSizeS;
+
 .canvasLayout {
   display: flex;
   background: $euiPageBackgroundColor;
@@ -29,6 +31,7 @@
   flex-grow: 0;
   flex-basis: auto;
   padding: $euiSizeM $euiSize $euiSizeS $euiSize;
+  font-size: $canvasLayoutFontSize;
 }
 
 .canvasLayout__stageContent {
@@ -69,4 +72,5 @@
   width: 100%;
   background-color: $euiPageBackgroundColor;
   z-index: $euiZNavigation;
+  font-size: $canvasLayoutFontSize;
 }
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.js b/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.js
@@ -241,9 +241,7 @@ export class AssetManager extends React.PureComponent {
 
     return (
       <Fragment>
-        <EuiButtonEmpty size="s" onClick={this.showModal}>
-          Manage assets
-        </EuiButtonEmpty>
+        <EuiButtonEmpty onClick={this.showModal}>Manage assets</EuiButtonEmpty>
 
         {assetModal}
 

diff --git a/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -1,8 +1,8 @@
 body.canvas-isFullscreen {
-  // this is a hack that overwrites Kibana's core chrome
-  .kbnGlobalNav.kbnGlobalNav-isOpen + .app-wrapper,
-  .app-wrapper {
+  // remove space for global nav elements
+  .header-global-wrapper + .app-wrapper {
     left: 0;
+    top: 0;
   }
 
   // set the background color
@@ -11,7 +11,6 @@ body.canvas-isFullscreen {
   }
 
   // hide all the interface parts
-  nav.kbnGlobalNav, // K6 global side nav
   .header-global-wrapper, // K7 global top nav
   .canvasLayout__stageHeader,
   .canvasLayout__sidebar,
@@ -20,11 +19,6 @@ body.canvas-isFullscreen {
     display: none;
   }
 
-  // remove space for K7 global top nav
-  .header-global-wrapper + .app-wrapper {
-    top: 0;
-  }
-
   .canvasLayout__stageContentOverflow {
     display: block; // fixes center alignment for Safari
     overflow: visible;

diff --git a/x-pack/plugins/canvas/public/components/refresh_control/refresh_control.js b/x-pack/plugins/canvas/public/components/refresh_control/refresh_control.js
@@ -40,7 +40,7 @@ export const RefreshControl = ({ inFlight, setRefreshInterval, refreshInterval,
   const setRefresh = val => setRefreshInterval(getRefreshInterval(val));
 
   const popoverButton = handleClick => (
-    <EuiButtonEmpty size="s" onClick={handleClick}>
+    <EuiButtonEmpty onClick={handleClick}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
         {inFlight && (
           <Fragment>

diff --git a/x-pack/plugins/canvas/public/components/router/canvas_loading.js b/x-pack/plugins/canvas/public/components/router/canvas_loading.js
@@ -13,12 +13,8 @@ export const CanvasLoading = ({ msg }) => (
     <EuiPanel>
       <EuiLoadingChart size="m" />
       <EuiSpacer size="s" />
-      <EuiText>
-        {/*
-            For some reason a styled color is required,
-            likely something with the chrome css from Kibana
-          */}
-        <p style={{ color: '#000' }}>{msg}</p>
+      <EuiText color="default" size="s">
+        <p>{msg}</p>
       </EuiText>
     </EuiPanel>
   </div>

diff --git a/x-pack/plugins/canvas/public/components/sidebar/sidebar_component.js b/x-pack/plugins/canvas/public/components/sidebar/sidebar_component.js
@@ -121,7 +121,7 @@ export const SidebarComponent = ({
               </EuiFlexGroup>
             </EuiFlexItem>
           </EuiFlexGroup>
-          <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
+          <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />
         </div>
       )}
     </div>

diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js b/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js
@@ -235,7 +235,6 @@ export class WorkpadLoader extends React.PureComponent {
       <Fragment>
         <WorkpadDropzone onUpload={this.onUpload} disabled={createPending || !canUserWrite}>
           <EuiBasicTable
-            compressed
             items={rows}
             itemId="id"
             columns={columns}