Checklists – Add icons (#2507)

* wip * Add icons throughout checklisting app
responsible-ai-collaborative · Dec 19, 2023 · f9850a2 · f9850a2
1 parent 84267de
commit f9850a2
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/site/gatsby-site/src/components/checklists/CheckListForm.js b/site/gatsby-site/src/components/checklists/CheckListForm.js
@@ -5,6 +5,17 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useMutation, useApolloClient, gql } from '@apollo/client';
 import { LocalizedLink } from 'plugins/gatsby-theme-i18n';
 import debounce from 'lodash/debounce';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faEnvelope,
+  faPlusCircle,
+  faWindowMaximize,
+  faWindowMinimize,
+  faBullseye,
+  faMicrochip,
+  faArrowsTurnToDots,
+  faTag,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { DELETE_CHECKLIST } from '../../graphql/checklists';
 import {
@@ -144,6 +155,7 @@ export default function CheckListForm({
         <HeaderControls>
           <SavingIndicator className="mr-2" {...{ isSubmitting, submissionError }} />
           <Button color="light" onClick={() => alert('Coming soon')}>
+            <FontAwesomeIcon icon={faEnvelope} className="mr-2" />
             <Trans>Subscribe</Trans>
           </Button>
           {userIsOwner && (
@@ -176,6 +188,7 @@ export default function CheckListForm({
                 )
               }
             >
+              <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
               <Trans>Expand all</Trans>
             </Button>
             <Button
@@ -187,6 +200,7 @@ export default function CheckListForm({
                 )
               }
             >
+              <FontAwesomeIcon icon={faWindowMinimize} className="mr-2" />
               <Trans>Collapse all</Trans>
             </Button>
             {userIsOwner && (
@@ -198,6 +212,7 @@ export default function CheckListForm({
                   );
                 }}
               >
+                <FontAwesomeIcon icon={faPlusCircle} className="mr-2" />
                 <Trans>Add Risk</Trans>
               </Button>
             )}
@@ -235,6 +250,7 @@ const AboutSystem = ({ formAbout, debouncedSetFieldValue, userIsOwner }) => {
   return (
     <section>
       <Label for="about-system">
+        <FontAwesomeIcon icon={faMicrochip} className="mr-2" />
         <Trans>About System</Trans>
       </Label>
       <Textarea
@@ -262,9 +278,13 @@ const QueryTagInput = ({
   setFieldValue,
   placeHolder,
   userIsOwner,
+  icon,
 }) => (
   <div className="bootstrap">
-    <Label for={id}>{title}</Label>
+    <Label for={id}>
+      {icon && <FontAwesomeIcon icon={icon} className="mr-2" />}
+      {title}
+    </Label>
     <Tags
       id={id}
       value={idValue}
@@ -285,6 +305,7 @@ const GoalsTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
     {...{
       title: 'Goals',
       id: 'tags_goals',
+      icon: faBullseye,
       idValue: values['tags_goals'],
       labelKey: abbreviatedTag,
       include: (tagParts) =>
@@ -303,6 +324,7 @@ const MethodsTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
     {...{
       title: 'Methods',
       id: 'tags_methods',
+      icon: faArrowsTurnToDots,
       idValue: values['tags_methods'],
       labelKey: abbreviatedTag,
       include: (tagParts) =>
@@ -321,6 +343,7 @@ const OtherTagInput = ({ values, tags, setFieldValue, userIsOwner }) => (
     {...{
       title: 'Other',
       id: 'tags_other',
+      icon: faTag,
       idValue: values['tags_other'],
       labelKey: (tag) => tag,
       include: (tagParts) =>

diff --git a/site/gatsby-site/src/components/checklists/ChecklistsIndex.js b/site/gatsby-site/src/components/checklists/ChecklistsIndex.js
@@ -6,7 +6,12 @@ import { Trans, useTranslation } from 'react-i18next';
 import { LocalizedLink } from 'plugins/gatsby-theme-i18n';
 import { useQuery, useMutation } from '@apollo/client';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheckToSlot } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCheckToSlot,
+  faEnvelope,
+  faPlusCircle,
+  faClone,
+} from '@fortawesome/free-solid-svg-icons';
 import gql from 'graphql-tag';
 
 import CardSkeleton from 'elements/Skeletons/Card';
@@ -175,6 +180,7 @@ const ChecklistsIndex = ({ users }) => {
                   window.location = '/apps/checklists?id=' + newChecklist.id;
                 }}
               >
+                <FontAwesomeIcon icon={faPlusCircle} className="mr-2" />
                 <Trans>New</Trans>
               </Button>
             )}
@@ -262,9 +268,11 @@ const CheckListCard = ({ checklist, setChecklists, owner }) => {
             }
           }}
         >
+          <FontAwesomeIcon icon={faClone} className="mr-2" />
           <Trans>Clone</Trans>
         </Button>
         <Button color="light" onClick={() => alert('Coming soon')}>
+          <FontAwesomeIcon icon={faEnvelope} className="mr-2" />
           <Trans>Subscribe</Trans>
         </Button>
         {user.id == checklist.owner_id && (

diff --git a/site/gatsby-site/src/components/checklists/ExportDropdown.js b/site/gatsby-site/src/components/checklists/ExportDropdown.js
@@ -2,10 +2,19 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import { Dropdown } from 'flowbite-react';
 import { exportJson, exportCsv, exportHtml } from 'utils/checklists';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const ExportDropdown = ({ checklist }) => {
+  const label = (
+    <>
+      <FontAwesomeIcon icon={faDownload} className="mr-2"/>
+      <Trans>Export</Trans>
+    </>
+  );
+
   return (
-    <Dropdown label="Export">
+    <Dropdown label={label}>
       <Dropdown.Item onClick={() => exportJson(checklist)}>
         <Trans>JSON</Trans>
       </Dropdown.Item>

diff --git a/site/gatsby-site/src/components/checklists/RiskSection.js b/site/gatsby-site/src/components/checklists/RiskSection.js
@@ -16,6 +16,10 @@ import {
   faComputer,
   faHashtag,
   faTrash,
+  faBarsProgress,
+  faNoteSticky,
+  faRotateLeft,
+  faFilter,
 } from '@fortawesome/free-solid-svg-icons';
 
 export default function RiskSection({
@@ -143,6 +147,7 @@ export default function RiskSection({
         {showPrecedentFilters && (
           <PrecedentsQuery>
             <Label>
+              <FontAwesomeIcon icon={faFilter} className="mr-2" />
               <Trans>Precedents Filter</Trans>
             </Label>
             <div className="bootstrap">
@@ -159,7 +164,10 @@ export default function RiskSection({
         )}
         <Precedents>
           <div className="flex justify-between">
-            <Label>Precedents</Label>
+            <Label>
+              <FontAwesomeIcon icon={faRotateLeft} className="mr-2" />
+              {t('Precedents')}
+            </Label>
             <button
               className="text-gray-600 mb-1"
               onClick={() => setShowPrecedentFilters((value) => !value)}
@@ -192,6 +200,7 @@ export default function RiskSection({
         </Precedents>
         <RiskFields>
           <label className="-mb-1" htmlFor="risk_status">
+            <FontAwesomeIcon icon={faBarsProgress} className="mr-2" />
             Risk Status
           </label>
           <Select
@@ -224,7 +233,10 @@ const RiskSeverity = ({ risk, debouncedUpdateRisk, userIsOwner }) => {
 
   return (
     <div>
-      <Label>{t('Severity')}</Label>
+      <Label>
+        <FontAwesomeIcon icon={faBolt} className="mr-2" />
+        {t('Severity')}
+      </Label>
       <TextInput
         value={displaySeverity}
         disabled={!userIsOwner}
@@ -244,7 +256,10 @@ const RiskLikelihood = ({ risk, debouncedUpdateRisk, userIsOwner }) => {
 
   return (
     <div>
-      <Label>{t('Likelihood')}</Label>
+      <Label>
+        <FontAwesomeIcon icon={faPercent} className="mr-2" />
+        {t('Likelihood')}
+      </Label>
       <TextInput
         value={displayLikelihood}
         disabled={!userIsOwner}
@@ -264,7 +279,10 @@ const RiskNotes = ({ risk, debouncedUpdateRisk, userIsOwner }) => {
 
   return (
     <div className="md:h-full flex flex-col">
-      <Label>{t('Risk Notes')}</Label>
+      <Label>
+        <FontAwesomeIcon icon={faNoteSticky} className="mr-2" />
+        {t('Risk Notes')}
+      </Label>
       <Textarea
         className="md:h-full shrink-1"
         value={displayNotes}

diff --git a/site/gatsby-site/src/utils/checklists.js b/site/gatsby-site/src/utils/checklists.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { faShield, faWarning } from '@fortawesome/free-solid-svg-icons';
+import { faShield, faWarning, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { v4 as uuidv4 } from 'uuid';
 import ReactDOMServer from 'react-dom/server';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const riskStatusFeatures = {
   'Not Mitigated': {
@@ -279,6 +280,7 @@ const DeleteButton = (props) => (
   `,
     }}
   >
+    <FontAwesomeIcon icon={faTrash} className="mr-2" />
     {props.children}
   </button>
 );