From d98a3d27dfa26fbf09032888f72716e39e8c2e58 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 10 Oct 2024 14:24:08 +0200
Subject: [PATCH 1/2] Replace remaining hard-coded icons with theme icons

Allow using theme icons for player controls, fullscreen toggles and
and panorama indicators.

REDMINE-20841
---
 .../PlayerControls/PlayPauseButton-spec.js    |  6 ++---
 .../frontend/Panorama/FullscreenIndicator.js  | 12 ++++-----
 .../Panorama/FullscreenIndicator.module.css   |  5 ++++
 .../frontend/Panorama/PanoramaIndicator.js    |  9 +++----
 .../Panorama/PanoramaIndicator.module.css     |  2 ++
 .../BigPlayPauseButton.js                     |  7 +++---
 .../ClassicPlayerControls/QualityMenu.js      |  4 +--
 .../frontend/PlayerControls/MenuBarButton.js  |  9 ++++---
 .../PlayerControls/MenuBarButton.module.css   |  8 +-----
 .../PlayerControls/PlayPauseButton.js         |  7 +++---
 .../frontend/PlayerControls/TextTracksMenu.js |  4 +--
 .../PlayerControls/images/quality.svg         |  1 -
 .../package/src/frontend/ThemeIcon.js         | 25 ++++++++++++++++---
 .../src/frontend/ToggleFullscreenButton.js    |  7 +++---
 .../images/check.svg => icons/checked.svg}    |  0
 .../images => icons}/pause.svg                |  0
 .../{PlayerControls/images => icons}/play.svg |  0
 .../images => icons}/textTracks.svg           |  0
 .../frontend/thirdPartyConsent/OptOutInfo.js  |  4 +--
 .../thirdPartyConsent/OptOutInfo.module.css   |  3 ++-
 20 files changed, 60 insertions(+), 53 deletions(-)
 delete mode 100644 entry_types/scrolled/package/src/frontend/PlayerControls/images/quality.svg
 rename entry_types/scrolled/package/src/frontend/{PlayerControls/images/check.svg => icons/checked.svg} (100%)
 rename entry_types/scrolled/package/src/frontend/{PlayerControls/images => icons}/pause.svg (100%)
 rename entry_types/scrolled/package/src/frontend/{PlayerControls/images => icons}/play.svg (100%)
 rename entry_types/scrolled/package/src/frontend/{PlayerControls/images => icons}/textTracks.svg (100%)

diff --git a/entry_types/scrolled/package/spec/frontend/PlayerControls/PlayPauseButton-spec.js b/entry_types/scrolled/package/spec/frontend/PlayerControls/PlayPauseButton-spec.js
index 0aea75916a..13a23f6755 100644
--- a/entry_types/scrolled/package/spec/frontend/PlayerControls/PlayPauseButton-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/PlayerControls/PlayPauseButton-spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect'
-import {render} from '@testing-library/react'
+import {renderInEntry} from 'support'
 
 import {PlayPauseButton} from 'frontend/PlayerControls/PlayPauseButton';
 import {useFakeTranslations} from 'pageflow/testHelpers';
@@ -12,12 +12,12 @@ describe('PlayPauseButton', () => {
   });
 
   it('shows pause button when playing', () => {
-    const {getByLabelText} = render(<PlayPauseButton isPlaying={true}/>);
+    const {getByLabelText} = renderInEntry(<PlayPauseButton isPlaying={true}/>);
     expect(getByLabelText('Pause')).toBeVisible();
   });
 
   it('shows play button when paused', () => {
-    const {getByLabelText} = render(<PlayPauseButton isPlaying={false}/>);
+    const {getByLabelText} = renderInEntry(<PlayPauseButton isPlaying={false}/>);
     expect(getByLabelText('Play')).toBeVisible();
   });
 });
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js
index 4ef8d1fa7c..d609b23c6e 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js
+++ b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js
@@ -1,27 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import ArrowLeftIcon from '../icons/arrowLeft.svg';
+import {ThemeIcon} from '../ThemeIcon';
 
 import styles from './FullscreenIndicator.module.css';
 
 export function FullscreenIndicator({visible, onClick}) {
-  const size = 50;
-
   return (
     <div className={classNames(styles.indicator, {[styles.visible]: visible})}>
       <div className={styles.icons}>
         <div className={styles.iconTopLeft}>
-          <ArrowLeftIcon  width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconTopRight}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconBottomRight}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconBottomLeft}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
       </div>
       <div className={styles.text}>
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
index 85730f054a..b1ada71d4a 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
@@ -15,6 +15,11 @@
   left: 50%;
 }
 
+.icons svg {
+  width: 50px;
+  height: 50px;
+}
+
 .text {
   transform: translate(-50%, -50%);
   font-weight: bold;
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js
index 9740a25203..b629b3068e 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js
+++ b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js
@@ -1,24 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import ArrowLeftIcon from '../icons/arrowLeft.svg';
-import ArrowRightIcon from '../icons/arrowRight.svg';
+import {ThemeIcon} from '../ThemeIcon';
 
 import styles from './PanoramaIndicator.module.css';
 
 export function PanoramaIndicator({visible}) {
-  const size = 40;
-
   return (
     <div className={classNames(styles.indicator, {[styles.visible]: visible})}>
       <div className={styles.arrowLeft}>
         <div>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
       </div>
       <div className={styles.arrowRight}>
         <div>
-          <ArrowRightIcon width={size} height={size} />
+          <ThemeIcon name="arrowRight" />
         </div>
       </div>
       <div className={styles.text}>
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
index 696674ed63..4f9982e7a5 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
@@ -47,6 +47,8 @@
 
 .indicator svg {
   transition: transform 0.2s ease;
+  width: 40px;
+  height: 40px;
 }
 
 *:hover > .indicator svg {
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js b/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js
index c57303a511..12856585a9 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './BigPlayPauseButton.module.css'
-import PlayIcon from '../images/play.svg';
-import PauseIcon from '../images/pause.svg';
+import {ThemeIcon} from '../../ThemeIcon';
 
 export function BigPlayPauseButton(props) {
   const c = classNames(styles.button, {
@@ -27,9 +26,9 @@ export function BigPlayPauseButton(props) {
 
 function pausePlayIcon(props) {
   if (props.unplayed || props.isPlaying) {
-    return <PlayIcon />;
+    return <ThemeIcon name="play" />;
   }
   else {
-    return <PauseIcon />
+    return <ThemeIcon name="pause" />;
   }
 }
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js b/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js
index b4cce2f3e4..58dcd018e0 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js
@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import {MenuBarButton} from '../MenuBarButton';
 import {useI18n} from '../../i18n';
 
-import QualityIcon from '../images/quality.svg';
-
 export function QualityMenu(props) {
   const {t} = useI18n();
 
@@ -15,7 +13,7 @@ export function QualityMenu(props) {
 
   return (
     <MenuBarButton title={t('pageflow_scrolled.public.player_controls.quality')}
-                   icon={QualityIcon}
+                   icon="gear"
                    subMenuItems={props.items}
                    subMenuExpanded={props.subMenuExpanded}
                    onSubMenuItemClick={props.onItemClick} x/>
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js b/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js
index 04f60fddb1..b75638257a 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
+import {ThemeIcon} from '../ThemeIcon';
+
 import styles from './MenuBarButton.module.css';
-import CheckIcon from './images/check.svg';
 
 export function MenuBarButton(props) {
   const {subMenuItems, onClick} = props;
@@ -58,7 +59,7 @@ export function MenuBarButton(props) {
       <button className={styles.button}
               title={props.title}
               onClick={onButtonClick}>
-        {React.createElement(props.icon, {className: styles.icon})}
+        <ThemeIcon name={props.icon} />
       </button>
       {renderSubMenu(props, closeMenu)}
     </div>
@@ -67,7 +68,7 @@ export function MenuBarButton(props) {
 
 MenuBarButton.propTypes = {
   title: PropTypes.string,
-  icon: PropTypes.elementType,
+  icon: PropTypes.string,
   subMenuItems: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string.isRequired,
@@ -118,7 +119,7 @@ function renderSubMenuItems(props, closeMenu) {
 function renderSubMenuItemIcon(item) {
   if (item.active) {
     return (
-      <CheckIcon className={styles.subMenuItemIcon} />
+      <ThemeIcon name="checked" />
     );
   }
 }
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.module.css b/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.module.css
index 2f29832712..5b64a0df50 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.module.css
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.module.css
@@ -6,12 +6,6 @@
   composes: button from './ControlBar.module.css';
 }
 
-.icon {
-  width: 25px;
-  height: 25px;
-  fill: currentColor;
-}
-
 .subMenuItemAnnotation {
   color: #ff0000;
   font-size: 70%;
@@ -57,7 +51,7 @@
   list-style: none;
 }
 
-.subMenuItemIcon {
+.subMenuItem svg {
   position: absolute;
   top: 8px;
   left: 5px;
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js b/entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js
index 2c6ca8ac73..5fed1e2745 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import controlBarStyles from "./ControlBar.module.css";
-import PlayIcon from "./images/play.svg";
-import PauseIcon from "./images/pause.svg";
+import {ThemeIcon} from '../ThemeIcon';
 
 import {useI18n} from '../i18n';
 
@@ -21,8 +20,8 @@ export function PlayPauseButton(props) {
 
 function pausePlayIcon(props) {
   if (props.isPlaying) {
-    return <PauseIcon className={controlBarStyles.controlsIcon} />
+    return <ThemeIcon name="pause" />
   } else {
-    return <PlayIcon className={controlBarStyles.controlsIcon} />
+    return <ThemeIcon name="play" />
   }
 }
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js b/entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js
index f8067b47fd..c8763e4ecf 100644
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js
+++ b/entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js
@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import {MenuBarButton} from './MenuBarButton';
 import {useI18n} from '../i18n';
 
-import TextTracksIcon from './images/textTracks.svg';
-
 export function TextTracksMenu(props) {
   const {t} = useI18n();
 
@@ -15,7 +13,7 @@ export function TextTracksMenu(props) {
 
   return (
     <MenuBarButton title={t('pageflow_scrolled.public.player_controls.text_tracks')}
-                   icon={TextTracksIcon}
+                   icon="textTracks"
                    subMenuItems={props.items}
                    onSubMenuItemClick={props.onItemClick} />
   );
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/images/quality.svg b/entry_types/scrolled/package/src/frontend/PlayerControls/images/quality.svg
deleted file mode 100644
index ebdb5e1d9f..0000000000
--- a/entry_types/scrolled/package/src/frontend/PlayerControls/images/quality.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>
\ No newline at end of file
diff --git a/entry_types/scrolled/package/src/frontend/ThemeIcon.js b/entry_types/scrolled/package/src/frontend/ThemeIcon.js
index 0081794856..01dff10d71 100644
--- a/entry_types/scrolled/package/src/frontend/ThemeIcon.js
+++ b/entry_types/scrolled/package/src/frontend/ThemeIcon.js
@@ -5,9 +5,11 @@ import muted from './icons/muted.svg';
 import share from './icons/share.svg';
 import unmuted from './icons/unmuted.svg';
 import gear from './icons/gear.svg';
+import textTracks from './icons/textTracks.svg';
 import copyright from './icons/copyright.svg';
 import world from './icons/world.svg';
 import close from './icons/close.svg';
+import checked from './icons/checked.svg';
 
 import email from './icons/social/email.svg';
 import facebook from './icons/social/facebook.svg';
@@ -19,6 +21,12 @@ import whatsApp from './icons/social/whatsApp.svg';
 import arrowLeft from './icons/arrowLeft.svg';
 import arrowRight from './icons/arrowRight.svg';
 
+import enterFullscreen from './icons/enterFullscreen.svg';
+import exitFullscreen from './icons/exitFullscreen.svg';
+
+import play from './icons/play.svg';
+import pause from './icons/pause.svg';
+
 import {useTheme} from '../entryState';
 
 const icons = {
@@ -28,9 +36,11 @@ const icons = {
   share,
   unmuted,
   gear,
+  textTracks,
   copyright,
   world,
   close,
+  checked,
 
   email,
   facebook,
@@ -40,7 +50,13 @@ const icons = {
   whatsApp,
 
   arrowLeft,
-  arrowRight
+  arrowRight,
+
+  enterFullscreen,
+  exitFullscreen,
+
+  play,
+  pause
 };
 
 /**
@@ -48,9 +64,10 @@ const icons = {
  *
  * @param {Object} props
  * @param {string} props.name -
- *   Either: arrowLeft, arrowRight, copyright, close, email, expand, facebook,
- *   gear, information, linkedIn, menu, muted, share, telegram, twitter,
- *   unmuted, world, whatsApp,
+ *   Either: arrowLeft, arrowRight, checked, copyright, close, email,
+ *   enterFullscreen, exitFullscreen, expand, facebook, gear, information,
+ *   linkedIn, menu, muted, pause, play, share, telegram,
+ *   textTracks, twitter, unmuted, world, whatsApp,
  *   arrowLeft, arrowRight, world
  * @params {number} [props.width] - Image width.
  * @params {number} [props.height] - Image height.
diff --git a/entry_types/scrolled/package/src/frontend/ToggleFullscreenButton.js b/entry_types/scrolled/package/src/frontend/ToggleFullscreenButton.js
index b415e85590..e9ca4d7d1b 100644
--- a/entry_types/scrolled/package/src/frontend/ToggleFullscreenButton.js
+++ b/entry_types/scrolled/package/src/frontend/ToggleFullscreenButton.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import EnterFullscreenIcon from "./icons/enterFullscreen.svg";
-import ExitFullscreenIcon from "./icons/exitFullscreen.svg";
+import {ThemeIcon} from './ThemeIcon';
 import {useI18n} from './i18n';
 
 import styles from './ToggleFullscreenButton.module.css';
@@ -22,8 +21,8 @@ export function ToggleFullscreenButton(props) {
 
 function icon(props) {
   if (props.isFullscreen) {
-    return <ExitFullscreenIcon />
+    return <ThemeIcon name="exitFullscreen"/>;
   } else {
-    return <EnterFullscreenIcon />
+    return <ThemeIcon name="enterFullscreen" />;
   }
 }
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/images/check.svg b/entry_types/scrolled/package/src/frontend/icons/checked.svg
similarity index 100%
rename from entry_types/scrolled/package/src/frontend/PlayerControls/images/check.svg
rename to entry_types/scrolled/package/src/frontend/icons/checked.svg
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/images/pause.svg b/entry_types/scrolled/package/src/frontend/icons/pause.svg
similarity index 100%
rename from entry_types/scrolled/package/src/frontend/PlayerControls/images/pause.svg
rename to entry_types/scrolled/package/src/frontend/icons/pause.svg
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/images/play.svg b/entry_types/scrolled/package/src/frontend/icons/play.svg
similarity index 100%
rename from entry_types/scrolled/package/src/frontend/PlayerControls/images/play.svg
rename to entry_types/scrolled/package/src/frontend/icons/play.svg
diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/images/textTracks.svg b/entry_types/scrolled/package/src/frontend/icons/textTracks.svg
similarity index 100%
rename from entry_types/scrolled/package/src/frontend/PlayerControls/images/textTracks.svg
rename to entry_types/scrolled/package/src/frontend/icons/textTracks.svg
diff --git a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
index 09b349eabd..2ac37e75ff 100644
--- a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
+++ b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
@@ -6,9 +6,9 @@ import {useTheme, useContentElementConsentVendor} from '../../entryState';
 import {useI18n} from '../i18n';
 import {useContentElementAttributes} from '../useContentElementAttributes';
 import {widths} from '../layouts';
+import {ThemeIcon} from '../ThemeIcon';
 
 import styles from './OptOutInfo.module.css';
-import InfoIcon from '../icons/information.svg'
 
 /**
  * Display info tooltip with a link to opt out of third party
@@ -50,7 +50,7 @@ export function OptOutInfo({
                                {[styles.full]: width === widths.full || inset})}
          style={hide ? {opacity: 0, visibility: 'hidden'} : undefined}>
       <button className={styles.icon}>
-        <InfoIcon/>
+        <ThemeIcon name="information" />
       </button>
       <div className={styles.tooltip}>
         <div dangerouslySetInnerHTML={{__html: html}} />
diff --git a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.module.css b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.module.css
index c8a454c7ab..183e521240 100644
--- a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.module.css
+++ b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.module.css
@@ -31,7 +31,8 @@
 }
 
 .icon svg {
-  fill: #c2c2c2;
+  color: #c2c2c2;
+  fill: currentColor;
   width: 26px;
   height: 26px;
   margin: 7px 7px 5px;

From 526f02c27220c72e720a2ca0fd2b01111135c03c Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 10 Oct 2024 14:29:13 +0200
Subject: [PATCH 2/2] Replace radial icon shadows with drop shadows

We already use drop shadows for copyright and fullscreen indicators on
images.

REDMINE-20841
---
 .../hotspots/ScrollButton.module.css            | 17 +----------------
 .../imageGallery/ScrollButton.module.css        | 14 +-------------
 .../Panorama/FullscreenIndicator.module.css     | 13 +------------
 .../Panorama/PanoramaIndicator.module.css       | 13 +------------
 4 files changed, 4 insertions(+), 53 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
index 17889f8669..ffdd98702f 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
@@ -26,6 +26,7 @@
   display: block;
   width: var(--theme-hotspts-scroll-button-size);
   height: var(--theme-hotspots-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
@@ -33,22 +34,6 @@
   transform: scale(1.2);
 }
 
-.icon {
-  position: relative;
-}
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .visuallyHidden {
   border: 0;
   clip: rect(0 0 0 0);
diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
index 9319fca436..a7ae3b2165 100644
--- a/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
@@ -18,6 +18,7 @@
   display: block;
   width: var(--theme-image-gallery-scroll-button-size);
   height: var(--theme-image-gallery-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
@@ -26,22 +27,9 @@
 }
 
 .icon {
-  position: relative;
   transition: opacity 0.2s linear;
 }
 
 .disabled .icon {
   opacity: 0;
 }
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
index b1ada71d4a..9aa7b37888 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
@@ -18,6 +18,7 @@
 .icons svg {
   width: 50px;
   height: 50px;
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .text {
@@ -33,18 +34,6 @@
   animation: pulse 4s infinite ease;
 }
 
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 45px;
-  height: 45px;
-  transform: translate(-45%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .iconTopLeft {
   composes: icon;
   transform: translate(-50%, -50%) rotate(45deg);
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
index 4f9982e7a5..6851414e3f 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
@@ -49,24 +49,13 @@
   transition: transform 0.2s ease;
   width: 40px;
   height: 40px;
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 *:hover > .indicator svg {
   transform: scale(1.2);
 }
 
-.arrow div::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30px;
-  height: 30px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 @keyframes nudgeLeft {
   0% {
   }