Issue 2
The second issue consists of a suggestion made by Adrian Nads (a project contributor) to consistently set the layout of one of the project sections as a column so that the component does not shrink on every 1024px screen size. Also, he wants to change the line that divides the two-paragraph (as shown in the image below) to have the same color as other lines in the section. Furthermore, he has noticed that the padding is exaggerated and the alignment is off, so he wanted us to change it.
Unfortunately, our group only realized later that we had to deliver two issues during the evaluation time. That is one of the reasons for selecting the third issue and for the simplicity of this issue. Other contributors already took all other significant issues. Therefore, we will improve the design of this section on the web page, and we will develop an additional issue to compensate for the lack of complexity of this issue. We take full accountability for our mistakes. However, we successfully improved this web page and implemented the third issue.
This issue was not very important. It improves the website's responsiveness and the layout, so it does not directly impact the application's architecture. However, this is an application whose primary purpose is to display information. Suppose the content of a presentation of the data is a little bit off or wired (or altogether incomprehensively, something we figgered out later, see the requirements section), that can turn off the attention of some readers. So even though we agree that this issue is "not the most important" issue of the project, it is arguably vital and a minor fix that can improve the overall quality of the project.
The main requirements of this issue are the same as one of the tests of the previous issue - issue one. The problem is: "As a user, I want to be able to select at least one cause so that I can donate." There are not many more restrictions regarding the requirements of this issue. It is only necessary to fix the web page's content to be responsive enough on all the platforms and devices. We noticed that the design was not responsive on all devices - for example, an iPad Mini. Now it is. We had to change the CSS, so now, it will be responsive on most mainstream devices if the pull request is accepted.
To resolve this issue, we only needed to change the component HotMealDaySection.js.
The problem with this issue was that the layout of this section was shrunk every 1024px screen size. So in order to fix this, we changed some CSS properties so that the bug was fixed, to avoid any future problems similar to this one, we made the layout of this component responsive in every screen size. We also changed the line that divides the two-paragraph to have the same colour as the other lines on sections that can be found across the page to maintain the consistency of the designs.
The readers can observe the code below:
import { SVGHotMealDaySectionBackground, SVGQuotes } from './SVGBackgrounds';
import Image from 'next/image';
import React from 'react';
import { useContextTheme } from 'components/ThemeContext';
import useStripeSession from '../hooks/useStripeSession';
function HotMealDaySection() {
const [handleSubmit, isPending] = useStripeSession();
const { cardsBackgroundColor, theme } = useContextTheme();
const actionCost = 10;
const handleOnClick = () =>
handleSubmit({
amount: actionCost,
cause: 'Hot Meal Day.',
});
return (
<div className="px-0 py-10 md:px-10 md:py-32 hot-meal-day relative overflow-hidden">
<SVGHotMealDaySectionBackground className="absolute w-full right-0 -top-1/3 z-0" />
<div
className={`w-lg p-5 lg:p-5 section-box z-10 ${cardsBackgroundColor}`}
>
<div className="grid sm:grid-cols-1 md:grid-cols-2">
<div className="m-5">
<SVGQuotes className="absolute quotes top-0 left-0" />
<h2 className="text-3xl md:text-5xl md:text-left pb-7 font-bold quote z-10">
{'Hot Meal Day'}
</h2>
<div>
<p className="w-full">
{
'Buy ingredients for 1 hot meal for 60 hungry people. Sample meals include spaghetti with Texas toast and caesar salad, chicken alfredo, enchilada taquitos. Served as take-home meal boxes at Grace Resources in Lancaster, California.'
}
</p>
<hr className="my-5 w-full border-blue" />
<div className="lg:flex md:items-end ">
<p className="md:col-span-2 lg:pb-0">
{
'Make a donation today and you can help us bring hot meals to the most needy in our society.'
}
</p>
<div className="flex-buttons pt-5">
<button
aria-label="donate-btn"
className="btn btn-accent normal-case rounded-sm mt-5 btn-size"
disabled={isPending ? true : false}
onClick={handleOnClick}
type="button"
>
{'Donate'}
</button>
<a
className="lg:ml-auto"
href="https://www.margaritahumanitarian.org/upcoming-events#h.3f0nxu3620tm"
>
<button
aria-label="learn-more-btn"
className={`btn rounded-sm bg-transparent hover:bg-teal-dark text-gray-900 font-normal hover:text-white py-2 px-2 border border-gray-800 hover:border-transparent normal-case btn-size ${
theme === 'dark' &&
'text-gray-200 border-gray-600 hover:bg-gray-800'
}`}
type="button"
>
{'Learn More'}
</button>
</a>
</div>
</div>
</div>
</div>
<Image
alt={'Hot Meal Day'}
height="260"
layout="responsive"
objectFit="cover"
src={'/images/hotmeals-unsplash.jpeg'}
width="400"
/>
</div>
</div>
<style jsx>{`
.btn-size {
display: flex;
margin: 0 5px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: nowrap;
}
.lg:flex {
display: flex;
flex-direction: column;
}
.flex-buttons {
display: flex;
justify-content: flex-end;
}
.hot-meal-day {
display: flex;
justify-content: center;
}
.quotes {
z-index: -1;
}
.border-blue {
--tw-border-opacity: 1;
border-color: rgba(151, 239, 244, var(--tw-bg-opacity));
}
@media (min-width: 768px) {
.section-box {
max-width: 1280px;
box-shadow: 10px 10px 15px 0px #00000040;
/* border-radius: var(--rounded-box, 1rem); */
}
}
`}</style>
</div>
);
}
export default HotMealDaySection;