Replace non-Atlas icons

services/cms/src/components/PeerReviewEditor.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable i18next/no-literal-string */
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useQuery } from "@tanstack/react-query"
+import { XmarkCircle } from "@vectopus/atlas-icons-react"
 import React, { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { v4 } from "uuid"
@@ -445,8 +444,13 @@ const PeerReviewEditor: React.FC<PeerReviewEditorProps> = ({
                         <DeleteBtn
                           aria-label={t("delete")}
                           onClick={() => deletePeerReviewQuestion(id)}
+                          className={css`
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                          `}
                         >
-                          <FontAwesomeIcon icon={faXmark} />
+                          <XmarkCircle />
                         </DeleteBtn>
                       </List>
                     ))}

services/cms/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
@@ -16,9 +15,6 @@ import initI18n from "../shared-module/utils/initI18n"
 import "../styles/Gutenberg/style.scss"
 import LocalStyles from "../styles/LocalStyles"
 
-import "@fortawesome/fontawesome-svg-core/styles.css"
-config.autoAddCss = false
-
 const SERVICE_NAME = "cms"
 
 const i18n = initI18n(SERVICE_NAME)

services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/TempAccordionItem.tsx

@@ -1,8 +1,8 @@
 import { css } from "@emotion/css"
-import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { animated, useSpring } from "react-spring"
 
+import ArrowDown from "../../../../shared-module/img/caret-arrow-down.svg"
+import ArrowUp from "../../../../shared-module/img/caret-arrow-up.svg"
 import { baseTheme, headingFont } from "../../../../shared-module/styles"
 import { runCallbackIfEnterPressed } from "../../../../shared-module/utils/accessibility"
 
@@ -17,7 +17,6 @@ const TempAccordion: React.FC<
     duration: 2000,
   })
 
-  const faIcon = open ? faAngleUp : faAngleDown
   return (
     <div>
       <div
@@ -50,13 +49,21 @@ const TempAccordion: React.FC<
         >
           {title}
         </div>
-        <div
-          className={css`
-            flex: 0 0 auto;
-          `}
-        >
-          <FontAwesomeIcon icon={faIcon} />
-        </div>
+        {open ? (
+          <ArrowUp
+            className={css`
+              margin-top: 8px;
+              transform: scale(1.6);
+            `}
+          />
+        ) : (
+          <ArrowDown
+            className={css`
+              margin-top: 8px;
+              transform: scale(1.6);
+            `}
+          />
+        )}
       </div>
       {open ? <animated.div style={openAnimation}>{children}</animated.div> : null}
     </div>

services/course-material/src/components/exams/ExamTimer.tsx

@@ -1,7 +1,6 @@
 import { css, cx } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faCheckCircle, faClock } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { CheckCircle, ClockTime } from "@vectopus/atlas-icons-react"
 import { hoursToSeconds, secondsToHours, secondsToMinutes } from "date-fns"
 import React from "react"
 import { Trans, useTranslation } from "react-i18next"
@@ -72,8 +71,7 @@ const ExamTimer: React.FC<React.PropsWithChildren<ExamTimerProps>> = ({
     >
       {maxScore && (
         <InfoBoxLightGreenMedium>
-          <FontAwesomeIcon
-            icon={faCheckCircle}
+          <CheckCircle
             className={css`
               color: ${baseTheme.colors.green[200]};
               margin-right: 0.5rem;
@@ -95,8 +93,7 @@ const ExamTimer: React.FC<React.PropsWithChildren<ExamTimerProps>> = ({
         </InfoBoxLightGreenMedium>
       )}
       <InfoBoxLightGreenMedium>
-        <FontAwesomeIcon
-          icon={faClock}
+        <ClockTime
           className={css`
             margin: 0.5rem;
           `}

services/course-material/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Script from "next/script"
@@ -13,8 +12,6 @@ import { OUTDATED_BROWSER_WARNING_SCRIPT } from "../shared-module/utils/constant
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 
-import "@fortawesome/fontawesome-svg-core/styles.css"
-config.autoAddCss = false
 import "react-medium-image-zoom/dist/styles.css"
 
 const SERVICE_NAME = "course-material"

services/example-exercise/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
@@ -9,8 +8,6 @@ import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
-import "@fortawesome/fontawesome-svg-core/styles.css"
-config.autoAddCss = false
 
 const SERVICE_NAME = "example-exercise"
 

services/main-frontend/src/components/BottomPanel.tsx

@@ -1,6 +1,5 @@
 import { css } from "@emotion/css"
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { ExclamationMessage } from "@vectopus/atlas-icons-react"
 import React from "react"
 import { useTranslation } from "react-i18next"
 
@@ -63,10 +62,9 @@ const BottomPanel: React.FC<Props> = ({
           color: ${baseTheme.colors.gray[500]};
         `}
       >
-        <FontAwesomeIcon
-          icon={faExclamationCircle}
+        <ExclamationMessage
+          size={40}
           className={css`
-            font-size: 40px;
             margin-right: 1rem;
             color: ${baseTheme.colors.gray[600]};
           `}

services/main-frontend/src/components/Collapsible.tsx

@@ -1,9 +1,9 @@
 import { css } from "@emotion/css"
-import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 
+import ArrowDown from "../shared-module/img/caret-arrow-down.svg"
+import ArrowUp from "../shared-module/img/caret-arrow-up.svg"
 import { baseTheme } from "../shared-module/styles"
 import { runCallbackIfEnterPressed } from "../shared-module/utils/accessibility"
 
@@ -59,7 +59,19 @@ const Collapsible: React.FC<React.PropsWithChildren<CollapsibleProps>> = ({ chil
             justify-content: center;
           `}
         >
-          <FontAwesomeIcon icon={visible ? faAngleUp : faAngleDown} />
+          {visible ? (
+            <ArrowUp
+              className={css`
+                transform: scale(1.4);
+              `}
+            />
+          ) : (
+            <ArrowDown
+              className={css`
+                transform: scale(1.4);
+              `}
+            />
+          )}
         </div>
       </div>
       {visible && (

services/main-frontend/src/components/PermissionPage.tsx

@@ -1,5 +1,4 @@
 import { css } from "@emotion/css"
-import { ExpandMore } from "@mui/icons-material"
 import { useQuery } from "@tanstack/react-query"
 import { CheckCircle, Pencil, XmarkCircle } from "@vectopus/atlas-icons-react"
 import { t as globalT, TFunction } from "i18next"
@@ -16,8 +15,8 @@ import ErrorBanner from "../shared-module/components/ErrorBanner"
 import SelectField from "../shared-module/components/InputFields/SelectField"
 import TextField from "../shared-module/components/InputFields/TextField"
 import useToastMutation from "../shared-module/hooks/useToastMutation"
+import CaretArrowDown from "../shared-module/img/caret-arrow-down.svg"
 import { respondToOrLarger } from "../shared-module/styles/respond"
-
 const SORT_KEY_NAME = "name"
 const SORT_KEY_EMAIL = "email"
 const SORT_KEY_ROLE = "role"
@@ -202,7 +201,15 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                     setSorting(SORT_KEY_NAME)
                   }}
                 >
-                  <ExpandMore />
+                  <CaretArrowDown
+                    className={css`
+                      margin-bottom: 8px;
+                      transform: scale(1.2);
+                      path {
+                        fill: #000;
+                      }
+                    `}
+                  />{" "}
                 </button>
               </th>
               <th>
@@ -226,7 +233,15 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                     setSorting(SORT_KEY_EMAIL)
                   }}
                 >
-                  <ExpandMore />
+                  <CaretArrowDown
+                    className={css`
+                      margin-bottom: 8px;
+                      transform: scale(1.2);
+                      path {
+                        fill: #000;
+                      }
+                    `}
+                  />
                 </button>
               </th>
               <th>
@@ -250,7 +265,15 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                     setSorting(SORT_KEY_ROLE)
                   }}
                 >
-                  <ExpandMore />
+                  <CaretArrowDown
+                    className={css`
+                      margin-bottom: 8px;
+                      transform: scale(1.2);
+                      path {
+                        fill: #000;
+                      }
+                    `}
+                  />
                 </button>
               </th>
               <th>{t("label-action")}</th>

services/main-frontend/src/components/page-specific/manage/exercises/id/submissions/AnswersRequiringAttentionItem.tsx

@@ -1,7 +1,6 @@
 import { css, cx } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faAngleDown, faCircleExclamation } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { ExclamationMessage } from "@vectopus/atlas-icons-react"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { usePopper } from "react-popper"
@@ -14,6 +13,7 @@ import {
 } from "../../../../../../shared-module/bindings"
 import Button from "../../../../../../shared-module/components/Button"
 import useToastMutation from "../../../../../../shared-module/hooks/useToastMutation"
+import ArrowDown from "../../../../../../shared-module/img/caret-arrow-down.svg"
 import { primaryFont } from "../../../../../../shared-module/styles"
 import { respondToOrLarger } from "../../../../../../shared-module/styles/respond"
 import SubmissionIFrame from "../../../../submissions/id/SubmissionIFrame"
@@ -26,12 +26,6 @@ interface Props {
   refetch: () => void
 }
 
-const StyledIconDark = styled(FontAwesomeIcon)`
-  font-size: 4rem;
-  color: white;
-  margin: 1.5rem;
-`
-
 const StatusPanel = styled.div`
   border-top: 3px solid rgba(112, 112, 112, 0.1);
   width: 100%;
@@ -149,7 +143,13 @@ const AnswersRequiringAttentionItem: React.FC<Props> = ({
         `}
       >
         <TopBar>
-          <StyledIconDark icon={faCircleExclamation} />
+          <ExclamationMessage
+            size={64}
+            className={css`
+              color: white;
+              margin: 1.5rem;
+            `}
+          />
           <div id="text-column">
             <p
               className={css`
@@ -314,12 +314,12 @@ const AnswersRequiringAttentionItem: React.FC<Props> = ({
                 onClick={handleOpenPopup}
               >
                 {t("button-text-custom-points")}
-                <FontAwesomeIcon
+                <ArrowDown
                   className={css`
-                    margin-left: 0.5em;
+                    transform: scale(1.2);
+                    margin-left: 0.6em;
+                    margin-bottom: 4px;
                   `}
-                  id="fa-angle-down"
-                  icon={faAngleDown}
                 />
               </Button>
             </div>

services/main-frontend/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
@@ -14,10 +13,6 @@ import { OUTDATED_BROWSER_WARNING_SCRIPT } from "../shared-module/utils/constant
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 
-import "@fortawesome/fontawesome-svg-core/styles.css"
-
-config.autoAddCss = false
-
 const SERVICE_NAME = "main-frontend"
 
 const i18n = initI18n(SERVICE_NAME)