updated icons and test-screenshots

rage · Sep 21, 2023 · 7fff495 · 7fff495
1 parent 5c6c67a
commit 7fff495
Show file tree

Hide file tree

Showing 152 changed files with 110 additions and 115 deletions.
diff --git a/services/cms/src/blocks/ExerciseTask/ExerciseTaskEditor.tsx b/services/cms/src/blocks/ExerciseTask/ExerciseTaskEditor.tsx
@@ -1,7 +1,6 @@
 import { css, cx } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faPenSquare, faTrashAlt, faWindowClose } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { PencilBox, Trash, XmarkCircle } from "@vectopus/atlas-icons-react"
 import { InnerBlocks } from "@wordpress/block-editor"
 import { BlockEditProps } from "@wordpress/blocks"
 import React, { useContext, useState } from "react"
@@ -56,20 +55,6 @@ const gray500WithHover = css`
   }
 `
 
-// eslint-disable-next-line i18next/no-literal-string
-const StyledIconDark = styled(FontAwesomeIcon)`
-  font-size: 1rem;
-  color: ${baseTheme.colors.gray[700]};
-  margin: 1.5rem;
-`
-
-// eslint-disable-next-line i18next/no-literal-string
-const StyledIconLight = styled(FontAwesomeIcon)`
-  font-size: 1rem;
-  color: ${baseTheme.colors.gray[100]};
-  margin: 1.5rem;
-`
-
 export interface ExerciseTaskAttributes {
   id: string
   exercise_type: string
@@ -155,7 +140,23 @@ const ExerciseTaskEditor: React.FC<
             tabIndex={0}
             aria-label={attributes.show_editor ? t("close") : t("edit")}
           >
-            <StyledIconLight icon={attributes.show_editor ? faWindowClose : faPenSquare} />
+            {attributes.show_editor ? (
+              <XmarkCircle
+                size={16}
+                className={css`
+                  color: ${baseTheme.colors.gray[100]};
+                  margin: 1.5rem;
+                `}
+              />
+            ) : (
+              <PencilBox
+                size={16}
+                className={css`
+                  color: ${baseTheme.colors.gray[100]};
+                  margin: 1.5rem;
+                `}
+              />
+            )}
           </div>
           <div
             className={cx(svgSquare, gray400WithHover)}
@@ -165,7 +166,13 @@ const ExerciseTaskEditor: React.FC<
             tabIndex={0}
             aria-label={t("delete")}
           >
-            <StyledIconDark icon={faTrashAlt} />
+            <Trash
+              size={16}
+              className={css`
+                color: ${baseTheme.colors.gray[700]};
+                margin: 1.5rem;
+              `}
+            />
           </div>
         </div>
       </div>

diff --git a/services/cms/src/components/editors/EmailEditor.tsx b/services/cms/src/components/editors/EmailEditor.tsx
@@ -1,5 +1,5 @@
-import SaveIcon from "@mui/icons-material/Save"
 import LoadingButton from "@mui/lab/LoadingButton"
+import { FloppyDiskSave } from "@vectopus/atlas-icons-react"
 import { BlockInstance } from "@wordpress/blocks"
 import dynamic from "next/dynamic"
 import React, { useContext, useState } from "react"
@@ -79,7 +79,7 @@ const EmailEditor: React.FC<React.PropsWithChildren<EmailEditorProps>> = ({
           <LoadingButton
             // eslint-disable-next-line i18next/no-literal-string
             loadingPosition="start"
-            startIcon={<SaveIcon />}
+            startIcon={<FloppyDiskSave size={15} />}
             loading={saving}
             onClick={handleOnSave}
           >

diff --git a/services/cms/src/components/editors/ExamsInstructionsEditor.tsx b/services/cms/src/components/editors/ExamsInstructionsEditor.tsx
@@ -1,5 +1,5 @@
-import SaveIcon from "@mui/icons-material/Save"
 import LoadingButton from "@mui/lab/LoadingButton"
+import { FloppyDiskSave } from "@vectopus/atlas-icons-react"
 import { BlockInstance } from "@wordpress/blocks"
 import dynamic from "next/dynamic"
 import React, { useState } from "react"
@@ -68,7 +68,7 @@ const ExamsInstructionsEditor: React.FC<React.PropsWithChildren<ExamsInstruction
           <LoadingButton
             // eslint-disable-next-line i18next/no-literal-string
             loadingPosition="start"
-            startIcon={<SaveIcon />}
+            startIcon={<FloppyDiskSave size={15} />}
             loading={saving}
             onClick={handleOnSave}
           >

diff --git a/...ices/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx b/...ices/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx
@@ -1,6 +1,5 @@
 import { css } from "@emotion/css"
-import { faCircleInfo as infoIcon } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { InfoCircle } from "@vectopus/atlas-icons-react"
 import React, { useContext } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -90,7 +89,7 @@ const ExerciseTask: React.FC<React.PropsWithChildren<ExerciseTaskProps>> = ({
             }
           `}
         >
-          <FontAwesomeIcon icon={infoIcon} />
+          <InfoCircle size={20} />
           {feedbackText}
         </div>
       )}

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled"
 import { faQuestion as infoIcon } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import CheckIcon from "humbleicons/icons/check.svg"
+import { CheckCircle } from "@vectopus/atlas-icons-react"
 import { produce } from "immer"
 import { useContext, useId, useReducer, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -474,16 +474,17 @@ const ExerciseBlock: React.FC<
                         padding: 0.7rem 1rem;
                         margin: 1rem 0;
                         border: 1px solid ${baseTheme.colors.green[300]};
-
                         display: flex;
+                        align-items: center;
 
                         svg {
                           width: 80px;
                           margin-right: 1rem;
                         }
                       `}
                     >
-                      <CheckIcon />
+                      <CheckCircle size={30} />
+
                       <div>{t("exam-submission-has-been-saved-help-text")}</div>
                     </div>
                   )}

diff --git a/services/course-material/src/components/HeadingsNavigation.tsx b/services/course-material/src/components/HeadingsNavigation.tsx
@@ -1,7 +1,6 @@
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { ArrowLeft, ArrowRight } from "@vectopus/atlas-icons-react"
 import { maxBy, minBy } from "lodash"
 import { useCallback, useContext, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -341,7 +340,11 @@ const HeadingsNavigation: React.FC<React.PropsWithChildren<HeadingsNavigationPro
           }
         `}
       >
-        <FontAwesomeIcon icon={realCollapsed ? faArrowLeft : faArrowRight} />
+        {realCollapsed ? (
+          <ArrowLeft size={16} weight="bold" />
+        ) : (
+          <ArrowRight size={16} weight="bold" />
+        )}
       </button>
     </>
   )

diff --git a/services/course-material/src/components/SearchDialog.tsx b/services/course-material/src/components/SearchDialog.tsx
@@ -1,7 +1,6 @@
 import { css, cx } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faXmark as closeIcon, faSearch } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { MagnifyingGlass, XmarkCircle } from "@vectopus/atlas-icons-react"
 import Link from "next/link"
 import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -31,6 +30,8 @@ const HeaderBar = styled.div`
 `
 
 const StyledIcon = css`
+  right: -8px;
+  bottom: -2px;
   :hover {
     cursor: pointer;
   }
@@ -106,24 +107,28 @@ const SearchDialog: React.FC<React.PropsWithChildren<SearchDialogProps>> = ({
     setOpen(true)
   }
 
-  const openModalOnEnter = (event: React.KeyboardEvent<SVGSVGElement>) => {
-    if (event.key == "Enter") {
-      setOpen(true)
-    }
-  }
+  // const openModalOnEnter = (event: React.KeyboardEvent<SVGSVGElement>) => {
+  //   if (event.key == "Enter") {
+  //     setOpen(true)
+  //   }
+  // }
 
   return (
     <>
-      <FontAwesomeIcon
+      <Button
         tabIndex={0}
         id="search-for-pages-button"
         className={cx(StyledIcon)}
-        icon={faSearch}
         aria-label={t("button-label-search-for-pages")}
         aria-hidden={false}
+        size="small"
+        variant="icon"
         onClick={openModal}
-        onKeyPress={openModalOnEnter}
-      />
+
+        //   onKeyPress={openModalOnEnter}
+      >
+        <MagnifyingGlass size={16} weight="bold" />
+      </Button>
       <Dialog open={open} onClose={closeModal} noPadding aria-labelledby="search-for-pages-button">
         <div
           className={css`
@@ -138,18 +143,18 @@ const SearchDialog: React.FC<React.PropsWithChildren<SearchDialogProps>> = ({
             `}
           >
             <HeaderBar>
-              <FontAwesomeIcon
+              <MagnifyingGlass
+                weight="bold"
                 className={css`
                   margin-right: -23px;
                   z-index: 2;
                   font-size: 22px;
                   position: relative;
-                  right: -9px;
+                  right: -8px;
                   color: ${baseTheme.colors.gray[400]};
                 `}
-                icon={faSearch}
-                aria-label={t("button-label-search-for-pages")}
               />
+
               <input
                 className={css`
                   display: flex;
@@ -184,7 +189,7 @@ const SearchDialog: React.FC<React.PropsWithChildren<SearchDialogProps>> = ({
                 aria-label={t("close")}
                 onClick={closeModal}
               >
-                <FontAwesomeIcon icon={closeIcon} />
+                <XmarkCircle />
               </Button>
             </HeaderBar>
             <div

diff --git a/services/main-frontend/src/components/PermissionPage.tsx b/services/main-frontend/src/components/PermissionPage.tsx
@@ -1,6 +1,7 @@
 import { css } from "@emotion/css"
-import { Check, Clear, Create, ExpandMore } from "@mui/icons-material"
+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"
 import { useRouter } from "next/router"
 import React, { useState } from "react"
@@ -296,7 +297,7 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                         `}
                         onClick={() => setEditingRole({ userId: ur.id, newRole: ur.role })}
                       >
-                        <Create />
+                        <Pencil />
                       </button>
                       <button
                         aria-label={t("remove-role")}
@@ -308,7 +309,7 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                         `}
                         onClick={() => removeMutation.mutate({ email: ur.email, role: ur.role })}
                       >
-                        <Clear />
+                        <XmarkCircle />
                       </button>
                     </td>
                   </>
@@ -344,7 +345,7 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                           setEditingRole(null)
                         }}
                       >
-                        <Check />
+                        <CheckCircle />
                       </button>{" "}
                       <button
                         aria-label={t("cancel-editing-role")}
@@ -356,7 +357,7 @@ export const PermissionPage: React.FC<React.PropsWithChildren<Props>> = ({ domai
                         `}
                         onClick={() => setEditingRole(null)}
                       >
-                        <Clear />
+                        <XmarkCircle />
                       </button>
                     </td>
                   </>

diff --git a/...in-frontend/src/components/page-specific/manage/exercise-services/ExerciseServiceCard.tsx b/...in-frontend/src/components/page-specific/manage/exercise-services/ExerciseServiceCard.tsx
@@ -1,8 +1,13 @@
 import { css } from "@emotion/css"
-import DoneIcon from "@mui/icons-material/Done"
-import ErrorIcon from "@mui/icons-material/Error"
 import { QueryObserverResult } from "@tanstack/react-query"
-import { FloppyDiskSave, Pencil, Trash, XmarkCircle } from "@vectopus/atlas-icons-react"
+import {
+  BellXmark,
+  CheckCircle,
+  FloppyDiskSave,
+  Pencil,
+  Trash,
+  XmarkCircle,
+} from "@vectopus/atlas-icons-react"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -172,9 +177,9 @@ const ExerciseServiceCard: React.FC<React.PropsWithChildren<ExerciseServiceCardP
                 {status == UpdateStatus.none ? (
                   <FloppyDiskSave size={20} />
                 ) : status == UpdateStatus.saved ? (
-                  <DoneIcon />
+                  <CheckCircle size={20} />
                 ) : (
-                  <ErrorIcon />
+                  <BellXmark size={20} />
                 )}
               </Button>
               <Button

diff --git a/services/main-frontend/src/pages/email-verified.tsx b/services/main-frontend/src/pages/email-verified.tsx
@@ -1,6 +1,5 @@
 import { css } from "@emotion/css"
-import { faCheck as icon } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Envelope } from "@vectopus/atlas-icons-react"
 import Link from "next/link"
 import { useTranslation } from "react-i18next"
 
@@ -23,13 +22,12 @@ const EmailVerifiedPage: React.FC<React.PropsWithChildren<unknown>> = () => {
         `}
       >
         <h1>
-          <FontAwesomeIcon
-            icon={icon}
+          <Envelope
             className={css`
               color: ${baseTheme.colors.green[500]};
               margin-right: 0.5rem;
             `}
-          />{" "}
+          />
           {t("message-your-email-has-been-verified")}
         </h1>
       </div>

diff --git a/services/main-frontend/src/pages/playground-views.tsx b/services/main-frontend/src/pages/playground-views.tsx
@@ -1,10 +1,8 @@
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
-import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { isServer, useQuery } from "@tanstack/react-query"
+import { BellXmark, CheckCircle, MoveUpDownArrows } from "@vectopus/atlas-icons-react"
 import axios from "axios"
-import ArrowsVertical from "humbleicons/icons/arrows-vertical.svg"
 import _ from "lodash"
 import React, { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -390,14 +388,12 @@ const IframeViewPlayground: React.FC<React.PropsWithChildren<unknown>> = () => {
                   padding-left: 1rem;
                 `}
               >
-                <FontAwesomeIcon
-                  icon={isValidServiceInfo ? faCheck : faXmark}
-                  className={css`
-                    color: ${isValidServiceInfo
-                      ? baseTheme.colors.green[400]
-                      : baseTheme.colors.red[500]};
-                  `}
-                />
+                {isValidServiceInfo ? (
+                  <CheckCircle color={baseTheme.colors.green[400]} size={16} />
+                ) : (
+                  <BellXmark color={baseTheme.colors.red[500]} size={16} />
+                )}
+
                 <span
                   className={css`
                     margin: 0 0.5rem;
@@ -887,7 +883,7 @@ const IframeViewPlayground: React.FC<React.PropsWithChildren<unknown>> = () => {
               align-items: center;
             `}
           >
-            <ArrowsVertical />
+            <MoveUpDownArrows />
             <select
               name="pets"
               id="pet-select"