From 3cc13f176ad94319cddaf90e8db740d8cac6d254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9ril?= <meril.pilon@gmail.com>
Date: Wed, 17 Jun 2020 19:47:33 +0100
Subject: [PATCH] feat(console): minor improvements for the demo (#403)

- Rename "Saved Queries" to "Example Queries"
- Show Query Result timings by default
- Format number according to user locales
- Animation in Toast notification stands out more now
- Fix horizontal scrollbar issue in grid
---
 ui/src/components/Toast/index.tsx             |  2 +-
 ui/src/scenes/Editor/Menu/index.tsx           |  2 +-
 ui/src/scenes/Editor/QueryResult/index.tsx    |  4 +--
 .../Notifications/Notification/index.tsx      | 28 ++++++++++++++++---
 ui/src/scenes/Result/index.tsx                |  2 +-
 ui/src/styles/_base.scss                      |  8 +++---
 ui/src/styles/_grid.scss                      |  5 +++-
 7 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/Toast/index.tsx b/ui/src/components/Toast/index.tsx
index 0a6b95b95..9928c9950 100644
--- a/ui/src/components/Toast/index.tsx
+++ b/ui/src/components/Toast/index.tsx
@@ -12,7 +12,7 @@ export const Toast = styled.div<{ borderColor: Color }>`
   background: ${color("draculaBackgroundDarker")};
   border: 2px solid ${color("draculaSelection")};
 
-  &:after {
+  &:before {
     position: absolute;
     display: block;
     content: " ";
diff --git a/ui/src/scenes/Editor/Menu/index.tsx b/ui/src/scenes/Editor/Menu/index.tsx
index 5b0252370..ca3e3f445 100644
--- a/ui/src/scenes/Editor/Menu/index.tsx
+++ b/ui/src/scenes/Editor/Menu/index.tsx
@@ -156,7 +156,7 @@ const Menu = () => {
           trigger={
             <QueryPickerButton onClick={handleClick}>
               <Add size="18px" />
-              <span>Saved queries</span>
+              <span>Example queries</span>
             </QueryPickerButton>
           }
         >
diff --git a/ui/src/scenes/Editor/QueryResult/index.tsx b/ui/src/scenes/Editor/QueryResult/index.tsx
index 306dd2aa4..9c8203cba 100644
--- a/ui/src/scenes/Editor/QueryResult/index.tsx
+++ b/ui/src/scenes/Editor/QueryResult/index.tsx
@@ -72,7 +72,7 @@ const formatTiming = (nanos: number) => {
 }
 
 const QueryResult = ({ compiler, count, execute, fetch, rowCount }: Props) => {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(true)
   const handleClick = useCallback(() => {
     setExpanded(!expanded)
   }, [expanded])
@@ -81,7 +81,7 @@ const QueryResult = ({ compiler, count, execute, fetch, rowCount }: Props) => {
     <Wrapper _height={95} duration={TransitionDuration.FAST}>
       <div>
         <Text color="draculaForeground">
-          {rowCount} row{rowCount > 1 ? "s" : ""} in&nbsp;
+          {rowCount.toLocaleString()} row{rowCount > 1 ? "s" : ""} in&nbsp;
           {formatTiming(fetch)}&nbsp;
         </Text>
         (
diff --git a/ui/src/scenes/Notifications/Notification/index.tsx b/ui/src/scenes/Notifications/Notification/index.tsx
index 94c24b9bd..7dd8043dc 100644
--- a/ui/src/scenes/Notifications/Notification/index.tsx
+++ b/ui/src/scenes/Notifications/Notification/index.tsx
@@ -20,6 +20,7 @@ const Wrapper = styled(Toast)`
   margin-top: 1rem;
   padding-right: 3rem;
   border-right: none;
+  border-bottom: none;
   box-shadow: ${color("black")} 0 0 4px;
 
   overflow: hidden;
@@ -66,10 +67,29 @@ const Out = styled.div<{ animationPlay: AnimationPlay }>`
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 1px;
-  background: ${color("gray2")};
-  animation: ${disappear} 120s linear 0s 1 normal forwards;
-  animation-play-state: ${({ animationPlay }) => animationPlay};
+  height: 2px;
+
+  :before {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: ${color("draculaSelection")};
+  }
+
+  :after {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: ${color("gray2")};
+    animation: ${disappear} 120s linear 0s 1 normal forwards;
+    animation-play-state: ${({ animationPlay }) => animationPlay};
+  }
 `
 
 const Pin = styled(Pushpin2)`
diff --git a/ui/src/scenes/Result/index.tsx b/ui/src/scenes/Result/index.tsx
index 26cf9a86e..df41051d6 100644
--- a/ui/src/scenes/Result/index.tsx
+++ b/ui/src/scenes/Result/index.tsx
@@ -122,7 +122,7 @@ const Result = () => {
         <ButtonWrapper>
           {count && !sm && (
             <Text color="draculaForeground">
-              {`${count} row${count > 1 ? "s" : ""}`}
+              {`${count.toLocaleString()} row${count > 1 ? "s" : ""}`}
             </Text>
           )}
 
diff --git a/ui/src/styles/_base.scss b/ui/src/styles/_base.scss
index 50c0221b7..c87e30e84 100755
--- a/ui/src/styles/_base.scss
+++ b/ui/src/styles/_base.scss
@@ -41,8 +41,8 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 11px;
+  width: 10px;
+  height: 10px;
   background: #21222c;
 }
 
@@ -60,11 +60,11 @@ body {
 }
 
 .ace_scrollbar-v {
-  width: 8px !important;
+  width: 10px !important;
 }
 
 .ace_scrollbar-h {
-  height: 8px !important;
+  height: 10px !important;
 }
 
 html,
diff --git a/ui/src/styles/_grid.scss b/ui/src/styles/_grid.scss
index 7b141b2b0..9f7abdecb 100644
--- a/ui/src/styles/_grid.scss
+++ b/ui/src/styles/_grid.scss
@@ -33,6 +33,10 @@
 .qg-header-row {
   overflow: hidden;
   height: 33px;
+
+  .qg-header:last-child {
+    margin-right: 10px;
+  }
 }
 
 .qg-header-row,
@@ -96,7 +100,6 @@
 
 .qg-canvas {
   position: relative;
-  overflow: hidden;
   width: 100%;
 }
 
-- 
GitLab