Design review changes (#343)

* Design review changes - 2

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss

@@ -39,7 +39,7 @@ $backgroundColor: $black;
   grid-area: 2 / 1 / 3 / 4;
   z-index: 2;
   position: sticky;
-  top: -90px;
+  top: -80px;
   height: 100%;
   background-color: $backgroundColor;
   padding-left: 180px;

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss

 @import 'src/styles/common';
-@import 'constants';
+@import 'src/content/app/entity-viewer/gene-view/styles/constants';
 
 .header {
   border-bottom: 1px solid $orange;
   padding: 0;
   position: sticky;
-  top: -15px;
+  top: -5px;
   background-color: $black;
   z-index: 1;
   font-size: 12px;
+  font-weight: 300;
 }
 
 .headerChevron {
@@ -23,13 +24,14 @@
 .content {
   position: relative;
   padding-top: 36px;
+  padding-bottom: 120px;
 }
 
 .stripedBackground {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: $left_column;
+  left: $left_column + $middle_column_left_gap;
 
   .stripe {
     position: absolute;
@@ -43,7 +45,7 @@
 
 .row {
   display: grid;
-  grid-template-columns: $left_column $middle_column $middle_column_right_gap $right_column;
+  grid-template-columns: $left_column $middle_column_left_gap $middle_column $middle_column_right_gap $right_column;
   padding: 9px 0px;
   font-size: 12px;
 }
@@ -55,13 +57,13 @@
 }
 
 .middle {
-  grid-column: 2/3;
+  grid-column: 3/4;
   position: relative;
   top: 2px;
 }
 
 .right {
-  grid-column: 4/5;
+  grid-column: 5/6;
 }
 
 .filterLabel {

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.scss

 @import 'src/styles/settings';
-@import '../constants';
 
 .defaultTranscriptListItem {
   svg rect {

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss

@@ -3,6 +3,7 @@
 .listItemInfo {
   color: $grey;
   line-height: 2;
+  padding-top: 0;
 }
 
 .middle {
@@ -21,6 +22,11 @@
   }
 }
 
+.transcriptName {
+  top: -8px;
+  position: relative;
+}
+
 .topLeft {
   grid-area: left;
   width: 190px;

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx

@@ -171,7 +171,7 @@ export const TranscriptsListItemInfo = (
         {props.expandDownload && renderInstantDownload(props)}
       </div>
       <div className={transcriptsListStyles.right}>
-        <div>
+        <div className={styles.transcriptName}>
           <strong>{transcript.symbol}</strong>
         </div>
         <div className={styles.viewInApp}>

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.scss

 @import 'src/styles/common';
+@import 'src/content/app/entity-viewer/gene-view/styles/constants';
 
 .container {
   color: white;
   display: grid;
-  grid-template-columns: 160px 18px 695px 27px 180px;
+  grid-template-columns: $left_column $middle_column_left_gap $middle_column $middle_column_right_gap $right_column;
 }
 
 .containerSVG {

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-relationships/GeneRelationships.tsx

@@ -31,8 +31,7 @@ import { RootState } from 'src/store';
 import {
   GeneViewTabMap,
   GeneViewTabName,
-  GeneRelationshipsTabName,
-  View
+  GeneRelationshipsTabName
 } from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSlice';
 
 import styles from './GeneRelationships.scss';
@@ -43,7 +42,7 @@ const tabsData = [...GeneViewTabMap.values()]
   .filter(({ primaryTab }) => primaryTab === GeneViewTabName.GENE_RELATIONSHIPS)
   .map((item) => ({
     title: item.secondaryTab,
-    isDisabled: item.view !== View.ORTHOLOGUES
+    isDisabled: true // TODO FIXME (Use real data when available)
   })) as Tab[];
 
 const tabClassNames = {

src/ensembl/src/content/app/entity-viewer/gene-view/components/protein-domain-image/ProteinDomainImage.scss

@@ -43,6 +43,7 @@
 .resourceImage {
   display: grid;
   grid-template-columns: [image] min-content [description] max-content;
+  margin-bottom: 6px;
 
   & svg {
     grid-column: image;

src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.scss

+@import 'src/styles/common';
+
 .proteinSummary {
   margin-left: 178px;
   width: 695px;
@@ -7,6 +9,14 @@
   }
 }
 
+.keyline {
+  border-bottom: 1px solid $orange;
+  width: 695px;
+  padding: 0;
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
 .proteinSummaryTop {
   align-items: center;
   display: grid;

src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx

@@ -111,6 +111,7 @@ const ProteinsListItemInfo = (props: Props) => {
                 )}
               </div>
             )}
+            <div className={styles.keyline}></div>
           </div>
         </>
       )}

src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.scss

 @import 'src/styles/common';
-@import '../default-transcripts-list/constants';
+@import 'src/content/app/entity-viewer/gene-view/styles/constants';
 
 .container {
   display: grid;
-  grid-template-columns: $left_column auto;
+  grid-template-columns: $left_column $middle_column_left_gap auto;
   padding: 9px 0;
 }
 
@@ -23,6 +23,7 @@
 
 .filterBox {
   display: grid;
+  grid-column: 3;
   grid-template-columns: 270px minmax(210px, auto) 20px;
   background-color: $soft-black;
   color: $white;

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/_constants.scss → src/ensembl/src/content/app/entity-viewer/gene-view/styles/_constants.scss

-$left_column: 178px;
+$left_column: 160px;
+$middle_column_left_gap: 18px;
 $middle_column: 695px;
 $middle_column_right_gap: 27px;
 $right_column: 180px;

src/ensembl/src/shared/components/button/Button.scss

@@ -4,7 +4,6 @@
   border: 1px solid $green;
   background-color: $green;
   color: $white;
-  padding: 8px 18px;
   font-weight: $bold;
 }
 
@@ -23,7 +22,7 @@
 }
 
 .button {
-  padding: 8px 18px;
+  padding: 7px 18px;
   border-radius: 3px;
   &:active,
   &:focus {

src/ensembl/src/shared/components/checkbox/Checkbox.scss

@@ -8,8 +8,8 @@
 .defaultCheckbox {
   cursor: pointer;
   justify-self: center;
-  height: 15px;
-  width: 15px;
+  height: 14px;
+  width: 14px;
   border: 1px solid $grey;
   background-color: $white;
   transition: background-color 0.1s ease-in-out;
@@ -40,7 +40,7 @@
 .defaultLabel {
   color: $black;
   line-height: 30px;
-  font-size: 14px;
+  font-size: 12px;
   padding-left: 8px;
   padding-right: 2px;
   max-width: calc(100% - 17px);

src/ensembl/src/shared/components/instant-download/instant-download-protein/InstantDownloadProtein.scss

 @import 'src/styles/common';
 
 .inputGroup {
-  display: inline-block;
+  display: flex;
 }
 
 .checkboxLabel {
-  font-size: 13px;
   margin-right: 20px;
   max-width: inherit;
 }
 
 .downloadButtonDisabled {
-  color: $dark-grey;
+  color: $medium-dark-grey;
 }

src/ensembl/src/shared/components/instant-download/instant-download-protein/InstantDownloadProtein.tsx

@@ -63,32 +63,26 @@ const InstantDownloadProtein = (props: InstantDownloadProteinProps) => {
   const isDownloadDisabled = () => !isProteinSeqSelected && !isCdsSeqSelected;
 
   return (
-    <div>
-      <div className={styles.inputGroup}>
-        <Checkbox
-          label={proteinOptionLabels.proteinSequence}
-          labelClassName={styles.checkboxLabel}
-          checked={isProteinSeqSelected}
-          onChange={onProteinCheckboxChange}
-        />
-      </div>
-      <div className={styles.inputGroup}>
-        <Checkbox
-          label={proteinOptionLabels.cds}
-          labelClassName={styles.checkboxLabel}
-          checked={isCdsSeqSelected}
-          onChange={onCdsCheckboxChange}
-        />
-      </div>
-      <div className={styles.inputGroup}>
-        <InstantDownloadButton
-          className={
-            isDownloadDisabled() ? styles.downloadButtonDisabled : undefined
-          }
-          isDisabled={isDownloadDisabled()}
-          onClick={onSubmit}
-        />
-      </div>
+    <div className={styles.inputGroup}>
+      <Checkbox
+        label={proteinOptionLabels.proteinSequence}
+        labelClassName={styles.checkboxLabel}
+        checked={isProteinSeqSelected}
+        onChange={onProteinCheckboxChange}
+      />
+      <Checkbox
+        label={proteinOptionLabels.cds}
+        labelClassName={styles.checkboxLabel}
+        checked={isCdsSeqSelected}
+        onChange={onCdsCheckboxChange}
+      />
+      <InstantDownloadButton
+        className={
+          isDownloadDisabled() ? styles.downloadButtonDisabled : undefined
+        }
+        isDisabled={isDownloadDisabled()}
+        onClick={onSubmit}
+      />
     </div>
   );
 };

src/ensembl/src/shared/components/tabs/Tabs.scss

@@ -17,7 +17,7 @@
 }
 
 .disabled {
-  color: $dark-grey;
+  color: $medium-dark-grey;
   cursor: default;
 }