make styling changes suggested by design review

src/ensembl/src/content/app/browser/browserReducer.ts

@@ -80,7 +80,12 @@ function browserInfo(
     case getType(browserActions.toggleGenomeSelector):
       return { ...state, genomeSelectorActive: action.payload };
     case getType(browserActions.selectBrowserTab):
-      return { ...state, selectedBrowserTab: action.payload };
+      return {
+        ...state,
+        selectedBrowserTab: action.payload,
+        trackPanelModalOpened: false,
+        trackPanelModalView: ''
+      };
     default:
       return state;
   }

src/ensembl/src/content/app/browser/drawer/Drawer.scss

@@ -38,10 +38,13 @@
   }
 
   .mainDetail {
-    bottom: 3px;
     font-size: 16px;
     font-weight: $bold;
-    position: relative;
+  }
+
+  .secondaryDetail {
+    font-weight: $light;
+    margin-left: 10px;
   }
 }
 

src/ensembl/src/content/app/browser/drawer/drawer-views/DrawerTranscript.tsx

@@ -30,7 +30,7 @@ const DrawerTranscript: FunctionComponent<DrawerTranscriptProps> = (
         <div className={styles.details}>
           <p>
             <span className={styles.mainDetail}>{transcriptStableId}</span>
-            <span className={styles.secondaryInfo}>{selectedInfo}</span>
+            <span className={styles.secondaryDetail}>{selectedInfo}</span>
           </p>
         </div>
       </dd>
@@ -40,7 +40,7 @@ const DrawerTranscript: FunctionComponent<DrawerTranscriptProps> = (
         <div className={styles.details}>
           <p>
             <span>{geneSymbol}</span>
-            <span className={styles.secondaryInfo}>{geneStableId}</span>
+            <span className={styles.secondaryDetail}>{geneStableId}</span>
           </p>
         </div>
       </dd>

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

@@ -91,6 +91,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
             openTrackPanelModal={props.openTrackPanelModal}
             toggleDrawer={props.toggleDrawer}
             toggleTrackPanel={props.toggleTrackPanel}
+            trackPanelModalOpened={props.trackPanelModalOpened}
             trackPanelModalView={props.trackPanelModalView}
             trackPanelOpened={props.trackPanelOpened}
           />

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx

@@ -16,6 +16,7 @@ type TrackPanelBarProps = {
   openTrackPanelModal: (trackPanelModalView: string) => void;
   toggleDrawer: (drawerOpened: boolean) => void;
   toggleTrackPanel: (trackPanelOpened?: boolean) => void;
+  trackPanelModalOpened: boolean;
   trackPanelModalView: string;
   trackPanelOpened: boolean;
 };
@@ -57,6 +58,7 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
             iconConfig={item}
             closeTrackPanelModal={props.closeTrackPanelModal}
             openTrackPanelModal={props.openTrackPanelModal}
+            trackPanelModalOpened={props.trackPanelModalOpened}
             trackPanelModalView={props.trackPanelModalView}
           />
         ))}

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBarIcon.tsx

-import React, { FunctionComponent, memo, useState, useCallback } from 'react';
+import React, {
+  FunctionComponent,
+  memo,
+  useState,
+  useCallback,
+  useEffect
+} from 'react';
 import { TrackPanelBarItem } from './trackPanelBarConfig';
 
 import styles from './TrackPanelBarIcon.scss';
@@ -7,6 +13,7 @@ type TrackPanelBarIconProps = {
   closeTrackPanelModal: () => void;
   iconConfig: TrackPanelBarItem;
   openTrackPanelModal: (trackPanelModalView: string) => void;
+  trackPanelModalOpened: boolean;
   trackPanelModalView: string;
 };
 
@@ -14,6 +21,12 @@ const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo(
   (props: TrackPanelBarIconProps) => {
     const [toggleState, setToggleState] = useState(false);
 
+    useEffect(() => {
+      if (props.trackPanelModalOpened === false) {
+        setToggleState(false);
+      }
+    }, [props.trackPanelModalOpened]);
+
     const toggleModalView = useCallback(() => {
       const newToggleState: boolean = !toggleState;
 

src/ensembl/src/content/home/Home.tsx

@@ -55,7 +55,7 @@ const Home: FunctionComponent<HomeProps> = (props: HomeProps) => {
         <h2>Find</h2>
         <p>
           <input type="text" placeholder="Name, symbol or ID" />
-          <button disabled={true}>Go</button>
+          {/* <button disabled={true}>Go</button> */}
         </p>
         <div className={styles.filter}>
           <h2>Refine results</h2>

src/ensembl/src/shared/privacy-banner/PrivacyBanner.scss

@@ -20,4 +20,8 @@
     margin-left: 30px;
     padding: 6px 18px;
   }
+
+  a {
+    font-weight: $bold;
+  }
 }