Various style improvements

AllenInstitute · Jun 13, 2024 · d81651e · d81651e
1 parent 28ad9b0
commit d81651e
Show file tree

Hide file tree

Showing 21 changed files with 160 additions and 156 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -4,11 +4,11 @@
     <head>
         <meta charset="utf-8">
 
-        <title>FMS File Explorer</title>
-        <meta name="description" content="FMS File Explorer">
+        <title>BioFile Finder</title>
+        <meta name="description" content="BioFile Finder">
         <meta name="author" content="AICS Software">
 
-        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@600&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@0..600&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="styles.css?v=1.0">
     </head>
 
@@ -18,7 +18,7 @@
                 <header>
                     <img class="logo" src="resources/aics-logo.png" alt="AICS logo" />
                     <img class="logo" src="resources/aics-logo-name.png" alt="AICS logo" />
-                    <h1 class="title">FMS File Explorer</h1>
+                    <h1 class="title">BioFile Finder</h1>
                 </header>
 
                 <section>

diff --git 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
@@ -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
@@ -37,7 +37,7 @@ export default function GlobalActionButtonRow(props: Props) {
                         )
                     }
                     title="List view"
-                    iconProps={{ iconName: "BulletedList" }}
+                    iconProps={{ iconName: "NumberedListText" }}
                 />
                 <IconButton
                     className={classNames(styles.iconButton, {

diff --git a/packages/core/components/Modal/DataSource/DataSource.module.css b/packages/core/components/Modal/DataSource/DataSource.module.css
@@ -0,0 +1,3 @@
+.content > p {
+    text-align: left;
+}
diff --git 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 (
         <BaseModal
-            body={<DataSourcePrompt hideTitle />}
+            body={<DataSourcePrompt className={styles.content} hideTitle />}
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -125,7 +125,7 @@ export default function useHelpOptions(
                           },
                       },
                   ]),
-            ...(!isOnWeb
+            ...(isOnWeb
                 ? []
                 : [
                       {

diff --git 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,[email protected]&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
diff --git 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
@@ -21,14 +21,13 @@ export default function Header() {
                     <a href="https://www.allencell.org/" target="_blank" rel="noreferrer">
                         <AICSLogo />
                     </a>
-                    <div className={styles.headerOption}>|</div>
                     <Link
                         to={"/"}
                         className={styles.title}
                         target={isApp ? "_blank" : "_self"}
                         rel="noreferrer"
                     >
-                        {APPLICATION_NAME}
+                        <h4>{APPLICATION_NAME}</h4>
                     </Link>
                 </div>
                 <div className={styles.right}>
@@ -48,7 +47,7 @@ export default function Header() {
                             ariaLabel="Get started"
                             onClick={() => navigate("/app")}
                             title="Get started"
-                            text="START"
+                            text="GET STARTED"
                         />
                     )}
                 </div>

diff --git a/packages/web/src/components/Home/Banner.module.css b/packages/web/src/components/Home/Banner.module.css
diff --git a/packages/web/src/components/Home/Banner.tsx b/packages/web/src/components/Home/Banner.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -168,7 +168,6 @@ @@
     }
     .title {
-        font-size: large;
         margin: 0 0 0 var(--margin);
     }
@@ Expand Down @@