From ea7ff95ad753e2eee3bd7fe3246ccc5cd26d9027 Mon Sep 17 00:00:00 2001
From: Rafael Mariscal <rafael_mariscal_@outlook.com>
Date: Tue, 22 Aug 2023 14:00:21 -0300
Subject: [PATCH] Add: Delete MealRequest button styles

---
 src/components/Button.tsx                     | 14 ++++++++-
 .../GetQuoteForm/MealRequestDialog/index.tsx  | 30 +++++++++++++++----
 .../MealRequestFormContext/porvider.tsx       | 17 ++++-------
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c56bef0..5f164c2 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,7 +4,7 @@ import { ComponentProps } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 type ButtonRootProps = ComponentProps<'button'> & {
-  variant: 'light' | 'eden' | 'stroke'
+  variant: 'light' | 'eden' | 'stroke' | 'danger'
 }
 
 export default function Button({
@@ -16,6 +16,7 @@ export default function Button({
   return (
     <button
       {...rest}
+      data-variant={variant}
       className={twMerge(
         'relative inline-block h-9 bg-salen-500 shadow-button outline-none',
         'before:block before:h-2 before:w-2 before:bg-salen-500',
@@ -31,6 +32,15 @@ export default function Button({
         '[&_div]:focus:bg-eden-700 [&_div]:focus:text-send-500',
         '[&_*]:hover:fill-send-500 [&_*]:focus:fill-send-500',
         '[&_*]:hover:border-salen-500 [&_*]:focus:border-salen-500',
+        'data-[variant=danger]:bg-terracotta-100',
+        'data-[variant=danger]:before:bg-terracotta-100',
+        'data-[variant=danger]:after:bg-terracotta-100',
+        'data-[variant=danger]:[&_div]:hover:bg-terracotta-500',
+        'data-[variant=danger]:[&_div]:hover:text-light',
+        'data-[variant=danger]:[&_div]:focus:text-light',
+        'data-[variant=danger]:[&_*]:hover:border-terracotta-300',
+        'data-[variant=danger]:[&_*]:focus:border-terracotta-300',
+
         className,
       )}
     >
@@ -44,6 +54,8 @@ export default function Button({
           'data-[variant=light]:bg-eden-100 data-[variant=light]:text-eden-700',
           'data-[variant=stroke]:bg-eden-700 data-[variant=stroke]:text-eden-100',
           'data-[variant=stroke]:border data-[variant=stroke]:border-eden-100',
+          'data-[variant=danger]:bg-terracotta-500 data-[variant=danger]:text-light',
+          'data-[variant=danger]:border data-[variant=danger]:border-light',
         )}
       >
         {children}
diff --git a/src/components/GetQuoteForm/MealRequestDialog/index.tsx b/src/components/GetQuoteForm/MealRequestDialog/index.tsx
index 14c660b..6083dbf 100644
--- a/src/components/GetQuoteForm/MealRequestDialog/index.tsx
+++ b/src/components/GetQuoteForm/MealRequestDialog/index.tsx
@@ -1,6 +1,13 @@
 import { MealsProps } from '@/@types/MealTypes'
 import * as Dialog from '@radix-ui/react-dialog'
-import { ListPlus, X } from 'lucide-react'
+import {
+  Delete,
+  ListMinus,
+  ListPlus,
+  ListX,
+  RemoveFormattingIcon,
+  X,
+} from 'lucide-react'
 import { ComponentProps, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Input from '../Input'
@@ -231,11 +238,22 @@ export default function MealRequestDialog({
                   ? 'Máximo de caractéres atingido.'
                   : `Restam ${CharCouterValue} caracteres.`}
               </Input.CharCounter>
-
-              <Button variant="stroke" className="mt-4 w-full">
-                {meal ? ' Confirmar Edição' : 'Adicionar à Solicitação'}
-                <ListPlus size={18} strokeWidth={2} fillOpacity={0} />
-              </Button>
+              <div className="flex gap-4">
+                {meal ? (
+                  <Button
+                    type="button"
+                    variant="danger"
+                    className="mt-4 w-max whitespace-nowrap"
+                  >
+                    Excluir Refeição
+                    <Delete size={18} strokeWidth={2} fillOpacity={0} />
+                  </Button>
+                ) : null}
+                <Button type="submit" variant="stroke" className="mt-4 w-full">
+                  {meal ? ' Confirmar Edição' : 'Adicionar à Solicitação'}
+                  <ListPlus size={18} strokeWidth={2} fillOpacity={0} />
+                </Button>
+              </div>
             </form>
           </Dialog.Content>
         </Dialog.Overlay>
diff --git a/src/contexts/MealRequestFormContext/porvider.tsx b/src/contexts/MealRequestFormContext/porvider.tsx
index adfffc1..4152bd7 100644
--- a/src/contexts/MealRequestFormContext/porvider.tsx
+++ b/src/contexts/MealRequestFormContext/porvider.tsx
@@ -17,21 +17,14 @@ export const mealRequestFormSchema = z.object({
     .nonempty({ message: 'Campo obrigatório.' })
     .min(3, { message: 'Mínimo de 3 caracteres.' })
     .max(200, { message: 'Máximo de 200 caracteres.' }),
-  weekDaysQuantities: z
-    .string({ required_error: 'Campo obrigatório.' })
-    .nonempty({ message: 'Campo obrigatório.' })
-    .email({ message: 'Email inválido' }),
-  saturdayQuantities: z
-    .string({ required_error: 'Campo obrigatório.' })
-    .nonempty({ message: 'Campo obrigatório.' }),
-  sundaysQuantities: z
+  weekDaysQuantities: z.string({ required_error: 'Campo obrigatório.' }),
+  saturdayQuantities: z.string({ required_error: 'Campo obrigatório.' }),
+  sundaysQuantities: z.string({ required_error: 'Campo obrigatório.' }),
+  mealDescription: z
     .string({ required_error: 'Campo obrigatório.' })
     .nonempty({ message: 'Campo obrigatório.' })
     .min(3, { message: 'Mínimo de 3 caracteres.' })
-    .max(200, { message: 'Máximo de 200 caracteres.' }),
-  mealDescription: z
-    .string({ required_error: 'Campo obrigatório.' })
-    .nonempty({ message: 'Campo obrigatório.' }),
+    .max(400, { message: 'Máximo de 400 caracteres.' }),
 })
 export type MealRequestFormData = z.infer<typeof mealRequestFormSchema>