From dd172f1c8637f98dd76674f2c644b246fa8fbca6 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 5 May 2022 17:42:32 +0300
Subject: [PATCH] style: button center text in case link, project details card
 rounded-0

---
 src/App.tsx                                                  | 2 +-
 src/Components/Button/Button.tsx                             | 2 +-
 .../Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx   | 1 +
 .../ProjectDetailsCard/ProjectDetailsCard.stories.tsx        | 5 ++++-
 .../ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx    | 4 ++--
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4d1125f..5682034 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,7 +39,7 @@ function App() {
 
 
 
-  return <div id="app" className=''>
+  return <div id="app" className='w-screen overflow-hidden'>
     <Navbar />
     <Suspense fallback={<LoadingPage />}>
       <Routes>
diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
index a8c8a05..4bdf339 100644
--- a/src/Components/Button/Button.tsx
+++ b/src/Components/Button/Button.tsx
@@ -72,7 +72,7 @@ export default function Button({ color = 'white',
     ...props }: Props) {
 
     let classes = `
-    inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer
+    inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer text-center
     ${baseBtnStyles[variant]}
     ${btnPadding[size]}
     ${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index b559118..530f837 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -92,6 +92,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
             <div className="px-32">
                 <Carousel
                     showDots={false}
+                    autoPlay={false}
                     // arrows={false}
                     responsive={responsive}
                     // centerMode
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx
index 5b9d118..b2514d7 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx
@@ -14,9 +14,12 @@ const Template: ComponentStory<typeof ProjectDetailsCard> = (args) => <ProjectDe
 export const Default = Template.bind({});
 Default.args = {
     projectId: 1,
+    isPageModal: true
 }
 
 
 
 const LoadingTemplate: ComponentStory<typeof ProjectDetailsCardSkeleton> = (args) => <ProjectDetailsCardSkeleton {...args} />;
-export const LoadingState = LoadingTemplate.bind({})
\ No newline at end of file
+export const LoadingState = LoadingTemplate.bind({
+    isPageModal: true
+})
\ No newline at end of file
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 1040098..0e0c1d6 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -97,11 +97,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
     return (
         <div
-            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && 'rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && '!rounded-0 w-full min-h-screen'}`}
         >
             <div className="relative h-[80px] lg:h-[152px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={closeModal}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
+                <button className="w-40 h-40 md:w-48 md:h-48 bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={closeModal}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
             </div>
             <div className="p-24">
                 <div className="flex gap-24 items-start">