diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx index 567f53e01..bc0dd8e7c 100644 --- a/packages/web-console/src/scenes/Console/index.tsx +++ b/packages/web-console/src/scenes/Console/index.tsx @@ -125,7 +125,6 @@ const Console = () => { { viewModes.map(({ icon, mode, tooltipText }) => ( { {tooltipText} ))} - setBottomPanel("import")} - selected={bottomPanel === "import"} + setBottomPanel("import")} + selected={bottomPanel === "import"} + > + + + } > - - + Import files from CSV + {result && } diff --git a/packages/web-console/src/scenes/Import/ImportCSVFiles/files-to-upload.tsx b/packages/web-console/src/scenes/Import/ImportCSVFiles/files-to-upload.tsx index 8098c3881..5d2f4d770 100644 --- a/packages/web-console/src/scenes/Import/ImportCSVFiles/files-to-upload.tsx +++ b/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; ` diff --git a/packages/web-console/src/scenes/Import/ImportCSVFiles/index.tsx b/packages/web-console/src/scenes/Import/ImportCSVFiles/index.tsx index 0e2e27683..6077e6968 100644 --- a/packages/web-console/src/scenes/Import/ImportCSVFiles/index.tsx +++ b/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([]) @@ -144,7 +149,7 @@ export const ImportCSVFiles = ({ onImported }: Props) => { }, [isVisible]) return ( - + { setFilesDropped(processedFiles) }} /> - + ) } diff --git a/packages/web-console/src/scenes/Import/ImportCSVFiles/upload-settings-dialog.tsx b/packages/web-console/src/scenes/Import/ImportCSVFiles/upload-settings-dialog.tsx index 3a657e363..64ecef426 100644 --- a/packages/web-console/src/scenes/Import/ImportCSVFiles/upload-settings-dialog.tsx +++ b/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={ + + + + + + } > @@ -273,31 +302,6 @@ export const UploadSettingsDialog = ({ ))} - - - - - -