refactor: removing in-line styling

Replacing in-line styling with class-based styling for best-practice

Author: Mandy-cyber

src/components/ProjectList/CardsContainer.jsx

@@ -128,9 +128,8 @@ export default class CardsContainer extends React.Component {
               onChange={this.handleSelectChange}
               options={this.filterOptions}
               multi={true}
-              placeholder={<div className='filter-placeholder-text' style={{color: "#757575"}}>Filter</div>}
+              placeholder={<div className='filter-placeholder-text'>Filter</div>}
               aria-labelledby='tag-selector-container'
-              style={{borderColor: "#DCDCDC"}}
             />
           </div>
         </div>
@@ -144,6 +143,7 @@ export default class CardsContainer extends React.Component {
                 projectLink={item.projectLink}
                 description={item.description}
                 tags={item.tags}
+                className='testing-testing'
               />
             );
           })}

src/components/ProjectList/ProjectsCards.jsx

@@ -27,7 +27,7 @@ const Card = ({
             alt="the framework or language that the project is build upon"
             src={logoLink}
           />
-          <p style={{fontSize: 20}} className="Card-Title">{name}</p>
+          <p className="Card-Title">{name}</p>
         </div>
         <div className="Card-Body">
           <div className="Card-Tag">{tags}</div>

src/components/ProjectList/css/project-cards.css

@@ -79,6 +79,7 @@
 .Card-Title {
   margin-top: 6%;
   height: 10%;
+  font-size: 20px;
 }
 .Card-Link-Style {
   margin-left: 10%;