From 469aedbf04639d64d9307042acfe2b97c56d415d Mon Sep 17 00:00:00 2001 From: Preet Khatnani Date: Thu, 29 Aug 2024 11:57:05 +0530 Subject: [PATCH 1/2] Fixed LinkButton styling --- package.json | 2 +- src/components/LinkButton/LinkButton.css | 6 +- src/components/LinkButton/LinkButton.jsx | 15 +- src/components/ProjectList/CardsContainer.jsx | 110 +- .../ProjectList/custom-react-select.css | 29 + yarn.lock | 3416 +++++++++-------- 6 files changed, 1934 insertions(+), 1644 deletions(-) create mode 100644 src/components/ProjectList/custom-react-select.css diff --git a/package.json b/package.json index 7eb46a58..8b2c9317 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "lodash": "^4.17.19", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-select": "^1.0.0-rc.10" + "react-select": "^5.8.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/LinkButton/LinkButton.css b/src/components/LinkButton/LinkButton.css index 70afb6d0..3bf19001 100644 --- a/src/components/LinkButton/LinkButton.css +++ b/src/components/LinkButton/LinkButton.css @@ -9,8 +9,8 @@ border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - background-color: #0A680D; - color: #fff; + background-color: white; + color: black; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; @@ -19,7 +19,7 @@ } .LinkButton:hover { - background-color: #26a65b; + background-color: cyan; } .LinkButton > span { diff --git a/src/components/LinkButton/LinkButton.jsx b/src/components/LinkButton/LinkButton.jsx index ca869f95..610b574d 100644 --- a/src/components/LinkButton/LinkButton.jsx +++ b/src/components/LinkButton/LinkButton.jsx @@ -13,7 +13,20 @@ class LinkButton extends Component { Get started
- { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" /> + { + window.scrollBy({ + top: window.innerHeight - 80, + left: 0, + behavior: "smooth", + }); + }} + src={scrollDown} + alt="Scroll Down!" + width="64" + height="64" + />
); diff --git a/src/components/ProjectList/CardsContainer.jsx b/src/components/ProjectList/CardsContainer.jsx index d786addc..89578c33 100644 --- a/src/components/ProjectList/CardsContainer.jsx +++ b/src/components/ProjectList/CardsContainer.jsx @@ -1,13 +1,13 @@ -import React from 'react'; -import Select from 'react-select'; -import each from 'lodash/each' +import React from "react"; +import "./custom-react-select.css"; +import Select from "react-select"; +import each from "lodash/each"; -import Card from './ProjectsCards'; -import projectList from './listOfProjects'; +import Card from "./ProjectsCards"; +import projectList from "./listOfProjects"; -import './css/cards-container.css'; -import './css/search.css'; -import 'react-select/dist/react-select.css'; +import "./css/cards-container.css"; +import "./css/search.css"; export default class CardsContainer extends React.Component { constructor(props) { @@ -15,43 +15,43 @@ export default class CardsContainer extends React.Component { this.state = { value: [], - filterList: this.sortArrayRandom(projectList) - } + filterList: this.sortArrayRandom(projectList), + }; this.setTags = new Set(); this.filterOptions = []; this.valueList = []; for (let i = 0; i < projectList.length; i++) { - if (projectList[i].tags) { - - projectList[i].tags.forEach(tag => { - - projectList[i].tags.sort() - this.setTags.add(tag.toLowerCase()) - }) + projectList[i].tags.forEach((tag) => { + projectList[i].tags.sort(); + this.setTags.add(tag.toLowerCase()); + }); } } - this.setTags.forEach(v => this.filterOptions.push({ value: v, label: v })); + this.setTags.forEach((v) => + this.filterOptions.push({ value: v, label: v }) + ); this.handleSelectChange = this.handleSelectChange.bind(this); this.handleChange = this.handleChange.bind(this); } handleSelectChange(value) { - this.value = value; this.setState({ value }); this.handleFilterListUpdate(value); } handleFilterListUpdate(value) { - let updatedList = []; // If no filters - if ((!value || value.length === 0) && (!this.inputValue || this.inputValue.length === 0)) { + if ( + (!value || value.length === 0) && + (!this.inputValue || this.inputValue.length === 0) + ) { return this.setState({ filterList: this.sortArrayRandom(projectList) }); } @@ -59,33 +59,30 @@ export default class CardsContainer extends React.Component { if (value && value.length > 0) { const valueList = []; - value.map(v => { - return valueList.push(v.value) + value.map((v) => { + return valueList.push(v.value); }); each(projectList, (project) => { - if (!project.tags) return; - let lowerCaseTags = project.tags.map(v => v.toLowerCase()) - if (valueList.every(v => lowerCaseTags.includes(v))) { - + let lowerCaseTags = project.tags.map((v) => v.toLowerCase()); + if (valueList.every((v) => lowerCaseTags.includes(v))) { updatedList.push(project); } - }) + }); } // If search input value is not empty if (this.inputValue && this.inputValue.length > 0) { - - const searchedList = [] - each(((updatedList.length > 0) ? updatedList : projectList), (project) => { - - if (project.name.toLowerCase().includes(this.inputValue) - || project.description.toLowerCase().includes(this.inputValue) - || project.tags.toString().toLowerCase().includes(this.inputValue)) { - - searchedList.push(project) + const searchedList = []; + each(updatedList.length > 0 ? updatedList : projectList, (project) => { + if ( + project.name.toLowerCase().includes(this.inputValue) || + project.description.toLowerCase().includes(this.inputValue) || + project.tags.toString().toLowerCase().includes(this.inputValue) + ) { + searchedList.push(project); } }); @@ -97,43 +94,50 @@ export default class CardsContainer extends React.Component { // Search input handler handleChange(event) { - this.inputValue = event.currentTarget.value; this.inputValue = this.inputValue.trim(); this.inputValue = this.inputValue.toLowerCase(); - this.handleFilterListUpdate(this.value) + this.handleFilterListUpdate(this.value); } - sortArrayRandom(array){ - if(Array.isArray(array)){ - return array.sort(()=>0.5-Math.random()) + sortArrayRandom(array) { + if (Array.isArray(array)) { + return array.sort(() => 0.5 - Math.random()); } - return array + return array; } render() { - return (
-
-
- +
+
+
-
+
+
-
+