feat(front): improve artifact download button (#381)

* feat(web): improve artifact download button immprove primary button text color add new DL button and styles to artifact sections Signed-off-by: Elizabeth Kelen <[email protected]> * build(front): remove linebreak rule to eslint Signed-off-by: Elizabeth Kelen <[email protected]>
berty · Sep 14, 2020 · 06aebf4 · 06aebf4
1 parent 007c6fd
commit 06aebf4
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 55 deletions.
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -10,13 +10,7 @@
     "browser": true,
     "node": true
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "node",
-    "promise",
-    "jsx-a11y"
-  ],
+  "plugins": ["react", "react-hooks", "node", "promise", "jsx-a11y"],
   "extends": [
     "airbnb",
     "eslint:recommended",
@@ -27,6 +21,7 @@
     "expect": false
   },
   "rules": {
+    "linebreak-style": 0,
     "no-console": "error",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
@@ -51,23 +46,13 @@
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
-        "components": [
-          "Link"
-        ],
-        "specialLink": [
-          "to"
-        ]
+        "components": ["Link"],
+        "specialLink": ["to"]
       }
     ],
-    "semi": [
-      "error",
-      "never"
-    ],
+    "semi": ["error", "never"],
     "max-len": 0,
-    "no-return-assign": [
-      "error",
-      "except-parens"
-    ],
+    "no-return-assign": ["error", "except-parens"],
     "no-underscore-dangle": [
       "error",
       {

diff --git a/web/src/ui/components/Build/ArtifactRow.js b/web/src/ui/components/Build/ArtifactRow.js
@@ -3,10 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import QRCode from 'qrcode.react'
 import React, { useContext, useState } from 'react'
 import {
-  ArrowDownCircle,
-  Calendar,
-  Clock,
-  Link as LinkIcon,
+  Calendar, Clock, Download, Link as LinkIcon,
 } from 'react-feather'
 import {
   ARTIFACT_KIND_NAMES,
@@ -69,19 +66,17 @@ const ArtifactDownloadButton = ({
     hasDlUrl && (
       <a
         href={hasDlUrl}
-        className="btn btn-large-icon"
+        className="btn btn-large"
         style={{
           ...primaryButtonColors(theme),
-          width: '2.6rem',
-          height: '2.6rem',
-          marginTop: '0.3rem',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
         }}
         title={hasDlUrl}
       >
-        <ArrowDownCircle style={{ transform: 'scale(120%)' }} />
+        <Download size="1rem" style={{ marginRight: '0.3rem' }} />
+        Download
       </a>
     )
   )
@@ -93,9 +88,9 @@ const ArtifactQrButton = ({ onClick, theme }) => (
     className="btn btn-large-icon"
     style={{
       ...primaryButtonColors(theme),
-      width: '2.6rem',
-      height: '2.6rem',
-      marginTop: '1rem',
+      width: '2.2rem',
+      height: '2.2rem',
+      marginLeft: '1rem',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -106,7 +101,12 @@ const ArtifactQrButton = ({ onClick, theme }) => (
       icon={faQrcode}
       size="2x"
       color={theme.text.btnPrimary}
-      style={{ marginTop: 0, marginBottom: 0, transform: 'scale(90%)' }}
+      style={{
+        marginTop: 0,
+        marginBottom: 0,
+        // transform: "scale(70%)"
+        width: '80%',
+      }}
     />
   </div>
 )
@@ -181,12 +181,6 @@ const ArtifactDriver = ({ artifactDriver, theme }) => artifactDriver && (
 </Tag>
 )
 
-// const SharableArtifactLink = ({ artifactId, implemented = false }) => implemented && (
-//   <AnchorLink target={`?artifact_id=${artifactId}`}>
-//     <LinkIcon size={16} />
-//   </AnchorLink>
-// )
-
 const ArtifactRow = ({
   artifact,
   buildId,
@@ -221,14 +215,14 @@ const ArtifactRow = ({
       )}
 
       <div
-        className={styles.blockSectionContainer}
+        className={styles.artifactBlockSectionContainer}
         style={{ color: theme.text.sectionText, ...containerBorderBottomStyle }}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className={styles.blockSectionLeftColumn}>
+        <div className={styles.artifactBlockSectionLeftColumn}>
           <SharableArtifactLink {...{ artifactKind, buildId }} isBlock />
         </div>
-        <div className={styles.blockSectionDetailContainer}>
+        <div className={styles.artifactBlockSectionDetailContainer}>
           <div className={styles.blockSectionDetailRow}>
             <ArtifactRowKindIcon
               color={theme.bg.tagGreen}
@@ -249,7 +243,7 @@ const ArtifactRow = ({
             <ArtifactDriver {...{ artifactDriver, theme }} />
           </div>
         </div>
-        <div className={styles.blockRightContainer}>
+        <div className={styles.artifactBlockRightContainer}>
           <ArtifactDownloadButton
             {...{ artifactPlistSignedUrl, artifactDlArtifactSignedUrl }}
           />

diff --git a/web/src/ui/components/Build/Build.module.scss b/web/src/ui/components/Build/Build.module.scss
@@ -1,6 +1,6 @@
 @import "../../../assets/main.scss";
 
-$border-bottom-block-section: 1px solid gray;
+$border-bottom-block-section: 1px solid rgba(175, 175, 175, 0.3);
 
 /* Layout */
 
@@ -30,13 +30,25 @@ $border-bottom-block-section: 1px solid gray;
     }
 }
 
-.blockRightContainer {
-    // github and logs icon links
-    // artifact DL and QR buttons
+.artifactBlockSectionContainer {
     display: flex;
-    flex: 0 0 auto;
-    flex-direction: column;
-    align-self: flex-start;
+    flex-flow: row wrap;
+    margin: 0px;
+    padding: 0.5rem 0rem;
+    width: 100%;
+    height: 100%;
+    margin-bottom: 0.5rem;
+    align-items: center;
+    &:not(:last-of-type) {
+        border-bottom: $border-bottom-block-section;
+    }
+    &.noBorderBottom {
+        border-bottom: 0;
+        &:last-of-type {
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+    }
 }
 
 .blockSectionDetailContainer {
@@ -47,6 +59,16 @@ $border-bottom-block-section: 1px solid gray;
     font-size: $font-size-sm;
 }
 
+.artifactBlockSectionDetailContainer {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: 0.5rem;
+    flex-basis: 50%;
+    flex-shrink: 2;
+    flex-grow: 1;
+    font-size: $font-size-sm;
+}
+
 .blockSectionDetailRow {
     display: flex;
     flex: 1 1 100%;
@@ -61,6 +83,34 @@ $border-bottom-block-section: 1px solid gray;
 }
 
 .blockSectionLeftColumn {
+    // vcs and share icons in left column
+    display: none;
+
+    @include xs {
+        min-width: 1.5rem;
+        width: 1.5rem;
+        margin-right: 0.5rem;
+        height: 100%;
+        display: flex;
+        flex-flow: column nowrap;
+        flex-shrink: 0;
+        align-self: flex-start;
+        margin-bottom: 0.5rem;
+        &.headerIcon {
+            @include lg {
+                align-self: center;
+                margin-bottom: 0;
+            }
+        }
+    }
+    @include sm {
+        min-width: 1.5rem;
+        margin-right: 0.8rem;
+    }
+}
+
+.artifactBlockSectionLeftColumn {
+    // artifact share link in left column
     display: none;
 
     @include xs {
@@ -86,6 +136,25 @@ $border-bottom-block-section: 1px solid gray;
     }
 }
 
+.blockRightContainer {
+    // github and logs icon links
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-self: flex-start;
+}
+
+.artifactBlockRightContainer {
+    // artifact DL and QR buttons
+    display: flex;
+    align-self: flex-start;
+    @include xs {
+        margin-left: calc(1.5rem + 0.8rem);
+    }
+
+    // border: 1px solid red;
+}
+
 /* Block Header stuff  */
 
 .blockTitle {

diff --git a/web/src/ui/components/BuildList.js b/web/src/ui/components/BuildList.js
@@ -26,6 +26,7 @@ const FeedDisplayToggler = ({
   const { theme } = useContext(ThemeContext)
   const containerStyle = {
     backgroundColor: theme.bg.btnPrimary,
+    color: theme.text.btnPrimary,
     padding: '0.3rem 0.7rem',
     display: 'flex',
     alignItems: 'center',
@@ -41,9 +42,17 @@ const FeedDisplayToggler = ({
     >
       {`${displayFeed ? 'Hide' : 'Show'} feed`}
       {displayFeed ? (
-        <ChevronUp size={16} style={{ marginLeft: '0.2rem' }} />
+        <ChevronUp
+          size={16}
+          style={{ marginLeft: '0.2rem' }}
+          color={theme.text.btnPrimary}
+        />
       ) : (
-        <ChevronDown size={16} style={{ marginLeft: '0.2rem' }} />
+        <ChevronDown
+          size={16}
+          style={{ marginLeft: '0.2rem' }}
+          color={theme.text.btnPrimary}
+        />
       )}
     </button>
   )

diff --git a/web/src/ui/styleTools/themes.js b/web/src/ui/styleTools/themes.js
@@ -21,7 +21,7 @@ export const themes = {
       tagGreen: '#20d6b5',
       tagPink: '#fe497f',
       tagOrange: '#ffae3a',
-      btnPrimary: '#fcfcff', // not from spec
+      btnPrimary: 'rgb(205, 207, 237)', // not from spec
       filterUnselectedTitle: '#888aa1',
       filterSelectedTitle: '#3f49ea',
     },
@@ -69,7 +69,7 @@ export const themes = {
       tagGreen: '#23928e',
       tagPink: '#d23064',
       tagOrange: '#ff9a0b',
-      btnPrimary: '#cdcfed', // not from spec
+      btnPrimary: 'rgb(205, 207, 237)', // not from spec
       filterUnselectedTitle: '#7c7ea1',
       filterSelectedTitle: '#7373f6',
     },