final tweaks for mobile layouts

Author: fdoflorenzano

src/images/info-icon.svg

@@ -56,7 +56,7 @@ a.mainDownloadButton {
 .mainDownloadButtonContainer > div {
   display: flex;
   align-items: center;
-  margin-bottom: 1em;
+  margin-bottom: 2em;
 
   & > p {
     font-size: var(--text-large);
@@ -65,6 +65,11 @@ a.mainDownloadButton {
     color: var(--download-inactive);
     margin-bottom: 0;
   }
+
+  & > p > a {
+    text-decoration: underline;
+    color: var(--download-inactive);
+  }
 }
 
 .osBit {
@@ -73,7 +78,7 @@ a.mainDownloadButton {
 
 .osSectionContainer {
   background-color: var(--download-background);
-  padding: 0 calc(2 * var(--margin-double));
+  padding: 0 calc(2.5 * var(--margin-double));
   padding-bottom: calc(2 * var(--vertical-margin-large));
 
   & > p {
@@ -226,7 +231,9 @@ a.mainDownloadButton {
   }
 
   & svg {
-    height: 1em;
+    flex: none;
+    height: var(--text-medium);
+    width: var(--text-medium);
   }
 
   &.open button, &:hover button {
@@ -352,32 +359,40 @@ a.mainDownloadButton {
   }
 }
 
+@media (--medium) {
+  .osSectionContainer {
+    padding: 0 calc(var(--margin-double));
+    padding-bottom: calc(2 * var(--vertical-margin-large));
+  }
+}
+
 @media (--reduced) {
   a.mainDownloadButton {
     width: 80%;
   }
 
-  .downloadSection {
-    margin-top: calc(3 * var(--vertical-margin-large));
+  .osSectionContainer  > p {
+    padding-top: calc(2 * var(--vertical-margin-large));
   }
 
   .osSectionList {
     flex-direction: column;
     gap: var(--margin-double);  
-
-    padding: calc(4 * var(--vertical-margin-large)) calc(var(--margin) + var(--gutter));
+    padding: calc(2 * var(--vertical-margin-large)) calc(var(--margin) + var(--gutter));
   }
 
   .osSection {
     display: flex;
     justify-content: center;
   }
 
+  .assetList {
+    margin-top: calc(2.5 * var(--gutter));
+  }
+
   .osButton {
     justify-content: center;
-
     width: 300px;
-    margin-right: var(--gutter-double);
     margin-bottom: 0;
 
     & svg {
@@ -390,7 +405,8 @@ a.mainDownloadButton {
 
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    align-items: stretch;
+    max-width: 300px;
 
     & li + li {
       margin-top: calc(1.5 * var(--gutter));
@@ -400,6 +416,7 @@ a.mainDownloadButton {
       padding: var(--gutter-half)  var(--gutter);
     }
   }
+  
 
   .bottomLinks {
     flex-direction: column;
@@ -426,6 +443,10 @@ a.mainDownloadButton {
     }
   }
 
+  .mainDownloadButtonContainer > div > p {
+    font-size: var(--text-medium);
+  }
+
   .osSectionList {
     gap: calc(2 * var(--margin-double));
 
@@ -440,14 +461,23 @@ a.mainDownloadButton {
   }
 
   .osButton {
-    width: 120px;
+    width: 200px;
     margin-bottom: var(--gutter-double);
+    padding: var(--vertical-margin-large) 0;
 
     & svg {
-      height: 40px;
+      height: 60px;
     }
   }
 
+  .infoTooltipContainer, .preTooltipDot {
+    display: none;
+  }
+
+  .assetList {
+    max-width: 200px;
+  }
+
   .assetList a.asset {
     font-size: var(--text-small);
   }

src/styles/templates/download.module.css

@@ -163,7 +163,7 @@ const MainDownloadSection = memo(({ release, onAfterDownload }) => {
                   {' •'} {detectedAsset.asset.size}
                 </>
               )}
-              {' •'}
+              <span className={css.preTooltipDot}>{' •'}</span>
             </p>
             <InfoTooltip
               asset={detectedAsset.asset}
@@ -190,14 +190,14 @@ const MainDownloadSection = memo(({ release, onAfterDownload }) => {
   );
 });
 
-const InfoTooltip = ({ asset, date, className, zIndex }) => {
+const InfoTooltip = ({ asset, date, className, zIndex, translateX }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
   const tooltipRef = useRef();
 
   useEffect(() => {
     if (open) {
-      const clickCallback = (e) => {
+      const outsideInteraction = (e) => {
         if (tooltipRef.current == null) return;
         if (tooltipRef.current.contains(e.target)) return;
         if (
@@ -207,8 +207,10 @@ const InfoTooltip = ({ asset, date, className, zIndex }) => {
         )
           setOpen(false);
       };
-      document.addEventListener('click', clickCallback);
-      return () => document.removeEventListener('click', clickCallback);
+      document.addEventListener('click', outsideInteraction);
+      return () => {
+        document.removeEventListener('click', outsideInteraction);
+      };
     }
   }, [open]);
 
@@ -292,9 +294,10 @@ const OSSection = memo(
           {logoComponent}
           <h2>{osName}</h2>
         </button>
-        {isSelected && (
-          <ul className={css.assetList}>
-            {assets.map((asset, index) => (
+
+        <ul className={css.assetList}>
+          {isSelected &&
+            assets.map((asset, index) => (
               <li key={index} className={css.assetContainer}>
                 <a
                   className={css.asset}
@@ -310,8 +313,7 @@ const OSSection = memo(
                 />
               </li>
             ))}
-          </ul>
-        )}
+        </ul>
       </div>
     );
   }