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

@@ -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: " ";

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>
           }
         >

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>
         (

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)`

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>
           )}
 

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,

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%;
 }