Add margin to LoadMore button

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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} />;
     }
   };
 

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}

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'

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'

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}

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'

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'

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}

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'

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}

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}