diff --git a/packages_rs/nextclade-web/src/components/Common/Card.tsx b/packages_rs/nextclade-web/src/components/Common/Card.tsx index 9a5787dee..64802421a 100644 --- a/packages_rs/nextclade-web/src/components/Common/Card.tsx +++ b/packages_rs/nextclade-web/src/components/Common/Card.tsx @@ -14,7 +14,7 @@ export const CardL1Header = styled(ReactstrapCardHeader)` border: none; border-image: none; border-radius: 5px 5px 0 0 !important; - background-color: ${(props) => props.theme.gray700}; + background-color: ${(props) => props.theme.gray600}; color: ${(props) => props.theme.gray100}; padding: 10px 10px; display: flex; diff --git a/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx b/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx index 5082a06c3..abb66e834 100644 --- a/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx +++ b/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx @@ -24,7 +24,7 @@ export const FilePickerContainer = styled.div` export const FilePickerHeader = styled.div` display: flex; - margin-bottom: 0.5rem; + margin-bottom: 10px; ` export const FilePickerBody = styled.div<{ $compact?: boolean }>` diff --git a/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx b/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx index fb2c6c4a1..e92ee3866 100644 --- a/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx +++ b/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx @@ -28,7 +28,7 @@ const Container = styled.div` border: 1px #ccc9 solid; border-radius: 5px; - min-height: 110px; + min-height: 200px; ` export interface ChangeDatasetButtonProps extends ButtonProps { @@ -50,8 +50,12 @@ export function ButtonChangeDataset({ onClick, ...restProps }: ChangeDatasetButt }, [dataset, t]) return ( - + ) } + +const ButtonChangeDatasetStyled = styled(Button)` + min-height: 50px; +` diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx index 128f5e697..247c75cb5 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx +++ b/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx @@ -28,17 +28,27 @@ export function DatasetCurrentSummary() { - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + @@ -51,11 +61,12 @@ const Container = styled.div` padding: 12px; border: 1px #ccc9 solid; border-radius: 5px; + min-height: 200px; ` const ButtonClear = styled(ButtonTransparent)` display: inline; - margin: 0 auto; + margin-left: auto; height: 20px; width: 20px; ` diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx index bcab400fe..d34092315 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx +++ b/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx @@ -70,7 +70,7 @@ export interface DatasetInfoProps { showSuggestions?: boolean } -export function DatasetInfo({ dataset, showSuggestions }: DatasetInfoProps) { +export function DatasetInfo({ dataset, showSuggestions, ...restProps }: DatasetInfoProps) { const { t } = useTranslationSafe() const { attributes, path, version } = dataset @@ -88,7 +88,7 @@ export function DatasetInfo({ dataset, showSuggestions }: DatasetInfoProps) { const datasetPath = t('Dataset name: {{name}}', { name: path }) return ( - + diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx index fb66c3238..681603856 100644 --- a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx +++ b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx @@ -3,7 +3,7 @@ import { isNil } from 'lodash' import { useRouter } from 'next/router' import { Col, Row } from 'reactstrap' import { useRecoilState, useRecoilValue } from 'recoil' -import { CardL1, CardL1Body, CardL1Header } from 'src/components/Common/Card' +import { CardL1 as CardL1Base, CardL1Body as CardL1BodyBase, CardL1Header } from 'src/components/Common/Card' import styled from 'styled-components' import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage' import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state' @@ -51,8 +51,8 @@ const Main = styled.div` width: 100%; display: flex; flex-direction: column; - margin-bottom: -12px; - padding-bottom: 12px; + margin: -12px; + padding: 12px; overflow: hidden; ` @@ -60,18 +60,13 @@ const RowCustom = styled(Row)` display: flex; flex-direction: row; width: 100%; + margin: -12px; + padding: 12px; margin-left: auto; margin-right: auto; - margin-bottom: -12px; - padding-bottom: 12px; overflow: hidden; ` -const Footer = styled.div` - display: flex; - flex: 1; -` - export function Landing() { // This periodically fetches dataset index and updates the list of datasets. useUpdatedDatasetIndex() @@ -146,6 +141,12 @@ export function LandingCardDataset() { ) } +const CardL1 = styled(CardL1Base)`` + +const CardL1Body = styled(CardL1BodyBase)` + //min-height: 386px; +` + export const CardTitle = styled.h4` display: inline-flex; flex: 1 0; @@ -184,33 +185,45 @@ function DatasetCurrentOrSelectButton() { if (!dataset) { return ( - - -
-
+ + - -
-
+ + + + + + + + + +
) } return ( - - -
-
+ + - -
-
- -
- - -
+ + + + + + + + + + + + + + + + +
) } diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx index 5b62c1573..7b47b6d81 100644 --- a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx +++ b/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from 'react' -import { UncontrolledAlert } from 'reactstrap' +import { Col, Row, UncontrolledAlert } from 'reactstrap' import { useRecoilValue } from 'recoil' import { datasetCurrentAtom } from 'src/state/dataset.state' import styled from 'styled-components' @@ -96,7 +96,17 @@ export function SuggestionAlertMainPage({ ...restProps }) { return null }, [autodetectRunState, datasetCurrent, datasetSuggestions, numSuggestions, t]) - return {alert} + if (!alert) { + return null + } + + return ( + + + {alert} + + + ) } const AlertWrapper = styled.div` diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx index 3057d6f21..9c49bf2c4 100644 --- a/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx +++ b/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx @@ -94,10 +94,8 @@ const Container = styled.div` const Form = styled(FormBase)` display: flex; width: 100%; - min-height: 45px; - padding: 10px; - border: 1px #ccc9 solid; - border-radius: 5px; + min-height: 38px; + padding: 0 5px; ` export const FlexLeft = styled.div` @@ -142,6 +140,7 @@ export function AutosuggestionToggle({ ...restProps }) { onCheckedChanged={toggleSuggestDatasets} >