add screenshot

Author: omidnikrah

README.md

@@ -3,4 +3,7 @@
 Desktop version of Github with Electron.
 
 
-![Coming Soon](https://media.giphy.com/media/3o72FkiKGMGauydfyg/giphy.gif)
+
+## Screenshot
+
+![screenshot](https://raw.githubusercontent.com/omidnikrah/electron-github/master/screenshot.png)

screenshot.png

@@ -8,37 +8,37 @@ import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemo
 import Routes from './Routes';
 
 type Props = {
-  store: any,
-  history: {}
+	store: any,
+	history: {}
 };
 
 const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData: {
-    __schema: {
-      types: [], // no types provided
-    },
-  },
+	introspectionQueryResultData: {
+		__schema: {
+			types: [] // no types provided
+		}
+	}
 });
 
 const cache = new InMemoryCache({ fragmentMatcher });
 
-const client = new ApolloClient({ 
-  uri: 'https://api.github.com/graphql',
-  headers: {
-    Authorization: `bearer 4479095b399544c9ca9c8d80ff7d10f6fc364946`
-  },
-  cache,
- });
+const client = new ApolloClient({
+	uri: 'https://api.github.com/graphql',
+	headers: {
+		Authorization: `bearer d02f91b990bf37b75caed8343f6ea7519eaadb62`
+	},
+	cache
+});
 
 export default class Root extends Component<Props> {
-  render() {
-    const { history } = this.props;
-    return (
-      <ApolloProvider client={client}>
-        <BrowserRouter>
-          <Routes />
-        </BrowserRouter>
-      </ApolloProvider>
-    );
-  }
+	render() {
+		const { history } = this.props;
+		return (
+			<ApolloProvider client={client}>
+				<BrowserRouter>
+					<Routes />
+				</BrowserRouter>
+			</ApolloProvider>
+		);
+	}
 }

src/app/Root.js

@@ -3,57 +3,59 @@
 import styled from 'styled-components';
 
 export default styled.div`
-  width: 100%;
-  padding: 20px;
-  display: flex;
-  margin: 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  box-shadow: 0 0 15px rgba(0,0,0,0.03);
-  cursor: pointer;
-  .user-info {
-    display: flex;
-    align-items: center;
-    &--avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 10rem;
-      overflow: hidden;
-      margin: 0;
-      float: left;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-    &--name {
-      float: left;
-      font-size: 15px;
-      color: #444;
-      margin-left: 20px;
-      text-align: left;
-      span {
-        cursor: pointer;
-        &:last-child {
-          opacity: 0.4;
-        }
-      }
-    }
-  }
-  .repositories-count {
-    background-color: #ff5959;
-    padding: 10px;
-    border-radius: 10rem;
-    color: #fff;
-    font-size: 13px;
-    line-height: 1;
-    min-height: 35px;
-    display: inline-block;
-    min-width: 35px;
-    cursor: pointer;
-  }
+	width: 100%;
+	padding: 20px;
+	display: flex;
+	margin: 0 auto;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #fff;
+	margin-bottom: 10px;
+	border-radius: 5px;
+	box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
+	cursor: pointer;
+	.user-info {
+		display: flex;
+		align-items: center;
+		&--avatar {
+			width: 50px;
+			height: 50px;
+			border-radius: 10rem;
+			overflow: hidden;
+			margin: 0;
+			float: left;
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+		&--name {
+			float: left;
+			font-size: 15px;
+			color: #444;
+			margin-left: 20px;
+			text-align: left;
+			span {
+				cursor: pointer;
+				display: block;
+				&:last-child {
+					opacity: 0.4;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+	.repositories-count {
+		background-color: #ff5959;
+		padding: 10px;
+		border-radius: 10rem;
+		color: #fff;
+		font-size: 13px;
+		line-height: 1;
+		min-height: 35px;
+		display: inline-block;
+		min-width: 35px;
+		cursor: pointer;
+	}
 `;