Style improvements to scroll button

vibecamp · Jun 19, 2024 · 1a1b403 · 1a1b403
1 parent 57a2075
commit 1a1b403
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/front-end/src/components/Events.scss b/front-end/src/components/Events.scss
@@ -16,6 +16,27 @@
     }
 }
 
+.scrollToTopButton {
+    position: fixed;
+    left: calc(50vw - 68.24px);
+    top: 10px;
+    width: auto;
+    padding: 5px 10px;
+    border-radius: 21px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+
+    > .icon {
+        transform: rotate(90deg);
+    }
+
+    &.hidden {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
 .eventCard {
 
     >.eventName {

diff --git a/front-end/src/components/Events.tsx b/front-end/src/components/Events.tsx
@@ -16,7 +16,7 @@ import Event from './events/Event'
 import EventEditor from './events/EventEditor'
 
 export default React.memo(() => {
-    const { scrollToTop, scrollHeight, scrollTop } = useSlideScroll()
+    const { scrollToTop, scrollTop } = useSlideScroll()
     const showScrollButton = scrollTop > 100
     const store = useStore()
     const [filter, setFilter] = useState<'All' | 'Bookmarked' | 'Mine'>('All')
@@ -71,13 +71,11 @@ export default React.memo(() => {
 
                     <Spacer size={12} />
 
-                    <div style={{ position: 'fixed', top: 0, left: 0, opacity: showScrollButton ? 1 : 0, width: '100%', padding: 10, pointerEvents: showScrollButton ? undefined : 'none', appearance: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        <Button onClick={scrollToTop} style={{ width: 'auto', padding: '5px 10px', borderRadius: 21 }}>
-                            <Icon name='arrow_back' style={{ transform: 'rotate(90deg)' }} />
-                            <Spacer size={6} />
-                            Scroll to top
-                        </Button>
-                    </div>
+                    <Button className={'scrollToTopButton' + ' ' + (!showScrollButton ? 'hidden' : '')} style={{ opacity: showScrollButton ? 1 : 0, pointerEvents: showScrollButton ? undefined : 'none' }} onClick={scrollToTop} >
+                        <Icon name='arrow_back' />
+                        <Spacer size={6} />
+                        Scroll to top
+                    </Button>
 
                     <Events events={visibleEvents} editEvent={editEvent} />
 

diff --git a/front-end/src/components/core/Button.tsx b/front-end/src/components/core/Button.tsx
@@ -11,14 +11,15 @@ type Props = Pick<CommonFieldProps<never>, 'disabled'> & {
     isLoading?: boolean,
     isCompact?: boolean,
     children: React.ReactNode,
+    className?: string,
     style?: CSSProperties
 }
 
-export default React.memo(({ isPrimary, isDanger, isCompact, style, isSubmit, disabled, isLoading, onClick, children }: Props) => {
+export default React.memo(({ isPrimary, isDanger, isCompact, className, style, isSubmit, disabled, isLoading, onClick, children }: Props) => {
 
     return (
         <button
-            className={'button' + ' ' + (isPrimary ? 'primary' : '') + ' ' + (isDanger ? 'danger' : '') + ' ' + (isCompact ? 'compact' : '')}
+            className={'button' + ' ' + (isPrimary ? 'primary' : '') + ' ' + (isDanger ? 'danger' : '') + ' ' + (isCompact ? 'compact' : '') + ' ' + className}
             style={style}
             type={isSubmit ? 'submit' : 'button'}
             disabled={disabled || isLoading}