Refactoring colors in all components

brunosllz · Oct 23, 2022 · e1560d4 · e1560d4
1 parent 91819eb
commit e1560d4
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 53 deletions.
diff --git a/server.json b/server.json
@@ -35,17 +35,6 @@
       "imageUrl": "https://covers.zlibcdn2.com/covers299/books/d4/6a/79/d46a79d3b3847d950ad287965176110c.jpg",
       "categoryId": "3",
       "createdAt": "2022-10-16T02:58:24.466Z"
-    },
-    {
-      "id": "3",
-      "name": "O poder do hábito - Por que fazemos o que fazemos na vida e nos negócios",
-      "publishingCompany": "Objetiva",
-      "description": "Durante os ultimos dois anos, uma jovem transformou quase todos os aspectos de sua vida. Parou de fumar, correu uma maratona e foi promovida. Em um laboratorio, neurologistas descobriram que os padroes dentro do cerebro dela ou seja, seus habitos foram modificados de maneira fundamental para que todas essas mudancas ocorressem. Ha duas decadas pesquisando ao lado de psicologos, sociologos e publicitarios, cientistas do cerebro comecaram finalmente a entender como os habitos funcionam e, mais importante, como podem ser transformados. Embora isoladamente parecam ter pouca importancia, com o tempo, tem um enorme impacto na saude, na produtividade, na estabilidade financeira e na felicidade. Com base na leitura de centenas de artigos academicos, entrevistas com mais de trezentos cientistas e executivos, alem de pesquisas realizadas em dezenas de empresas, o reporter investigativo do New York Times Charles Duhigg elabora, em O poder do habito, um argumento animador: a chave para se exercitar regularmente, perder peso, educar bem os filhos, se tornar uma pessoa mais produtiva, criar empresas revolucionarias e ter sucesso e entender como os habitos funcionam. Transforma-los pode gerar bilhoes e significar a diferenca entre fracasso e sucesso, vida e morte. Duhigg conclui por que algumas pessoas e empresas tem tanta dificuldade em mudar, enquanto outras o fazem da noite para o dia. Descobre, por exemplo, como habitos corretos foram cruciais para o sucesso do nadador Michael Phelps, do diretor executivo da Starbucks, Howard Schultz, e do heroi dos direitos civis, Martin Luther King, Jr.: Eles tiveram exito transformando habitos. Todos comecam com um padrao psicologico. Primeiro, ha uma sugestao, ou gatilho, que diz ao seu cerebro para entrar em modo automatico e desdobrar um comportamento. Depois, ha a rotina, que e o comportamento em si. Para alterar um habito, e preciso modificar os padroes que moldam cada aspecto de nossas vidas. Entendendo",
-      "publishedYear": "2012",
-      "countPage": "350",
-      "imageUrl": "https://covers.zlibcdn2.com/covers299/books/d4/6a/79/d46a79d3b3847d950ad287965176110c.jpg",
-      "categoryId": "3",
-      "createdAt": "2022-10-16T02:58:24.466Z"
     }
   ]
 }
diff --git a/src/assets/Logo.tsx b/src/assets/Logo.tsx
@@ -11,19 +11,19 @@ export function Logo() {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M15.745 1.127c-.29.382-.284.27-.26 5.771l.021 5.054.247.241.248.242h5.343c5.924 0 5.666.02 5.774-.472.027-.12.079-.24.116-.262.04-.025.067-2.01.067-4.899 0-5.322-.005-5.396-.433-5.773L26.68.864H15.944l-.199.263zm14.598-.092c-.498.407-.486.258-.486 5.637v4.847l.197.4c.284.58.076.56 6.058.537l5.114-.021.231-.232.232-.231V1.399l-.247-.27-.247-.27-5.322.003-5.322.002-.208.17zM1.557 15.187c-.08.046-.245.179-.366.295l-.219.212-.036 5.104c-.043 5.916-.06 5.748.592 5.954.076.024.138.075.138.112 0 .159 9.947.083 10.28-.078.167-.08.334-.146.372-.146.038 0 .155-.164.26-.364l.19-.363v-4.905c0-4.892-.001-4.906-.16-5.224-.087-.175-.184-.318-.216-.318-.031 0-.126-.074-.21-.164l-.153-.165-5.163-.017c-3.77-.012-5.203.006-5.31.067zm14.382.137c-.158.125-.32.282-.36.349-.047.078-.073 1.996-.073 5.357v5.235l.215.224c.118.123.253.224.301.224.048 0 .128.05.178.11.099.119 10.064.172 10.182.055.03-.03.188-.107.35-.17.58-.227.57-.125.57-5.649 0-5.045-.034-5.593-.339-5.593-.05 0-.143-.074-.207-.164l-.115-.165-5.207-.02-5.208-.02-.287.227zM1.56 29.707c-.158.03-.301.093-.316.139a.692.692 0 01-.144.199c-.192.192-.201.527-.163 5.733l.036 5.011.242.247.242.247H12.085l.231-.218c.128-.12.232-.256.232-.302 0-.045.05-.123.11-.173.095-.08.11-.727.11-5.013v-4.923l-.194-.433c-.186-.418-.206-.436-.551-.51-.416-.089-10.001-.093-10.464-.004zm14.678-.02c-.776.083-.767.014-.767 5.79 0 5.298.002 5.323.383 5.624l.232.182H26.686l.235-.24c.129-.131.234-.287.234-.346 0-.06.033-.107.073-.107.048 0 .073-1.72.073-5.014V30.56l-.18-.381c-.1-.21-.24-.41-.31-.445-.13-.062-10.024-.108-10.575-.049zm14.314.03c-.254.056-.318.115-.493.449l-.2.384v4.974c0 4.333.014 4.986.109 5.066.06.05.11.13.11.178 0 .047.1.183.223.301l.224.214h10.637l.264-.255.262-.256.001-5.323.001-5.323-.2-.186a1.187 1.187 0 00-.493-.242c-.41-.08-10.087-.063-10.445.018zM1.361 44.241c-.186.122-.356.299-.38.392-.032.13-.06 5.99-.047 10.058.001.395.031.515.166.666.381.425.195.41 5.66.426 5.767.016 5.472.047 5.824-.616l.183-.344V49.93c0-5.404-.002-5.436-.47-5.614-.094-.036-.186-.108-.204-.161-.025-.078-1.01-.1-5.214-.116l-5.182-.02-.337.223zm14.766-.113c-.1.059-.255.146-.344.193-.3.16-.32.539-.297 5.854l.02 5.011.215.224c.118.123.267.224.332.224s.149.03.187.068c.041.04 2.098.073 5.072.081 5.595.015 5.59.016 5.774-.501.038-.108.102-.253.142-.323.047-.08.073-1.87.073-4.955 0-5.281-.018-5.545-.4-5.69-.093-.035-.183-.107-.2-.16-.051-.152-10.316-.177-10.574-.026z"
-        fill="#339B43"
+        fill="#00875F"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.916.323c-.733.232-.633.189-1.284.554-.84.472-1.763 1.254-2.132 1.808-.066.1-.214.314-.328.475C.91 3.53.498 4.373.498 4.538c0 .07-.049.22-.108.335-.29.561-.31 2.856-.031 3.5.076.175.139.374.139.441 0 .21.458 1.049 1.001 1.832.555.8 2.15 1.998 2.868 2.154.14.03.321.098.402.15.2.13 1.88.35 2.295.302 1.295-.15 1.658-.216 1.908-.344.156-.08.319-.144.361-.144.44 0 2.188-1.36 2.753-2.141.151-.209.317-.405.368-.438a.224.224 0 00.094-.17c0-.063.06-.2.131-.308.78-1.156.968-3.925.359-5.277a5.441 5.441 0 01-.195-.516c-.046-.147-.13-.308-.189-.356-.058-.048-.106-.13-.106-.184 0-.23-1.382-1.754-1.865-2.057-.079-.05-.268-.173-.42-.274C9.925.819 9.085.42 8.951.42c-.053 0-.284-.066-.513-.146C7.773.04 5.722.069 4.916.323z"
-        fill="#CB232A"
+        fill="#EF4444"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.537.091a5.44 5.44 0 00-.84.209c-.16.063-.346.116-.41.117a.332.332 0 00-.21.113c-.05.06-.22.144-.378.186C3.54.76 3.393.841 3.37.9c-.022.058-.081.106-.13.106-.194 0-1.515 1.152-1.785 1.556l-.332.497c-.31.464-.627 1.083-.625 1.223 0 .066.107-.093.237-.355.13-.26.327-.606.437-.766l.325-.475c.47-.687 1.908-1.806 2.76-2.148C5.369.092 7.534-.044 8.44.275c.229.08.46.146.513.146.134 0 .974.398 1.31.622.153.101.342.224.421.274.483.303 1.865 1.828 1.865 2.057 0 .053.048.136.106.184.058.049.143.209.189.356.046.147.133.38.195.516.609 1.352.42 4.121-.359 5.277-.072.107-.13.245-.13.307s-.043.14-.095.171c-.051.033-.217.23-.368.438-.566.782-2.313 2.14-2.753 2.14-.042 0-.205.066-.36.145-.25.128-.614.193-1.909.344-.415.048-2.095-.172-2.295-.301a1.49 1.49 0 00-.402-.15c-.718-.157-2.313-1.356-2.868-2.155a9.628 9.628 0 01-.76-1.239c-.132-.259-.241-.415-.241-.346 0 .145.345.816.53 1.027.07.08.127.183.127.227 0 .284 2.07 2.23 2.372 2.23.055 0 .703.286 1.001.442.53.277 2.424.49 3.017.338.241-.06.619-.134.84-.163.22-.029.515-.113.656-.189.14-.075.305-.138.366-.14.06 0 .291-.116.512-.255.221-.139.501-.3.622-.356.122-.057.283-.172.358-.256.076-.083.164-.152.197-.152.112 0 .915-.876 1.208-1.316.114-.173.265-.4.336-.503.07-.104.177-.304.238-.445.061-.14.16-.354.218-.475.058-.12.14-.358.181-.53.041-.17.111-.45.155-.62.107-.41.106-2.326-.001-2.527a2.524 2.524 0 01-.154-.538 3.323 3.323 0 00-.212-.678 57.07 57.07 0 01-.223-.475c-.44-.953-1.973-2.629-2.406-2.629-.034 0-.103-.05-.154-.112-.115-.139-1.1-.618-1.269-.618a.921.921 0 01-.32-.101C8.211 0 6.546-.081 5.536.09zm10.48.6c-.08.02-.236.128-.346.24-.432.436-.42.27-.42 5.753v5.026l.164.324c.11.215.274.39.493.52l.329.198 5.048.006 5.049.006.392-.177c.269-.122.45-.266.575-.457l.183-.28V1.48l-.22-.304c-.385-.536.043-.499-5.805-.51-2.913-.007-5.361.005-5.442.025zM30.4.743c-.123.054-.329.24-.456.414l-.233.315v10.386l.225.306c.46.626.2.6 5.938.595l5.048-.004.365-.197c.66-.357.621.02.621-5.87 0-3.409-.026-5.23-.076-5.363a1.07 1.07 0 00-.665-.615C40.757.592 30.674.624 30.4.743zm-3.532.286c.428.377.433.45.433 5.774 0 2.889-.027 4.873-.067 4.898-.037.023-.09.141-.116.262-.108.493.15.472-5.774.472H16l-.248-.242-.247-.241-.021-5.054c-.024-5.5-.03-5.39.26-5.77l.2-.264H26.68l.188.165zm14.574.1l.247.27v10.573l-.232.231-.231.232-5.114.02c-5.982.025-5.774.043-6.058-.535l-.196-.401V6.672c0-5.38-.014-5.23.485-5.637l.208-.17 5.322-.003 5.322-.003.247.27zM.332 4.704C0 5.36.003 7.892.338 8.601c.193.408.212.209.022-.228-.282-.65-.26-2.94.035-3.508.062-.12.102-.262.09-.316-.013-.053-.08.016-.151.155zm1.152 10.301c-.08.02-.266.16-.411.312-.416.434-.43.613-.43 5.874 0 5.334-.014 5.191.569 5.636l.33.251H11.98l.284-.16c.155-.087.283-.177.283-.2 0-.023.083-.137.183-.253l.183-.213V15.761l-.368-.385-.367-.385-5.275-.01c-2.9-.006-5.34.005-5.42.024zm14.465.036c-.71.412-.697.306-.698 6.033 0 5.738-.036 5.425.665 5.853.244.149.318.15 5.46.151 5.877 0 5.518.035 5.925-.57l.183-.27.02-5.187c.018-4.866.011-5.197-.11-5.359-.275-.365-.512-.588-.705-.661-.29-.11-10.548-.101-10.74.01zm-3.767.26c.084.09.179.165.21.165.032 0 .129.143.216.318.159.318.16.332.16 5.223v4.905l-.19.364c-.105.2-.222.364-.26.364-.038 0-.205.066-.371.146-.334.161-10.28.237-10.28.078 0-.037-.063-.088-.139-.112-.651-.206-.635-.038-.592-5.953l.036-5.105.22-.212c.41-.396.157-.38 5.674-.362l5.163.017.153.165zm14.574 0c.064.09.157.165.207.165.305 0 .338.548.338 5.593 0 5.524.01 5.422-.568 5.648-.163.064-.32.14-.35.17-.119.118-10.084.065-10.183-.054-.05-.06-.13-.11-.178-.11-.048 0-.183-.1-.301-.224l-.215-.224V21.03c0-3.36.026-5.28.073-5.357.04-.067.202-.224.36-.35l.287-.227 5.207.02 5.208.021.115.165zM1.451 29.495c-.834.447-.805.24-.805 5.873 0 5.28.009 5.41.415 5.807.38.372.411.374 5.864.35 5.67-.025 5.316.01 5.748-.557l.24-.317V30.24l-.224-.284a1.747 1.747 0 00-.594-.448l-.369-.165-5.012.01c-4.725.008-5.026.016-5.263.143zm14.493.057c-.277.146-.404.271-.526.52l-.161.33-.003 5.002c-.003 5.352.001 5.418.366 5.774.364.355.442.36 5.729.36 5.802 0 5.426.044 6.009-.699l.165-.212-.02-5.186-.02-5.186-.204-.302c-.425-.626-.283-.612-5.991-.602l-4.978.008-.366.193zm14.493-.03a1.734 1.734 0 00-.53.458l-.196.283v10.344l.201.313c.4.624-.015.58 5.752.604 5.955.025 5.872.035 6.17-.749.123-.324.1-10.355-.025-10.65-.34-.801-.2-.783-5.996-.78l-5.043.004-.333.174zm-18.414.19c.345.073.365.091.551.51l.193.432v4.923c0 4.286-.014 4.934-.11 5.013-.06.05-.109.128-.109.173 0 .046-.104.181-.232.302l-.232.218H1.457l-.242-.247-.242-.247-.036-5.011c-.038-5.206-.028-5.541.163-5.733a.692.692 0 00.144-.199c.067-.204 9.887-.326 10.78-.135zm14.787.023c.072.035.211.235.31.445l.181.381v5.015c0 3.294-.025 5.014-.073 5.014-.04 0-.073.048-.073.107s-.105.215-.234.347l-.235.24H16.085l-.232-.183c-.38-.3-.383-.326-.383-5.624 0-5.776-.009-5.707.766-5.79.55-.06 10.444-.014 10.574.048zm14.186-.037c.16.03.382.14.493.242l.2.186v5.323l-.002 5.323-.262.256-.264.255H30.524l-.224-.214c-.123-.118-.223-.254-.223-.301 0-.048-.05-.128-.11-.178-.095-.08-.11-.733-.11-5.066V30.55l.201-.384c.175-.334.24-.393.493-.45.358-.08 10.036-.098 10.445-.018zM1.169 44.11c-.497.381-.482.226-.51 5.535-.028 5.745-.03 5.724.625 6.14l.338.214h10.485l.403-.403.404-.404v-5.23c0-5.854.036-5.448-.525-5.869l-.242-.181-5.335-.02-5.335-.02-.308.238zm14.816-.182c-.734.294-.734.294-.734 6.034 0 5.706-.028 5.425.579 5.814l.346.223h10.346l.298-.175c.164-.097.38-.286.481-.42l.183-.245.02-5.112c.024-5.775.056-5.287-.381-5.77l-.331-.365-5.35-.013c-2.944-.008-5.399.005-5.457.029zm-3.891.226c.017.053.109.125.203.161.468.178.47.21.47 5.614v4.894l-.183.344c-.352.663-.057.632-5.823.616-5.466-.015-5.28-.001-5.66-.426-.136-.151-.166-.27-.167-.666-.013-4.068.015-9.928.047-10.059.024-.093.194-.269.38-.391l.336-.223 5.182.02c4.203.016 5.189.038 5.215.116zm14.606 0c.018.053.108.125.2.16.383.145.401.409.401 5.69 0 3.084-.026 4.874-.073 4.955-.04.07-.104.215-.142.323-.183.517-.179.516-5.774.501-2.974-.008-5.03-.04-5.072-.081a.306.306 0 00-.187-.068c-.065 0-.214-.101-.332-.224l-.215-.224-.02-5.011c-.023-5.315-.003-5.693.297-5.854.089-.047.244-.134.344-.193.258-.15 10.523-.126 10.573.026z"
-        fill="#7CBC8C"
+        fill="#00875F"
       />
     </svg>
   )

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -28,17 +28,31 @@ interface ButtonRootProps extends ComponentPropsWithoutRef<'button'> {
   children: ReactNode
   className?: string
   asChild?: boolean
+  variant?: 'primary' | 'danger'
 }
 
 const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
-  ({ children, className, asChild, ...props }: ButtonRootProps, ref) => {
+  (
+    {
+      children,
+      className,
+      asChild,
+      variant = 'primary',
+      ...props
+    }: ButtonRootProps,
+    ref,
+  ) => {
     const Comp = asChild ? Slot : 'button'
 
     return (
       <Comp
         ref={ref}
         className={clsx(
-          'flex gap-2 items-center justify-center py-3 bg-violet-900 px-4 rounded-md',
+          'flex gap-2 items-center justify-center py-3  transition-colors px-4 rounded-md disabled:opacity-60 disabled:cursor-not-allowed',
+          {
+            'bg-green-700  hover:bg-green-500': variant === 'primary',
+            'bg-red-700  hover:bg-red-500': variant === 'danger',
+          },
           className,
         )}
         {...props}

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -29,30 +29,17 @@ TextInputIcon.displayName = 'TextInput.Icon'
 
 export interface TextInputInputProps extends ComponentPropsWithoutRef<'input'> {
   children?: ReactNode
-  color?: 'cyan' | 'yellow'
   error?: boolean
   className?: string
 }
 
 const TextInputInput = forwardRef<HTMLInputElement, TextInputInputProps>(
-  (
-    {
-      children,
-      color = 'cyan',
-      error,
-      className,
-      ...props
-    }: TextInputInputProps,
-    ref,
-  ) => {
+  ({ children, error, className, ...props }: TextInputInputProps, ref) => {
     return (
       <div
         className={clsx(
-          'flex items-center gap-3 w-full py-4 px-3 h-12 bg-gray-700 rounded hover:ring-1 focus-within:ring-1',
+          'flex items-center gap-3 w-full py-4 px-3 h-12 bg-gray-700 rounded hover:ring-2 focus-within:ring-2 hover:ring-green-500 focus-within:ring-green-500',
           {
-            'hover:ring-cyan-500 focus-within:ring-cyan-500': color === 'cyan',
-            'hover:ring-yellow-500 focus-within:ring-yellow-500':
-              color === 'yellow',
             'ring-1 ring-red-500 focus-within:ring-red-500 hover:ring-red-500':
               error,
           },

diff --git a/src/layouts/components/Sidebar.tsx b/src/layouts/components/Sidebar.tsx
@@ -21,7 +21,7 @@ export function Sidebar() {
               return clsx(
                 'flex items-center px-4 py-2 gap-2 hover:bg-gray-700 transition-colors',
                 {
-                  'bg-gray-700 border-r-8 border-violet-900': isActive,
+                  'bg-gray-700 border-r-8 border-green-500': isActive,
                 },
               )
             }}
@@ -49,7 +49,7 @@ export function Sidebar() {
                   return clsx(
                     'flex items-center px-4 py-2 gap-2 hover:bg-gray-700 transition-colors pl-8',
                     {
-                      'bg-gray-700 border-r-8 border-violet-900': isActive,
+                      'bg-gray-700 border-r-8 border-green-500': isActive,
                     },
                   )
                 }}

diff --git a/src/pages/Books/components/BooksTable.tsx b/src/pages/Books/components/BooksTable.tsx
@@ -76,7 +76,7 @@ export function BooksTable() {
 
                     <Dialog.Root>
                       <Dialog.Trigger asChild>
-                        <Button.Root className="bg-red-500 py-2 px-3">
+                        <Button.Root className="py-2 px-3" variant="danger">
                           <Button.Icon>
                             <Trash />
                           </Button.Icon>

diff --git a/src/pages/Books/components/DeleteBookDialog.tsx b/src/pages/Books/components/DeleteBookDialog.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import { useDeleteBook } from '../../../hooks/useBooksData'
-import clsx from 'clsx'
 
 import * as Dialog from '@radix-ui/react-dialog'
 import { Button } from '../../../components/Button'
@@ -34,17 +33,15 @@ export function DeleteBookDialog({ bookName, bookId }: DeleteDialogProps) {
 
         <div className="flex gap-2 mt-4 justify-end">
           <Dialog.Close asChild>
-            <Button.Root>
+            <Button.Root disabled={isDeleting}>
               <Button.Title>Cancelar</Button.Title>
             </Button.Root>
           </Dialog.Close>
 
           <Button.Root
             onClick={() => handleDeleteBook(bookId)}
             disabled={isDeleting}
-            className={clsx('bg-red-500', {
-              'cursor-not-allowed opacity-60': isDeleting,
-            })}
+            variant="danger"
           >
             <Button.Title>Deletar</Button.Title>
           </Button.Root>