feat: add colors based on state to artifact icons

Signed-off-by: Elizabeth Kelen <[email protected]>
berty · Nov 9, 2020 · 0bc8aef · 0bc8aef
1 parent 9dbb4c8
commit 0bc8aef
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 48 deletions.
diff --git a/web/src/assets/colors-dark.css b/web/src/assets/colors-dark.css
@@ -14,7 +14,7 @@
     --bg-tagPink: hsl(336.6, 100%, 75.9%);
 
     /* BACKGROUND COLORS - CUSTOM */
-    --bg-block-highlight: hsla(236, 27%, 42%, 1);
+    --bg-block-highlight: hsla(236, 27%, 38%, 1);
     --bg-block-highlight2: hsla(236, 17%, 42%, 1);
     --bg-btnPrimary-disabled: hsl(240, 0%, 59.4%);
     --bg-btnPrimary-disabled2: hsl(240, 10%, 40%);

diff --git a/web/src/assets/colors-light.css b/web/src/assets/colors-light.css
@@ -13,7 +13,9 @@
     --bg-tagPink: hsl(348.2, 92.7%, 94.5%);
 
     /* BACKGROUND COLORS - CUSTOM */
-    --bg-block-highlight: hsla(240, 100%, 87%, 1);
+    --bg-tagGreen-highlight: hsl(170.1, 73%, 70%);
+    --bg-block-highlight: hsl(235.9, 100%, 97.1%);
+    --bg-block-highlight: hsl(235.9, 30%, 97%);
     --bg-block-highlight2: hsla(240, 100%, 87%, 1);
     --bg-btnPrimary-disabled: hsl(236.5, 10%, 58.3%);
     --bg-btnPrimary-disabled2: hsl(236.5, 10%, 58.3%);
@@ -31,6 +33,7 @@
     --text-tagPink: hsl(342.1, 98.9%, 64.1%);
 
     /* TEXT COLORS - CUSTOM */
+    --text-tagGreen-highlight: hsl(169.2, 74.1%, 35%);
     --text-sectionText-highlight: hsla(219, 19.4%, 55%, 1);
     --text-btnPrimary: rgb(205, 207, 237);
 

diff --git a/web/src/assets/widget-snippets.module.css b/web/src/assets/widget-snippets.module.css
@@ -5,16 +5,24 @@
 }
 
 .colorGreen {
-    color: var(--bg-tagGreen);
+    color: var(--bg-tagGreen-highlight, var(--bg-tagGreen));
+}
+
+.colorOrange {
+    color: var(--bg-tagOrange-highlight, var(--bg-tagOrange));
+}
+
+.colorPink {
+    color: var(--bg-tagPink-highlight, var(--bg-tagPink));
 }
 
 .linkColor {
     color: var(--text-sectionTitle);
 }
 
 .tagGreen {
-    background-color: var(--bg-tagGreen);
-    color: var(--text-tagGreen);
+    background-color: var(--bg-tagGreen-highlight, var(--bg-tagGreen));
+    color: var(--text-tagGreen-highlight, var(--text-tagGreen));
 }
 
 .tagPink {

diff --git a/web/src/ui/components/Build/FeedItemBody.js b/web/src/ui/components/Build/FeedItemBody.js
@@ -40,13 +40,15 @@ const Artifact = ({
 }) => {
   // const { theme } = useContext(ThemeContext);
   const [showingQrModal, toggleShowQrModal] = useState(false);
+  console.log(`artifact:`, JSON.stringify(artifact, null, 2));
   const {
     plist_signed_url: artifactPlistSignedUrl = "",
     dl_artifact_signed_url: artifactDlArtifactSignedUrl = "",
     kind: artifactKind = "",
     local_path: artifactLocalPath = "",
     file_size: artifactFileSize = "",
     driver: artifactDriver = "",
+    state: artifactState = "",
   } = artifact;
 
   return (
@@ -66,7 +68,7 @@ const Artifact = ({
           <div className={bodyStyles.artifactInfoInner}>
             <ArtifactRowKindIcon
               // color={theme.bg.tagGreen}
-              kind={artifactKind}
+              {...{ artifactKind, artifactState }}
             />
             <ArtifactKindName {...{ artifactKind }} />
             <BuildIdentifier {...{ buildShortId }} />

diff --git a/web/src/ui/components/Build/FeedItemBody.module.css b/web/src/ui/components/Build/FeedItemBody.module.css
@@ -17,8 +17,8 @@
     padding: space_lg;
     margin-bottom: space_md;
     border-radius: 0.5em;
-    background-color: var(--bg-block-highlight-hsla);
-    color: var(--text-sectionText-highlight-hsla);
+    background-color: var(--bg-block-highlight);
+    color: var(--text-sectionText-highlight);
 }
 
 @media (min-width: mobile_md) {
@@ -36,8 +36,8 @@
 .buildInfoTagsInner1 {
     composes: childrenMrSm childrenMbMd;
     composes: flexRow flexWrap aiWrapCenter;
-    background-color: var(--bg-block-highlight-hsla);
-    color: var(--text-sectionText-highlight-hsla);
+    background-color: var(--bg-block-highlight);
+    color: var(--text-sectionText-highlight);
     flex: 1;
 }
 
@@ -51,7 +51,7 @@
     flex-grow: 1;
     padding: space_lg;
     /* margin-bottom: space_lg; */
-    border: 1px solid var(--icon-filterUnselected);
+    border: 1px solid var(--bg-block-highlight);
 }
 
 .latestBuildVcsInfoInner {
@@ -91,7 +91,7 @@
 .artifactContainerOuter {
     composes: flexRow flexWrap;
     padding: space_lg space_lg space_lg space_xl;
-    border: 1px solid var(--icon-filterUnselected);
+    border: 1px solid var(--bg-block-highlight);
     border-top-width: 0px;
 }
 

diff --git a/web/src/ui/components/Build/FeedItemWidgets.js b/web/src/ui/components/Build/FeedItemWidgets.js
@@ -41,7 +41,7 @@ import {
 import { getIsArray, getIsArrayWithN } from "../../../util/getters";
 import { scramble } from "../../../util/misc";
 import { getArtifactKindIcon } from "../../styleTools/brandIcons";
-import { getTagColorStyle } from "../../styleTools/buttonStyler";
+import { getTagColorStyle } from "../../styleTools/colorsState";
 import { colors } from "../../styleTools/themes.old";
 import AnchorLink from "../AnchorLink/AnchorLink";
 import ConditionallyWrappedComponent from "../ConditionallyWrappedComponent";
@@ -87,13 +87,7 @@ export const HeaderChevronIcon = ({ collapsed, toggleCollapsed }) => (
       toggleCollapsed(!collapsed);
     }}
   >
-    {!collapsed ? (
-      // <FontAwesomeIcon icon={faChevronCircleUp} size="lg" />
-      <ChevronUp />
-    ) : (
-      // <FontAwesomeIcon icon={faChevronCircleDown} size="lg" />
-      <ChevronDown />
-    )}
+    {!collapsed ? <ChevronUp /> : <ChevronDown />}
   </div>
 );
 
@@ -177,11 +171,11 @@ export const BuildStateTag = ({ buildState, buildId }) => {
   );
 };
 
-export const ArtifactKindIcon = ({ kind = "" }) => (
-  <div className={wst.colorGreen}>
+export const ArtifactKindIcon = ({ artifactKind = "", artifactState = "" }) => (
+  <div className={getTagColorStyle({ state: artifactState, noTag: true })}>
     <FontAwesomeIcon
-      icon={getArtifactKindIcon(kind)}
-      title={`Artifact kind: ${ARTIFACT_KIND_NAMES[kind]}`}
+      icon={getArtifactKindIcon(artifactKind)}
+      title={`Artifact kind: ${ARTIFACT_KIND_NAMES[artifactKind]}`}
       size="lg"
     />
   </div>
@@ -192,7 +186,8 @@ export const LatestBuildArtifactsIcons = ({ buildHasArtifacts, theme }) =>
     <>
       {buildHasArtifacts.map((a, i) => (
         <ArtifactKindIcon
-          kind={_.get(a, "kind", ARTIFACT_KIND_NAMES.UnknownKind)}
+          artifactKind={_.get(a, "kind", ARTIFACT_KIND_NAMES.UnknownKind)}
+          artifactState={a["state"]}
           isFirst={i === 0}
           key={i}
         />
@@ -266,13 +261,17 @@ export const DlButtonSmall = ({ buildHasArtifacts, theme }) =>
     </>
   );
 
-export const ArtifactRowKindIcon = ({ color, kind = "" }) => (
-  <FontAwesomeIcon
-    icon={getArtifactKindIcon(kind)}
-    color={color}
-    title={`Artifact kind: ${ARTIFACT_KIND_NAMES[kind]}`}
-    size="lg"
-  />
+export const ArtifactRowKindIcon = ({
+  artifactKind = "",
+  artifactState = "",
+}) => (
+  <div className={cn(getTagColorStyle({ state: artifactState, noTag: true }))}>
+    <FontAwesomeIcon
+      icon={getArtifactKindIcon(artifactKind)}
+      title={`Artifact kind: ${ARTIFACT_KIND_NAMES[artifactKind]}`}
+      size="lg"
+    />
+  </div>
 );
 
 export const QrCode = ({ artifactPlistSignedUrl, closeAction }) => (
@@ -532,7 +531,7 @@ export const MrState = ({ mrState, theme }) =>
         wst.tag,
         wst.borderPlain,
         wst.upper,
-        getTagColorStyle(MR_STATE[mrState])
+        getTagColorStyle({ state: MR_STATE[mrState] })
       )}
     >
       {mrState === MR_STATE.Opened ? <AlertCircle /> : <GitPullRequest />}

diff --git a/web/src/ui/styleTools/buttonStyler.js b/web/src/ui/styleTools/buttonStyler.js
diff --git a/web/src/ui/styleTools/colorsState.js b/web/src/ui/styleTools/colorsState.js
@@ -0,0 +1,17 @@
+import { BUILD_STATE, ARTIFACT_STATE } from "../../constants";
+import wst from "../../assets/widget-snippets.module.css";
+
+export const getTagColorStyle = ({ state = "", noTag = false }) => {
+  const colorNames = {
+    [ARTIFACT_STATE.Finished]: "Green",
+    [ARTIFACT_STATE.Error]: "Pink",
+    [BUILD_STATE.Passed]: "Green",
+    [BUILD_STATE.Failed]: "Pink",
+    [BUILD_STATE.Running]: "Orange",
+    [BUILD_STATE.Building]: "Orange",
+  };
+
+  const color = state && typeof state === "string" ? colorNames[state] : "";
+  const srcPrefix = noTag ? "color" : "tag";
+  return color ? wst[srcPrefix + color] : "";
+};