chore: Improve paging (#3265)

frontend/web/components/Paging.js

@@ -30,15 +30,25 @@ export default class Paging extends PureComponent {
       (currentIndex || currentIndex + 1) + spaceBetween,
     )
     const range = _.range(from, to)
-    const noPages = range.length < 2
+    const noPages = range.length < 1
     if (noPages && !(paging.next || paging.previous)) {
       return null
     }
     return (
-      <Row className=' paging py-0' style={isLoading ? { opacity: 0.5 } : {}}>
+      <Row
+        className='paging justify-content-end table-column py-2'
+        style={isLoading ? { opacity: 0.5 } : {}}
+      >
+        {!!paging.count && (
+          <span className='fs-caption text-muted'>
+            {currentIndex * paging.pageSize + 1}-
+            {Math.min((currentIndex + 1) * paging.pageSize, paging.count)} of{' '}
+            {paging.count}
+          </span>
+        )}
         <Button
           disabled={isLoading || !paging.previous}
-          className='icon btn-paging mt-1'
+          className='icon fs-small page'
           onClick={() => prevPage()}
         >
           <div>
@@ -53,21 +63,23 @@ export default class Paging extends PureComponent {
                   role='button'
                   className={cn({
                     'active': currentIndex === 1,
-                    page: true,
+                    'fs-small page': true,
                   })}
                   onClick={
                     paging.currentPage === 1 + 1 ? undefined : () => goToPage(1)
                   }
                 >
                   {1}
                 </div>
-                <div
-                  className={cn({
-                    page: true,
-                  })}
-                >
-                  ...
-                </div>
+                {!range.includes(1) && !noPages && (
+                  <div
+                    className={cn({
+                      'fs-small page': true,
+                    })}
+                  >
+                    ...
+                  </div>
+                )}
               </>
             )}
             {!noPages &&
@@ -77,7 +89,7 @@ export default class Paging extends PureComponent {
                   role='button'
                   className={cn({
                     'active': currentIndex === index,
-                    page: true,
+                    'fs-small page': true,
                   })}
                   onClick={
                     paging.currentPage === index + 1
@@ -88,7 +100,7 @@ export default class Paging extends PureComponent {
                   {index + 1}
                 </div>
               ))}
-            {!noPages && !range.includes(lastPage - 1) && (
+            {!noPages && !range.includes(lastPage - 2) && (
               <>
                 <div
                   className={cn({
@@ -102,11 +114,15 @@ export default class Paging extends PureComponent {
                 >
                   ...
                 </div>
+              </>
+            )}
+            {!noPages && !range.includes(lastPage - 1) && (
+              <>
                 <div
                   role='button'
                   className={cn({
                     'active': currentIndex === lastPage,
-                    page: true,
+                    'page fs-small': true,
                   })}
                   onClick={
                     paging.currentPage === lastPage
@@ -130,7 +146,7 @@ export default class Paging extends PureComponent {
           )
         )}
         <Button
-          className='icon btn-paging mt-1'
+          className='icon fs-small page'
           disabled={isLoading || !paging.next}
           onClick={() => nextPage()}
         >

frontend/web/styles/components/_paging.scss

@@ -19,16 +19,33 @@
 	}
 	justify-content: center;
 	.page {
-		display: inline-block;
-		border-radius:34px;
-		margin-left: 10px;
-		margin-right: 10px;
+		>div {
+			height: 100%;
+			justify-content: center;
+			display: flex;
+			align-items: center;
+		}
+		border-radius: $border-radius;
+		margin-left: 4px;
+		margin-right: 4px;
+		min-width: 32px;
+		height: 32px;
+		line-height: 1;
 		font-weight: 500;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: 1px solid $hr-border-color;
+		text-align: center;
+		padding: 0;
+		background: transparent;
+		color: $text-icon-grey;
 		&:hover {
-			color: $bt-brand-primary;
+			color: $primary;
 		}
 		&.active {
-			color: $bt-brand-primary;
+			background-color: $primary-alfa-8;
+			color: $primary;
 		}
 	}
 }