aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-01 21:44:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix some QA issues

Browse Source 
- fix navbar height
- remove input shadow
- change donateCard options style
- add 2px borders to cards
- remove search from nav on sections other than products
- implement useMediaQuery
This commit is contained in:
MTG2000
2022-05-26 20:27:39 +03:00
parent 5c7723316b
commit 113ec18479
18 changed files with 150 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/features/Donations/components/DonateCard/DonateCard.tsx
View File

@@ -15,18 +15,15 @@ const defaultOptions = [
export default function DonateCard() {
const size = useWindowSize();
const [selectedOption, setSelectedOption] = useState(-1);
const [donationAmount, setDonationAmount] = useState<number>();
const { donate, paymentStatus, isLoading } = useDonate()
const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedOption(-1);
setDonationAmount(Number(event.target.value));
};
const onSelectOption = (idx: number) => {
setSelectedOption(idx);
setDonationAmount(defaultOptions[idx].value);
}
@@ -37,13 +34,11 @@ export default function DonateCard() {
onSuccess: () => {
setTimeout(() => {
setDonationAmount(undefined);
setSelectedOption(-1);
}, 4000);
},
onError: () => {
setTimeout(() => {
setDonationAmount(undefined);
setSelectedOption(-1);
}, 4000);
}
});
@@ -60,7 +55,7 @@ export default function DonateCard() {
className={`input-text input-removed-arrows`}
value={donationAmount} onChange={onChangeInput}
type="number"
placeholder="1,000"
placeholder="Select or enter amount"
autoFocus
/>
<p className='px-16 shrink-0 self-center text-primary-400'>
@@ -72,7 +67,7 @@ export default function DonateCard() {
<button
type='button'
key={idx}
className={`btn border px-12 rounded-md py-8 text-body5 bg-primary-100 hover:bg-primary-50 text-primary-600 ${idx === selectedOption && "border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600"}`}
className={`btn border-0 px-12 rounded-md py-8 text-body5 bg-primary-50 hover:bg-primary-100 outline-2 outline-primary-200 active:outline `}
onClick={() => onSelectOption(idx)}
>
{option.text}

2
src/features/Donations/pages/DonatePage/DonatePage.tsx
View File

@@ -6,7 +6,7 @@ export default function DonatePage() {
return (
<div
className={`w-full`}
className={`w-full bg-white`}
>
<Header />
<div className={`${styles.faq}`}>

2
src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx
View File

@@ -14,7 +14,7 @@ interface Props {
export default function HackathonCard({ hackathon }: Props) {
return (
<div className="rounded-16 bg-white overflow-hidden">
<div className="rounded-16 bg-white overflow-hidden border-2">
<img className="w-full h-[120px] object-cover" src={hackathon.cover_image} alt="" />
<div className="p-16">
<div className="flex flex-col gap-8">

4
src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
export default function SortByFilter({ filterChanged }: Props) {
const [selected, setSelected] = useState<string | null>(null);
const [selected, setSelected] = useState<string | null>('Upcoming');
const filterClicked = (_newValue: string | null) => {
const newValue = selected !== _newValue ? _newValue : null;
@@ -37,7 +37,7 @@ export default function SortByFilter({ filterChanged }: Props) {
<>
{
isMdScreen ?
<div className='bg-white border rounded-12 p-16'>
<div className='bg-white border-2 rounded-12 p-16'>
< p className="text-body2 font-bolder text-black mb-16" > Sort By</p >
<ul>
{filters.map((f, idx) => <li

2
src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
View File

@@ -29,7 +29,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
return (
<>
{isMdScreen ?
<div className='bg-white border rounded-12 p-16'>
<div className='bg-white border-2 rounded-12 p-16'>
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
<ul className=' flex flex-col gap-16'>
{topicsQuery.loading ?

2
src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
View File

@@ -26,7 +26,7 @@ export default function HackathonsPage() {
return (
<div
className={`page-container pt-16 w-full ${styles.grid}`}
className={`page-container pt-16 w-full ${styles.grid}`}
>
<aside className='no-scrollbar'>
<div className="sticky flex flex-col gap-24 md:overflow-y-scroll"

4
src/features/Hackathons/pages/HackathonsPage/styles.module.scss
View File

@@ -1,11 +1,11 @@
.grid {
display: grid;
grid-template-columns: 100%;
gap: 32px;
gap: 24px;
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 2fr 0;
gap: 32px;
gap: 24px;
}
@media screen and (min-width: 1024px) {

2
src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
View File

@@ -28,7 +28,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
return (
<>
{isMdScreen ?
<div className='bg-white border rounded-12 p-16'>
<div className='bg-white border-2 rounded-12 p-16'>
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
<ul className=' flex flex-col gap-16'>
{topicsQuery.loading ?

2
src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
View File

@@ -40,7 +40,7 @@ export default function SortBy({ filterChanged }: Props) {
<>
{
isMdScreen ?
<div className='bg-white border rounded-12 p-16'>
<div className='bg-white border-2 rounded-12 p-16'>
< p className="text-body2 font-bolder text-black mb-16" > Sort By</p >
<ul>
{filters.map((f, idx) => <li