Merge pull request #2127 from tf/sroll-icons

Use theme icons for default navigation scroll buttons
codevise · Jul 15, 2024 · 6d30314 · 6d30314
2 parents 03cbd60 + 3dbb1ce
commit 6d30314
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git 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
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 {