Skip to content

Commit d2f9bd0

Browse files
CREDO23CREDO23
authored
feat: add opaticy to the image background" (kaliacad#198)
1 parent f85f89e commit d2f9bd0

File tree

12 files changed

+4268
-128
lines changed

12 files changed

+4268
-128
lines changed

‎pnpm-lock.yaml‎

Lines changed: 4253 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ArticleForm/ArticleForm.jsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useState, useEffect } from 'react';
2-
import PropTypes from 'prop-types';
32
import CountryPickList from './CountryPicker';
43
import axios from 'axios';
54

@@ -146,9 +145,4 @@ const ArticleForm = ({ onSubmit, loading, countryUrl, continentUrl }) => {
146145
);
147146
};
148147

149-
ArticleForm.propTypes = {
150-
onSubmit: PropTypes.func.isRequired,
151-
loading: PropTypes.bool,
152-
};
153-
154148
export default ArticleForm;

‎src/components/ArticleForm/DatePicker.jsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import PropTypes from 'prop-types';
2-
31
const DatePicker = ({ date, onChange, error, label }) => {
42
return (
53
<div className='flex flex-col'>
@@ -17,10 +15,4 @@ const DatePicker = ({ date, onChange, error, label }) => {
1715
);
1816
};
1917

20-
DatePicker.propTypes = {
21-
date: PropTypes.string.isRequired,
22-
onChange: PropTypes.func.isRequired,
23-
error: PropTypes.string,
24-
};
25-
2618
export default DatePicker;

‎src/components/ArticleView/ArticleList.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import getPageURL from '../../helpers/getPageUrl';
22

33
export default function ListArticlesResult({ articlesData }) {
44
return (
5-
<div className='p-4'>
5+
<div className='p-4 text-white'>
66
<div className='overflow-x-auto'>
77
<table className='min-w-full'>
88
<thead>
@@ -32,7 +32,7 @@ export default function ListArticlesResult({ articlesData }) {
3232
<a
3333
href={getPageURL(article.title, article.project)}
3434
target='_blank'
35-
className='text-black hover:text-blue-500'
35+
className='text-blue-300 hover:text-blue-500'
3636
>
3737
{article.title}
3838
</a>

‎src/components/Button.jsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import PropTypes from 'prop-types';
2-
31
const defaultEvent = () => {
42
alert('You need an event on this button');
53
};
@@ -8,8 +6,3 @@ export default function Button({ text, event }) {
86

97
return <button onClick={event || defaultEvent}>{text || text2}</button>;
108
}
11-
12-
Button.propTypes = {
13-
text: PropTypes.string.isRequired,
14-
event: PropTypes.string.isRequired,
15-
};

‎src/components/Layout.jsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,12 @@ export default function Layout({ children }) {
2222
fetchFeaturedImages();
2323
}, []);
2424
return (
25-
<main
26-
role='main'
27-
style={{
28-
backgroundImage: `url(${featuredImage})`,
29-
backgroundRepeat: 'no-repeat',
30-
backgroundSize: 'cover',
31-
}}
32-
className='layout'
33-
>
25+
<main role='main' className=' relative'>
3426
<NavBar />
3527
<div className='main-content'>{children}</div>
3628
<Footer />
29+
<div className='bg-black opacity-60 -z-10 absolute top-0 left-0 w-full h-full'></div>
30+
<img src={featuredImage} alt='background image' className='absolute w-full h-full top-0 left-0 -z-20' />
3731
</main>
3832
);
3933
}

‎src/components/PageViews/ArticleViewsGraph.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const ArticleViewsGraph = ({ articles }) => {
6060

6161
return (
6262
<div className='graph w-full flex flex-col items-center'>
63-
<h2 className='font-bold text-xl self-start'>Views for Multiple Articles</h2>
63+
<h2 className='font-bold text-white text-xl self-start'>Views for Multiple Articles</h2>
6464
{loading ? <Loading /> : viewData.labels ? <Line data={viewData} /> : <p>No data available.</p>}
6565
</div>
6666
);

‎src/components/Pagination.jsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useEffect } from 'react';
2-
import PropTypes from 'prop-types';
32

43
/*
54
This component needs some props as this one:
@@ -49,10 +48,4 @@ const Pagination = ({ items, itemsPerPage, onPageChange, onCurrentChange, curren
4948
);
5049
};
5150

52-
Pagination.propTypes = {
53-
items: PropTypes.array.isRequired,
54-
itemsPerPage: PropTypes.number.isRequired,
55-
onPageChange: PropTypes.func.isRequired,
56-
};
57-
5851
export default Pagination;

‎src/components/TopAfrica/TopAfrica.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,19 @@ const TopAfrica = () => {
9696

9797
return (
9898
<div className='african p-4'>
99-
<h1 className='text-2xl font-bold text-center mb-4'>Top Wikimedia Articles in Africa</h1>
99+
<h1 className='text-2xl text-white font-bold text-center mb-4'>Top Wikimedia Articles in Africa</h1>
100100

101101
<div className='flex flex-wrap justify-center items-center gap-5 my-3'>
102102
<button onClick={handleClicked} className='bg-blue-500 text-white px-4 py-2 rounded'>
103103
Articles List/Article Gallery
104104
</button>
105105
<DatePicker onChange={handleChange} />
106-
<h1>Top Africa Atricle: {`${date.day}/${date.month}/${date.year}`}</h1>
106+
<h1
107+
className='text-white
108+
'
109+
>
110+
Top Africa Atricle: {`${date.day}/${date.month}/${date.year}`}
111+
</h1>
107112
</div>
108113

109114
{showCard ? (
@@ -125,7 +130,7 @@ const TopAfrica = () => {
125130
</div>
126131
)}
127132
{data.length == 0 && (
128-
<div className='w-full flex justify-center mb-3'>
133+
<div className='w-full flex text-white justify-center mb-3'>
129134
<p>No Article Post</p>
130135
</div>
131136
)}
@@ -138,7 +143,7 @@ const TopAfrica = () => {
138143
>
139144
Previous
140145
</button>
141-
<span className='text-lg font-semibold'>
146+
<span className='text-lg text-white font-semibold'>
142147
Page {data.length == 0 ? 0 : currentPage} of {totalPages}
143148
</span>
144149
<button

‎src/main.jsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import ReactDOM from 'react-dom/client';
22
import App from './App.jsx';
33
import './global.css';
44
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
5-
import ExemplePagination from './pages/exemplePagination.jsx';
65
import Layout from './components/Layout.jsx';
76
import Home from './pages/Home.jsx';
87
import PageViews from './components/PageViews/PageViews.jsx';
@@ -26,10 +25,6 @@ const router = createBrowserRouter([
2625
path: '/page-views',
2726
element: <PageViews />,
2827
},
29-
{
30-
path: '/exemple_pagination',
31-
element: <ExemplePagination />,
32-
},
3328
{
3429
path: '/top-africa',
3530
element: <Africa />,

0 commit comments

Comments
 (0)