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] 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 f224ca9e79..096d66c657 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 96d2222a92..9eeee08dc4 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 {