From 694d2452091d0df887b9880d7b756d5fc9161d0e Mon Sep 17 00:00:00 2001 From: Maija <51128208+Maijjay@users.noreply.github.com> Date: Thu, 28 Sep 2023 10:41:35 +0300 Subject: [PATCH 1/2] Get rid of most non-atlas icons (#1180) * updated icons and test-screenshots * Little test fixes * updated test-snapshots * Little fix --------- Co-authored-by: Maija Y --- .../ExerciseTask/ExerciseTaskEditor.tsx | 43 ++++++++++-------- .../src/components/editors/EmailEditor.tsx | 4 +- .../editors/ExamsInstructionsEditor.tsx | 4 +- .../moocfi/ExerciseBlock/ExerciseTask.tsx | 5 +- .../moocfi/ExerciseBlock/index.tsx | 7 +-- .../src/components/HeadingsNavigation.tsx | 9 ++-- .../src/components/SearchDialog.tsx | 31 ++++++------- .../src/components/PermissionPage.tsx | 11 +++-- .../exercise-services/ExerciseServiceCard.tsx | 15 ++++-- .../src/pages/email-verified.tsx | 8 ++-- .../src/pages/playground-views.tsx | 20 ++++---- services/main-frontend/src/pages/signup.tsx | 7 ++- .../timeline/TimelineContent.tsx | 3 +- shared-module/src/components/Button.tsx | 8 +++- .../src/components/DropdownMenu/index.tsx | 5 +- .../src/components/GenericInfobox.tsx | 6 +-- .../src/components/Notifications/Delete.tsx | 11 +---- .../src/components/Notifications/Error.tsx | 11 +---- .../src/components/Notifications/Success.tsx | 11 +---- .../author-block-desktop-regular.png | Bin 105695 -> 105658 bytes .../author-block-mobile-tall.png | Bin 73274 -> 73247 bytes ...tion-registration-page-desktop-regular.png | Bin 78627 -> 78970 bytes ...mpletion-registration-page-mobile-tall.png | Bin 59520 -> 59790 bytes ...ng-selection-eng-to-fi-desktop-regular.png | Bin 85136 -> 85035 bytes ...e-lang-selection-eng-to-fi-mobile-tall.png | Bin 49989 -> 49977 bytes ...ng-selection-fi-to-eng-desktop-regular.png | Bin 79080 -> 79126 bytes ...e-lang-selection-fi-to-eng-mobile-tall.png | Bin 46947 -> 46970 bytes ...-just-after-each-other-desktop-regular.png | Bin 62469 -> 62920 bytes ...-not-just-after-each-other-mobile-tall.png | Bin 34491 -> 34890 bytes ...gher-than-word-matches-desktop-regular.png | Bin 68020 -> 68725 bytes ...d-higher-than-word-matches-mobile-tall.png | Bin 40107 -> 40643 bytes ...er-posting-completions-desktop-regular.png | Bin 83063 -> 83477 bytes ...-after-posting-completions-mobile-tall.png | Bin 34862 -> 35268 bytes ...another-module-preview-desktop-regular.png | Bin 81910 -> 82586 bytes ...ion-another-module-preview-mobile-tall.png | Bin 36611 -> 35767 bytes ...default-module-preview-desktop-regular.png | Bin 84790 -> 85721 bytes ...ion-default-module-preview-mobile-tall.png | Bin 54170 -> 54112 bytes ...page-with-new-instance-desktop-regular.png | Bin 74337 -> 74594 bytes ...ent-page-with-new-instance-mobile-tall.png | Bin 65001 -> 65313 bytes .../wrong-course-banner-desktop-regular.png | Bin 47871 -> 47880 bytes .../wrong-course-banner-mobile-tall.png | Bin 34845 -> 34810 bytes ...mponents-renderer-view-desktop-regular.png | Bin 1283791 -> 1283618 bytes ...t-components-renderer-view-mobile-tall.png | Bin 1026299 -> 1026283 bytes ...exam-exercise-answered-desktop-regular.png | Bin 60602 -> 61380 bytes .../exam-exercise-answered-mobile-tall.png | Bin 41883 -> 42076 bytes .../glossary-tooltips-desktop-regular.png | Bin 38132 -> 38081 bytes .../glossary-tooltips-mobile-tall.png | Bin 27548 -> 27521 bytes .../final-glossary-page-desktop-regular.png | Bin 94994 -> 94871 bytes .../final-glossary-page-mobile-tall.png | Bin 51149 -> 51122 bytes .../initial-glossary-page-desktop-regular.png | Bin 101841 -> 101940 bytes .../initial-glossary-page-mobile-tall.png | Bin 60735 -> 60708 bytes ...adings-navigation-open-desktop-regular.png | Bin 140266 -> 140147 bytes .../headings-navigation-open-mobile-tall.png | Bin 75424 -> 75320 bytes .../initial-page-desktop-regular.png | Bin 70320 -> 70252 bytes .../initial-page-mobile-tall.png | Bin 43704 -> 43674 bytes .../page-after-restore-desktop-regular.png | Bin 70320 -> 70252 bytes .../page-after-restore-mobile-tall.png | Bin 43704 -> 43674 bytes .../latex.spec.ts/latex-desktop-regular.png | Bin 41705 -> 41392 bytes .../latex.spec.ts/latex-mobile-tall.png | Bin 29852 -> 29829 bytes ...ure-middle-of-the-page-desktop-regular.png | Bin 49584 -> 50524 bytes ...ructure-middle-of-the-page-mobile-tall.png | Bin 30456 -> 30590 bytes ...ucture-top-of-the-page-desktop-regular.png | Bin 68504 -> 69182 bytes ...solutions-in-exercises-desktop-regular.png | Bin 69818 -> 69770 bytes ...del-solutions-in-exercises-mobile-tall.png | Bin 43432 -> 43408 bytes ...ring-resubmitting-test-desktop-regular.png | Bin 65516 -> 65647 bytes ...nswering-resubmitting-test-mobile-tall.png | Bin 42806 -> 43417 bytes ...ring-resubmitting-test-desktop-regular.png | Bin 67326 -> 67477 bytes ...nswering-resubmitting-test-mobile-tall.png | Bin 46573 -> 47262 bytes ...ring-resubmitting-test-desktop-regular.png | Bin 54719 -> 55006 bytes .../correct-answer-desktop-regular.png | Bin 47068 -> 47655 bytes .../correct-answer-mobile-tall.png | Bin 33495 -> 34276 bytes ...rrect-score-stays-same-desktop-regular.png | Bin 46340 -> 46848 bytes ...d-correct-score-stays-same-mobile-tall.png | Bin 34214 -> 35140 bytes .../two-out-of-three-desktop-regular.png | Bin 44390 -> 45240 bytes .../two-out-of-three-mobile-tall.png | Bin 32613 -> 33623 bytes ...ent-1-not-seeing-score-desktop-regular.png | Bin 108850 -> 108932 bytes ...student-1-not-seeing-score-mobile-tall.png | Bin 90254 -> 90242 bytes ...student-1-seeing-score-desktop-regular.png | Bin 108850 -> 108932 bytes .../student-1-seeing-score-mobile-tall.png | Bin 90254 -> 90242 bytes ...student-2-seeing-score-desktop-regular.png | Bin 114502 -> 114479 bytes .../student-2-seeing-score-mobile-tall.png | Bin 94988 -> 95241 bytes ...nt-1-after-peer-review-desktop-regular.png | Bin 115679 -> 115787 bytes ...tudent-1-after-peer-review-mobile-tall.png | Bin 96891 -> 96970 bytes ...ent-1-after-submission-desktop-regular.png | Bin 119803 -> 120308 bytes ...student-1-after-submission-mobile-tall.png | Bin 96719 -> 96675 bytes ...student-1-seeing-score-desktop-regular.png | Bin 115679 -> 115787 bytes .../student-1-seeing-score-mobile-tall.png | Bin 96891 -> 96970 bytes ...nt-2-after-peer-review-desktop-regular.png | Bin 113521 -> 113558 bytes ...tudent-2-after-peer-review-mobile-tall.png | Bin 95008 -> 95262 bytes ...ent-2-after-submission-desktop-regular.png | Bin 118506 -> 118119 bytes ...student-2-after-submission-mobile-tall.png | Bin 95216 -> 95239 bytes ...student-2-seeing-score-desktop-regular.png | Bin 113521 -> 113558 bytes .../student-2-seeing-score-mobile-tall.png | Bin 95008 -> 95262 bytes ...ew-multiple-submission-desktop-regular.png | Bin 102923 -> 102961 bytes ...review-multiple-submission-mobile-tall.png | Bin 87908 -> 87719 bytes ...view-single-submission-desktop-regular.png | Bin 106145 -> 106112 bytes ...r-review-single-submission-mobile-tall.png | Bin 90612 -> 90644 bytes ...ew-multiple-submission-desktop-regular.png | Bin 101369 -> 101521 bytes ...review-multiple-submission-mobile-tall.png | Bin 86170 -> 86292 bytes ...view-single-submission-desktop-regular.png | Bin 118125 -> 118313 bytes ...r-review-single-submission-mobile-tall.png | Bin 96975 -> 97039 bytes ...ws-multiple-submission-desktop-regular.png | Bin 102923 -> 102961 bytes ...eviews-multiple-submission-mobile-tall.png | Bin 87908 -> 87719 bytes ...iews-single-submission-desktop-regular.png | Bin 106145 -> 106112 bytes ...-reviews-single-submission-mobile-tall.png | Bin 90612 -> 90644 bytes ...-1-multiple-submission-desktop-regular.png | Bin 101369 -> 101521 bytes ...view-1-multiple-submission-mobile-tall.png | Bin 86170 -> 86292 bytes ...view-single-submission-desktop-regular.png | Bin 104369 -> 104727 bytes ...r-review-single-submission-mobile-tall.png | Bin 89028 -> 89157 bytes ...-1-multiple-submission-desktop-regular.png | Bin 113196 -> 112852 bytes ...view-1-multiple-submission-mobile-tall.png | Bin 92647 -> 92752 bytes ...view-single-submission-desktop-regular.png | Bin 116162 -> 116852 bytes ...r-review-single-submission-mobile-tall.png | Bin 95409 -> 95472 bytes ...ws-multiple-submission-desktop-regular.png | Bin 101369 -> 101521 bytes ...eviews-multiple-submission-mobile-tall.png | Bin 86170 -> 86292 bytes ...iews-single-submission-desktop-regular.png | Bin 104369 -> 104727 bytes ...-reviews-single-submission-mobile-tall.png | Bin 89028 -> 89157 bytes ...view-editor-after-save-desktop-regular.png | Bin 79449 -> 79805 bytes ...r-review-editor-after-save-mobile-tall.png | Bin 32461 -> 32832 bytes ...view-editor-after-save-desktop-regular.png | Bin 60655 -> 60945 bytes .../edited-permission-desktop-regular.png | Bin 65093 -> 67340 bytes .../edited-permission-mobile-tall.png | Bin 40748 -> 41110 bytes .../editing-permission-desktop-regular.png | Bin 66844 -> 69154 bytes .../removed-permission-desktop-regular.png | Bin 59578 -> 61086 bytes .../removed-permission-mobile-tall.png | Bin 49469 -> 49937 bytes .../sorted-by-email-desktop-regular.png | Bin 55624 -> 56938 bytes .../sorted-by-role-desktop-regular.png | Bin 55656 -> 56992 bytes .../after-changes-desktop-regular.png | Bin 71489 -> 71466 bytes .../after-changes-mobile-tall.png | Bin 44740 -> 44685 bytes .../no-edits-yet-desktop-regular.png | Bin 75876 -> 75668 bytes .../no-edits-yet-mobile-tall.png | Bin 35009 -> 34983 bytes ...cess-notification-test-desktop-regular.png | Bin 51496 -> 52247 bytes .../success-notification-test-mobile-tall.png | Bin 28392 -> 28712 bytes ...-choice-correct-answer-desktop-regular.png | Bin 57361 -> 57442 bytes ...iple-choice-correct-answer-mobile-tall.png | Bin 43482 -> 43557 bytes ...t-answer-after-correct-desktop-regular.png | Bin 73799 -> 74258 bytes ...rrect-answer-after-correct-mobile-tall.png | Bin 50330 -> 50836 bytes ...hoice-incorrect-answer-desktop-regular.png | Bin 69090 -> 69298 bytes ...le-choice-incorrect-answer-mobile-tall.png | Bin 47747 -> 47750 bytes .../essay-feedback-desktop-regular.png | Bin 110463 -> 110558 bytes .../essay-feedback-mobile-tall.png | Bin 69545 -> 69844 bytes ...eedback-correct-answer-desktop-regular.png | Bin 68119 -> 68194 bytes ...wn-feedback-correct-answer-mobile-tall.png | Bin 44012 -> 44136 bytes ...t-answer-after-correct-desktop-regular.png | Bin 68705 -> 68976 bytes ...rrect-answer-after-correct-mobile-tall.png | Bin 44216 -> 44408 bytes ...dback-incorrect-answer-desktop-regular.png | Bin 63430 -> 63748 bytes ...-feedback-incorrect-answer-mobile-tall.png | Bin 44502 -> 44558 bytes .../open-feedback-correct-desktop-regular.png | Bin 51848 -> 52034 bytes .../open-feedback-correct-mobile-tall.png | Bin 41087 -> 41080 bytes ...pen-feedback-incorrect-desktop-regular.png | Bin 51849 -> 52057 bytes .../open-feedback-incorrect-mobile-tall.png | Bin 40924 -> 41260 bytes ...eline-feedback-correct-desktop-regular.png | Bin 52273 -> 52208 bytes .../timeline-feedback-correct-mobile-tall.png | Bin 39838 -> 39890 bytes ...ct-with-model-solution-desktop-regular.png | Bin 56149 -> 56132 bytes ...orrect-with-model-solution-mobile-tall.png | Bin 43929 -> 44047 bytes ...imeline-feedback-wrong-desktop-regular.png | Bin 52858 -> 53116 bytes .../timeline-feedback-wrong-mobile-tall.png | Bin 40609 -> 40684 bytes ...m-shows-if-not-aswered-desktop-regular.png | Bin 62248 -> 62025 bytes ...-form-shows-if-not-aswered-mobile-tall.png | Bin 33729 -> 33727 bytes .../add-completions.spec.ts | 4 +- .../src/tests/manage-course-structure.spec.ts | 7 +-- 161 files changed, 109 insertions(+), 121 deletions(-) diff --git a/services/cms/src/blocks/ExerciseTask/ExerciseTaskEditor.tsx b/services/cms/src/blocks/ExerciseTask/ExerciseTaskEditor.tsx index 0c3057f7f2ee..40b994af1b1f 100644 --- 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")} > - + {attributes.show_editor ? ( + + ) : ( + + )}
- +
diff --git a/services/cms/src/components/editors/EmailEditor.tsx b/services/cms/src/components/editors/EmailEditor.tsx index 3330daa87c07..2aa7c63d09db 100644 --- 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> = ({ } + startIcon={} loading={saving} onClick={handleOnSave} > diff --git a/services/cms/src/components/editors/ExamsInstructionsEditor.tsx b/services/cms/src/components/editors/ExamsInstructionsEditor.tsx index 588d4dee5456..7a4bde9b841f 100644 --- 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} + startIcon={} loading={saving} onClick={handleOnSave} > diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx index f2492996583c..034a3f1ec9ec 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx +++ b/services/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> = ({ } `} > - + {feedbackText} )} diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx index 51a49ba2ffb0..5338424dac80 100644 --- 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,8 +474,8 @@ 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; @@ -483,7 +483,8 @@ const ExerciseBlock: React.FC< } `} > - + +
{t("exam-submission-has-been-saved-help-text")}
)} diff --git a/services/course-material/src/components/HeadingsNavigation.tsx b/services/course-material/src/components/HeadingsNavigation.tsx index e0cf5a76dd32..cc2be673d3c6 100644 --- 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 - + {realCollapsed ? ( + + ) : ( + + )} ) diff --git a/services/course-material/src/components/SearchDialog.tsx b/services/course-material/src/components/SearchDialog.tsx index 37b24b8b06fc..b20be6097ecb 100644 --- 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,20 @@ const SearchDialog: React.FC> = ({ setOpen(true) } - const openModalOnEnter = (event: React.KeyboardEvent) => { - if (event.key == "Enter") { - setOpen(true) - } - } - return ( <> - + > + +
> = ({ `} > - + > = ({ aria-label={t("close")} onClick={closeModal} > - +
> = ({ domai `} onClick={() => setEditingRole({ userId: ur.id, newRole: ur.role })} > - + @@ -344,7 +345,7 @@ export const PermissionPage: React.FC> = ({ domai setEditingRole(null) }} > - + {" "} diff --git a/services/main-frontend/src/components/page-specific/manage/exercise-services/ExerciseServiceCard.tsx b/services/main-frontend/src/components/page-specific/manage/exercise-services/ExerciseServiceCard.tsx index a3e8fe5c4e60..27b565fbdc64 100644 --- a/services/main-frontend/src/components/page-specific/manage/exercise-services/ExerciseServiceCard.tsx +++ b/services/main-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 ) : status == UpdateStatus.saved ? ( - + ) : ( - + )}
diff --git a/services/main-frontend/src/pages/playground-views.tsx b/services/main-frontend/src/pages/playground-views.tsx index 72417185975e..c498e428a928 100644 --- 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> = () => { padding-left: 1rem; `} > - + {isValidServiceInfo ? ( + + ) : ( + + )} + > = () => { align-items: center; `} > - +