From 6144b473494d0b13f19311c1bb09c7fdfacbc062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 26 Aug 2024 00:37:00 +0200
Subject: [PATCH] Add margin to LoadMore button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/scrollable-list.tsx        | 5 ++++-
 src/features/bookmarks/index.tsx          | 1 +
 src/features/bubble-timeline/index.tsx    | 1 +
 src/features/community-timeline/index.tsx | 1 +
 src/features/hashtag-timeline/index.tsx   | 1 +
 src/features/home-timeline/index.tsx      | 1 +
 src/features/landing-timeline/index.tsx   | 1 +
 src/features/list-timeline/index.tsx      | 1 +
 src/features/public-timeline/index.tsx    | 1 +
 src/features/quotes/index.tsx             | 1 +
 src/features/remote-timeline/index.tsx    | 1 +
 11 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 7f6bb23f6..e19f70069 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -75,6 +75,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   listClassName?: string;
   /** Class names on each item container. */
   itemClassName?: string;
+  /** Extra class names on the LoadMore element */
+  loadMoreClassName?: string;
   /** `id` attribute on the Virtuoso element. */
   id?: string;
   /** CSS styles on the Virtuoso element. */
@@ -100,6 +102,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   className,
   listClassName,
   itemClassName,
+  loadMoreClassName,
   id,
   hasMore,
   placeholderComponent: Placeholder,
@@ -195,7 +198,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     if (autoloadMore || !hasMore || !onLoadMore) {
       return null;
     } else {
-      return <LoadMore visible={!isLoading} onClick={onLoadMore} />;
+      return <LoadMore className={loadMoreClassName} visible={!isLoading} onClick={onLoadMore} />;
     }
   };
 
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index eeade3c04..3023c4204 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -110,6 +110,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
       <PullToRefresh onRefresh={handleRefresh}>
         <StatusList
           className='black:p-0 black:sm:p-4'
+          loadMoreClassName='black:sm:mx-4'
           statusIds={statusIds}
           scrollKey='bookmarked_statuses'
           hasMore={hasMore}
diff --git a/src/features/bubble-timeline/index.tsx b/src/features/bubble-timeline/index.tsx
index c1a3f37ab..c10cf5c3d 100644
--- a/src/features/bubble-timeline/index.tsx
+++ b/src/features/bubble-timeline/index.tsx
@@ -39,6 +39,7 @@ const BubbleTimeline = () => {
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-0 black:sm:p-4'
+          loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 46f5d381b..53a64bd9d 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -42,6 +42,7 @@ const CommunityTimeline = () => {
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-0 black:sm:p-4'
+          loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 37ed90fce..5b141c110 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -62,6 +62,7 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
       )}
       <Timeline
         className='black:p-0 black:sm:p-4'
+        loadMoreClassName='black:sm:mx-4'
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${tagId}`}
         onLoadMore={handleLoadMore}
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 6fba8b8bc..1fb7d901e 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -63,6 +63,7 @@ const HomeTimeline: React.FC = () => {
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-0 black:sm:p-4'
+          loadMoreClassName='black:sm:mx-4'
           scrollKey='home_timeline'
           onLoadMore={handleLoadMore}
           timelineId='home'
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 1c8a82cd5..28bd812cd 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -49,6 +49,7 @@ const LandingTimeline = () => {
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
             className='black:p-0 black:sm:p-4'
+            loadMoreClassName='black:sm:mx-4'
             scrollKey={`${timelineId}_timeline`}
             timelineId={timelineId}
             prefix='home'
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index 70709711b..03644385d 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -104,6 +104,7 @@ const ListTimeline: React.FC = () => {
     >
       <Timeline
         className='black:p-0 black:sm:p-4'
+        loadMoreClassName='black:sm:mx-4'
         scrollKey='list_timeline'
         timelineId={`list:${id}`}
         onLoadMore={handleLoadMore}
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index ee251e53f..0ce6282f7 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -87,6 +87,7 @@ const CommunityTimeline = () => {
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-0 black:sm:p-4'
+          loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 89e0ca74a..aa1bb253e 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -40,6 +40,7 @@ const Quotes: React.FC = () => {
     <Column label={intl.formatMessage(messages.heading)} transparent={!isMobile}>
       <StatusList
         className='black:p-0 black:sm:p-4'
+        loadMoreClassName='black:sm:mx-4'
         statusIds={statusIds as ImmutableOrderedSet<string>}
         scrollKey={`quotes:${statusId}`}
         hasMore={hasMore}
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 140ae84cf..02295f6bc 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -67,6 +67,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
 
       <Timeline
         className='black:p-0 black:sm:p-4'
+        loadMoreClassName='black:sm:mx-4'
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
         onLoadMore={handleLoadMore}