Legrego redesign space selector

x-pack/plugins/spaces/public/views/components/space_avatar.js

@@ -11,15 +11,16 @@ import {
 } from '@elastic/eui';
 import { MAX_SPACE_INITIALS, getSpaceInitials, getSpaceColor } from '../../../common';
 
-export const SpaceAvatar = (props) => {
+export const SpaceAvatar = ({ space, size, ...rest }) => {
   return (
     <EuiAvatar
       type="space"
-      name={props.space.name || ''}
-      size={props.size || "m"}
+      name={space.name || ''}
+      size={size || "m"}
       initialsLength={MAX_SPACE_INITIALS}
-      initials={getSpaceInitials(props.space)}
-      color={getSpaceColor(props.space)}
+      initials={getSpaceInitials(space)}
+      color={getSpaceColor(space)}
+      {...rest}
     />
   );
 };

x-pack/plugins/spaces/public/views/components/space_card.js

@@ -7,9 +7,7 @@
 import React from 'react';
 import {
   EuiCard,
-  EuiText,
   EuiTextColor,
-  EuiSpacer,
 } from '@elastic/eui';
 import './space_card.less';
 import {
@@ -25,23 +23,25 @@ export const SpaceCard = (props) => {
   return (
     <EuiCard
       className="spaceCard"
-      title={renderSpaceTitle(space)}
+      icon={renderSpaceAvatar(space)}
+      title={space.name}
       description={renderSpaceDescription(space)}
       onClick={onClick}
     />
   );
 };
 
-function renderSpaceTitle(space) {
-  return (
-    <div className="spaceCardTitle">
-      <SpaceAvatar space={space} size={"l"} />
-      <EuiSpacer size="s" />
-      <EuiText className="spaceCardTitle__name"><h3>{space.name}</h3></EuiText>
-    </div>
-  );
+function renderSpaceAvatar(space) {
+  return <SpaceAvatar space={space} size={"l"} />;
 }
 
 function renderSpaceDescription(space) {
-  return <EuiTextColor color={"subdued"}>{space.description}</EuiTextColor>;
+  let description = space.description;
+  const needsTruncation = space.description.length > 120;
+  if (needsTruncation) {
+    description = (
+      <span title={description}>{space.description.substr(0, 120) + '…'}</span>
+    );
+  }
+  return <EuiTextColor className="eui-textBreakWord" color={"subdued"}>{description}</EuiTextColor>;
 }

x-pack/plugins/spaces/public/views/components/space_card.less

@@ -1,7 +1,6 @@
-.spaceCard, .euiCard.euiCard--isClickable.spaceCard {
-    width: 280px;
-    height: 200px;
-    min-height: 180px;
+.euiCard.euiCard--isClickable.spaceCard {
+  width: 240px;
+  min-height: 200px;
 }
 
 .spaceCard .euiCard__content{

x-pack/plugins/spaces/public/views/components/space_cards.js

@@ -19,7 +19,7 @@ export class SpaceCards extends Component {
   render() {
     return (
       <div className="spaceCards">
-        <EuiFlexGroup gutterSize="l" justifyContent="center" wrap>
+        <EuiFlexGroup gutterSize="l" justifyContent="center" wrap responsive={false}>
           {this.props.spaces.map(this.renderSpace)}
         </EuiFlexGroup>
       </div>

x-pack/plugins/spaces/public/views/space_selector/space_selector.js

@@ -72,32 +72,30 @@ export class SpaceSelector extends Component {
     return (
       <EuiPage className="spaceSelector__page">
         <EuiPageHeader className="spaceSelector__heading">
-          <EuiPageHeaderSection className="logoHeader">
-            <div className="logoCircle">
+          <EuiPageHeaderSection className="spaceSelector__logoHeader">
+            <div className="spaceSelector__logoCircle">
               <EuiIcon size="xxl" type={`logoKibana`} />
             </div>
 
             <EuiSpacer />
 
-            <EuiTitle color="ghost">
+            <EuiTitle size="l">
               <EuiTextColor color="ghost"><p>Select your space</p></EuiTextColor>
             </EuiTitle>
-
-            <EuiSpacer />
           </EuiPageHeaderSection>
         </EuiPageHeader>
         <EuiPageBody>
-          <EuiPageContent className="spaceSelectorPageContent">
+          <EuiPageContent className="spaceSelector__pageContent">
 
-            <EuiFlexGroup direction="column" alignItems="center">
+            <EuiFlexGroup direction="column" alignItems="center" responsive={false}>
               {this.getSearchField()}
 
               <EuiFlexItem>
-                <EuiText><p>You can change your space at anytime from within Kibana.</p></EuiText>
+                <EuiText size="xs"><p>You can change your space at anytime from within Kibana.</p></EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
 
-            <EuiSpacer />
+            <EuiSpacer size="xl" />
 
             <SpaceCards spaces={filteredSpaces} />
 
@@ -120,7 +118,7 @@ export class SpaceSelector extends Component {
       return null;
     }
     return (
-      <EuiFlexItem>
+      <EuiFlexItem className="spaceSelector__searchHolder">
         <EuiFieldSearch
           className="spaceSelector__searchField"
           placeholder="Find a space"

x-pack/plugins/spaces/public/views/space_selector/space_selector.less

@@ -1,6 +1,6 @@
 @import "~ui/styles/variables";
 
-#spaceSelectorRootWrap, #spaceSelectorRoot, #spaceSelectorRoot .euiPanel {
+#spaceSelectorRootWrap, #spaceSelectorRoot {
   background-color: @globalColorLightestGray;
 }
 
@@ -11,27 +11,36 @@
   padding: 0;
 }
 
-.spaceSelector__heading {
-  padding: 16px;
-  background-image: linear-gradient(-178deg, #027AA5 0%, #24A1AB 75%, #3BBBAF 100%, #3EBEB0 100%);
+.spaceSelector__pageContent {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  text-align: center;
 }
 
-.logoHeader {
-  width: 100%;
+.spaceSelector__heading {
+  padding: 40px 16px;
+  background-image: linear-gradient(-194deg, #027AA5 0%, #24A1AB 75%, #3BBBAF 100%, #3EBEB0 100%);
+  justify-content: center;
   text-align: center;
+}
 
-  .logoCircle {
-    width: 80px;
-    height: 80px;
-    padding: 20px;
-    background-color: #FFF;
-    border-radius: 50%;
-    box-shadow: 2px 2px 2px @globalColorDarkGray;
-    margin: 0 auto ;
-  }
+.spaceSelector__logoCircle {
+  margin: 0 auto;
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+  text-align: center;
+  background-color: @globalColorWhite;
+  border-radius: 50%;
+  box-shadow:
+    0 6px 12px -1px fadeout(darken(@globalColorBlue, 10%), 80%),
+    0 4px 4px -1px fadeout(darken(@globalColorBlue, 10%), 80%),
+    0 2px 2px 0 fadeout(darken(@globalColorBlue, 10%), 80%);
 }
 
-.spaceSelectorPageContent {
-  box-shadow: none;
-  border: none;
+
+.spaceSelector__searchHolder {
+  width: 400px; // make sure it's as wide as our default form element width
+  max-width: 100%;
 }