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