wip: cleanup old classes

Author: Julusian

packages/webui/src/client/lib/Components/LabelAndOverrides.tsx

@@ -8,6 +8,7 @@ import { OverrideOpHelperForItemContents, WrappedOverridableItemNormal } from '.
 import { DropdownInputOption, findOptionByValue } from './DropdownInput'
 import { hasOpWithPath } from './util'
 import Button from 'react-bootstrap/Button'
+import classNames from 'classnames'
 
 export interface LabelAndOverridesProps<T extends object, TValue> {
 	label: string
@@ -76,15 +77,18 @@ export function LabelAndOverrides<T extends object, TValue = any>({
 		<label className="field">
 			<LabelActual label={label} />
 
-			<div className="field-content">
+			<div
+				className={classNames('field-content', {
+					'checkbox-enable-before': showClearButton,
+				})}
+			>
 				{showClearButton && (
 					<Button
 						variant="primary"
 						className="field-clear"
 						onClick={() => setValue(undefined)}
 						title={t('Clear value')}
 					>
-						&nbsp;
 						<FontAwesomeIcon icon={faSync} />
 					</Button>
 				)}

packages/webui/src/client/lib/ModalDialog.tsx

@@ -215,7 +215,7 @@ export function ModalDialog({
 										<Button
 											key={i}
 											variant={!(action.classNames || '').match(/btn-/) ? 'outline-secondary' : undefined}
-											className={ClassNames('right mrs', action.classNames)}
+											className={ClassNames('right me-1', action.classNames)}
 											onClick={(e) => handleAction(e, action.on)}
 											onKeyDown={preventClickOnEnter}
 											onKeyUp={emulateClick}

packages/webui/src/client/lib/Spinner.tsx

@@ -7,7 +7,7 @@ interface SpinnerProps {
 }
 
 export const Spinner: React.FunctionComponent<SpinnerProps> = (props: SpinnerProps) => (
-	<div className={props.className !== undefined ? props.className : 'mod mhl mvl alc'}>
+	<div className={props.className !== undefined ? props.className : 'm-4 text-center'}>
 		<div className={'origo-spinner sp-' + (props.color || 'blue') + ' sp-' + (props.size || 'large')}>
 			<svg className="origo-spinner-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">
 				<circle className="origo-spin-circle" cx="17" cy="17" r="15"></circle>

packages/webui/src/client/lib/forms/SchemaFormSectionHeader.tsx

@@ -13,7 +13,7 @@ export function SchemaFormSectionHeader({
 
 	return (
 		<>
-			<h3 className="mhn mbn">{translateStringIfHasNamespaces(title, translationNamespaces)}</h3>
+			<h3 className="m-0">{translateStringIfHasNamespaces(title, translationNamespaces)}</h3>
 			{description ? (
 				<p className="text-s subtle">{translateStringIfHasNamespaces(description, translationNamespaces)}</p>
 			) : null}

packages/webui/src/client/lib/forms/SchemaFormTable/ObjectTable.tsx

@@ -384,7 +384,7 @@ function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<I
 				<span className="inline-block">
 					<UploadButton
 						key={uploadFileKey}
-						className="btn btn-secondary mls"
+						className="btn btn-secondary"
 						onChange={importTable}
 						accept="application/json,.json"
 					>
@@ -394,7 +394,7 @@ function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<I
 			</Tooltip>
 
 			<Tooltip overlay={t('Export')} placement="top">
-				<button className="btn btn-secondary mls" onClick={exportTable}>
+				<button className="btn btn-secondary" onClick={exportTable}>
 					<FontAwesomeIcon icon={faDownload} />
 				</button>
 			</Tooltip>

packages/webui/src/client/lib/notifications/NotificationCenterPanel.tsx

@@ -106,7 +106,7 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 												className={ClassNames(
 													'btn',
 													['default', 'primary'].indexOf(action.type) ? 'btn-primary' : 'btn-default',
-													'mls'
+													'ms-1'
 												)}
 												onClick={(e) => this.triggerEvent(action, e)}
 											>

packages/webui/src/client/styles/externalMessagesStatus.scss

@@ -1,4 +1,3 @@
-
 .external-message-status {
 	padding-bottom: 70vh;
 
@@ -18,7 +17,7 @@
 		&.waiting {
 			background-color: #bbbbbb;
 		}
-		.small {
+		&.small {
 			font-size: 75%;
 		}
 	}

packages/webui/src/client/styles/fromOrigo.scss

@@ -72,6 +72,14 @@ h5,
 	font-weight: 300;
 }
 
+.text-s {
+	font-size: 0.875rem;
+	font-family: Roboto, arial, sans-serif;
+	font-weight: 100;
+	line-height: 1.5;
+	letter-spacing: 0.5px;
+}
+
 p,
 center,
 .table {

packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx

@@ -239,14 +239,14 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 
 	useWakeLock()
 
-	if (!studio && studioReady) return <h1 className="mod mal alc">{t("This studio doesn't exist.")}</h1>
+	if (!studio && studioReady) return <h1 className="m-4 text-center">{t("This studio doesn't exist.")}</h1>
 
 	if (!playlist && rundownsReady)
-		return <h1 className="mod mal alc">{t('There is no rundown active in this studio.')}</h1>
+		return <h1 className="m-4 text-center">{t('There is no rundown active in this studio.')}</h1>
 
 	if ((playlist && !piecesReadyOnce) || !playlist)
 		return (
-			<div className="mod mal alc">
+			<div className="m-4">
 				<Spinner />
 			</div>
 		)

packages/webui/src/client/ui/RundownView.tsx

@@ -1208,9 +1208,6 @@ const RundownHeader = withTranslation()(
 										>
 											<div className="media-elem me-2 sofie-logo" />
 										</Tooltip>
-										<div className="bd mls">
-											<span className="logo-text"></span>
-										</div>
 									</div>
 								</div>
 								{this.props.layout && RundownLayoutsAPI.isDashboardLayout(this.props.layout) ? (
@@ -1242,7 +1239,7 @@ const RundownHeader = withTranslation()(
 									</>
 								)}
 								<div className="flex-col right horizontal-align-right">
-									<div className="links mod close">
+									<div className="links close">
 										<NavLink to="/rundowns" title={t('Exit')}>
 											<CoreIcon.NrkClose />
 										</NavLink>
@@ -2828,7 +2825,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 		renderSegmentsList() {
 			if (!this.props.playlist || !this.props.rundowns.length) {
 				return (
-					<div className="mod">
+					<div className="m-2">
 						<Spinner />
 					</div>
 				)