Skip to content

Commit

Permalink
expense design updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vishvamsinh28
vishvamsinh28 committed Nov 7, 2023
1 parent 80c38bc commit cbb46a5
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 27 deletions.
8 changes: 5 additions & 3 deletions components/FinancialSummary/BarChartComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
Expand All @@ -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)}
>
Expand All @@ -184,6 +184,8 @@ const BarChartComponent = () => {
<option key={month} value={month}>{month}</option>
))}
</select>


</div>
</div>
</div>
Expand Down
48 changes: 24 additions & 24 deletions components/FinancialSummary/ExpenseBreakdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit cbb46a5

Please sign in to comment.