adjust Paged styles and PaginatedList with size value to false + fix …

…TotalLayou Header height
leemonade · Jan 11, 2024 · b406c82 · b406c82
1 parent abd6ed4
commit b406c82
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 43 deletions.
diff --git a/packages/components/src/informative/PaginatedList/PaginatedList.js b/packages/components/src/informative/PaginatedList/PaginatedList.js
@@ -175,7 +175,7 @@ const PaginatedList = ({
               labels={labels}
               page={page}
               totalPages={Math.ceil(totalPages)}
-              withSize={true}
+              withSize={false}
               size={size}
               sizes={sizes}
               onSizeChange={handleSizeChange}

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
@@ -1,38 +1,35 @@
 import { createStyles } from '@mantine/styles';
 
 const TotalLayoutHeaderStyles = createStyles(
-  (theme, { children, direction, compact, hasIcon, iconLarge }) => {
-    const expandedHeader = direction === 'column' && children;
-    return {
-      root: {},
-      headerContainer: {
-        padding: `${!expandedHeader ? '16px' : '12px'} 24px`,
-        backgroundColor: 'white',
-        minHeight: 72,
-      },
-      header: { height: '40px' },
-      headerTools: { marginTop: '12px' },
-      iconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: iconLarge ? '2.8rem' : '1.4rem',
-        width: iconLarge ? 48 : 32,
-        height: iconLarge ? 48 : 32,
-        textAlign: 'center',
-        marginRight: 16,
-        borderRadius: !hasIcon && 4,
-        backgroundColor: !hasIcon && '#C4C4C4',
-      },
-      headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
-      headerSubtitle: {
-        fontSize: '18px',
-        fontWeight: 400,
-        lineHeight: '24px',
-        // marginLeft: !compact && '40px',
-      },
-    };
-  },
+  (theme, { children, direction, compact, hasIcon, iconLarge }) => ({
+    root: {},
+    headerContainer: {
+      padding: `12px 24px`,
+      backgroundColor: 'white',
+      minHeight: 72,
+    },
+    header: { height: '40px' },
+    headerTools: { marginTop: '12px' },
+    iconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: iconLarge ? '2.8rem' : '1.4rem',
+      width: iconLarge ? 48 : 32,
+      height: iconLarge ? 48 : 32,
+      textAlign: 'center',
+      marginRight: 16,
+      borderRadius: !hasIcon && 4,
+      backgroundColor: !hasIcon && '#C4C4C4',
+    },
+    headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
+    headerSubtitle: {
+      fontSize: '18px',
+      fontWeight: 400,
+      lineHeight: '24px',
+      // marginLeft: !compact && '40px',
+    },
+  }),
 );
 
 export { TotalLayoutHeaderStyles };
diff --git a/packages/components/src/navigation/Pager/Pager.styles.js b/packages/components/src/navigation/Pager/Pager.styles.js
@@ -28,10 +28,9 @@ export const PagerStyles = createStyles(
       },
       item: {
         ...getFontExpressive(theme.fontSizes['2'], 300),
-        color: disabled ? theme.colors.text05 : theme.colors.text01,
-        backgroundColor: 'transparent',
+        color: theme.other.pager?.content?.color?.default,
+        backgroundColor: theme.other.pager?.background?.color?.default,
         border: 'none',
-        borderRadius: '50%',
         height: pxToRem(48),
         width: pxToRem(48),
         maxWidth: pxToRem(48),
@@ -49,7 +48,8 @@ export const PagerStyles = createStyles(
         },
 
         '&:hover': {
-          backgroundColor: disabled ? 'none' : 'rgba(0, 0, 0, 0.03)',
+          backgroundColor: theme.other.pager.background.color.hover,
+          border: theme.other.pager.border.hover,
         },
 
         '&:active:not(:disabled):not(.mantine-ref_dots_1)': {
@@ -62,14 +62,13 @@ export const PagerStyles = createStyles(
         },
         '&[data-active]': {
           fontWeight: !disabled && 700,
-          color: disabled ? theme.colors.text05 : theme.colors.text01,
-          backgroundColor: 'transparent',
-          border: disabled ? 'none' : `1px solid ${theme.colors.ui01}`,
-          borderRadius: '50%',
+          color: theme.other.pager?.content?.color?.default,
+          backgroundColor: theme.other.core.color.primary['200'],
+          border: disabled ? 'none' : theme.other.pager.border.color.selected,
           pointerEvents: 'none',
         },
         '&[data-dots]': {
-          color: theme.colors.text05,
+          color: theme.other.pager?.content?.color?.default,
           // transform: `translateY(${pxToRem(4)})`,
         },
       },
@@ -108,5 +107,5 @@ export const PagerStyles = createStyles(
         width: 120,
       },
     };
-  }
+  },
 );