Fixed Get Started (LinkButton) styling

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",

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 {

src/components/LinkButton/LinkButton.jsx

@@ -13,7 +13,8 @@ class LinkButton extends Component {
  <span> Get started </span>
  </a>
  <div className="Scroll-Down-Wrapper">
- <img className="Scroll-Down" onClick={() => { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" />
+ <img className="Scroll-Down" onClick={() => { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: 
+ "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" />
  </div>
  </div>
  );

src/components/ProjectList/CardsContainer.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
+import './custom-react-select.css';
 import Select from 'react-select';
-import each from 'lodash/each'
+import each from 'lodash/each';
 
 import Card from './ProjectsCards';
 import projectList from './listOfProjects';
 
 import './css/cards-container.css';
 import './css/search.css';
-import 'react-select/dist/react-select.css';
 
 export default class CardsContainer extends React.Component {
  constructor(props) {
@@ -60,7 +60,7 @@ export default class CardsContainer extends React.Component {
  const valueList = [];
 
  value.map(v => {
- return valueList.push(v.value)
+ return valueList.push(v.value);
  });
 
  each(projectList, (project) => {
@@ -117,9 +117,9 @@ export default class CardsContainer extends React.Component {
 
  return (
  <div>
- <div id='container'>
- <div className='inputContainer'>
- <input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} aria-label='Search'/>
+ <div id="container">
+ <div className="inputContainer">
+ <input id="search" type="text" name="search" placeholder="Search..." onChange={this.handleChange} aria-label="Search"/>
  </div>
  <div id="tag-selector-container" className='inputContainer'>
  <Select

src/components/ProjectList/custom-react-select.css

@@ -0,0 +1,29 @@
+/* Style the container of the select input */
+.react-select-container {
+ width: 300px;
+ }
+
+ /* Style the control (input) part of the select */
+ .react-select__control {
+ border-color: #007bff;
+ box-shadow: none;
+ border-radius: 4px;
+ }
+
+ /* Style the menu (dropdown list) */
+ .react-select__menu {
+ z-index: 9999;
+ }
+
+ /* Style the options in the menu */
+ .react-select__option {
+ padding: 8px 16px;
+ font-size: 14px;
+ }
+
+ /* Style the selected option */
+ .react-select__option--is-selected {
+ background-color: #007bff;
+ color: white;
+ }
+