From 7af2b43feddd25b4b0aa419cf66d9dab0438cea1 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Mon, 1 Jan 2024 16:13:51 +0100
Subject: [PATCH] feat: decks page styles

---
 src/components/ui/pagination/pagination.tsx        | 14 +++++++++-----
 src/components/ui/slider/slider.module.scss        |  1 +
 src/components/ui/tabs/tabs.module.scss            |  1 +
 .../ui/text-field/text-field.module.scss           |  1 +
 src/pages/decks-page/decks-page.module.scss        |  6 +++++-
 src/pages/decks-page/decks-page.tsx                |  3 ++-
 src/styles/_boilerplate.scss                       |  2 ++
 7 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx
index 9a06780..ceb3803 100644
--- a/src/components/ui/pagination/pagination.tsx
+++ b/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} />
 
diff --git a/src/components/ui/slider/slider.module.scss b/src/components/ui/slider/slider.module.scss
index dd41934..dc1c449 100644
--- a/src/components/ui/slider/slider.module.scss
+++ b/src/components/ui/slider/slider.module.scss
@@ -5,6 +5,7 @@
   justify-content: center;
 
   width: 100%;
+  min-width: 220px;
 }
 
 .valueDisplay {
diff --git a/src/components/ui/tabs/tabs.module.scss b/src/components/ui/tabs/tabs.module.scss
index 554bf40..8a891ea 100644
--- a/src/components/ui/tabs/tabs.module.scss
+++ b/src/components/ui/tabs/tabs.module.scss
@@ -1,5 +1,6 @@
 .list {
   display: inline-flex;
+  flex-shrink: 0;
   background-color: var(--color-dark-900);
 }
 
diff --git a/src/components/ui/text-field/text-field.module.scss b/src/components/ui/text-field/text-field.module.scss
index eaeb347..85e2d68 100644
--- a/src/components/ui/text-field/text-field.module.scss
+++ b/src/components/ui/text-field/text-field.module.scss
@@ -1,5 +1,6 @@
 .root {
   width: 100%;
+  min-width: 200px;
 }
 
 .fieldContainer {
diff --git a/src/pages/decks-page/decks-page.module.scss b/src/pages/decks-page/decks-page.module.scss
index ca89803..9bf0cb6 100644
--- a/src/pages/decks-page/decks-page.module.scss
+++ b/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;
 }
diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx
index 55fb6f3..d8090cb 100644
--- a/src/pages/decks-page/decks-page.tsx
+++ b/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}
diff --git a/src/styles/_boilerplate.scss b/src/styles/_boilerplate.scss
index 098c1d2..9e53f87 100644
--- a/src/styles/_boilerplate.scss
+++ b/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;