Styling Manage Queries page (#793)

frontend/components/NumberPill/_styles.scss

@@ -6,8 +6,8 @@
   line-height: 26px;
   height: 26px;
   text-align: center;
-  width: 44px;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: -0.5px;
+  padding: 0 14px;
 }

frontend/components/buttons/Button/Button.tsx

@@ -42,7 +42,6 @@ class Button extends React.Component<IButtonProps, IButtonState> {
     const { handleClick } = this;
     const { children, className, disabled, size, tabIndex, type, title, variant } = this.props;
     const fullClassName = classnames(baseClass, `${baseClass}--${variant}`, className, {
-      [baseClass]: variant !== 'unstyled',
       [`${baseClass}--disabled`]: disabled,
       [`${baseClass}--${size}`]: size,
     });

frontend/components/queries/QueriesList/QueriesList.jsx

@@ -95,7 +95,7 @@ class QueriesList extends Component {
                 value={allQueriesChecked}
               /></th>
               <th>Query Name</th>
-              <th>Author</th>
+              <th className={`${baseClass}__author-name`}>Author</th>
               <th>Last Modified</th>
             </tr>
           </thead>

frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx

@@ -57,7 +57,7 @@ class QueriesListRow extends Component {
           />
         </td>
         <td>{name}</td>
-        <td>{authorName}</td>
+        <td className={`${baseClass}__author-name`}>{authorName}</td>
         <td>{lastModifiedDate}</td>
       </ClickableTableRow>
     );

frontend/components/queries/QueriesList/QueriesListRow/_styles.scss

@@ -0,0 +1,24 @@
+.queries-list-row {
+  line-height: 38px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  td {
+    font-size: 14px;
+
+    &:nth-child(2) {
+      font-weight: $bold;
+    }
+
+    .form-field {
+      margin: 0;
+    }
+  }
+}

frontend/components/queries/QueriesList/_styles.scss

@@ -8,7 +8,6 @@
   &__table {
     border-collapse: collapse;
     width: 100%;
-    min-height: 132px;
     border-radius: 3px;
 
     thead {
@@ -16,6 +15,10 @@
       background-color: $bg-medium;
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
 
+      .form-field {
+        margin: 0;
+      }
+
       th {
         font-size: 14px;
         font-weight: $bold;
@@ -31,7 +34,6 @@
 
         &:last-child {
           border-top-right-radius: 3px;
-          text-align: center;
         }
       }
     }
@@ -46,12 +48,6 @@
           text-align: center;
           vertical-align: middle;
         }
-
-        &:last-child {
-          text-align: center;
-          font-size: 18px;
-          color: $text-ultradark;
-        }
       }
     }
   }

frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx

@@ -6,6 +6,8 @@ import KolideAce from 'components/KolideAce';
 import queryInterface from 'interfaces/query';
 import SecondarySidePanelContainer from 'components/side_panels/SecondarySidePanelContainer';
 
+const baseClass = 'query-details-side-panel';
+
 class QueryDetailsSidePanel extends Component {
   static propTypes = {
     onEditQuery: PropTypes.func.isRequired,
@@ -47,8 +49,8 @@ class QueryDetailsSidePanel extends Component {
     const { description, name, query: queryText } = query;
 
     return (
-      <SecondarySidePanelContainer>
-        <h1>{name}</h1>
+      <SecondarySidePanelContainer className={baseClass}>
+        <h1><Icon name="query" /> {name}</h1>
         <Button onClick={handleEditQueryClick} variant="inverse">Edit/Run Query</Button>
         <KolideAce
           fontSize={12}
@@ -56,6 +58,7 @@ class QueryDetailsSidePanel extends Component {
           readOnly
           showGutter={false}
           value={queryText}
+          wrapperClassName={`${baseClass}__query-preview`}
           wrapEnabled
         />
         <h2>Description</h2>

frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss

@@ -0,0 +1,41 @@
+.query-details-side-panel {
+  padding: 20px;
+
+  h1 {
+    margin: 0 0 12px;
+    font-size: 18px;
+    font-weight: $bold;
+    letter-spacing: -0.5px;
+    color: $text-dark;
+
+    .kolidecon {
+      color: $text-light;
+      margin-right: 6px;
+    }
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: $bold;
+    letter-spacing: -0.5px;
+    color: $text-dark;
+    border-bottom: solid 1px $accent-light;
+    padding: 0 0 4px;
+    margin: 0 0 6px;
+  }
+
+  p {
+    font-size: 14px;
+    font-weight: $normal;
+    line-height: 1.71;
+    color: $text-medium;
+  }
+
+  &__query-preview {
+    margin-bottom: 12px;
+  }
+
+  .button {
+    width: 100%;
+  }
+}

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx

@@ -8,6 +8,7 @@ import entityGetter from 'redux/utilities/entityGetter';
 import InputField from 'components/forms/fields/InputField';
 import Modal from 'components/modals/Modal';
 import NumberPill from 'components/NumberPill';
+import Icon from 'components/icons/Icon';
 import PackInfoSidePanel from 'components/side_panels/PackInfoSidePanel';
 import paths from 'router/paths';
 import QueryDetailsSidePanel from 'components/side_panels/QueryDetailsSidePanel';
@@ -174,7 +175,7 @@ export class ManageQueriesPage extends Component {
       const queryText = checkedQueryCount === 1 ? 'Query' : 'Queries';
 
       return (
-        <div>
+        <div className={`${baseClass}__ctas`}>
           <p className={`${baseClass}__query-count`}>{checkedQueryCount} {queryText} Selected</p>
           <Button
             className={btnClass}
@@ -246,13 +247,16 @@ export class ManageQueriesPage extends Component {
           <p className={`${baseClass}__title`}>
             <NumberPill number={queriesCount} /> Queries
           </p>
-          <div className={`${baseClass}__search-create-section`}>
-            <InputField
-              name="query-filter"
-              onChange={onFilterQueries}
-              placeholder="Search Queries"
-              value={queriesFilter}
-            />
+          <div className={`${baseClass}__filter-and-cta`}>
+            <div className={`${baseClass}__filter-queries`}>
+              <InputField
+                name="query-filter"
+                onChange={onFilterQueries}
+                placeholder="Filter Queries"
+                value={queriesFilter}
+              />
+              <Icon name="search" />
+            </div>
             {renderCTAs()}
           </div>
           <QueriesList

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -4,17 +4,27 @@
     font-weight: $normal;
   }
 
+  &__ctas {
+    @include flex-grow(1);
+    text-align: right;
+  }
+
   &__query-count {
-    color: #858495;
+    color: $text-dark;
     font-size: 14px;
     font-weight: $bold;
     letter-spacing: -0.5px;
-    margin: 0;
+    margin: 0 12px 0 0;
+    display: inline-block;
   }
 
-  &__search-create-section {
+  &__filter-and-cta {
     @include display(flex);
-    @include justify-content(space-between);
+    margin-bottom: $pad-small;
+
+    .form-field {
+      margin: 0;
+    }
 
     input {
       &[name='query-filter'] {
@@ -23,10 +33,33 @@
     }
   }
 
+  &__filter-queries {
+    @include flex-grow(1);
+    position: relative;
+
+    .input-field {
+      padding-left: 42px;
+    }
+
+    .kolidecon {
+      position: absolute;
+      top: 12px;
+      left: 9px;
+      font-size: 18px;
+      color: $accent-medium;
+    }
+  }
+
   &__title {
-    color: $text-medium;
-    display: inline-block;
-    font-size: $large;
+    color: $text-dark;
+    margin: 0 0 12px;
+    font-size: 24px;
+    font-weight: $light;
+    letter-spacing: -0.5px;
+
+    .number-pill {
+      vertical-align: text-bottom;
+    }
   }
 
   &__wrapper {