feat: decks page styles

src/components/ui/pagination/pagination.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { ComponentPropsWithoutRef, FC } from 'react'
 
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@/assets'
 import { clsx } from 'clsx'
@@ -27,8 +27,8 @@ export type PaginationProps = {
   perPage?: number
   perPageOptions?: number[]
   siblings?: number
-} & PaginationConditionals
-
+} & PaginationConditionals &
+  Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>
 const classNames = {
   container: s.container,
   dots: s.dots,
@@ -37,12 +37,15 @@ const classNames = {
   pageButton(selected?: boolean) {
     return clsx(this.item, selected && s.selected)
   },
-  root: s.root,
+  root(className?: string) {
+    return clsx(s.root, className)
+  },
   select: s.select,
   selectBox: s.selectBox,
 }
 
 export const Pagination: FC<PaginationProps> = ({
+  className,
   count,
   onChange,
   onPerPageChange,
@@ -50,6 +53,7 @@ export const Pagination: FC<PaginationProps> = ({
   perPage = null,
   perPageOptions,
   siblings,
+  ...rest
 }) => {
   const {
     handleMainPageClicked,
@@ -68,7 +72,7 @@ export const Pagination: FC<PaginationProps> = ({
   const showPerPageSelect = !!perPage && !!perPageOptions && !!onPerPageChange
 
   return (
-    <div className={classNames.root}>
+    <div className={classNames.root(className)} {...rest}>
       <div className={classNames.container}>
         <PrevButton disabled={isFirstPage} onClick={handlePreviousPageClicked} />
 

src/components/ui/slider/slider.module.scss

@@ -5,6 +5,7 @@
   justify-content: center;
 
   width: 100%;
+  min-width: 220px;
 }
 
 .valueDisplay {

src/components/ui/tabs/tabs.module.scss

@@ -1,5 +1,6 @@
 .list {
   display: inline-flex;
+  flex-shrink: 0;
   background-color: var(--color-dark-900);
 }
 

src/components/ui/text-field/text-field.module.scss

@@ -1,5 +1,6 @@
 .root {
   width: 100%;
+  min-width: 200px;
 }
 
 .fieldContainer {

src/pages/decks-page/decks-page.module.scss

@@ -13,5 +13,9 @@
   display: flex;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 16px;
-  margin-bottom: 16px;
+  margin: 10px 0 16px;
+}
+
+.pagination {
+  margin-top: 24px;
 }

src/pages/decks-page/decks-page.tsx

@@ -137,7 +137,7 @@ export const DecksPage = () => {
             search
             value={search ?? ''}
           />
-          <Tabs onValueChange={handleTabChange} value={currentTab ?? undefined}>
+          <Tabs asChild onValueChange={handleTabChange} value={currentTab ?? undefined}>
             <TabsList>
               <TabsTrigger value={'my'}>My decks</TabsTrigger>
               <TabsTrigger value={'all'}>All decks</TabsTrigger>
@@ -163,6 +163,7 @@ export const DecksPage = () => {
           sort={sort}
         />
         <Pagination
+          className={s.pagination}
           count={decks?.pagination?.totalPages || 1}
           onChange={setCurrentPage}
           page={currentPage ?? 1}

src/styles/_boilerplate.scss

@@ -41,6 +41,8 @@ select,
 textarea,
 optgroup,
 option {
+  box-sizing: border-box;
+
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;