Reposition download (#498)

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

@@ -2,19 +2,19 @@
 
 .listItemInfo {
   color: $grey;
-  line-height: 2;
   padding-top: 0;
 }
 
 .middle {
   display: grid;
   grid-template-areas:
-    'left middle right .'
-    '. . . downloadLink'
-    'download download download download';
+    'left middle right'
+    'moreinformation . .'
+    'downloadLink . .'
+    'download download download';
   grid-column-gap: 10px;
   background: $soft-black;
-  padding: 15px 20px;
+  padding: 15px 30px;
 
   strong {
     color: $white;
@@ -30,40 +30,52 @@
 .topLeft {
   grid-area: left;
   width: 190px;
+  div {
+    padding-bottom: 6px;
+  }
 }
 
 .topMiddle {
   grid-area: middle;
   width: 150px;
+  div {
+    padding-bottom: 6px;
+  }
 }
 
 .topRight {
   grid-area: right;
   width: 210px;
+  div {
+    padding-bottom: 6px;
+  }
+}
+
+.moreInformation {
+  padding-top: 16px;
 }
 
 .downloadLink {
   grid-area: downloadLink;
   color: $blue;
-  width: 66px;
-  height: 16px;
-  text-align: right;
-  line-height: 1;
-
-  span {
-    cursor: pointer;
-  }
+  cursor: pointer;
+  padding-top: 6px;
 }
 
 .download {
   grid-area: download;
-  padding-top: 15px;
-  margin-top: 15px;
-  border-top: 1px solid $dark-grey;
+  padding-top: 6px;
 }
 
-.closeButton {
-  display: inline-block;
+.chevron {
+  margin-left: 10px;
+  margin-bottom: -3px;
+  height: 12px;
+  width: 12px;
+  transition: transform linear 0.2s;
+  &Up {
+    transform: rotate(-180deg);
+  }
 }
 
 .viewInApp {

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

@@ -64,9 +64,11 @@ describe('<TranscriptsListItemInfo /', () => {
     const { container } = renderComponent();
     const expectedProteinLength =
       defaultProps.transcript.product_generating_contexts[0].product?.length;
-    expect(container.querySelector('.topMiddle strong')?.textContent).toMatch(
-      `${expectedProteinLength}`
-    );
+    const currentProteinLength = container
+      .querySelector('.topMiddle strong')
+      ?.textContent?.split(/\s/)[0]
+      ?.replace(/,/g, '');
+    expect(currentProteinLength).toMatch(`${expectedProteinLength}`);
   });
 
   it('contains the download link', () => {

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

@@ -35,7 +35,6 @@ import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers
 
 import { InstantDownloadTranscript } from 'src/shared/components/instant-download';
 import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
-import CloseButton from 'src/shared/components/close-button/CloseButton';
 
 import { toggleTranscriptDownload } from 'src/content/app/entity-viewer/state/gene-view/transcripts/geneViewTranscriptsSlice';
 import { clearExpandedProteins } from 'src/content/app/entity-viewer/state/gene-view/proteins/geneViewProteinsSlice';
@@ -49,6 +48,8 @@ import { View } from 'src/content/app/entity-viewer/state/gene-view/view/geneVie
 import transcriptsListStyles from '../DefaultTranscriptsList.scss';
 import styles from './TranscriptsListItemInfo.scss';
 
+import { ReactComponent as ChevronDown } from 'static/img/shared/chevron-down.svg';
+
 type Gene = Pick<FullGene, 'unversioned_stable_id' | 'stable_id'>;
 type Transcript = Pick<
   FullTranscript,
@@ -106,6 +107,10 @@ export const TranscriptsListItemInfo = (
     getSplicedRNALength(transcript)
   );
 
+  const aminoAcidLength = getCommaSeparatedNumber(
+    getProductAminoAcidLength(transcript)
+  );
+
   const mainStyles = classNames(transcriptsListStyles.row, styles.listItemInfo);
   const midStyles = classNames(transcriptsListStyles.middle, styles.middle);
 
@@ -133,6 +138,11 @@ export const TranscriptsListItemInfo = (
     const { genomeId } = params;
     return urlFor.browser({ genomeId: genomeId, focus: focusIdForUrl });
   };
+
+  const chevronClassForDownload = classNames(styles.chevron, {
+    [styles.chevronUp]: props.expandDownload
+  });
+
   return (
     <div className={mainStyles}>
       <div className={transcriptsListStyles.left}></div>
@@ -147,7 +157,7 @@ export const TranscriptsListItemInfo = (
           {isProteinCodingTranscript(transcript) && (
             <>
               <div>
-                <strong>{getProductAminoAcidLength(transcript)} aa</strong>
+                <strong>{aminoAcidLength} aa</strong>
               </div>
               {getLinkToProteinView(
                 transcript.product_generating_contexts[0]?.product.stable_id
@@ -164,23 +174,15 @@ export const TranscriptsListItemInfo = (
             of {transcript.spliced_exons.length}
           </div>
         </div>
-        <div className={styles.downloadLink}>
-          {props.expandDownload ? (
-            <CloseButton
-              className={styles.closeButton}
-              onClick={() =>
-                props.toggleTranscriptDownload(transcript.stable_id)
-              }
-            />
-          ) : (
-            <span
-              onClick={() =>
-                props.toggleTranscriptDownload(transcript.stable_id)
-              }
-            >
-              Download
-            </span>
-          )}
+
+        <div className={styles.moreInformation}>More information</div>
+
+        <div
+          className={styles.downloadLink}
+          onClick={() => props.toggleTranscriptDownload(transcript.stable_id)}
+        >
+          Download
+          <ChevronDown className={chevronClassForDownload} />
         </div>
         {props.expandDownload && renderInstantDownload({ ...props, genomeId })}
       </div>

src/ensembl/src/shared/components/instant-download/instant-download-transcript/InstantDownloadTranscript.scss

@@ -3,7 +3,7 @@
 .checkboxGrid {
   margin-top: 0.5em;
   display: grid;
-  grid-template-columns: 1.5fr 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
   grid-row-gap: 0.2em;
 }
@@ -15,7 +15,7 @@
 
   .featureId {
     margin-left: 0.5em;
-    font-weight: $bold;
+    font-weight: $normal;
   }
 }
 
@@ -29,11 +29,6 @@
   border-color: $dark-grey;
 }
 
-.checkboxLabel {
-  font-size: 13px;
-}
-
-
 .themeDark{
   .label {
     color: $white;
@@ -62,31 +57,34 @@
 
 .layout {
   display: grid;
-  font-size: 13px;
 
   &Horizontal {
     grid-template-columns: 1fr 1fr;
-    grid-column-gap: 24px;
+    grid-column-gap: 10px;
     grid-template-areas:
       'transcript gene'
       'transcript download';
+    margin-bottom: 12px;
 
     .transcriptSection {
       grid-area: transcript;
+      width: 393px;
     }
 
     .geneSection {
       grid-area: gene;
 
       .checkboxWrapper {
-        margin-top: 13px;
-        margin-left: 13px;
+        margin-left: 6px;
       }
     }
 
-    .transcriptVis,
+    .transcriptVis {
+      margin-left: 12px;
+    }
+
     .checkboxGrid {
-      margin-left: 18px;
+      padding-left: 6px;
     }
 
     button {