Merge pull request firstcontributions#359 from Mandy-cyber/source

src/App.css

@@ -1,5 +1,6 @@
 .App {
-  background-color: #007EE5;
+  /* height: 500px; */
+  background-color: #0054B5;
   text-align: center;
   display: flex;
   justify-content: center;

src/components/LinkButton/LinkButton.css

@@ -9,7 +9,7 @@
   border-radius: 2px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
-  background-color: #2ecc71;
+  background-color:  #0A680D;
   color: #fff;
 
   -webkit-transition: background-color 0.3s;

src/components/Navbar/Navbar.css

@@ -1,5 +1,5 @@
 .topnav {
-    background-color:#007EE5;
+    background-color: #0054B5;
     overflow: hidden;
     text-align: right;
 }

src/components/Navbar/Navbar.jsx

@@ -22,7 +22,7 @@ const Navbar = () => {
           </a>
           <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">
               <img  src={github} className="logo" alt="github logo" />
-              Github
+              <span>GitHub</span>
           </a>
       </div>
   );

src/components/ProjectList/CardsContainer.jsx

@@ -119,16 +119,17 @@ export default class CardsContainer extends React.Component {
       <div>
         <div id='container'>
           <div className='inputContainer'>
-            <input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} />
+            <input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} aria-label='Search'/>
           </div>
-          <div className='inputContainer'>
+          <div id="tag-selector-container" className='inputContainer'>
             <Select
               name='tag-selector'
               value={this.state.value}
               onChange={this.handleSelectChange}
               options={this.filterOptions}
               multi={true}
-              placeholder='Filter'
+              placeholder={<div className='filter-placeholder-text'>Filter</div>}
+              aria-labelledby='tag-selector-container'
             />
           </div>
         </div>
@@ -142,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}
           />
-          <h3 className="Card-Title">{name}</h3>
+          <p className="Card-Title">{name}</p>
         </div>
         <div className="Card-Body">
           <div className="Card-Tag">{tags}</div>

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

@@ -7,6 +7,10 @@
   overflow: hidden;
 }
 
+.filter-placeholder-text {
+  color: #757575;
+}
+
 @media screen and (max-width: 500px) {
   .containerLayout{
     padding: 15px;

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%;

src/components/SocialShare/Facebook.jsx

@@ -4,7 +4,7 @@ import { Icon, IconPaths } from './icons.js';
 const facebookLink = "https://www.facebook.com/sharer/sharer.php?u=https://roshanjossey.github.io/first-contributions&quote=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20First%20Contributions.%20You%20can%20too,%20by%20following%20a%20simple%20tutorial%20at%20https%3A//goo.gl/66Axwe&hashtag=%23Hacktoberfest"
 
 const FacebookCard = () => (
-    <a className="icon-card twitter" href={facebookLink} rel="noopener noreferrer" target="_blank">
+    <a className="icon-card facebook" href={facebookLink} rel="noopener noreferrer" target="_blank" aria-label="Share the news of your first contribution on Facebook">
         <Icon
             color="rgb(255, 255, 255)"
             size={40}

src/components/SocialShare/Linkedin.jsx

@@ -4,7 +4,7 @@ import { Icon, IconPaths } from './icons.js';
 const LinkedinLink = "https://www.linkedin.com/shareArticle?mini=true&url=https://goo.gl/66Axwe&title=First%20Contributions%20&summary=A%20project%20to%20help%20beginners%20get%20started%20with%20contributing%20to%20open%20source&source=https://roshanjossey.github.io"
 
 const LinkedinCard = () => (
-    <a className="icon-card linkedin" href={LinkedinLink} rel="noopener noreferrer" target="_blank">
+    <a className="icon-card linkedin" href={LinkedinLink} rel="noopener noreferrer" target="_blank" aria-label="Share the news of your first contribution on Linkedin">
         <Icon
             color="rgb(255, 255, 255)"
             size={50}

src/components/SocialShare/Twitter.jsx

@@ -4,7 +4,7 @@ import { Icon, IconPaths } from './icons.js';
 const twitterLink = "https://twitter.com/intent/tweet?text=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20@1stcontribution.%20You%20can%20too%20at%20https%3A//goo.gl/66Axwe%0A&hashtags=OpenSource,CodeNewbie,Hacktoberfest"
 
 const TwitterCard = () => (
-    <a className="icon-card twitter" href={twitterLink} rel="noopener noreferrer" target="_blank">
+    <a className="icon-card twitter" href={twitterLink} rel="noopener noreferrer" target="_blank" aria-label="Share the news of your first contribution on Twitter">
         <Icon
             color="rgb(255, 255, 255)"
             size={40}