Added styles to match github repos original state

msmfa · msmfa · commit b433b596b1b5 · 2020-05-13T17:18:15.000+01:00
diff --git a/example/src/App.js b/example/src/App.js
@@ -6,7 +6,7 @@ const App = () => {
   return (
     <div className='repos'>
       <GithubRepoDisplay
-        numOfrepos={3}
+        numOfrepos={5}
         userName='msmfa'
         showStars={true}
         showLanguage={true}
diff --git a/src/components/DisplaySortedRepoData.js b/src/components/DisplaySortedRepoData.js
@@ -36,7 +36,9 @@ export function DisplaySortedRepoData({
               </li>
               <div id='options' className={styles.options}>
                 {showLanguage ? (
-                  <li className='language'>{repo.language}</li>
+                  <li id='language' className={styles.languages}>
+                    {repo.language}
+                  </li>
                 ) : null}
                 {showStars ? (
                   <li>
diff --git a/src/index.js b/src/index.js
@@ -9,7 +9,7 @@ export const GithubRepoDisplay = ({
   showLanguage
 }) => {
   return (
-    <div className={styles.test}>
+    <div className={styles.container}>
       {" "}
       <GetRepoData
         showStars={showStars}
diff --git a/src/styles.module.css b/src/styles.module.css
@@ -1,33 +1,44 @@
 /* add css module styles here (optional) */
 
-.title {
-  color: green;
+.repoContainer ul {
+  list-style-type: none;
 }
 
-.test {
-  font-size: 1em;
-  list-style-type: none;
-  margin: 2em;
-  padding: 0.5em;
+.title {
+  color: #0366d6;
+  font-size: 1.2em;
+  font-weight: 600;
+  text-decoration: none;
+}
+.title:hover {
+  text-decoration: underline;
 }
 
-.repoContainer ul {
-  list-style-type: none;
+.description {
+  color: #3e4349;
+  font-size: 0.9em;
+  margin: 0.6em 0;
+}
+.languages {
+  font-size: 1em;
 }
 
 .star {
-  height: 0.75em;
+  height: 0.7em;
   padding-right: 0.2em;
 }
 
 .options {
+  color: #586069;
   display: flex;
+  font-size: 0.8em;
+  margin: 0.6em 0;
 }
 .options > li:first-child {
   padding-right: 1em;
 }
 
 .textUpdated {
-  color: rgb(88, 88, 88);
+  color: rgb(121, 121, 121);
   font-size: 0.8em;
 }
