pagination UI updates'

Author: AhsanKhan7

src/ui/components/icons/assets/PaginationFirst.svg

@@ -61,6 +61,11 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
 // import { ReactComponent as Edit } from './assets/Edit.svg';
 
+import { ReactComponent as PaginationFirst } from './assets/PaginationFirst.svg';
+import { ReactComponent as PaginationLast } from './assets/PaginationLast.svg';
+import { ReactComponent as PaginationNext } from './assets/PaginationNext.svg';
+import { ReactComponent as PaginationPrev } from './assets/PaginationPrev.svg';
+
 import styles from './index.module.scss';
 import { joinClassNames } from '../../../utils/styles';
 import { iconColors, iconSizes } from '../../../constants';
@@ -75,6 +80,7 @@ interface Props {
 const mapSizes = {
   xs: 12,
   sm: 18,
+  sml: 16,
   md: 24,
   lg: 30,
   xl: 36,
@@ -177,6 +183,12 @@ const icons = {
     Component: ChartBarHorizontal,
     useStroke: true,
   }),
+
+  // paginations
+  paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),
+  paginationLast: createIcon({ Component: PaginationLast, useStroke: true }),
+  paginationNext: createIcon({ Component: PaginationNext, useStroke: true }),
+  paginationPrev: createIcon({ Component: PaginationPrev, useStroke: true }),
 };
 
 export { icons };

src/ui/components/icons/assets/PaginationLast.svg

@@ -1,7 +1,7 @@
 @import '../../../globalStyles.scss';
 
-$paginationSize: 4rem;
-$paginationBorderColor: #eceeef;
+$paginationSize: 32px;
+$paginationBorderColor: #F1F1F1;
 
 .paginationNavigationItem,
 .paginationNumbers {
@@ -10,19 +10,34 @@ $paginationBorderColor: #eceeef;
   display: flex;
   justify-content: center;
   align-items: center;
+  align-items: center;
   cursor: pointer;
   outline: 0;
   width: $paginationSize;
   height: $paginationSize;
   border: 1px solid $paginationBorderColor;
+  border-radius: 8px;
+  margin-right: 5px;
 
   &.hidden {
     pointer-events: none;
     visibility: hidden;
   }
 }
 
+
 .paginationNumbers.active {
-  background: $secondaryColor;
+  background: #443E99;
   cursor: initial;
 }
+
+.paginationText {
+  color: #333;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: Rubik;
+}
+.paginationText.active {
+  background: #fff;
+  cursor: initial;
+}

src/ui/components/icons/assets/PaginationNext.svg

@@ -1,12 +1,5 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from 'react';
-
-import { FlexBox, Box, Paragraph, icons } from '../../../components';
-
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { FlexBox, Box, icons } from '../../../components';
 import styles from './index.module.scss';
 import { joinClassNames, addStyle } from '../../../../utils';
 import { useLocation } from 'react-router-dom';
@@ -34,9 +27,12 @@ const PaginationItem = (props: {
       addStyle(props.isActive, styles.active),
     )}
   >
-    <Paragraph color={props.isActive ? 'white' : 'grey'}>
+    <span
+      className={styles.paginationText}
+      style={{ color: props.isActive ? '#fff' : '#333' }}
+    >
       {props.index}
-    </Paragraph>
+    </span>
   </div>
 );
 
@@ -55,7 +51,7 @@ const PaginationNavigationItem = (props: {
       addStyle(!props.hasNext, styles.hidden),
     )}
   >
-    <props.icon color="grey" size="md" />
+    <props.icon color="black" size="sml" />
   </div>
 );
 
@@ -152,7 +148,6 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
     <FlexBox.Column justifyContent="center" alignItems="center">
       <FlexBox marginTop="xxxl" marginBottom="xxxl" justifyContent="center">
         <PaginationNavigationItem
-          style={{ paddingRight: 2 }}
           hasNext={props.pageIndex !== 0}
           onClick={() => {
             // switch (componentName) {
@@ -173,8 +168,23 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
 
             props.setPageIndex(props.pageIndex - 1);
           }}
-          icon={icons.chevronLeft}
+          icon={icons.paginationFirst}
+        />
+        <PaginationNavigationItem
+          hasNext={props.pageIndex !== 0}
+          onClick={() => {
+            onChange(
+              props.pageIndex,
+              props.itemPerPage,
+              componentName,
+              props.filters,
+            );
+
+            props.setPageIndex(props.pageIndex - 1);
+          }}
+          icon={icons.paginationPrev}
         />
+
         <FlexBox>
           {pageNumbers.map((p: any) => (
             <Box key={p}>
@@ -190,22 +200,33 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
             </Box>
           ))}
         </FlexBox>
-        <Box>
-          <PaginationNavigationItem
-            style={{ paddingLeft: 2 }}
-            hasNext={props.pageIndex + 1 < props.totalOfPages}
-            onClick={() => {
-              onChange(
-                props.pageIndex + 2,
-                props.itemPerPage,
-                componentName,
-                props.filters,
-              );
-              props.setPageIndex(props.pageIndex + 1);
-            }}
-            icon={icons.chevronRight}
-          />
-        </Box>
+
+        <PaginationNavigationItem
+          hasNext={props.pageIndex + 1 < props.totalOfPages}
+          onClick={() => {
+            onChange(
+              props.pageIndex + 2,
+              props.itemPerPage,
+              componentName,
+              props.filters,
+            );
+            props.setPageIndex(props.pageIndex + 1);
+          }}
+          icon={icons.paginationNext}
+        />
+        <PaginationNavigationItem
+          hasNext={props.pageIndex + 1 < props.totalOfPages}
+          onClick={() => {
+            onChange(
+              props.pageIndex + 2,
+              props.itemPerPage,
+              componentName,
+              props.filters,
+            );
+            props.setPageIndex(props.pageIndex + 1);
+          }}
+          icon={icons.paginationLast}
+        />
       </FlexBox>
     </FlexBox.Column>
   );

src/ui/components/icons/assets/PaginationPrev.svg

@@ -53,3 +53,50 @@
 .lastTable tbody tr:last-child {
   border-bottom: 1px solid $lightestGreyColor;
 }
+
+
+.dropdown {
+  border: 1px solid #A8A8A8;
+  border-radius: 4px;
+  outline: none;
+  width: 59px;
+  height: 32px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #333333;
+  padding-left: 7px;
+  cursor: pointer;
+}
+
+
+.popup {
+  background-color: $whiteColor;
+  border: 1px solid $lightestGreyColor;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+  width: 5.8rem;
+  z-index: 9;
+  position: relative;
+}
+
+.popupItem {
+  cursor: pointer;
+  transition: 0.2s ease-in all;
+}
+
+.popupItem:hover {
+  background-color: #fbfbfb;
+}
+
+.itemText1 {
+  font-size: 16px; 
+  font-weight: 600; 
+  line-height: 18px;
+  
+}
+
+.itemText {
+  font-size: 16px; 
+  font-weight: 600; 
+  line-height: 18px
+}