Update based on the UX feedback

oncokb · Nov 4, 2024 · 86e2016 · 86e2016
1 parent ea09a4d
commit 86e2016
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "mobx-react": "^4.2.1",
     "mobx-react-router": "^4.0.7",
     "moment": "2.29.4",
-    "oncokb-styles": "~1.4.0-alpha.0",
+    "oncokb-styles": "~1.6.0-alpha.1",
     "pluralize": "^8.0.0",
     "query-string": "^6.13.1",
     "react": "16.13.1",

diff --git a/src/main/webapp/app/components/geneticTypeTabs/genetic-type-tabs.module.scss b/src/main/webapp/app/components/geneticTypeTabs/genetic-type-tabs.module.scss
@@ -13,12 +13,10 @@
 }
 
 .tab:first-child {
-  border-left: 0;
   border-top-right-radius: 3px;
 }
 
 .tab:last-child {
-  border-right: 0;
   border-top-left-radius: 3px;
 }
 

diff --git a/src/main/webapp/app/components/geneticTypeTag/genetic-type-tag.module.scss b/src/main/webapp/app/components/geneticTypeTag/genetic-type-tag.module.scss
@@ -2,9 +2,11 @@
 
 .geneticTypeTag {
   font-weight: 500 !important;
-  font-family: "Gotham Book";
+  font-family: 'Gotham Book';
+  font-size: 12px;
+  line-height: 18px;
   display: inline-flex;
-  padding: 0 var(--radius-8, 8px);
+  padding: 0 var(--radius-8, 0.5rem);
   justify-content: center;
   align-items: center;
   gap: var(--radius-8, 8px);
@@ -15,11 +17,11 @@
   @extend .geneticTypeTag;
   color: $primary;
   border: var(--radius-2, 2px) solid var(--Color-11, $primary);
-  background: #F0F5FF;
+  background: #f0f5ff;
 }
 
 .somaticTag {
   @extend .geneticTypeTag;
-  color: #FFFFFF;
+  color: #ffffff;
   background: $primary;
 }
diff --git a/src/main/webapp/app/index.scss b/src/main/webapp/app/index.scss
@@ -14,12 +14,6 @@ body {
   background-color: $pale-warm-grey !important;
 }
 
-#root {
-  max-width: 1500px;
-  margin: 0 auto;
-  background-color: #fff;
-}
-
 h1,
 h2,
 .h1,

diff --git a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
@@ -25,10 +25,9 @@ import LoadingIndicator, {
 } from 'app/components/loadingIndicator/LoadingIndicator';
 import autobind from 'autobind-decorator';
 import BarChart from 'app/components/barChart/BarChart';
-import { capitalize, DefaultTooltip } from 'cbioportal-frontend-commons';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
 import {
   ANNOTATION_PAGE_TAB_KEYS,
-  ANNOTATION_PAGE_TAB_NAMES,
   DEFAULT_GENE,
   LEVEL_CLASSIFICATION,
   LEVEL_TYPES,
@@ -77,10 +76,7 @@ import GeneticTypeTabs, {
 } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
 import InfoTile from 'app/components/infoTile/InfoTile';
 import AnnotatedAlterations from 'app/pages/annotationPage/AnnotatedAlterations';
-import {
-  LinkedInLink,
-  TwitterLink,
-} from 'app/shared/links/SocialMediaLinks';
+import { LinkedInLink, TwitterLink } from 'app/shared/links/SocialMediaLinks';
 import styles from './GenePage.module.scss';
 import StickyMiniNavBar from 'app/shared/nav/StickyMiniNavBar';
 import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
@@ -651,19 +647,23 @@ export default class SomaticGermlineGenePage extends React.Component<
                             )}
                           </Col>
                         </Row>
+                        <Row className={'justify-content-center'}>
+                          <Col md={11}>
+                            <GeneticTypeTabs
+                              onChange={(status: GENETIC_TYPE) =>
+                                (this.selectedGeneticType = status)
+                              }
+                              routing={this.props.routing}
+                              hugoSymbol={this.store.hugoSymbol}
+                              geneticType={this.selectedGeneticType}
+                            />
+                          </Col>
+                        </Row>
                       </Container>
-                      <GeneticTypeTabs
-                        onChange={(status: GENETIC_TYPE) =>
-                          (this.selectedGeneticType = status)
-                        }
-                        routing={this.props.routing}
-                        hugoSymbol={this.store.hugoSymbol}
-                        geneticType={this.selectedGeneticType}
-                      />
                       {this.hasContent && (
                         <StickyMiniNavBar
                           title={
-                            <span>
+                            <span className={'d-flex align-items-center'}>
                               <span>{this.store.hugoSymbol}</span>
                               <GeneticTypeTag
                                 className={'ml-2'}
@@ -764,9 +764,8 @@ export default class SomaticGermlineGenePage extends React.Component<
                                     !this.isGermline
                                   }
                                 >
-                                  <div className={'d-flex flex-column mt-4'}>
+                                  <div className={'d-flex flex-column mt-2'}>
                                     <ShowHideText
-                                      className={'text-right'}
                                       show={this.showPrevalenceData}
                                       content={<></>}
                                       title={'prevalence data'}

diff --git a/src/main/webapp/app/shared/icons/ShowHideToggleIcon.tsx b/src/main/webapp/app/shared/icons/ShowHideToggleIcon.tsx
@@ -5,10 +5,18 @@ const ShowHideToggleIcon: React.FunctionComponent<{
   onToggle?: () => void;
 }> = props => {
   return (
-    <i
+    <span
       onClick={props.onToggle}
-      className={`fa fa-chevron-circle-${props.show ? 'up' : 'down'}`}
-    ></i>
+      className={`fa-stack`}
+      style={{
+        fontSize: '0.5rem',
+      }}
+    >
+      <i className="fa fa-circle-thin fa-stack-2x"></i>
+      <i
+        className={`fa fa-chevron-${props.show ? 'up' : 'down'} fa-stack-1x`}
+      ></i>
+    </span>
   );
 };
 export default ShowHideToggleIcon;
diff --git a/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx b/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx
@@ -6,7 +6,7 @@ type IMiniNavBarHeader = {
 };
 export default function MiniNavBarHeader({ id, children }: IMiniNavBarHeader) {
   return (
-    <h4 id={id} className={'mt-4'} mini-nav-bar-header="">
+    <h4 id={id} className={'mt-5'} mini-nav-bar-header="">
       {children}
     </h4>
   );

diff --git a/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss b/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss
@@ -1,7 +1,7 @@
 @import '../../variables.scss';
 @import '../../font.scss';
 
-$sticky-border: #E3E5EC;
+$sticky-border: #e3e5ec;
 .container {
   a:hover {
     text-decoration: none;
@@ -10,10 +10,13 @@ $sticky-border: #E3E5EC;
   position: sticky;
   top: 50px;
   z-index: 100;
-  border-bottom: 1px solid $sticky-border;
   background-color: white;
 }
 
+.nav {
+  border-bottom: 1px solid $sticky-border;
+}
+
 .containerSticky {
   box-shadow: $default-box-shadow;
 }
@@ -25,7 +28,7 @@ $sticky-border: #E3E5EC;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 7px 0;
+  padding: 0.5rem 0;
 }
 
 .stickySection {
@@ -34,7 +37,7 @@ $sticky-border: #E3E5EC;
   align-items: center;
   justify-content: center;
   border-bottom: 4px solid transparent;
-  padding: 7px 0 3px 0;
+  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
 }
 
 .stickySectionSelected {

diff --git a/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx b/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
@@ -161,11 +161,11 @@ export default function StickyMiniNavBar({
   )[0]?.id;
 
   return (
-    <Container
+    <div
       className={classNames(
-        'container',
         styles.container,
-        isSticky ? styles.containerSticky : ''
+        isSticky ? styles.containerSticky : '',
+        'container'
       )}
       style={{
         top: headerHeight,
@@ -177,7 +177,7 @@ export default function StickyMiniNavBar({
         <Col md={11}>
           <nav
             ref={stickyDivRef}
-            className="d-flex flex-row"
+            className={classnames('d-flex flex-row', styles.nav)}
             style={{
               gap: '40px',
               height: '49px',
@@ -224,6 +224,6 @@ export default function StickyMiniNavBar({
           </nav>
         </Col>
       </Row>
-    </Container>
+    </div>
   );
 }
diff --git a/src/main/webapp/app/shared/utils/Utils.tsx b/src/main/webapp/app/shared/utils/Utils.tsx
@@ -320,8 +320,8 @@ export const FdaLevelIcon: React.FunctionComponent<{
 }> = ({ level, withDescription = true, size = 's1' }) => {
   const scale = parseInt(size.slice(1), 0);
   const style = {
-    fontSize: 9 * scale,
-    lineHeight: `${18 * scale}px`,
+    fontSize: 8 * scale,
+    lineHeight: `${16 * scale}px`,
     margin: '0 3px',
   };
   const fdaIcon = (

diff --git a/yarn.lock b/yarn.lock
@@ -13185,10 +13185,10 @@ oncokb-styles@~0.1.2:
   resolved "https://registry.yarnpkg.com/oncokb-styles/-/oncokb-styles-0.1.2.tgz#8b26c0a0829787cdc1b595d3a021b3266607102b"
   integrity sha512-tuy5s3qFxgf1ogMATQSRPNgLlAMrvOOTCAN1dm/wJ+VZoStbJ7g36/qHwc99UPfh3vrB05broLodF+k58p5tUw==
 
-oncokb-styles@~1.4.0-alpha.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/oncokb-styles/-/oncokb-styles-1.4.2.tgz#ad601699636875abe425d80b25c050d28d47c2bc"
-  integrity sha512-dq/w/OZv7oTjQzyXRo54ldC3PiHHu36eVuFmS0U5PGlk3Qx8XfB9XSwELHKTgmuen5H8YKQJxc/h3cBlFBF7Xw==
+oncokb-styles@~1.6.0-alpha.1:
+  version "1.6.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/oncokb-styles/-/oncokb-styles-1.6.0-alpha.1.tgz#f14f11acda733e5d6a2053df1dd74264b31d1de6"
+  integrity sha512-TdZZQ1058xPaILkmNlizgV9dZeSzezTlwm5M+OMcM8U5outEurlNy2HALakFHIUCnlhUkUSZk7+x+MuDc6kMbw==
 
 oncokb-ts-api-client@^1.0.4:
   version "1.0.4"