From b38f3d77779b939326b5918bbdaceee19d4af946 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Mon, 24 Jun 2024 11:06:36 -0500 Subject: [PATCH 01/24] Swapping the icons on the Browse by Topics (and elsewhere since this is a shared component) and on Departments List --- .../RootTopicIcon/RootTopicIcon.tsx | 30 +++++++++---------- .../DepartmentListingPage.tsx | 25 +++++++++------- 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx b/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx index 2b0c298b48..f4749040c8 100644 --- a/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx +++ b/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx @@ -1,31 +1,31 @@ import { RiPaletteLine, RiSeedlingLine, - RiBriefcaseLine, - RiMacbookLine, - RiBarChartBoxLine, RiEarthLine, - RiLightbulbLine, - RiBuildingLine, - RiServiceLine, RiQuillPenLine, - RiMicroscopeLine, + RiBriefcase3Line, + RiLightbulbFlashLine, + RiRobot2Line, + RiStethoscopeLine, + RiInfinityLine, + RiTestTubeLine, + RiUserSearchLine, } from "@remixicon/react" import React from "react" /* TODO Using any icons until we have a solution for specifying them */ const ICON_MAP = { - Business: RiBriefcaseLine, - Energy: RiLightbulbLine, - Engineering: RiBuildingLine, + Business: RiBriefcase3Line, + Energy: RiLightbulbFlashLine, + Engineering: RiRobot2Line, "Fine Arts": RiPaletteLine, - "Health and Medicine": RiServiceLine, + "Health and Medicine": RiStethoscopeLine, Humanities: RiQuillPenLine, - Mathematics: RiBarChartBoxLine, - Science: RiMicroscopeLine, - "Social Science": RiSeedlingLine, + Mathematics: RiInfinityLine, + Science: RiTestTubeLine, + "Social Science": RiUserSearchLine, Society: RiEarthLine, - "Teaching and Education": RiMacbookLine, + "Teaching and Education": RiSeedlingLine, } type RootTopicIconProps = { name: string } diff --git a/frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.tsx b/frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.tsx index 7236b00db0..2b49fa76b3 100644 --- a/frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.tsx +++ b/frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.tsx @@ -23,22 +23,25 @@ import { } from "api/hooks/learningResources" import { RiPaletteLine, - RiSeedlingLine, - RiBriefcaseLine, - RiMacbookLine, - RiBarChartBoxLine, - RiUserSearchLine, RiArrowRightSLine, + RiBuilding2Line, + RiCompasses2Line, + RiGovernmentLine, + RiShakeHandsLine, + RiFlaskLine, + RiTerminalBoxLine, } from "@remixicon/react" import { HOME } from "@/common/urls" const SCHOOL_ICONS: Record = { - "https://sap.mit.edu/": , - "https://engineering.mit.edu/": , - "https://shass.mit.edu/": , - "https://science.mit.edu/": , - "http://mitsloan.mit.edu/": , - "https://computing.mit.edu/": , + // School of Architecture and Planning + "https://sap.mit.edu/": , + "https://engineering.mit.edu/": , + // School of Humanities, Arts, and Social Sciences + "https://shass.mit.edu/": , + "https://science.mit.edu/": , + "http://mitsloan.mit.edu/": , + "https://computing.mit.edu/": , } const Page = styled.div(({ theme }) => ({ From 87f4fc732470dd2a748e85198435fa96967aa2a1 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Mon, 24 Jun 2024 13:51:19 -0500 Subject: [PATCH 02/24] Swapping out the rest of the icons that were marked --- .../Dialogs/AddToListDialog.tsx | 5 +-- .../src/page-components/Header/Header.tsx | 40 +++++++++++++------ .../src/pages/DashboardPage/DashboardPage.tsx | 12 +++--- .../src/components/NavDrawer/NavDrawer.tsx | 7 ++-- 4 files changed, 39 insertions(+), 25 deletions(-) diff --git a/frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx b/frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx index d44b7413e1..2b58fca561 100644 --- a/frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx +++ b/frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx @@ -11,8 +11,7 @@ import { styled, } from "ol-components" -import LockOpenIcon from "@mui/icons-material/LockOpen" -import LockIcon from "@mui/icons-material/Lock" +import { RiLockLine, RiLockUnlockLine } from "@remixicon/react" import AddIcon from "@mui/icons-material/Add" import * as NiceModal from "@ebay/nice-modal-react" @@ -209,7 +208,7 @@ const PrivacyChip: React.FC = ({ selectedOption, }) => { const isPublic = selectedOption === publicOption - const icon = isPublic ? : + const icon = isPublic ? : return } diff --git a/frontends/mit-open/src/page-components/Header/Header.tsx b/frontends/mit-open/src/page-components/Header/Header.tsx index c8adbc0175..0814d9e866 100644 --- a/frontends/mit-open/src/page-components/Header/Header.tsx +++ b/frontends/mit-open/src/page-components/Header/Header.tsx @@ -9,7 +9,21 @@ import { ClickAwayListener, ActionButtonLink, } from "ol-components" -import { RiSearch2Line } from "@remixicon/react" +import { + RiSearch2Line, + RiPencilRulerLine, + RiStackLine, + RiSignpostLine, + RiBookMarkedLine, + RiPresentationLine, + RiNodeTree, + RiVerifiedBadgeLine, + RiFileAddLine, + RiTimeLine, + RiHeartLine, + RiPriceTag3Line, + RiAwardLine, +} from "@remixicon/react" import { MITLogoLink, useToggle } from "ol-utilities" import UserMenu from "./UserMenu" import { MenuButton } from "./MenuButton" @@ -151,26 +165,26 @@ const navData: NavData = { items: [ { title: "Courses", - icon: "/static/images/navdrawer/courses.svg", + icon: , description: "Learn with MIT instructors", href: querifiedSearchUrl({ tab: "courses" }), }, { title: "Programs", - icon: "/static/images/navdrawer/programs.svg", + icon: , description: "Learn in-depth from a series of courses and earn a certificate", href: querifiedSearchUrl({ tab: "programs" }), }, { title: "Pathways", - icon: "/static/images/navdrawer/pathways.svg", + icon: , description: "Achieve your learning goals with a curated collection of courses", }, { title: "Learning Materials", - icon: "/static/images/navdrawer/learning_materials.svg", + icon: , description: "Free teaching and learning materials including videos, podcasts, lecture notes, etc.", href: querifiedSearchUrl({ tab: "learning-materials" }), @@ -182,17 +196,17 @@ const navData: NavData = { items: [ { title: "By Topic", - icon: "/static/images/navdrawer/topics.svg", + icon: , href: TOPICS, }, { title: "By Departments", - icon: "/static/images/navdrawer/departments.svg", + icon: , href: DEPARTMENTS, }, { title: "By Provider", - icon: "/static/images/navdrawer/provider.svg", + icon: , href: UNITS, }, ], @@ -202,27 +216,27 @@ const navData: NavData = { items: [ { title: "New", - icon: "/static/images/navdrawer/new.svg", + icon: , href: querifiedSearchUrl({ sortby: "new" }), }, { title: "Upcoming", - icon: "/static/images/navdrawer/free.svg", + icon: , href: querifiedSearchUrl({ sortby: "upcoming" }), }, { title: "Popular", - icon: "/static/images/navdrawer/popular.svg", href: querifiedSearchUrl({ sortby: "-views" }), + icon: , }, { title: "Free", - icon: "/static/images/navdrawer/free.svg", + icon: , href: querifiedSearchUrl({ free: "true" }), }, { title: "With Certificate", - icon: "/static/images/navdrawer/certificate.svg", + icon: , href: querifiedSearchUrl({ certification: "true" }), }, ], diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx index e7fdc00654..3efd076e6b 100644 --- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx +++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx @@ -1,8 +1,8 @@ import { RiAccountCircleFill, - RiBookmarkFill, - RiEditFill, - RiLayoutMasonryFill, + RiDashboardLine, + RiBookMarkedLine, + RiEditLine, } from "@remixicon/react" import { ButtonLink, @@ -364,20 +364,20 @@ const DashboardPage: React.FC = () => { data-testid="desktop-tab-list" > } + icon={} text={TabLabels[TabValues.HOME]} value={TabValues.HOME} currentValue={tabValue} /> } + icon={} text={TabLabels[TabValues.MY_LISTS]} value={TabValues.MY_LISTS} currentValue={tabValue} onClick={() => setUserListAction("list")} /> } + icon={} text={TabLabels[TabValues.PROFILE]} value={TabValues.PROFILE} currentValue={tabValue} diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index 70d1f89d82..f17a53ea3d 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -1,6 +1,6 @@ import Drawer, { DrawerProps } from "@mui/material/Drawer" import styled from "@emotion/styled" -import React from "react" +import React, { ReactElement } from "react" const DrawerContent = styled.div(({ theme }) => ({ paddingTop: "80px", @@ -108,7 +108,7 @@ export interface NavSection { export interface NavItem { title: string - icon?: string + icon?: string | ReactElement description?: string href?: string } @@ -118,13 +118,14 @@ const NavItem: React.FC = (props) => { const navItem = ( - {icon ? ( + {typeof icon === "string" ? ( ) : null} + {typeof icon !== "string" ? icon : null} From 34a81be08bae0ce94ac014522523657190a7df78 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Mon, 24 Jun 2024 13:52:54 -0500 Subject: [PATCH 03/24] Removing a bunch of SVG icons that we don't need anymore (they're all Remixicons now) --- .../public/images/navdrawer/certificate.svg | 6 ------ .../public/images/navdrawer/courses.svg | 10 ---------- .../public/images/navdrawer/departments.svg | 8 -------- .../mit-open/public/images/navdrawer/free.svg | 5 ----- .../images/navdrawer/learning_materials.svg | 6 ------ .../mit-open/public/images/navdrawer/new.svg | 12 ------------ .../public/images/navdrawer/pathways.svg | 7 ------- .../public/images/navdrawer/popular.svg | 12 ------------ .../public/images/navdrawer/programs.svg | 15 --------------- .../public/images/navdrawer/provider.svg | 11 ----------- .../mit-open/public/images/navdrawer/topics.svg | 17 ----------------- 11 files changed, 109 deletions(-) delete mode 100644 frontends/mit-open/public/images/navdrawer/certificate.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/courses.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/departments.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/free.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/learning_materials.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/new.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/pathways.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/popular.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/programs.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/provider.svg delete mode 100644 frontends/mit-open/public/images/navdrawer/topics.svg diff --git a/frontends/mit-open/public/images/navdrawer/certificate.svg b/frontends/mit-open/public/images/navdrawer/certificate.svg deleted file mode 100644 index 37410ceb24..0000000000 --- a/frontends/mit-open/public/images/navdrawer/certificate.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/courses.svg b/frontends/mit-open/public/images/navdrawer/courses.svg deleted file mode 100644 index 7017824928..0000000000 --- a/frontends/mit-open/public/images/navdrawer/courses.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/departments.svg b/frontends/mit-open/public/images/navdrawer/departments.svg deleted file mode 100644 index cd266fe5a5..0000000000 --- a/frontends/mit-open/public/images/navdrawer/departments.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/free.svg b/frontends/mit-open/public/images/navdrawer/free.svg deleted file mode 100644 index 5c77692f56..0000000000 --- a/frontends/mit-open/public/images/navdrawer/free.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/learning_materials.svg b/frontends/mit-open/public/images/navdrawer/learning_materials.svg deleted file mode 100644 index 061cc55e0f..0000000000 --- a/frontends/mit-open/public/images/navdrawer/learning_materials.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/new.svg b/frontends/mit-open/public/images/navdrawer/new.svg deleted file mode 100644 index b338bb99da..0000000000 --- a/frontends/mit-open/public/images/navdrawer/new.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/pathways.svg b/frontends/mit-open/public/images/navdrawer/pathways.svg deleted file mode 100644 index efe88552f3..0000000000 --- a/frontends/mit-open/public/images/navdrawer/pathways.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/popular.svg b/frontends/mit-open/public/images/navdrawer/popular.svg deleted file mode 100644 index 8988481082..0000000000 --- a/frontends/mit-open/public/images/navdrawer/popular.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/programs.svg b/frontends/mit-open/public/images/navdrawer/programs.svg deleted file mode 100644 index 6fb3c243d2..0000000000 --- a/frontends/mit-open/public/images/navdrawer/programs.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/provider.svg b/frontends/mit-open/public/images/navdrawer/provider.svg deleted file mode 100644 index 1f5f1db289..0000000000 --- a/frontends/mit-open/public/images/navdrawer/provider.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/frontends/mit-open/public/images/navdrawer/topics.svg b/frontends/mit-open/public/images/navdrawer/topics.svg deleted file mode 100644 index 266ce1b713..0000000000 --- a/frontends/mit-open/public/images/navdrawer/topics.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - From 047372c37ea896adda208386f6cd23929020802d Mon Sep 17 00:00:00 2001 From: James Kachel Date: Mon, 24 Jun 2024 14:00:59 -0500 Subject: [PATCH 04/24] forgot one --- .../LearningResourceExpanded/InfoSection.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx index 14230cbf18..8dc2576cb6 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx @@ -3,13 +3,14 @@ import styled from "@emotion/styled" import ISO6391 from "iso-639-1" import { RemixiconComponentType, - RiMoneyDollarCircleFill, RiBarChartFill, - RiGraduationCapFill, - RiGlobalLine, RiTimeLine, RiCalendarLine, RiBookReadFill, + RiPriceTag3Line, + RiDashboard3Line, + RiGraduationCapLine, + RiTranslate2, } from "@remixicon/react" import { LearningResource, @@ -66,7 +67,7 @@ type InfoItemConfig = { const INFO_ITEMS: InfoItemConfig = [ { label: "Price:", - Icon: RiMoneyDollarCircleFill, + Icon: RiPriceTag3Line, selector: (resource: LearningResource, run?: LearningResourceRun) => { if (!resource || !run) { return null @@ -84,7 +85,7 @@ const INFO_ITEMS: InfoItemConfig = [ { label: "Level:", - Icon: RiBarChartFill, + Icon: RiDashboard3Line, selector: (resource: LearningResource, run?: LearningResourceRun) => { return run?.level?.[0]?.name || null }, @@ -92,7 +93,7 @@ const INFO_ITEMS: InfoItemConfig = [ { label: "Instructors:", - Icon: RiGraduationCapFill, + Icon: RiGraduationCapLine, selector: (resource: LearningResource, run?: LearningResourceRun) => { return ( run?.instructors @@ -105,7 +106,7 @@ const INFO_ITEMS: InfoItemConfig = [ { label: "Languages:", - Icon: RiGlobalLine, + Icon: RiTranslate2, selector: (resource: LearningResource, run?: LearningResourceRun) => { return run?.languages?.length ? run.languages From 7cc047552ac2f25a2e090c7adb825e05a9981f04 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Thu, 27 Jun 2024 10:43:40 -0500 Subject: [PATCH 05/24] swapping out last few icons --- .../components/LearningResourceExpanded/InfoSection.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx index 8dc2576cb6..6b4ab05398 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx @@ -3,10 +3,10 @@ import styled from "@emotion/styled" import ISO6391 from "iso-639-1" import { RemixiconComponentType, - RiBarChartFill, + RiVerifiedBadgeLine, RiTimeLine, RiCalendarLine, - RiBookReadFill, + RiListOrdered2, RiPriceTag3Line, RiDashboard3Line, RiGraduationCapLine, @@ -134,7 +134,7 @@ const INFO_ITEMS: InfoItemConfig = [ { label: "Offered By:", - Icon: RiBarChartFill, + Icon: RiVerifiedBadgeLine, selector: (resource: LearningResource) => { return resource.offered_by?.name || null }, @@ -151,7 +151,7 @@ const INFO_ITEMS: InfoItemConfig = [ { label: "Number of Courses:", - Icon: RiBookReadFill, + Icon: RiListOrdered2, selector: (resource: LearningResource) => { if (resource.resource_type === ResourceTypeEnum.Program) { return resource.program?.courses?.length || null From 8a646e5a4d6e381ae5c9efdfa35e570caa103ccb Mon Sep 17 00:00:00 2001 From: James Kachel Date: Fri, 28 Jun 2024 14:00:51 -0500 Subject: [PATCH 06/24] Swapping icon on Learning Resource Card --- .../LearningResourceCard/LearningResourceCard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx b/frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx index 52689ea190..11b26ae985 100644 --- a/frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx @@ -10,8 +10,6 @@ import * as NiceModal from "@ebay/nice-modal-react" import LearningResourceCardTemplate from "@/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate" import type { LearningResourceCardTemplateProps } from "@/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate" import { ActionButton, imgConfigs } from "ol-components" -import PlaylistAddIcon from "@mui/icons-material/PlaylistAdd" -import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder" import { AddToLearningPathDialog, AddToUserListDialog, @@ -20,6 +18,8 @@ import { LearningResource } from "api" import { useUserMe } from "api/hooks/user" import { useOpenLearningResourceDrawer } from "../LearningResourceDrawer/LearningResourceDrawer" +import { RiMenuAddLine, RiBookmarkLine } from "@remixicon/react" + type LearningResourceCardProps = Pick< LearningResourceCardTemplateProps, "variant" | "resource" | "className" | "sortable" | "suppressImage" @@ -77,7 +77,7 @@ const LearningResourceCard: React.FC = ({ aria-label="Add to Learning Path" onClick={showAddToLearningPathDialog} > - + )} {user?.is_authenticated && ( @@ -88,7 +88,7 @@ const LearningResourceCard: React.FC = ({ aria-label="Add to User List" onClick={showAddToUserListDialog} > - + )} From 0ec229a08114afadd42e7c642498ddbb75425974 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Fri, 28 Jun 2024 14:48:21 -0500 Subject: [PATCH 07/24] Figured these two out so swapping - these may need to change though --- frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx | 4 ++-- .../src/page-components/CardTemplate/CardTemplate.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx b/frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx index ba08fb2b58..b6b1d9f92b 100644 --- a/frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx +++ b/frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from "react" import * as routes from "../../common/urls" import { SimpleMenu, ActionButton, styled } from "ol-components" import type { SimpleMenuItem } from "ol-components" -import SettingsIcon from "@mui/icons-material/Settings" +import { RiSettingsLine } from "@remixicon/react" const InvertedButton = styled(ActionButton)({ color: "white" }) @@ -29,7 +29,7 @@ const ChannelMenu: React.FC<{ channelType: string; name: string }> = ({ items={items} trigger={ - + } /> diff --git a/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx b/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx index 77aa74385a..f12208bcf8 100644 --- a/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx +++ b/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx @@ -7,7 +7,7 @@ import { styled, TruncateText, } from "ol-components" -import DragIndicatorIcon from "@mui/icons-material/DragIndicator" +import { RiDraggable } from "@remixicon/react" import { DEFAULT_RESOURCE_IMG, EmbedlyConfig, @@ -238,7 +238,7 @@ const CardTemplate = ({ {sortable ? ( - + ) : null} From 67240fcec6f2dee689a070a2ef934c57f9d55c10 Mon Sep 17 00:00:00 2001 From: James Kachel Date: Fri, 28 Jun 2024 15:17:15 -0500 Subject: [PATCH 08/24] Explicitly adding a data-testid to the grab handles on the card templates The Mui icons seem to do that by default but the Remixicons don't so the test was failing. --- .../mit-open/src/page-components/CardTemplate/CardTemplate.tsx | 2 +- .../LearningResourceCardTemplate.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx b/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx index f12208bcf8..d88b45050c 100644 --- a/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx +++ b/frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx @@ -238,7 +238,7 @@ const CardTemplate = ({ {sortable ? ( - + ) : null} diff --git a/frontends/mit-open/src/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate.test.tsx b/frontends/mit-open/src/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate.test.tsx index 948901a64b..fc121f569d 100644 --- a/frontends/mit-open/src/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate.test.tsx +++ b/frontends/mit-open/src/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate.test.tsx @@ -142,7 +142,7 @@ describe("LearningResourceCard", () => { />, ) - expect(!!screen.queryByTestId("DragIndicatorIcon")).toBe(sortable) + expect(!!screen.queryByTestId("CardDraggable")).toBe(sortable) }) it.each([{ variant: "row" }, { variant: "column" }] as const)( From 542bc20293570b075e1888e733cdaf787ea13d10 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 10:03:47 -0400 Subject: [PATCH 09/24] switching some more icons --- .../pages/UserListListingPage/UserListListingPage.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx index 4f783cf40f..ad101d9aca 100644 --- a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx +++ b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx @@ -13,9 +13,7 @@ import { PlainList, imgConfigs, } from "ol-components" -import EditIcon from "@mui/icons-material/Edit" -import MoreVertIcon from "@mui/icons-material/MoreVert" -import DeleteIcon from "@mui/icons-material/Delete" +import { RiPencilFill, RiMore2Fill, RiDeleteBin7Fill } from "@remixicon/react" import { MetaTags } from "ol-utilities" import type { UserList } from "api" @@ -46,13 +44,13 @@ const EditUserListMenu: React.FC = ({ userList }) => { { key: "edit", label: "Edit", - icon: , + icon: , onClick: () => manageListDialogs.upsertUserList(userList), }, { key: "delete", label: "Delete", - icon: , + icon: , onClick: () => manageListDialogs.destroyUserList(userList), }, ], @@ -67,7 +65,7 @@ const EditUserListMenu: React.FC = ({ userList }) => { size="small" aria-label={`Edit list ${userList.title}`} > - + } items={items} From ac557543edb2b5ec457e121224dc61918ed9089c Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 10:14:58 -0400 Subject: [PATCH 10/24] some more remixicon replacements --- .../SearchSubscriptionToggle/SearchSubscriptionToggle.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx index 4b49f5fca8..1415155a97 100644 --- a/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx +++ b/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx @@ -7,10 +7,10 @@ import { } from "api/hooks/searchSubscription" import { Button, SimpleMenu } from "ol-components" import type { SimpleMenuItem } from "ol-components" -import ExpandMoreSharpIcon from "@mui/icons-material/ExpandMoreSharp" +import { RiArrowDownSLine, RiMailLine } from "@remixicon/react" import { useUserMe } from "api/hooks/user" import { SourceTypeEnum } from "api" -import MailOutlineIcon from "@mui/icons-material/MailOutline" + import { SignupPopover } from "../SignupPopover/SignupPopover" type SearchSubscriptionToggleProps = { @@ -54,7 +54,7 @@ const SearchSubscriptionToggle: React.FC = ({ return ( }> + } @@ -67,7 +67,7 @@ const SearchSubscriptionToggle: React.FC = ({ ) : ( ))} @@ -108,14 +110,14 @@ const WidgetTemplate: React.FC = ({ type="button" onClick={handleEdit} > - + From 947b27238a5bb084198e758f0f8b02e6c264b952 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 11:47:04 -0400 Subject: [PATCH 21/24] fixing size --- .../src/page-components/ChannelDetails/ChannelDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx b/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx index f7e3e0e76b..9cbab94378 100644 --- a/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx +++ b/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx @@ -90,7 +90,7 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => { title: "More Information", labelFunction: (key: string, channelTitle: string) => ( - {channelTitle} website + {channelTitle} website ), order: 1, From cd8b6fcaebf8c254c0edc865f366dd1c8ae019c0 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 14:30:47 -0400 Subject: [PATCH 22/24] replacing storybook references to mui --- .../components/RootTopicIcon/RootTopicIcon.tsx | 4 ++-- .../src/components/Chips/Chip.stories.tsx | 16 +++++++++------- .../src/components/Input/Input.stories.tsx | 14 ++++++-------- .../components/SimpleMenu/SimpleMenu.stories.tsx | 7 +++---- .../components/TextField/TextField.stories.tsx | 14 ++++++-------- 5 files changed, 26 insertions(+), 29 deletions(-) diff --git a/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx b/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx index f4749040c8..6cf4f4a06e 100644 --- a/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx +++ b/frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx @@ -1,6 +1,6 @@ import { RiPaletteLine, - RiSeedlingLine, + RiShakeHandsLine, RiEarthLine, RiQuillPenLine, RiBriefcase3Line, @@ -25,7 +25,7 @@ const ICON_MAP = { Science: RiTestTubeLine, "Social Science": RiUserSearchLine, Society: RiEarthLine, - "Teaching and Education": RiSeedlingLine, + "Teaching and Education": RiShakeHandsLine, } type RootTopicIconProps = { name: string } diff --git a/frontends/ol-components/src/components/Chips/Chip.stories.tsx b/frontends/ol-components/src/components/Chips/Chip.stories.tsx index 1cc86bfa66..e3edba480a 100644 --- a/frontends/ol-components/src/components/Chips/Chip.stories.tsx +++ b/frontends/ol-components/src/components/Chips/Chip.stories.tsx @@ -7,15 +7,17 @@ import Stack from "@mui/material/Stack" import { fn } from "@storybook/test" import { ChipLink } from "./ChipLink" import { withRouter } from "storybook-addon-react-router-v6" -import CalendarTodayIcon from "@mui/icons-material/CalendarToday" -import DeleteIcon from "@mui/icons-material/Delete" -import EditIcon from "@mui/icons-material/Edit" +import { + RiPencilFill, + RiCalendarLine, + RiDeleteBin7Fill, +} from "@remixicon/react" const icons = { None: undefined, - CalendarTodayIcon: , - DeleteIcon: , - EditIcon: , + CalendarTodayIcon: , + DeleteIcon: , + EditIcon: , } const VARIANTS: { @@ -125,7 +127,7 @@ export const Disabled: Story = { export const Icons: Story = { args: { - icon: , + icon: , }, } diff --git a/frontends/ol-components/src/components/Input/Input.stories.tsx b/frontends/ol-components/src/components/Input/Input.stories.tsx index fad08dbf51..1cbc43f54f 100644 --- a/frontends/ol-components/src/components/Input/Input.stories.tsx +++ b/frontends/ol-components/src/components/Input/Input.stories.tsx @@ -4,9 +4,7 @@ import { Input, AdornmentButton } from "./Input" import type { InputProps } from "./Input" import Stack from "@mui/material/Stack" import Grid from "@mui/material/Grid" -import SearchIcon from "@mui/icons-material/Search" -import CalendarTodayIcon from "@mui/icons-material/CalendarToday" -import CloseIcon from "@mui/icons-material/Close" +import { RiCalendarLine, RiCloseLine, RiSearchLine } from "@remixicon/react" import { fn } from "@storybook/test" const SIZES = ["medium", "hero"] satisfies InputProps["size"][] @@ -14,26 +12,26 @@ const ADORNMENTS = { None: undefined, SearchIcon: ( - + ), CalendarTodayIcon: ( - + ), CloseIcon: ( - + ), "Close and Calendar": ( <> - + - + ), diff --git a/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.stories.tsx b/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.stories.tsx index 41b85eb68c..7e2499280f 100644 --- a/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.stories.tsx +++ b/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.stories.tsx @@ -1,8 +1,7 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react" import { SimpleMenu } from "./SimpleMenu" -import EditIcon from "@mui/icons-material/Edit" -import DeleteIcon from "@mui/icons-material/Delete" +import { RiPencilFill, RiDeleteBin7Fill } from "@remixicon/react" import { withRouter } from "storybook-addon-react-router-v6" const meta: Meta = { @@ -45,11 +44,11 @@ export const PlainLinks: Story = { export const WithIcons: Story = { args: { items: [ - { key: "edit", label: "Edit", icon: , onClick: () => {} }, + { key: "edit", label: "Edit", icon: , onClick: () => {} }, { key: "delete", label: "Delete", - icon: , + icon: , onClick: () => {}, }, ], diff --git a/frontends/ol-components/src/components/TextField/TextField.stories.tsx b/frontends/ol-components/src/components/TextField/TextField.stories.tsx index 376c3affe1..4c484bdb16 100644 --- a/frontends/ol-components/src/components/TextField/TextField.stories.tsx +++ b/frontends/ol-components/src/components/TextField/TextField.stories.tsx @@ -5,9 +5,7 @@ import type { TextFieldProps } from "./TextField" import { AdornmentButton } from "../Input/Input" import Stack from "@mui/material/Stack" import Grid from "@mui/material/Grid" -import SearchIcon from "@mui/icons-material/Search" -import CalendarTodayIcon from "@mui/icons-material/CalendarToday" -import CloseIcon from "@mui/icons-material/Close" +import { RiSearchLine, RiCalendarLine, RiCloseLine } from "@remixicon/react" import { fn } from "@storybook/test" const SIZES = ["medium", "hero"] satisfies TextFieldProps["size"][] @@ -15,26 +13,26 @@ const ADORNMENTS = { None: undefined, SearchIcon: ( - + ), CalendarTodayIcon: ( - + ), CloseIcon: ( - + ), "Close and Calendar": ( <> - + - + ), From d08a38f7fe61d2b6c3a9d4b72ec1532b7623db80 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 14:37:36 -0400 Subject: [PATCH 23/24] removing material icon package --- frontends/mit-open/package.json | 1 - frontends/ol-components/package.json | 1 - frontends/ol-widgets/package.json | 1 - yarn.lock | 19 ------------------- 4 files changed, 22 deletions(-) diff --git a/frontends/mit-open/package.json b/frontends/mit-open/package.json index da54eb16d7..392c433ee4 100644 --- a/frontends/mit-open/package.json +++ b/frontends/mit-open/package.json @@ -58,7 +58,6 @@ "dependencies": { "@ebay/nice-modal-react": "^1.2.13", "@mitodl/course-search-utils": "3.1.3", - "@mui/icons-material": "^5.15.15", "@remixicon/react": "^4.2.0", "@sentry/react": "^7.57.0", "@tanstack/react-query": "^4.36.1", diff --git a/frontends/ol-components/package.json b/frontends/ol-components/package.json index 5ec40b73ac..ea50c3fbef 100644 --- a/frontends/ol-components/package.json +++ b/frontends/ol-components/package.json @@ -13,7 +13,6 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/base": "5.0.0-beta.40", - "@mui/icons-material": "^5.15.15", "@mui/lab": "^5.0.0-alpha.170", "@mui/material": "^5.15.15", "@mui/system": "^5.15.15", diff --git a/frontends/ol-widgets/package.json b/frontends/ol-widgets/package.json index fa9a4b706a..a4e7356d1f 100644 --- a/frontends/ol-widgets/package.json +++ b/frontends/ol-widgets/package.json @@ -5,7 +5,6 @@ "main": "./src/index.ts", "dependencies": { "@faker-js/faker": "^8.0.0", - "@mui/icons-material": "^5.15.15", "@remixicon/react": "^4.2.0", "classnames": "^2.3.2", "formik": "^2.4.5", diff --git a/yarn.lock b/yarn.lock index 8eaf2b5101..e2b5b9fff5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4127,22 +4127,6 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:^5.15.15": - version: 5.15.19 - resolution: "@mui/icons-material@npm:5.15.19" - dependencies: - "@babel/runtime": "npm:^7.23.9" - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 10/f2d47ed7ffba7e28d24feb4160b65f814135ed3b96e10aa13949707a6e41e39695badd04c822c4e937892ea630a3640ddd0ff7b073f75def3f28bad2c9e5271b - languageName: node - linkType: hard - "@mui/lab@npm:^5.0.0-alpha.170": version: 5.0.0-alpha.170 resolution: "@mui/lab@npm:5.0.0-alpha.170" @@ -18606,7 +18590,6 @@ __metadata: "@emotion/styled": "npm:^11.11.0" "@faker-js/faker": "npm:^8.0.0" "@mitodl/course-search-utils": "npm:3.1.3" - "@mui/icons-material": "npm:^5.15.15" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@remixicon/react": "npm:^4.2.0" "@sentry/react": "npm:^7.57.0" @@ -19266,7 +19249,6 @@ __metadata: "@emotion/styled": "npm:^11.11.0" "@faker-js/faker": "npm:^8.0.0" "@mui/base": "npm:5.0.0-beta.40" - "@mui/icons-material": "npm:^5.15.15" "@mui/lab": "npm:^5.0.0-alpha.170" "@mui/material": "npm:^5.15.15" "@mui/system": "npm:^5.15.15" @@ -19360,7 +19342,6 @@ __metadata: resolution: "ol-widgets@workspace:frontends/ol-widgets" dependencies: "@faker-js/faker": "npm:^8.0.0" - "@mui/icons-material": "npm:^5.15.15" "@remixicon/react": "npm:^4.2.0" "@testing-library/react": "npm:16.0.0" "@testing-library/user-event": "npm:14.5.2" From 43989c6be66966641351fbc57a73ac5dfae1bcef Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Tue, 2 Jul 2024 16:30:31 -0400 Subject: [PATCH 24/24] removing final refs to mui icon --- frontends/.eslintrc.js | 5 ----- frontends/ol-components/src/components/Button/Button.mdx | 5 ----- 2 files changed, 10 deletions(-) diff --git a/frontends/.eslintrc.js b/frontends/.eslintrc.js index a2843799ac..acf1615251 100644 --- a/frontends/.eslintrc.js +++ b/frontends/.eslintrc.js @@ -154,11 +154,6 @@ function restrictedImports({ paths = [], patterns = [] } = {}) { message: "Please use @faker-js/faker/locale/en instead.", allowTypeImports: true, }, - { - name: "@mui/icons-material", - message: "Please use @mui/icons-material/ instead.", - allowTypeImports: true, - }, { name: "@mui/material", message: "Please use @mui/material/ instead.", diff --git a/frontends/ol-components/src/components/Button/Button.mdx b/frontends/ol-components/src/components/Button/Button.mdx index d8257e0fd9..8a113b9e31 100644 --- a/frontends/ol-components/src/components/Button/Button.mdx +++ b/frontends/ol-components/src/components/Button/Button.mdx @@ -20,11 +20,6 @@ Use `disabled` to disable the button: Use `edge="circular" | "rounded"` to set the button edge: - - -Use `startIcon` and `endIcon` to add icons to the button. The icons are expected -to be from [`@mui/icons-material`](https://mui.com/material-ui/material-icons/): - ## Links