Use theme icons for default navigation scroll buttons

REDMINE-20674
codevise · Jul 15, 2024 · 3dbb1ce · 3dbb1ce
1 parent 8e9cd19
commit 3dbb1ce
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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 {