Merge branch 'css-more-cleanup' of Arnei/opencast-admin-interface into develop

Pull request #1400

  Css cleanup

Author: gregorydlogan

package-lock.json

@@ -195,9 +195,7 @@ const Header = () => {
 						>
 							<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
 								<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element">
-									<LuBell style={{
-										fontSize: "20px",
-									}}/>
+									<LuBell className="header-icon"/>
 									{errorCounter !== 0 && (
 										<span id="error-count" className="badge">
 											{errorCounter}
@@ -326,11 +324,11 @@ const MenuNotify = ({
 						>
 							<span> {service.name} </span>
 							{service.error ? (
-								<span className="ng-multi-value ng-multi-value-red">
+								<span className="multi-value multi-value-red">
 									{service.status}
 								</span>
 							) : (
-								<span className="ng-multi-value ng-multi-value-green">
+								<span className="multi-value multi-value-green">
 									{service.status}
 								</span>
 							)}

src/components/Header.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import { styleNavClosed, styleNavOpen } from "../utils/componentsUtils";
+import cn from "classnames";
 
 /**
  * Component that renders the main view
  */
 const MainView: React.FC<{ open: boolean, children: React.ReactNode }> = ({ open, children }) => {
 	return (
 		<main
-			className="main-view"
-			style={open ? styleNavOpen : styleNavClosed}
+			className={cn("main-view", { open: open })}
 			role="main"
 		>
 			{children}

src/components/MainView.tsx

@@ -118,7 +118,7 @@ const NavBar = ({
 							onClick={showNewResourceModal}
 							style={{ display: "flex", alignItems: "center" }}
 						>
-							<LuPlus className="btn-group-icon"/>
+							<LuPlus className="btn-group-icon" />
 							<span>{t(create.text)}</span>
 						</BaseButton>
 					)}

src/components/NavBar.tsx

@@ -21,20 +21,14 @@ const GeneralPage = <T, >({
 }) => {
 	const { t } = useTranslation();
 
-	// Style used in themes details modal
-	const editStyle = {
-		color: "#666666",
-		fontSize: "14px",
-	};
-
 	return (
 		<>
 			{/* Fields for name and description */}
 			<ModalContentTable>
 				<div className="form-container">
 					<div className="row">
 						<Notifications context={"other"}/>
-						<label className="required" style={isEdit ? editStyle : undefined}>
+						<label className="required">
 							{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
 						</label>
 						<Field
@@ -47,7 +41,7 @@ const GeneralPage = <T, >({
 						/>
 					</div>
 					<div className="row">
-						<label style={isEdit ? editStyle : undefined}>
+						<label>
 							{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
 						</label>
 						<Field

src/components/configuration/partials/wizard/GeneralPage.tsx

@@ -95,7 +95,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
 								</header>
 								<div className="obj-container padded">
 									<div className="video-container">
-										<div className="watermark-config">
+										<div>
 											<div className="position-selection">
 												<BaseButton
 													className={cn(

src/components/configuration/partials/wizard/WatermarkPage.tsx

@@ -137,9 +137,7 @@ const EventActionCell = ({
 					// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
 					className={"action-cell-button comments"}
 				>
-					<LuMessageCircle style={{
-						color: "#1d5888",
-					}}/>
+					<LuMessageCircle className="blue"/>
 				</ButtonLikeAnchor>
 			)}
 
@@ -150,9 +148,7 @@ const EventActionCell = ({
 					// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
 					className={"action-cell-button comments-open"}
 				>
-					<LuMessageCircle style={{
-						color: "#1d5888",
-					}}/>
+					<LuMessageCircle className="blue"/>
 				</ButtonLikeAnchor>
 			)}
 
@@ -165,9 +161,7 @@ const EventActionCell = ({
 					// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"} // Disabled due to performance concerns
 					className={"action-cell-button"}
 				>
-					<LuTriangleAlert style={{
-						color: "#444",
-					}}/>
+					<LuTriangleAlert className="darkgrey"/>
 				</ButtonLikeAnchor>
 			}
 
@@ -178,9 +172,7 @@ const EventActionCell = ({
 				// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"} // Disabled due to performance concerns
 				className={"action-cell-button"}
 				>
-					<LuFolderOpen style={{
-						color: "#444",
-					}}/>
+					<LuFolderOpen className="darkgrey"/>
 				</ButtonLikeAnchor>
 
 			{/* Open dialog for embedded code*/}
@@ -190,9 +182,7 @@ const EventActionCell = ({
 				// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"} // Disabled due to performance concerns
 				className={"action-cell-button"}
 				>
-					<LuLink style={{
-						color: "#444",
-					}}/>
+					<LuLink className="darkgrey"/>
 				</ButtonLikeAnchor>
 
 			{/* Embedding Code Modal */}

src/components/events/partials/EventActionCell.tsx

@@ -56,7 +56,7 @@ const EventsNotesCell = ({
 	};
 
 	return (
-		<div className="comment-container" key={row.id}>
+		<div className="notes-container" key={row.id}>
 			{comments.length === 0 &&
 				<textarea
 					className="textarea"
@@ -65,7 +65,7 @@ const EventsNotesCell = ({
 				</textarea>
 			}
 			{comments.map((comment, key) => (
-				<div className="comment" key={row.id + key}>
+				<div className="notes" key={row.id + key}>
 					<hr />
 					<textarea
 						className="textarea"

src/components/events/partials/EventsNotesCell.tsx

@@ -219,7 +219,7 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
 							onClick={() => openSubTab("edit-path")}
 							tooltipText="EVENTS.SERIES.DETAILS.TOBIRA.MOUNT_SERIES"
 						>
-							<LuSquarePen style={{ float: "right", cursor: "pointer", margin: "5px", fontSize: "14px" }} />
+							<LuSquarePen className="pen" />
 						</ButtonLikeAnchor>}
 					</td>
 				</tr>}
@@ -260,7 +260,7 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
 								onClick={() => openSubTab("edit-path", hostPage)}
 								tooltipText="EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH"
 							>
-								<LuSquarePen style={{ float: "right", cursor: "pointer", margin: "5px", fontSize: "14px" }} />
+								<LuSquarePen className="pen" />
 							</ButtonLikeAnchor>
 							<ConfirmModal
 								close={() => deleteConfirmationModalRef.current?.close?.()}

src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx

@@ -115,7 +115,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 
 	return (
 		<>
-			<ModalContentTable modalContentClassName="modal-content active">
+			<ModalContentTable modalContentClassName="modal-content">
 				<Notifications context="not_corner" />
 
 				{/* Table that shows conflicts with other events*/}
@@ -177,7 +177,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 															)}
 														</span>
 													</td>
-													<td className="editable ng-isolated-scope">
+													<td className="editable">
 													{/*
 														* Per event there are 14 input fields, so with 'key * 14', the right
 														* event is reached. After the '+' comes the number of the input field.
@@ -205,7 +205,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 															)}
 														</span>
 													</td>
-													<td className="editable ng-isolated-scope">
+													<td className="editable">
 														{/*
 															* Per event there are 14 input fields, so with 'key * 14', the right
 															* event is reached. After the '+' comes the number of the input field.