From cbb46a5f6faed1f7ff331a10f4b7cbb13b1dc120 Mon Sep 17 00:00:00 2001
From: Vishvamsinh Vaghela <vaghelavishvamsinh11111@gmail.com>
Date: Tue, 7 Nov 2023 18:42:38 +0530
Subject: [PATCH] expense design updates

---
 .../FinancialSummary/BarChartComponent.js     |  8 ++--
 .../FinancialSummary/ExpenseBreakdown.js      | 48 +++++++++----------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/components/FinancialSummary/BarChartComponent.js b/components/FinancialSummary/BarChartComponent.js
index 23439880e82..8f9e5318698 100644
--- a/components/FinancialSummary/BarChartComponent.js
+++ b/components/FinancialSummary/BarChartComponent.js
@@ -161,9 +161,9 @@ const BarChartComponent = () => {
                             <p className="text-left mt-1 text-xl font-semibold">${totalAmount.toFixed(2)}</p>
                         </div>
                         {/* Select for category filter */}
-                        <div className="flex space-x-2 mt-3 justify-end">
+                        <div>
                             <select
-                                className="p-2 border text-gray-600 font-semibold border-gray-600 rounded-md bg-white text-violet text-xs"
+                                className="p-2 m-1 border text-gray-600 font-semibold border-gray-600 rounded-md bg-white text-violet text-xs w-full sm:w-auto" // w-full for mobile, w-auto for other devices
                                 value={selectedCategory}
                                 onChange={(e) => setSelectedCategory(e.target.value)}
                             >
@@ -175,7 +175,7 @@ const BarChartComponent = () => {
 
                             {/* Select for month filter */}
                             <select
-                                className="p-2 pr-8 border border-gray-600 rounded-md bg-violet text-white font-semibold text-xs"
+                                className="p-2 m-1 pr-8 border border-gray-600 rounded-md bg-violet text-white font-semibold text-xs w-full sm:w-auto" // w-full for mobile, w-auto for other devices
                                 value={selectedMonth}
                                 onChange={(e) => setSelectedMonth(e.target.value)}
                             >
@@ -184,6 +184,8 @@ const BarChartComponent = () => {
                                     <option key={month} value={month}>{month}</option>
                                 ))}
                             </select>
+
+
                         </div>
                     </div>
                 </div>
diff --git a/components/FinancialSummary/ExpenseBreakdown.js b/components/FinancialSummary/ExpenseBreakdown.js
index 74c06fff10b..e8125a5cba5 100644
--- a/components/FinancialSummary/ExpenseBreakdown.js
+++ b/components/FinancialSummary/ExpenseBreakdown.js
@@ -18,63 +18,63 @@ function ExpenseBreakdown() {
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/MentorshipProgram.webp" alt="Mentorship Program" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Mentorship Program</h2>
+                                    <img src="/img/illustrations/MentorshipProgram.webp" alt="Mentorship Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Mentorship Program</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
+                                <p className="text-base text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/BountyProgram.webp" alt="Bounty Program" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
+                                    <img src="/img/illustrations/BountyProgram.webp" alt="Bounty Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
+                                <p className="text-base text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/Events.webp" alt="Events" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Events</h2>
+                                    <img src="/img/illustrations/Events.webp" alt="Events" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
+                                <p className="text-base text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/SwagStore.webp" alt="Swag Store" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Swag Store</h2>
+                                    <img src="/img/illustrations/SwagStore.webp" alt="Swag Store" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
+                                <p className="text-base text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/Hiring.webp" alt="Hiring" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Hiring</h2>
+                                    <img src="/img/illustrations/Hiring.webp" alt="Hiring" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Hiring</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joins as community manager, with plans to expand the team. our team</p>
+                                <p className="text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joins as community manager, with plans to expand the team. our team</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex items-center">
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
-                                    <img src="/img/illustrations/Services.webp" alt="Services" className="w-1/4 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-3xl font-semibold my-2 text-darkGunMetal">Services</h2>
+                                    <img src="/img/illustrations/Services.webp" alt="Services" className="w-1/5 h-auto object-cover rounded-md m-1" />
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
                                 </div>
-                                <p className="text-lg text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
+                                <p className="text-base text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
                             </div>
                         </div>