From 8e9cd19d295ec47c2a37a720f83d6ac674be78cb Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Mon, 15 Jul 2024 13:51:54 +0200
Subject: [PATCH 1/2] Add close theme icon

REDMINE-20674
---
 entry_types/scrolled/package/src/frontend/ThemeIcon.js    | 4 +++-
 entry_types/scrolled/package/src/frontend/icons/close.svg | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 entry_types/scrolled/package/src/frontend/icons/close.svg

diff --git a/entry_types/scrolled/package/src/frontend/ThemeIcon.js b/entry_types/scrolled/package/src/frontend/ThemeIcon.js
index 8c2461b79..fb6807ffa 100644
--- a/entry_types/scrolled/package/src/frontend/ThemeIcon.js
+++ b/entry_types/scrolled/package/src/frontend/ThemeIcon.js
@@ -7,6 +7,7 @@ import unmuted from './icons/unmuted.svg';
 import gear from './icons/gear.svg';
 import copyright from './icons/copyright.svg';
 import world from './icons/world.svg';
+import close from './icons/close.svg';
 
 import email from './icons/social/email.svg';
 import facebook from './icons/social/facebook.svg';
@@ -29,6 +30,7 @@ const icons = {
   gear,
   copyright,
   world,
+  close,
 
   email,
   facebook,
@@ -46,7 +48,7 @@ const icons = {
  *
  * @param {Object} props
  * @param {string} props.name -
- *   Either: copyright, expand, gear, information, muted, share, unmuted,
+ *   Either: copyright, expand, gear, information, muted, share, unmuted, close,
  *   email, facebook, linkedIn, telegram, twitter, whatsApp,
  *   arrowLeft, arrowRight, world
  * @params {number} [props.width] - Image width.
diff --git a/entry_types/scrolled/package/src/frontend/icons/close.svg b/entry_types/scrolled/package/src/frontend/icons/close.svg
new file mode 100644
index 000000000..6b8ab35b0
--- /dev/null
+++ b/entry_types/scrolled/package/src/frontend/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

From 3dbb1ce2471987c6e1fd8ef0ca916bac8db8f33d Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Mon, 15 Jul 2024 13:54:03 +0200
Subject: [PATCH 2/2] Use theme icons for default navigation scroll buttons

REDMINE-20674
---
 .../package/src/widgets/defaultNavigation/ScrollButton.js | 5 ++---
 .../src/widgets/defaultNavigation/ScrollButton.module.css | 8 ++++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.js
index f224ca9e7..096d66c65 100644
--- a/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.js
+++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.js
@@ -1,8 +1,7 @@
 import React, {useRef} from 'react';
 import classNames from 'classnames';
 
-import ChevronLeftIcon from './icons/chevronLeft.svg';
-import ChevronRightIcon from './icons/chevronRight.svg';
+import {ThemeIcon} from 'pageflow-scrolled/frontend';
 
 import styles from './ScrollButton.module.css';
 
@@ -19,7 +18,7 @@ export function ScrollButton({type, contentRect, onStep}) {
                                    [styles.visible]: visible})}
             onMouseDown={handleMouseDown}
             onKeyPress={handleKeyPress}>
-      {type === 'start' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+      <ThemeIcon name={type === 'start' ? 'arrowLeft' : 'arrowRight'} />
     </button>
   );
 
diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.module.css
index 96d2222a9..9eeee08dc 100644
--- a/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.module.css
@@ -8,12 +8,16 @@
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0.2s ease;
   z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .button svg {
-  width: 18px;
-  height: 18px;
+  width: 30px;
+  height: 30px;
   color: var(--theme-widget-primary-color);
+  flex-shrink: 0;
 }
 
 .visible {