From 6375656ac9e69ff0f07789874cebd26d04578cc2 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 12 Sep 2022 09:19:16 +0300
Subject: [PATCH] update: "list an event" btn style

---
 src/Components/Button/Button.tsx                         | 7 ++++---
 src/features/Tournaments/pages/EventsPage/EventsPage.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
index 8d4c378..e01b929 100644
--- a/src/Components/Button/Button.tsx
+++ b/src/Components/Button/Button.tsx
@@ -5,7 +5,7 @@ import { TailSpin } from 'react-loader-spinner';
 
 type Props = {
     color?: 'primary' | 'red' | 'white' | 'gray' | "black" | 'none',
-    variant?: 'fill' | 'outline'
+    variant?: 'fill' | 'outline' | 'text'
     size?: 'sm' | 'md' | 'lg'
     children: ReactNode;
     href?: string;
@@ -40,7 +40,7 @@ const loadingColor: UnionToObjectKeys<Props, 'color'> = {
 const btnStylesOutline: UnionToObjectKeys<Props, 'color'> = {
     none: "",
     primary: "text-primary-600",
-    gray: 'text-gray-700',
+    gray: 'text-gray-600',
     white: 'text-gray-900',
     black: 'text-black',
     red: "text-red-500",
@@ -48,7 +48,8 @@ const btnStylesOutline: UnionToObjectKeys<Props, 'color'> = {
 
 const baseBtnStyles: UnionToObjectKeys<Props, 'variant'> = {
     fill: "transition-transform active:scale-95",
-    outline: "transition-transform bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 border border-gray-200 active:scale-95 "
+    outline: "transition-transform bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 border border-gray-200 active:scale-95 ",
+    text: "transition-transform active:scale-95 hover:bg-gray-100 active:bg-gray-50"
 }
 
 
diff --git a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
index 95977ff..25adc96 100644
--- a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
+++ b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
@@ -15,7 +15,7 @@ export default function EventsPage() {
         <div className='pb-42'>
             <div className="flex gap-24 justify-between">
                 <h2 className='text-body1 font-bolder text-gray-900 mb-24'>Events 📆 ({events_count})</h2>
-                <Button size='sm' href='https://airtable.com/shrjVx8MjLfl8zyXD' color='primary' newTab className='ml-auto'>List an event</Button>
+                <Button size='sm' variant='text' href='https://airtable.com/shrjVx8MjLfl8zyXD' color='gray' newTab className='ml-auto'>List an event</Button>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
                 <EventsFilters