chore: replace nrk-coreicons with fontawesome (Sofie-Automation#1634)

Author: Julusian

packages/webui/package.json

@@ -36,7 +36,6 @@
 		"@fortawesome/free-solid-svg-icons": "^7.1.0",
 		"@fortawesome/react-fontawesome": "^3.1.1",
 		"@jstarpl/react-contextmenu": "^2.15.3",
-		"@nrk/core-icons": "^9.6.0",
 		"@popperjs/core": "^2.11.8",
 		"@sofie-automation/blueprints-integration": "26.3.0-1",
 		"@sofie-automation/corelib": "26.3.0-1",

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

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef } from 'react'
-import * as CoreIcons from '@nrk/core-icons/jsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Escape from './Escape.js'
 // @ts-expect-error type linking issue
 import FocusBounder from 'react-focus-bounder'
@@ -164,7 +164,7 @@ export function ModalDialog({
 									onKeyUp={emulateClick}
 									aria-label={t('Dismiss')}
 								>
-									<CoreIcons.NrkClose />
+									<FontAwesomeIcon icon="close" size="xl" className="mt-2" />
 								</button>
 							</Modal.Title>
 						</Modal.Header>

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as CoreIcon from '@nrk/core-icons/jsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import ClassNames from 'classnames'
 import { motion, AnimatePresence, HTMLMotionProps } from 'motion/react'
 import { translateWithTracker, Translated, useTracker } from '../ReactMeteorData/ReactMeteorData.js'
@@ -88,12 +88,7 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 										className="btn btn-default notification-pop-up__actions--button"
 										onClick={(e) => this.triggerEvent(defaultAction, e)}
 									>
-										<CoreIcon.NrkArrowLeft
-											className="icon"
-											width="1em"
-											height="1em"
-											style={{ verticalAlign: 'middle', marginTop: '-0.1em', marginRight: '-0.4em' }}
-										/>
+										<FontAwesomeIcon icon="arrow-left" size="xs" />
 										<span className="label">{defaultAction.label}</span>
 									</button>
 								</div>
@@ -133,7 +128,7 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 							}}
 							aria-label={i18nTranslator('Dismiss')}
 						>
-							{this.props.item.persistent ? <CollapseChevrons /> : <CoreIcon.NrkClose id="nrk-close" />}
+							{this.props.item.persistent ? <CollapseChevrons /> : <FontAwesomeIcon icon="close" />}
 						</button>
 					</ContextMenuTrigger>
 				)}

packages/webui/src/client/lib/ui/containers/modals/Modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import type { Sorensen } from '@sofie-automation/sorensen'
-import * as CoreIcons from '@nrk/core-icons/jsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Escape from './../../../Escape.js'
 
 import { SorensenContext } from '../../../SorensenContext.js'
@@ -101,7 +101,7 @@ export class Modal extends React.Component<React.PropsWithChildren<IModalAttribu
 								<div className="flex-col horizontal-align-right vertical-align-middle">
 									<p>
 										<button className="action-btn" onClick={this.handleDiscard}>
-											<CoreIcons.NrkClose />
+											<FontAwesomeIcon icon="close" size="xl" className="mt-2" />
 										</button>
 									</p>
 								</div>

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import * as CoreIcon from '@nrk/core-icons/jsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import ClassNames from 'classnames'
 import Escape from '../../../lib/Escape'
 import Tooltip from 'rc-tooltip'
@@ -219,7 +219,7 @@ export function RundownHeader({
 						<div className="flex-col right horizontal-align-right">
 							<div className="links close">
 								<NavLink to="/rundowns" title={t('Exit')}>
-									<CoreIcon.NrkClose />
+									<FontAwesomeIcon icon="close" size="xl" />
 								</NavLink>
 							</div>
 						</div>

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -17,7 +17,7 @@ import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useSelectedElements, useSelectedElementsContext } from '../RundownView/SelectedElementsContext.js'
 import { RundownUtils } from '../../lib/rundown.js'
-import * as CoreIcon from '@nrk/core-icons/jsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useCallback, useMemo, useState } from 'react'
 import { SchemaFormWithState } from '../../lib/forms/SchemaFormWithState.js'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
@@ -154,7 +154,7 @@ export function PropertiesPanel(): JSX.Element {
 						title={t('Close Properties Panel')}
 						onClick={clearSelections}
 					>
-						<CoreIcon.NrkClose width="1em" height="1em" />
+						<FontAwesomeIcon icon="close" size="lg" />
 					</button>
 				</div>
 

packages/yarn.lock

@@ -5789,13 +5789,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrk/core-icons@npm:^9.6.0":
-  version: 9.6.0
-  resolution: "@nrk/core-icons@npm:9.6.0"
-  checksum: 10/0384037b0b7ec21ea6bc516685a510e7f0c0acbcc86549365fb8fd90aceb15129327e59a3a36944bba93c5453f1d1482f31002311e85d1f78bd5f7ca2100894b
-  languageName: node
-  linkType: hard
-
 "@nuxt/opencollective@npm:0.4.1":
   version: 0.4.1
   resolution: "@nuxt/opencollective@npm:0.4.1"
@@ -7285,7 +7278,6 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": "npm:^7.1.0"
     "@fortawesome/react-fontawesome": "npm:^3.1.1"
     "@jstarpl/react-contextmenu": "npm:^2.15.3"
-    "@nrk/core-icons": "npm:^9.6.0"
     "@popperjs/core": "npm:^2.11.8"
     "@sofie-automation/blueprints-integration": "npm:26.3.0-1"
     "@sofie-automation/corelib": "npm:26.3.0-1"