Improved UI/UX in the Github Fetch Example

Author: alexvcasillas

examples/github-repos-demo/src/components/loading-card/loading-card.jsx

@@ -4,13 +4,29 @@ const LoadingCard = styled.div`
   width: 33.33%;
   padding: 20px;
 
+  @media (max-width: 375px){
+    width: 100%;
+  }
+
+  @media (max-width: 667px){
+    width: 100%;
+  }
+
   > .content{
     display: flex;
     padding: 20px;
     background-color: #ffffff;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
     flex-direction: column;
 
+    @media (max-width: 375px){
+      border-radius: 0;
+    }
+
+    @media (max-width: 667px){
+      border-radius: 0;
+    }
+
     .row{
       margin-bottom: 5px;
 

examples/github-repos-demo/src/components/repo-card/stylesheets/repo-card.scss

@@ -1,7 +1,16 @@
 .repo-card{
   width: 33.33%;
+  max-width: 100%;
   padding: 20px;
 
+  @media (max-width: 375px){
+    width: 100%;
+  }
+
+  @media (max-width: 667px){
+    width: 100%;
+  }
+
   > .content{
     display: flex;
     padding: 20px;
@@ -10,6 +19,14 @@
     flex-direction: column;
     border-radius: 4px;
 
+    @media (max-width: 375px){
+      border-radius: 0;
+    }
+
+    @media (max-width: 667px){
+      border-radius: 0;
+    }
+
     .row{
       margin-bottom: 5px;
       width: 100%;

examples/github-repos-demo/src/components/repos-grid/stylesheets/repos-grid.scss

@@ -1,5 +1,6 @@
 #ReposGrid{
   width: 1300px;
+  max-width: 100%;
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 50px;

examples/github-repos-demo/src/components/search-user/stylesheets/search-user.scss

@@ -1,6 +1,7 @@
 #SearchUser{
 
   width: 600px;
+  max-width: 100%;
   margin: 0 auto;
   margin-top: 50px;
 
@@ -17,6 +18,14 @@
     justify-content: center;
     border-radius: 4px;
 
+    @media (max-width: 375px){
+      border-radius: 0;
+    }
+
+    @media (max-width: 667px){
+      border-radius: 0;
+    }
+
     input{
       width: 100%;
       border: 1px solid #E1DFDF;

examples/github-repos-demo/src/containers/app.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DevTools from 'mobx-react-devtools';
+//import DevTools from 'mobx-react-devtools';
 
 import Header from '../components/header/header';
 import SearchUser from '../components/search-user/search-user';
@@ -10,7 +10,7 @@ import '../stylesheets/common.scss';
 
 const App = () => (
   <div id="app">
-    <DevTools />
+
     <Header />
     <SearchUser />
     <ReposGrid />

examples/github-repos-demo/src/stores/github.js

@@ -15,7 +15,7 @@ export default class GithubStore {
   }
 
   async fetchFromGithub(endpoint) {
-    const url = `https://api.github.com${endpoint}?client_id=my_key&client_secret=my_secret`;
+    const url = `https://api.github.com${endpoint}?client_id=62b5dd81cbcb92f3cdf9&client_secret=1c41dfda0d56eb31b722049aa60d91eafeb6ebcf`;
     const response = await fetch(url);
     return await response.json();
   }
@@ -38,7 +38,6 @@ export default class GithubStore {
       this.user = user;
       this.repos = repos;
       this.fetchingData = false;
-      console.log(this.repos);
     });
   };
 }