Merge pull request #1356 from Arnei/lucide-icons

Add Lucide icons

Author: Arnei

package-lock.json

@@ -17,7 +17,6 @@
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.6",
     "focus-trap-react": "^11.0.4",
-    "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "http-proxy-middleware": "^3.0.5",
     "i18next": "^25.3.2",

package.json

@@ -20,12 +20,12 @@ import { useAppDispatch, useAppSelector } from "../store";
 import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
 import { UserInfoState } from "../slices/userInfoSlice";
 import { Tooltip } from "./shared/Tooltip";
-import { HiTranslate } from "react-icons/hi";
-import { IconContext } from "react-icons";
+import { HiOutlineTranslate } from "react-icons/hi";
 import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
 import { ModalHandle } from "./shared/modals/Modal";
 import { broadcastLogout } from "../utils/broadcastSync";
 import BaseButton from "./shared/BaseButton";
+import { LuBell, LuCheck, LuChevronDown, LuCirclePlay, LuMessageCircleQuestion, LuVideo } from "react-icons/lu";
 
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
@@ -145,10 +145,8 @@ const Header = () => {
 					{/* Select language */}
 					<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
 						<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
-							<BaseButton className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
-								<IconContext.Provider value={{ style: { fontSize: "20px" } }}>
-									<HiTranslate />
-								</IconContext.Provider>
+							<BaseButton className="lang nav-dd-element" onClick={() => setMenuLang(!displayMenuLang)}>
+									<HiOutlineTranslate className="header-icon"/>
 							</BaseButton>
 						</Tooltip>
 						{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
@@ -167,8 +165,9 @@ const Header = () => {
 											orgProperties["org.opencastproject.admin.mediamodule.url"]
 										}
 										target="_blank" rel="noreferrer"
+										className="nav-dd-element"
 									>
-										<i className="fa fa-play-circle" />
+										<LuCirclePlay className="header-icon"/>
 									</a>
 								</Tooltip>
 							</div>
@@ -178,8 +177,8 @@ const Header = () => {
 					{hasAccess("ROLE_STUDIO", user) && (
 						<div className="nav-dd">
 							<Tooltip title={t("STUDIO")}>
-								<a href={studioURL} target="_blank" rel="noreferrer">
-									<i className="fa fa-video-camera" />
+								<a href={studioURL} target="_blank" rel="noreferrer" className="nav-dd-element">
+									<LuVideo className="header-icon"/>
 								</a>
 							</Tooltip>
 						</div>
@@ -193,8 +192,10 @@ const Header = () => {
 							ref={containerNotify}
 						>
 							<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
-								<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)}>
-									<i className="fa fa-bell" aria-hidden="true" />
+								<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element">
+									<LuBell style={{
+										fontSize: "20px",
+									}}/>
 									{errorCounter !== 0 && (
 										<span id="error-count" className="badge">
 											{errorCounter}
@@ -230,8 +231,9 @@ const Header = () => {
 								<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
 									<BaseButton
 										onClick={() => setMenuHelp(!displayMenuHelp)}
+										className="nav-dd-element"
 									>
-										<span className="fa fa-question-circle"></span>
+										<LuMessageCircleQuestion className="header-icon"/>
 									</BaseButton>
 								</Tooltip>
 								{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
@@ -248,13 +250,13 @@ const Header = () => {
 						)}
 
 					{/* Username */}
-					<div className="nav-dd user-dd" id="user-dd" ref={containerUser}>
+					<div className="user-dd" id="user-dd" ref={containerUser}>
 						<BaseButton
 							className="h-nav"
 							onClick={() => setMenuUser(!displayMenuUser)}
 						>
 							{user.user.name || user.user.username}
-							<span className="dropdown-icon" />
+							<LuChevronDown className="dropdown-icon" />
 						</BaseButton>
 						{/* Click on username, a dropdown menu with the option to logout opens */}
 						{displayMenuUser && <MenuUser />}
@@ -285,6 +287,7 @@ const MenuLang = ({ handleChangeLanguage }: { handleChangeLanguage: (code: strin
 						className={(i18n.language === language.code ? "selected" : "")}
 						onClick={() => handleChangeLanguage(language.code)}
 					>
+						{i18n.language === language.code && <LuCheck className="selected-icon" />}
 						{language.long}
 					</ButtonLikeAnchor>
 				</li>

src/components/Header.tsx

@@ -11,6 +11,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { ModalHandle } from "./shared/modals/Modal";
 import { ParseKeys } from "i18next";
 import BaseButton from "./shared/BaseButton";
+import { LuPlus } from "react-icons/lu";
 
 /**
  * Component that renders the nav bar
@@ -113,8 +114,9 @@ const NavBar = ({
 						<BaseButton
 							className="add"
 							onClick={showNewResourceModal}
+							style={{ display: "flex", alignItems: "center" }}
 						>
-							<i className="fa fa-plus" />
+							<LuPlus className="btn-group-icon"/>
 							<span>{t(create.text)}</span>
 						</BaseButton>
 					)}

src/components/NavBar.tsx

@@ -10,6 +10,7 @@ import { ActionCellDelete } from "../../shared/ActionCellDelete";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
 import { useTranslation } from "react-i18next";
 import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
+import { LuFileText } from "react-icons/lu";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -46,10 +47,12 @@ const ThemesActionsCell = ({
 			{/* edit themes */}
 			<ButtonLikeAnchor
 				onClick={() => showThemeDetails()}
-				className={"more"}
+				className={"action-cell-button"}
 				editAccessRole={"ROLE_UI_THEMES_EDIT"}
 				tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
-			/>
+			>
+				<LuFileText />
+			</ButtonLikeAnchor>
 
 			{/* themes details modal */}
 			<Modal