diff --git a/docs/index.html b/docs/index.html index b00a6db17..3e8e5891d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,11 +4,11 @@ - FMS File Explorer - + BioFile Finder + - + @@ -18,7 +18,7 @@
-

FMS File Explorer

+

BioFile Finder

diff --git a/packages/core/App.tsx b/packages/core/App.tsx index 4344527ef..c85796622 100644 --- a/packages/core/App.tsx +++ b/packages/core/App.tsx @@ -27,7 +27,7 @@ export const ROOT_ELEMENT_ID = "root"; initializeIcons(); loadTheme({ defaultFontStyle: { - fontFamily: "Roboto", + fontFamily: "Open sans, sans-serif", }, }); diff --git a/packages/core/components/FileDetails/FileDetails.module.css b/packages/core/components/FileDetails/FileDetails.module.css index 8a3128b65..bca93f9bd 100644 --- a/packages/core/components/FileDetails/FileDetails.module.css +++ b/packages/core/components/FileDetails/FileDetails.module.css @@ -168,7 +168,6 @@ } .title { - font-size: large; margin: 0 0 0 var(--margin); } diff --git a/packages/core/components/GlobalActionButtonRow/index.tsx b/packages/core/components/GlobalActionButtonRow/index.tsx index 8e2b5f750..3e876a16c 100644 --- a/packages/core/components/GlobalActionButtonRow/index.tsx +++ b/packages/core/components/GlobalActionButtonRow/index.tsx @@ -37,7 +37,7 @@ export default function GlobalActionButtonRow(props: Props) { ) } title="List view" - iconProps={{ iconName: "BulletedList" }} + iconProps={{ iconName: "NumberedListText" }} /> p { + text-align: left; +} diff --git a/packages/core/components/Modal/DataSource/index.tsx b/packages/core/components/Modal/DataSource/index.tsx index 5ca6a915b..b8dba7197 100644 --- a/packages/core/components/Modal/DataSource/index.tsx +++ b/packages/core/components/Modal/DataSource/index.tsx @@ -4,13 +4,15 @@ import { ModalProps } from ".."; import BaseModal from "../BaseModal"; import DataSourcePrompt from "../../DataSourcePrompt"; +import styles from "./DataSource.module.css"; + /** * Dialog meant to prompt user to select a data source option */ export default function DataSource(props: ModalProps) { return ( } + body={} title="Choose a data source" onDismiss={props.onDismiss} /> diff --git a/packages/core/components/QueryPart/QueryPart.module.css b/packages/core/components/QueryPart/QueryPart.module.css index b774af14e..d0a26a1ac 100644 --- a/packages/core/components/QueryPart/QueryPart.module.css +++ b/packages/core/components/QueryPart/QueryPart.module.css @@ -55,14 +55,12 @@ border-radius: var(--small-border-radius); color: var(--primary-text-color); margin: calc(var(--margin) / 2) calc(var(--margin) / 4); -} - -.container > * { - padding: 0 calc(var(--margin) / 2); + padding: 3px 6px 10px 6px; } .header { display: flex; + padding: 6px 8px; } .header:hover, .header:hover button { diff --git a/packages/core/components/QueryPart/QueryPartRow.module.css b/packages/core/components/QueryPart/QueryPartRow.module.css index 6b2db311e..40932cf29 100644 --- a/packages/core/components/QueryPart/QueryPartRow.module.css +++ b/packages/core/components/QueryPart/QueryPartRow.module.css @@ -1,12 +1,12 @@ -.icon-button { +.icon-button, .icon-button:hover { background-color: unset; color: unset; max-height: 28px; } .icon-button:hover { + background-color: unset; color: var(--highlight-text-color); - background-color: var(--highlight-background-color); } .icon-button i { @@ -28,6 +28,7 @@ display: flex; height: 34px; width: 100%; + padding: 0 8px; } .interactive { diff --git a/packages/core/components/QueryPart/QuerySort.tsx b/packages/core/components/QueryPart/QuerySort.tsx index ea2bd1908..9fc41aa1d 100644 --- a/packages/core/components/QueryPart/QuerySort.tsx +++ b/packages/core/components/QueryPart/QuerySort.tsx @@ -40,7 +40,7 @@ export default function QuerySort(props: Props) { ? [ { id: props.sort.annotationName, - title: props.sort.annotationName, + title: `${props.sort.annotationName} (${props.sort.order})`, }, ] : [] diff --git a/packages/core/components/QuerySidebar/Query.module.css b/packages/core/components/QuerySidebar/Query.module.css index accbd3904..044e31fba 100644 --- a/packages/core/components/QuerySidebar/Query.module.css +++ b/packages/core/components/QuerySidebar/Query.module.css @@ -37,6 +37,11 @@ .title-container { display: flex; + width: 100%; +} + +.title-container > div { + width: 100%; } .title-container > div > div > div { @@ -75,9 +80,3 @@ width: 100%; white-space: nowrap; } - - -.container p, h4 { - margin: 0 0 0 calc(var(--margin) / 2); - padding-top: 6px; -} diff --git a/packages/core/components/QuerySidebar/QueryFooter.module.css b/packages/core/components/QuerySidebar/QueryFooter.module.css index e196e5ac2..388834ed1 100644 --- a/packages/core/components/QuerySidebar/QueryFooter.module.css +++ b/packages/core/components/QuerySidebar/QueryFooter.module.css @@ -6,6 +6,7 @@ .button { color: var(--primary-sidebar-text-color); background-color: var(--primary-sidebar-color); + border-radius: 4px; margin-left: 2px; } diff --git a/packages/core/hooks/useHelpOptions/index.ts b/packages/core/hooks/useHelpOptions/index.ts index cfbd2db68..f8ac32252 100644 --- a/packages/core/hooks/useHelpOptions/index.ts +++ b/packages/core/hooks/useHelpOptions/index.ts @@ -125,7 +125,7 @@ export default function useHelpOptions( }, }, ]), - ...(!isOnWeb + ...(isOnWeb ? [] : [ { diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css index e7eaeaecd..368511513 100644 --- a/packages/core/styles/global.css +++ b/packages/core/styles/global.css @@ -1,5 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0..800&display=swap'); html { box-sizing: border-box; @@ -53,13 +52,12 @@ body { --small-border-radius: 4px; --large-border-radius: 16px; --box-shadow: 3px 4px 6px 0.5px black; + --l-paragraph-size: 16px; + --s-paragraph-size: 14px; + --xs-paragraph-size: 12px; --query-sidebar-max-width: 350px; --file-details-width: 20%; --margin: 12px; --transition-duration: 0.5s; } - -h3 { - font-weight: 500; -} diff --git a/packages/web/assets/AICS-logo-and-name.svg b/packages/web/assets/AICS-logo-and-name.svg index 81ca9da63..bd7ad1001 100644 --- a/packages/web/assets/AICS-logo-and-name.svg +++ b/packages/web/assets/AICS-logo-and-name.svg @@ -1 +1 @@ -Asset 5 \ No newline at end of file +Asset 5 \ No newline at end of file diff --git a/packages/web/src/components/Header/Header.module.css b/packages/web/src/components/Header/Header.module.css index 2868c55b0..9ed77cb19 100644 --- a/packages/web/src/components/Header/Header.module.css +++ b/packages/web/src/components/Header/Header.module.css @@ -1,4 +1,4 @@ -.header{ +.header { background-color: var(--primary-dark); border-bottom: 1px solid var(--medium-grey); color: var(--secondary-text-color); @@ -10,21 +10,19 @@ } .title { - color: var(--primary-text-color); + border-left: 1px solid var(--secondary-text-color); + color: var(--highlight-text-color); + height: 24px; + padding: 2px 0 0 1em; + margin: 6px 0 0 1em; text-decoration: none; } -.header-option { - margin: 0px 10px; - font-size: 16px; - font-weight: 400; -} - .left { width: 50%; display: flex; flex: none; - align-items: center; + padding-top: 4px; } .right { @@ -49,8 +47,6 @@ color: var(--aqua); border: 1px solid var(--aqua); border-radius: 18px; - height: 30px; - width: 110px; } .upload-button:hover, .upload-button:focus { @@ -61,4 +57,5 @@ .upload-button-label { font-weight: 400; font-size: 14px; + text-wrap: nowrap; } diff --git a/packages/web/src/components/Header/index.tsx b/packages/web/src/components/Header/index.tsx index 63d974965..d03630d1b 100644 --- a/packages/web/src/components/Header/index.tsx +++ b/packages/web/src/components/Header/index.tsx @@ -21,14 +21,13 @@ export default function Header() { -
|
- {APPLICATION_NAME} +

{APPLICATION_NAME}

@@ -48,7 +47,7 @@ export default function Header() { ariaLabel="Get started" onClick={() => navigate("/app")} title="Get started" - text="START" + text="GET STARTED" /> )}
diff --git a/packages/web/src/components/Home/Banner.module.css b/packages/web/src/components/Home/Banner.module.css deleted file mode 100644 index a8424dd5e..000000000 --- a/packages/web/src/components/Home/Banner.module.css +++ /dev/null @@ -1,43 +0,0 @@ -.banner { - width: 100%; - height: 264px; - background-image: url('../../../assets/banner.png'); - background-size: cover; -} - -.banner-content { - padding: 43px 50px; - color: var(--primary-text-color); - display: flex; - flex: auto; - height: 100%; - overflow: hidden; - padding: calc(4*var(--margin)); - max-width: 1200px; - margin: auto; -} - -.banner-content-text { - flex: auto; -} - -.banner-header { - font-weight: 300; - font-size: 30px; - line-height: 40.85px; - margin-bottom: 10px; -} - -.banner-body { - font-weight: 400; - font-size: 16px; - line-height: 28px; -} - -.video-walkthrough { - width: 379px; - height: 183px; - background-color: var(--primary-dark); - margin-left: 32px; - flex: none; -} \ No newline at end of file diff --git a/packages/web/src/components/Home/Banner.tsx b/packages/web/src/components/Home/Banner.tsx deleted file mode 100644 index 37723a170..000000000 --- a/packages/web/src/components/Home/Banner.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from "react"; - -import { APPLICATION_NAME } from "../../constants"; - -import styles from "./Banner.module.css"; - -// Banner for the splash page -export default function Banner() { - return ( - <> -
-
-
-
Welcome to {APPLICATION_NAME}
-
- The {APPLICATION_NAME} is an open-use web application created for easy - access, collaboration, and sharing of datasets through rich metadata - search, filter, sort, and direct viewing in common industry applications - or in our web-based 3D Volume Viewer. -
-
-
- Video placeholder: Demo showing how to use the app via interactive - walkthrough -
-
-
- - ); -} diff --git a/packages/web/src/components/Home/Home.module.css b/packages/web/src/components/Home/Home.module.css index 39758cc1e..94f3367d4 100644 --- a/packages/web/src/components/Home/Home.module.css +++ b/packages/web/src/components/Home/Home.module.css @@ -2,6 +2,48 @@ position: absolute; } +.banner { + width: 100%; + height: 264px; + background-image: url('../../../assets/banner.png'); + background-size: cover; +} + +.banner-content { + color: var(--highlight-text-color); + display: flex; + flex: auto; + height: 100%; + overflow: hidden; + max-width: 1200px; +} + +.banner-content-text { + flex: auto; +} + +.banner-header { + margin-bottom: 24px; +} + +.banner-body { + font-size: 16px; + line-height: 28px; +} + +.video-walkthrough { + align-items: center; + display: flex; +} + +.video-walkthrough-fake { + width: 379px; + height: 183px; + background-color: var(--primary-dark); + margin-left: 32px; + flex: none; +} + .relative { position: relative; } @@ -10,18 +52,23 @@ margin: 0; border: 0; width: 100%; - height: 100%; + height: calc(100% - 60px); overflow-y: auto; justify-content: center; } -.content { - padding: calc(4*var(--margin)); +.section { + border-bottom: 1px solid var(--border-color); + padding: 24px 0; max-width: 1200px; - margin: auto; + margin: 0 calc(6 * var(--margin)); line-height: 1.5; } +.section:last-of-type { + border-bottom: none; +} + .header { font-weight: 300; font-size: 24px; @@ -44,16 +91,8 @@ padding: var(--margin); } -.option-header { - font-size: 18px; - font-weight: 600; - padding: var(--margin); - height: 50px; - line-height: 1.25; -} - .option-body { - font-size: 14px; + font-size: var(--l-paragraph-size); font-weight: 400; padding: var(--margin); margin: var(--margin) 0; @@ -63,13 +102,6 @@ padding: calc(2 * var(--margin)) 0; } -hr { - border: none; - height: 1px !important; - color: var(--medium-grey); /* old IE */ - background-color: var(--medium-grey); /* Modern Browsers */ -} - .button { background-color: var(--aqua); color: var(--white); diff --git a/packages/web/src/components/Home/index.tsx b/packages/web/src/components/Home/index.tsx index 3be3737bd..f7b40a155 100644 --- a/packages/web/src/components/Home/index.tsx +++ b/packages/web/src/components/Home/index.tsx @@ -3,8 +3,8 @@ import classNames from "classnames"; import * as React from "react"; import { Link, useNavigate } from "react-router-dom"; -import Banner from "./Banner"; import Features from "./Features"; +import { APPLICATION_NAME } from "../../constants"; import Modal from "../../../../core/components/Modal"; import styles from "./Home.module.css"; @@ -55,26 +55,41 @@ export default function Home() { ]; return (
- -
-
- Discover features to improve efficiency in dataset curation +
+
+
+

Welcome to {APPLICATION_NAME}

+
+ The {APPLICATION_NAME} is an open-use web application created for easy + access, collaboration, and sharing of datasets through rich metadata + search, filter, sort, and direct viewing in common industry applications + or in our web-based 3D Volume Viewer. +
+
+
+
+ Video placeholder: Demo showing how to use the app via interactive + walkthrough +
+
+
+
+

+ Discover features to improve efficiency in dataset curation +

-
-
-
What would you like to access today?
-
- {options.map((option, index) => { - return ( -
-
{option.header}
-
{option.body}
- {option.action} -
- ); - })} -
+
+
+

What data would you like to explore?

+
+ {options.map((option, index) => ( +
+
{option.header}
+
{option.body}
+ {option.action} +
+ ))}
diff --git a/packages/web/src/src.module.css b/packages/web/src/src.module.css index 5d555b265..cf379eea5 100644 --- a/packages/web/src/src.module.css +++ b/packages/web/src/src.module.css @@ -1,3 +1,36 @@ +h1 { + font-size: 38px; + font-weight: 300; + margin: 0; + padding: 0; +} + +h2 { + font-size: 24px; + font-weight: 300; + margin: 0; + padding: 0; +} + +h3 { + font-size: 18px; + font-weight: 600; + margin: 0; + padding: 0; +} + +h4 { + font-size: 16px; + font-weight: 600; + margin: 0; + padding: 0; +} + +p { + font-weight: 400; + /* font-size: 16px; TODO: this or 14px.... */ +} + .app { - height: calc(100% - 50px); + height: calc(100% - 60px); }