Legacy import: styling updates

packages/web-console/src/scenes/Console/index.tsx

@@ -125,7 +125,6 @@ const Console = () => {
         <Top>
           <Sidebar align="top">
             <PopperHover
-              delay={350}
               placement="bottom"
               trigger={
                 <Navigation
@@ -163,7 +162,6 @@ const Console = () => {
               viewModes.map(({ icon, mode, tooltipText }) => (
                 <PopperHover
                   key={mode}
-                  delay={350}
                   placement="right"
                   trigger={
                     <Navigation
@@ -183,12 +181,19 @@ const Console = () => {
                   <Tooltip>{tooltipText}</Tooltip>
                 </PopperHover>
               ))}
-            <PrimaryToggleButton
-              onClick={() => setBottomPanel("import")}
-              selected={bottomPanel === "import"}
+            <PopperHover
+              placement="right"
+              trigger={
+                <PrimaryToggleButton
+                  onClick={() => setBottomPanel("import")}
+                  selected={bottomPanel === "import"}
+                >
+                  <Upload2 size={BUTTON_ICON_SIZE} />
+                </PrimaryToggleButton>
+              }
             >
-              <Upload2 size={BUTTON_ICON_SIZE} />
-            </PrimaryToggleButton>
+              <Tooltip>Import files from CSV</Tooltip>
+            </PopperHover>
           </Sidebar>
           <Tab ref={resultRef}>
             {result && <Result viewMode={resultViewMode} />}

packages/web-console/src/scenes/Import/ImportCSVFiles/files-to-upload.tsx

@@ -30,7 +30,7 @@ const StyledTable = styled(Table)`
   }
 
   tbody td {
-    background: ${({ theme }) => theme.color.backgroundLighter};
+    background: ${({ theme }) => theme.color.backgroundDarker};
 
     &:first-child {
       border-top-left-radius: ${({ theme }) => theme.borderRadius};
@@ -46,7 +46,7 @@ const StyledTable = styled(Table)`
 
 const EmptyState = styled(Box).attrs({ justifyContent: "center" })`
   width: 100%;
-  background: ${({ theme }) => theme.color.backgroundLighter};
+  background: ${({ theme }) => theme.color.backgroundDarker};
   border-radius: ${({ theme }) => theme.borderRadius};
   padding: 1rem;
 `

packages/web-console/src/scenes/Import/ImportCSVFiles/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
+import styled from "styled-components"
 import { Box } from "../../../components/Box"
 import { DropBox } from "./dropbox"
 import { FilesToUpload } from "./files-to-upload"
@@ -11,7 +12,7 @@ import * as QuestDB from "../../../utils/questdb"
 import { useSelector } from "react-redux"
 import { selectors } from "../../../store"
 import { DEFAULT_TIMESTAMP_FORMAT, MAX_UNCOMMITTED_ROWS } from "./const"
-import { useIsVisible } from "../../../components/Hooks"
+import { useIsVisible } from "../../../components"
 import {
   extractPrecionFromGeohash,
   isGeoHash,
@@ -24,6 +25,10 @@ type Props = {
   onImported: (result: UploadResult) => void
 }
 
+const Root = styled(Box).attrs({ gap: "4rem", flexDirection: "column" })`
+  padding: 2rem;
+`
+
 export const ImportCSVFiles = ({ onImported }: Props) => {
   const { quest } = useContext(QuestContext)
   const [filesDropped, setFilesDropped] = useState<ProcessedFile[]>([])
@@ -144,7 +149,7 @@ export const ImportCSVFiles = ({ onImported }: Props) => {
   }, [isVisible])
 
   return (
-    <Box gap="4rem" flexDirection="column" ref={rootRef}>
+    <Root ref={rootRef}>
       <DropBox
         files={filesDropped}
         onFilesDropped={handleDrop}
@@ -246,6 +251,6 @@ export const ImportCSVFiles = ({ onImported }: Props) => {
           setFilesDropped(processedFiles)
         }}
       />
-    </Box>
+    </Root>
   )
 }

packages/web-console/src/scenes/Import/ImportCSVFiles/upload-settings-dialog.tsx

@@ -30,6 +30,10 @@ const Inputs = styled(Box).attrs({ gap: "0", flexDirection: "column" })`
 
 const Option = styled(Drawer.GroupItem)`
   width: 100%;
+
+  &:nth-child(even) {
+    background: #242531;
+  }
 `
 
 const InputWrapper = styled.div`
@@ -207,7 +211,32 @@ export const UploadSettingsDialog = ({
         setSettings(initialState)
         onOpenChange(false)
       }}
-      withCloseButton
+      afterTitle={
+        <Box gap="1rem">
+          <Button
+            prefixIcon={<Undo size={18} />}
+            skin="secondary"
+            onClick={() => {
+              setSettings(initialState)
+              onOpenChange(false)
+            }}
+            type="button"
+          >
+            Dismiss
+          </Button>
+
+          <Button
+            prefixIcon={<Settings4 size={18} />}
+            skin="success"
+            onClick={() => {
+              onSubmit(settings)
+              onOpenChange(false)
+            }}
+          >
+            Submit
+          </Button>
+        </Box>
+      }
     >
       <Drawer.ContentWrapper>
         <Items>
@@ -273,31 +302,6 @@ export const UploadSettingsDialog = ({
               </Option>
             ))}
           </Inputs>
-
-          <Drawer.Actions>
-            <Button
-              prefixIcon={<Undo size={18} />}
-              skin="secondary"
-              onClick={() => {
-                setSettings(initialState)
-                onOpenChange(false)
-              }}
-              type="button"
-            >
-              Dismiss
-            </Button>
-
-            <Button
-              prefixIcon={<Settings4 size={18} />}
-              skin="success"
-              onClick={() => {
-                onSubmit(settings)
-                onOpenChange(false)
-              }}
-            >
-              Submit
-            </Button>
-          </Drawer.Actions>
         </Items>
       </Drawer.ContentWrapper>
     </Drawer>