fix #2050: Improve slack icon contrast ratio (#2200)

* Change slack icon to react icon * Update snapshot for jest and remove slack icon file
Seneca-CDOT · Apr 23, 2021 · c426005 · c426005
1 parent e676a15
commit c426005
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/src/web/package.json b/src/web/package.json
@@ -25,6 +25,7 @@
     "next-pwa": "^5.2.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-use": "^17.2.1",
     "smoothscroll-polyfill": "^0.4.4",
     "swr": "^0.5.5",

diff --git a/src/web/public/slack-logo.svg b/src/web/public/slack-logo.svg
diff --git a/src/web/src/components/AboutFooter.tsx b/src/web/src/components/AboutFooter.tsx
@@ -3,8 +3,7 @@ import { Box, Divider, Grid, Typography, useMediaQuery } from '@material-ui/core
 import GitHubIcon from '@material-ui/icons/GitHub';
 import GitHubContributorCard from './GitHubContributorCard';
 import Logo from './Logo';
-
-const slackLogo = '/slack-logo.svg';
+import { FaSlack } from 'react-icons/fa';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -121,7 +120,7 @@ const AboutFooter = () => {
                     href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
                     className={classes.links}
                   >
-                    <img src={slackLogo} alt="logo" height="20" width="20" />
+                    <FaSlack size="22" />
                   </a>
                 </Grid>
               </Grid>
@@ -187,7 +186,7 @@ const AboutFooter = () => {
                     href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
                     className={classes.links}
                   >
-                    <img src={slackLogo} alt="logo" height="20" width="20" />
+                    <FaSlack size="22" />
                   </a>
                 </Grid>
               </Grid>
@@ -208,4 +207,3 @@ const AboutFooter = () => {
 };
 
 export default AboutFooter;
-export { slackLogo };
diff --git a/src/web/src/components/__snapshots__/AboutFooter.test.tsx.snap b/src/web/src/components/__snapshots__/AboutFooter.test.tsx.snap
@@ -120,12 +120,19 @@ exports[`renders correctly 1`] = `
                 class="makeStyles-links-5"
                 href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
               >
-                <img
-                  alt="logo"
-                  height="20"
-                  src="/slack-logo.svg"
-                  width="20"
-                />
+                <svg
+                  fill="currentColor"
+                  height="22"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 448 512"
+                  width="22"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"
+                  />
+                </svg>
               </a>
             </div>
           </div>