RichHistory: Design Tweaks (#22703)

* design tweaks

* RichHistory: Design tweaks

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { css, cx } from 'emotion';
-import { stylesFactory, useTheme, Forms } from '@grafana/ui';
+import { stylesFactory, useTheme, Forms, styleMixins } from '@grafana/ui';
 import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 import { copyStringToClipboard, createUrlFromRichHistory, createDataQuery } from 'app/core/utils/richHistory';
@@ -22,20 +22,17 @@ interface Props {
 
 const getStyles = stylesFactory((theme: GrafanaTheme, hasComment?: boolean) => {
   const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
-  const cardColor = theme.isLight ? theme.colors.white : theme.colors.dark7;
   const cardBottomPadding = hasComment ? theme.spacing.sm : theme.spacing.xs;
-  const cardBoxShadow = theme.isLight ? `0px 2px 2px ${bgColor}` : `0px 2px 4px black`;
+
   return {
     queryCard: css`
+      ${styleMixins.listItem(theme)}
       display: flex;
-      border: 1px solid ${bgColor};
       padding: ${theme.spacing.sm} ${theme.spacing.sm} ${cardBottomPadding};
       margin: ${theme.spacing.sm} 0;
-      box-shadow: ${cardBoxShadow};
+
-      background-color: ${cardColor};
-      border-radius: ${theme.border.radius};
       .starred {
-        color: ${theme.colors.blue77};
+        color: ${theme.colors.orange};
       }
     `,
     queryCardLeft: css`
@@ -47,16 +44,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, hasComment?: boolean) => {
       width: 150px;
       display: flex;
       justify-content: flex-end;
+
       i {
-        font-size: ${theme.typography.size.lg};
+        margin: ${theme.spacing.xs};
-        font-weight: ${theme.typography.weight.bold};
-        margin: 3px;
         cursor: pointer;
       }
     `,
     queryRow: css`
       border-top: 1px solid ${bgColor};
-      font-weight: ${theme.typography.weight.bold};
       word-break: break-all;
       padding: 4px 2px;
       :first-child {

public/app/features/explore/RichHistory/RichHistoryContainer.tsx

@@ -22,10 +22,13 @@ import { RichHistory, Tabs } from './RichHistory';
 import { deleteRichHistory } from '../state/actions';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
+  const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.gray15;
   const bg = theme.isLight ? theme.colors.gray7 : theme.colors.dark2;
   const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
-  const handleShadow = theme.isLight ? `0px 2px 2px ${bgColor}` : `0px 2px 4px black`;
+  const handleHover = theme.isLight ? theme.colors.gray10 : theme.colors.gray33;
+  const handleDots = theme.isLight ? theme.colors.gray70 : theme.colors.gray33;
+  const handleDotsHover = theme.isLight ? theme.colors.gray33 : theme.colors.dark7;
+
   return {
     container: css`
       position: fixed !important;
@@ -44,20 +47,31 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       opacity: 0;
       transform: translateY(150px);
     `,
-    handle: css`
+    rzHandle: css`
-      background-color: ${borderColor};
+      background: ${bgColor};
-      height: 10px;
+      transition: 0.3s background ease-in-out;
-      width: 202px;
+      position: relative;
-      border-radius: 10px;
+      width: 200px !important;
-      position: absolute;
+      left: calc(50% - 100px) !important;
-      top: -5px;
-      left: calc(50% - 101px);
-      padding: ${theme.spacing.xs};
-      box-shadow: ${handleShadow};
       cursor: grab;
-      hr {
+      border-radius: 4px;
-        border-top: 2px dotted ${theme.colors.gray70};
+
-        margin: 0;
+      &:hover {
+        background-color: ${handleHover};
+
+        &:after {
+          border-color: ${handleDotsHover};
+        }
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        height: 2px;
+        position: relative;
+        top: 4px;
+        border-top: 4px dotted ${handleDots};
+        margin: 0 4px;
       }
     `,
   };
@@ -86,16 +100,11 @@ function RichHistoryContainer(props: Props) {
   const styles = getStyles(theme);
   const drawerWidth = `${width + 31.5}px`;
 
-  const drawerHandle = (
-    <div className={styles.handle}>
-      <hr />
-    </div>
-  );
-
   return (
     <Resizable
       className={cx(styles.container, visible ? styles.drawerActive : styles.drawerNotActive)}
       defaultSize={{ width: drawerWidth, height: '400px' }}
+      handleClasses={{ top: styles.rzHandle }}
       enable={{
         top: true,
         right: false,
@@ -110,7 +119,6 @@ function RichHistoryContainer(props: Props) {
       maxWidth={drawerWidth}
       minWidth={drawerWidth}
     >
-      {drawerHandle}
       <RichHistory
         richHistory={richHistory}
         firstTab={firstTab}