Merge pull request #5 from mohiit1502/development

Reverted yml config

.circleci/config.yml

@@ -0,0 +1,45 @@
+version: 2
+jobs:
+  build:
+    docker:
+    - image: circleci/node:13.0.1-stretch-browsers
+    steps:
+    - checkout
+    - run:
+        name: Setup Machine
+        command: |
+          # Install system dependencies
+          sudo apt-get update
+          sudo npm install -g npm
+          # Install node dependencies
+          npm install
+    - run: npm run build
+  upload:
+    docker:
+    - image: circleci/node:13.0.1-stretch-browsers
+    steps:
+    - checkout
+    - run:
+        name: Setup Machine
+        command: |
+          # Install system dependencies
+          sudo apt-get update
+          sudo npm install -g npm
+          # Install node dependencies
+          npm install
+    - run: npm run build -- --message "build ${CIRCLE_BUILD_NUM}
+        on ${CIRCLE_BRANCH} (${CIRCLE_SHA1})"
+
+workflows:
+  version: 2
+  build_and_upload:
+    jobs:
+    - build
+    - upload:
+        requires:
+        - build
+        filters:
+          branches:
+            only:
+            - development
+            - master

README.md

@@ -0,0 +1 @@
+# PictureStory-v2

client/config/paths.js

@@ -72,7 +72,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/main'),
+  appIndexJs: resolveModule(resolveApp, 'src/app/main'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src/app'),
   appTsConfig: resolveApp('tsconfig.json'),

client/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "picturestory-v2-client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@svgr/webpack": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "^2.2.0",
+    "@typescript-eslint/parser": "^2.2.0",
+    "autoprefixer": "^9.6.5",
+    "babel-eslint": "10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
+    "bootstrap": "^4.3.1",
+    "camelcase": "^5.2.0",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "css-loader": "2.1.1",
+    "dotenv": "6.2.0",
+    "dotenv-expand": "5.1.0",
+    "eslint": "^6.1.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-loader": "3.0.2",
+    "eslint-plugin-flowtype": "3.13.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "file-loader": "3.0.1",
+    "fs-extra": "7.0.1",
+    "gapi-script": "0.0.5",
+    "html-webpack-plugin": "4.0.0-beta.5",
+    "identity-obj-proxy": "3.0.0",
+    "is-wsl": "^1.1.0",
+    "jest": "24.9.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.0",
+    "jquery": "^3.4.1",
+    "mini-css-extract-plugin": "0.8.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.5.0",
+    "popper.js": "^1.16.0",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "7.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
+    "precss": "^4.0.0",
+    "react": "^16.10.2",
+    "react-app-polyfill": "^1.0.4",
+    "react-dev-utils": "^9.1.0",
+    "react-dom": "^16.10.2",
+    "react-loadable": "^5.5.0",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.2",
+    "redux": "3.6.0",
+    "redux-actions": "2.6.1",
+    "redux-analytics": "0.3.1",
+    "redux-thunk": "2.2.0",
+    "reselect": "3.0.0",
+    "reselect-immutable-helpers": "1.2.2",
+    "resolve": "1.12.0",
+    "resolve-url-loader": "3.1.0",
+    "sass-loader": "7.2.0",
+    "semver": "6.3.0",
+    "style-loader": "1.0.0",
+    "terser-webpack-plugin": "1.4.1",
+    "ts-pnp": "1.1.4",
+    "url-loader": "2.1.0",
+    "webpack-dev-server": "3.2.1",
+    "webpack-manifest-plugin": "2.1.1",
+    "workbox-webpack-plugin": "4.3.1"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js",
+    "generate": "plop"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/env",
+      "@babel/react"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@material-ui/core": "^4.5.2",
+    "@material-ui/icons": "^4.5.1",
+    "babel-loader": "^8.0.6",
+    "body-parser": "^1.19.0",
+    "plop": "^2.5.2",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9"
+  },
+  "proxy": "http://localhost:3001"
+}

client/plop-templates/Component/Component.js.hbs

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './{{pascalCase name}}.module.css';
 
 const {{pascalCase name}} = props => {
   return (

client/plopfile.js

@@ -17,26 +17,26 @@ module.exports = plop => {
           type: 'add',
           // Plop will create directories for us if they do not exist
           // so it's okay to add files in nested locations.
-          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.js',
+          path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.js',
           templateFile:
             'plop-templates/Component/Component.js.hbs',
         },
         {
           type: 'add',
-          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
+          path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.js',
           templateFile:
             'plop-templates/Component/Component.test.js.hbs',
         },
         {
           type: 'add',
           path:
-            'src/app/components/{{pascalCase name}}/{{pascalCase name}}.module.css',
+            'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss',
           templateFile:
-            'plop-templates/Component/Component.module.css.hbs',
+            'plop-templates/Component/Component.component.scss.hbs',
         },
         {
           type: 'add',
-          path: 'src/app/components/{{pascalCase name}}/index.js',
+          path: 'src/app/components/molecules/{{pascalCase name}}/index.js',
           templateFile: 'plop-templates/Component/index.js.hbs',
         },
         {

client/public/images/cloud.svg

@@ -0,0 +1,890 @@
+
+
+
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+  <link rel="dns-prefetch" href="https://github.githubassets.com">
+  <link rel="dns-prefetch" href="https://avatars0.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars1.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars2.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars3.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
+  <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
+
+
+
+  <link crossorigin="anonymous" media="all" integrity="sha512-/YEVWs7BzxfKyUd6zVxjEQcXRWsLbcEjv045Rq8DSoipySmQblhVKxlXLva2GtNd5DhwCxHwW1RM0N9I7S2Vew==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-481a47a96965f6706fb41bae0d14b09a.css" />
+  <link crossorigin="anonymous" media="all" integrity="sha512-y6ClXuNSXHX02KTSpyAB44/9EYuqesDamipEk7dPNLuJNpS2cp9emQ9spRMyEqHniLQv/gT+3LNh5ClmcmjqTQ==" rel="stylesheet" href="https://github.githubassets.com/assets/site-212da8d2e327716b925d34199c85916c.css" />
+    <link crossorigin="anonymous" media="all" integrity="sha512-ZeXRnWYCu8+fvsUFY0/VTPql8vwvSfrBVUoZlQNG17AZTnz1N3mvsz8dmX705rPZPJYQ/ekLzym0eof+ity3Ew==" rel="stylesheet" href="https://github.githubassets.com/assets/github-4aa6c31d1652b09080e404b2bf72f75c.css" />
+    
+    
+    
+    
+
+  <meta name="viewport" content="width=device-width">
+  
+  <title>react-file-upload/baseline-cloud_upload-24px.svg at master · LukasMarx/react-file-upload · GitHub</title>
+    <meta name="description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub.">
+    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
+  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
+  <meta property="fb:app_id" content="1401488693436528">
+
+    <meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/8080408?s=400&amp;v=4" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary" /><meta name="twitter:title" content="LukasMarx/react-file-upload" /><meta name="twitter:description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub." />
+    <meta property="og:image" content="https://avatars3.githubusercontent.com/u/8080408?s=400&amp;v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="LukasMarx/react-file-upload" /><meta property="og:url" content="https://github.com/LukasMarx/react-file-upload" /><meta property="og:description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub." />
+
+  <link rel="assets" href="https://github.githubassets.com/">
+  
+  
+  <meta name="request-id" content="0939:1DB0:5A653:87A69:5DBC9C48" data-pjax-transient>
+
+
+  
+
+  <meta name="selected-link" value="repo_source" data-pjax-transient>
+
+      <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
+    <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
+    <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
+
+  <meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-dimension-request_id" content="0939:1DB0:5A653:87A69:5DBC9C48" /><meta name="octolytics-dimension-region_edge" content="ap-south-1" /><meta name="octolytics-dimension-region_render" content="iad" /><meta name="octolytics-dimension-ga_id" content="" class="js-octo-ga-id" /><meta name="octolytics-dimension-visitor_id" content="9100614185115577652" />
+<meta name="analytics-location" content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" />
+
+
+
+    <meta name="google-analytics" content="UA-3769691-2">
+
+
+<meta class="js-ga-set" name="dimension1" content="Logged Out">
+
+
+
+  
+
+      <meta name="hostname" content="github.com">
+    <meta name="user-login" content="">
+
+      <meta name="expected-hostname" content="github.com">
+    <meta name="js-proxy-site-detection-payload" content="YTZiZTVlMmE3MzY5MjM0YTM3ZjA2YThiN2QzYzk2OGI3YjRhYzdkZDA1MjU4YTdiOWFjMWNmMTEwOWM1MjcwMXx7InJlbW90ZV9hZGRyZXNzIjoiMTA2LjUxLjExMS4xNjIiLCJyZXF1ZXN0X2lkIjoiMDkzOToxREIwOjVBNjUzOjg3QTY5OjVEQkM5QzQ4IiwidGltZXN0YW1wIjoxNTcyNjQxODY5LCJob3N0IjoiZ2l0aHViLmNvbSJ9">
+
+    <meta name="enabled-features" content="ACTIONS_V2_ON_MARKETPLACE,MARKETPLACE_FEATURED_BLOG_POSTS,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,MARKETPLACE_PENDING_INSTALLATIONS">
+
+  <meta name="html-safe-nonce" content="7d346afba54fef0f15d5612544a0660287b6f7d1">
+
+  <meta http-equiv="x-pjax-version" content="2d925211d3845ba5eac90761112bd92e">
+  
+
+      <link href="https://github.com/LukasMarx/react-file-upload/commits/master.atom" rel="alternate" title="Recent Commits to react-file-upload:master" type="application/atom+xml">
+
+  <meta name="go-import" content="github.com/LukasMarx/react-file-upload git https://github.com/LukasMarx/react-file-upload.git">
+
+  <meta name="octolytics-dimension-user_id" content="8080408" /><meta name="octolytics-dimension-user_login" content="LukasMarx" /><meta name="octolytics-dimension-repository_id" content="170667907" /><meta name="octolytics-dimension-repository_nwo" content="LukasMarx/react-file-upload" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="170667907" /><meta name="octolytics-dimension-repository_network_root_nwo" content="LukasMarx/react-file-upload" /><meta name="octolytics-dimension-repository_explore_github_marketplace_ci_cta_shown" content="false" />
+
+
+    <link rel="canonical" href="https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg" data-pjax-transient>
+
+
+  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
+
+  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
+
+  <link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
+  <link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://github.githubassets.com/favicon.ico">
+
+<meta name="theme-color" content="#1e2327">
+
+
+
+
+
+  <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
+
+  </head>
+
+  <body class="logged-out env-production page-responsive page-blob">
+    
+
+  <div class="position-relative js-header-wrapper ">
+    <a href="#start-of-content" tabindex="1" class="px-2 py-4 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a>
+    <span class="Progress progress-pjax-loader position-fixed width-full js-pjax-loader-bar">
+      <span class="progress-pjax-loader-bar top-0 left-0" style="width: 0%;"></span>
+    </span>
+
+    
+    
+    
+
+
+        <header class="Header-old header-logged-out js-details-container Details position-relative f4 py-2" role="banner">
+  <div class="container-lg d-lg-flex flex-items-center p-responsive">
+    <div class="d-flex flex-justify-between flex-items-center">
+        <a class="mr-4" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
+          <svg height="32" class="octicon octicon-mark-github text-white" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        </a>
+
+          <div class="d-lg-none css-truncate css-truncate-target width-fit p-2">
+            
+              <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+    <a class="Header-link" href="/LukasMarx">LukasMarx</a>
+    /
+    <a class="Header-link" href="/LukasMarx/react-file-upload">react-file-upload</a>
+
+
+          </div>
+
+        <div class="d-flex flex-items-center">
+            <a href="/join?source=header-repo"
+              class="d-inline-block d-lg-none f5 text-white no-underline border border-gray-dark rounded-2 px-2 py-1 mr-3 mr-sm-5"
+              data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e47d3acc7c86e98f566b20a8a9fb25410a7074fdeaec3d095485536905a503a5"
+              data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
+              Sign&nbsp;up
+            </a>
+
+          <button class="btn-link d-lg-none mt-1 js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false">
+            <svg height="24" class="octicon octicon-three-bars text-white" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
+          </button>
+        </div>
+    </div>
+
+    <div class="HeaderMenu HeaderMenu--logged-out position-fixed top-0 right-0 bottom-0 height-fit position-lg-relative d-lg-flex flex-justify-between flex-items-center flex-auto">
+      <div class="d-flex d-lg-none flex-justify-end border-bottom bg-gray-light p-3">
+        <button class="btn-link js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false">
+          <svg height="24" class="octicon octicon-x text-gray" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+        </button>
+      </div>
+
+        <nav class="mt-0 px-3 px-lg-0 mb-5 mb-lg-0" aria-label="Global">
+          <ul class="d-lg-flex list-style-none">
+              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
+                <details class="HeaderMenu-details details-overlay details-reset width-full">
+                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
+                    Why GitHub?
+                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
+                      <path d="M1,1l6.2,6L13,1"></path>
+                    </svg>
+                  </summary>
+                  <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
+                    <a href="/features" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Features">Features <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a>
+                    <ul class="list-style-none f5 pb-3">
+                      <li class="edge-item-fix"><a href="/features/code-review/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code review">Code review</a></li>
+                      <li class="edge-item-fix"><a href="/features/project-management/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Project management">Project management</a></li>
+                      <li class="edge-item-fix"><a href="/features/integrations" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Integrations">Integrations</a></li>
+                      <li class="edge-item-fix"><a href="/features/actions" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Actions">Actions</a>
+                      <li class="edge-item-fix"><a href="/features/package-registry" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Package Registry">Package registry</a>
+                      <li class="edge-item-fix"><a href="/features/security" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Security">Security</a>
+                      <li class="edge-item-fix"><a href="/features#team-management" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Team management">Team management</a></li>
+                      <li class="edge-item-fix"><a href="/features#social-coding" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Social coding">Social coding</a></li>
+                      <li class="edge-item-fix"><a href="/features#documentation" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Documentation">Documentation</a></li>
+                      <li class="edge-item-fix"><a href="/features#code-hosting" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code hosting">Code hosting</a></li>
+                    </ul>
+
+                    <ul class="list-style-none mb-0 border-lg-top pt-lg-3">
+                      <li class="edge-item-fix"><a href="/customer-stories" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Customer stories">Customer stories <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
+                      <li class="edge-item-fix"><a href="/security" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Security">Security <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
+                    </ul>
+                  </div>
+                </details>
+              </li>
+              <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
+                <a href="/enterprise" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Enterprise">Enterprise</a>
+              </li>
+
+              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
+                <details class="HeaderMenu-details details-overlay details-reset width-full">
+                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
+                    Explore
+                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
+                      <path d="M1,1l6.2,6L13,1"></path>
+                    </svg>
+                  </summary>
+
+                  <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
+                    <ul class="list-style-none mb-3">
+                      <li class="edge-item-fix"><a href="/explore" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Explore">Explore GitHub <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
+                    </ul>
+
+                    <h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Learn &amp; contribute</h4>
+                    <ul class="list-style-none mb-3">
+                      <li class="edge-item-fix"><a href="/topics" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Topics">Topics</a></li>
+                        <li class="edge-item-fix"><a href="/collections" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Collections">Collections</a></li>
+                      <li class="edge-item-fix"><a href="/trending" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Trending">Trending</a></li>
+                      <li class="edge-item-fix"><a href="https://lab.github.com/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Learning lab">Learning Lab</a></li>
+                      <li class="edge-item-fix"><a href="https://opensource.guide" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Open source guides">Open source guides</a></li>
+                    </ul>
+
+                    <h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Connect with others</h4>
+                    <ul class="list-style-none mb-0">
+                      <li class="edge-item-fix"><a href="https://github.com/events" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Events">Events</a></li>
+                      <li class="edge-item-fix"><a href="https://github.community" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Community forum">Community forum</a></li>
+                      <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to GitHub Education">GitHub Education</a></li>
+                    </ul>
+                  </div>
+                </details>
+              </li>
+
+              <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
+                <a href="/marketplace" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Marketplace">Marketplace</a>
+              </li>
+
+              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
+                <details class="HeaderMenu-details details-overlay details-reset width-full">
+                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
+                    Pricing
+                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
+                       <path d="M1,1l6.2,6L13,1"></path>
+                    </svg>
+                  </summary>
+
+                  <div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-4 mt-0 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
+                    <a href="/pricing" class="pb-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Pricing">Plans <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a>
+
+                    <ul class="list-style-none mb-3">
+                      <li class="edge-item-fix"><a href="/pricing#feature-comparison" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Compare plans">Compare plans</a></li>
+                      <li class="edge-item-fix"><a href="https://enterprise.github.com/contact" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Contact Sales">Contact Sales</a></li>
+                    </ul>
+
+                    <ul class="list-style-none mb-0 border-lg-top pt-lg-3">
+                      <li class="edge-item-fix"><a href="/nonprofit" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Nonprofits">Nonprofit <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
+                      <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover"  data-ga-click="(Logged out) Header, go to Education">Education <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
+                    </ul>
+                  </div>
+                </details>
+              </li>
+          </ul>
+        </nav>
+
+      <div class="d-lg-flex flex-items-center px-3 px-lg-0 text-center text-lg-left">
+          <div class="d-lg-flex mb-3 mb-lg-0">
+            <div class="header-search flex-self-stretch flex-lg-self-auto mr-0 mr-lg-3 mb-3 mb-lg-0 scoped-search site-scoped-search js-site-search position-relative js-jump-to"
+  role="combobox"
+  aria-owns="jump-to-results"
+  aria-label="Search or jump to"
+  aria-haspopup="listbox"
+  aria-expanded="false"
+>
+  <div class="position-relative">
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository" data-scope-id="170667907" data-scoped-search-url="/LukasMarx/react-file-upload/search" data-unscoped-search-url="/search" action="/LukasMarx/react-file-upload/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
+      <label class="form-control input-sm header-search-wrapper p-0 header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center js-chromeless-input-container">
+        <input type="text"
+          class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
+          data-hotkey="s,/"
+          name="q"
+          value=""
+          placeholder="Search"
+          data-unscoped-placeholder="Search GitHub"
+          data-scoped-placeholder="Search"
+          autocapitalize="off"
+          aria-autocomplete="list"
+          aria-controls="jump-to-results"
+          aria-label="Search"
+          data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations#csrf-token=5H0dqBdLWPNmkt6i5kIlQa0iK+n6NJvXWc61w3STLAiJiII7zkk3mIyoQtvQXa8KpQFyRMNWzsVFP2opLwlFLQ=="
+          spellcheck="false"
+          autocomplete="off"
+          >
+          <input type="hidden" class="js-site-search-type-field" name="type" >
+            <img src="https://github.githubassets.com/images/search-key-slash.svg" alt="" class="mr-2 header-search-key-slash">
+
+            <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
+              
+<ul class="d-none js-jump-to-suggestions-template-container">
+  
+
+<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion" role="option">
+  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
+    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
+      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
+    </div>
+
+    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
+
+    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
+    </div>
+
+    <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
+      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
+        In this repository
+      </span>
+      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
+        All GitHub
+      </span>
+      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+
+    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+      Jump to
+      <span class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+  </a>
+</li>
+
+</ul>
+
+<ul class="d-none js-jump-to-no-results-template-container">
+  <li class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2">
+    <span class="text-gray">No suggested jump to results</span>
+  </li>
+</ul>
+
+<ul id="jump-to-results" role="listbox" class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container">
+  
+
+<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none" role="option">
+  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
+    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
+      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
+    </div>
+
+    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
+
+    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
+    </div>
+
+    <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
+      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
+        In this repository
+      </span>
+      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
+        All GitHub
+      </span>
+      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+
+    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+      Jump to
+      <span class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+  </a>
+</li>
+
+  
+
+<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none" role="option">
+  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
+    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
+      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
+      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
+    </div>
+
+    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
+
+    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
+    </div>
+
+    <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
+      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
+        In this repository
+      </span>
+      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
+        All GitHub
+      </span>
+      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+
+    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+      Jump to
+      <span class="d-inline-block ml-1 v-align-middle">↵</span>
+    </div>
+  </a>
+</li>
+
+
+</ul>
+
+            </div>
+      </label>
+</form>  </div>
+</div>
+
+          </div>
+
+        <a href="/login?return_to=%2FLukasMarx%2Freact-file-upload%2Fblob%2Fmaster%2Fapp%2Fpublic%2Fbaseline-cloud_upload-24px.svg"
+          class="HeaderMenu-link no-underline mr-3"
+          data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="0e1fb4664f0b7f6371963096b529c4187d6efa06e69b1177dd9bb6c245395c0d"
+          data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">
+          Sign&nbsp;in
+        </a>
+          <a href="/join?source=header-repo&amp;source_repo=LukasMarx%2Freact-file-upload"
+            class="HeaderMenu-link d-inline-block no-underline border border-gray-dark rounded-1 px-2 py-1"
+            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="0e1fb4664f0b7f6371963096b529c4187d6efa06e69b1177dd9bb6c245395c0d"
+            data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
+            Sign&nbsp;up
+          </a>
+      </div>
+    </div>
+  </div>
+</header>
+
+  </div>
+
+  <div id="start-of-content" class="show-on-focus"></div>
+
+
+    <div id="js-flash-container">
+
+</div>
+
+
+
+  <div class="application-main " data-commit-hovercards-enabled>
+        <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
+    <main  >
+      
+
+
+  
+
+
+
+
+
+
+
+
+
+
+
+  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav pt-0 pt-lg-4 ">
+    <div class="repohead-details-container clearfix container-lg p-responsive d-none d-lg-block">
+
+      <ul class="pagehead-actions">
+
+
+
+
+  <li>
+    
+  <a class="tooltipped tooltipped-s btn btn-sm btn-with-count" aria-label="You must be signed in to watch a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;notification subscription menu watch&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="8e05956f344137dba3e4d3d1fb5ccb9d49bf350d8302eb1d8c02111023c2a73c" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
+    <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+    Watch
+</a>    <a class="social-count" href="/LukasMarx/react-file-upload/watchers"
+       aria-label="6 users are watching this repository">
+      6
+    </a>
+
+  </li>
+
+  <li>
+        <a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;star button&quot;,&quot;repository_id&quot;:170667907,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e5e4dc9037758b2feb7b4befd6ef38f21f0258e43c43d637cc632386e4fe4bd8" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
+      <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
+      Star
+</a>
+    <a class="social-count js-social-count" href="/LukasMarx/react-file-upload/stargazers"
+      aria-label="81 users starred this repository">
+      81
+    </a>
+
+  </li>
+
+  <li>
+      <a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to fork a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;repo details fork button&quot;,&quot;repository_id&quot;:170667907,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="20824e61ae1bf9316ad5b8a4c5be7406ea95cb84395b72dce9f32e57a65c1490" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
+        <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+        Fork
+</a>
+    <a href="/LukasMarx/react-file-upload/network/members" class="social-count"
+       aria-label="64 users forked this repository">
+      64
+    </a>
+  </li>
+</ul>
+
+      <h1 class="public ">
+    <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+  <span class="author" itemprop="author"><a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx">LukasMarx</a></span><!--
+--><span class="path-divider">/</span><!--
+--><strong itemprop="name"><a data-pjax="#js-repo-pjax-container" href="/LukasMarx/react-file-upload">react-file-upload</a></strong>
+  
+
+</h1>
+
+    </div>
+    
+<nav class="hx_reponav reponav js-repo-nav js-sidenav-container-pjax container-lg p-responsive d-none d-lg-block"
+     itemscope
+     itemtype="http://schema.org/BreadcrumbList"
+    aria-label="Repository"
+     data-pjax="#js-repo-pjax-container">
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a class="js-selected-navigation-item selected reponav-item" itemprop="url" data-hotkey="g c" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /LukasMarx/react-file-upload" href="/LukasMarx/react-file-upload">
+      <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+      <span itemprop="name">Code</span>
+      <meta itemprop="position" content="1">
+</a>  </span>
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /LukasMarx/react-file-upload/issues" href="/LukasMarx/react-file-upload/issues">
+        <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
+        <span itemprop="name">Issues</span>
+        <span class="Counter">2</span>
+        <meta itemprop="position" content="2">
+</a>    </span>
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a data-hotkey="g p" itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /LukasMarx/react-file-upload/pulls" href="/LukasMarx/react-file-upload/pulls">
+      <svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0010 15a1.993 1.993 0 001-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v6.56A1.993 1.993 0 002 15a1.993 1.993 0 001-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+      <span itemprop="name">Pull requests</span>
+      <span class="Counter">0</span>
+      <meta itemprop="position" content="3">
+</a>  </span>
+
+
+    <a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /LukasMarx/react-file-upload/projects" href="/LukasMarx/react-file-upload/projects">
+      <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
+      Projects
+      <span class="Counter" >0</span>
+</a>
+
+
+    <a data-skip-pjax="true" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy code_scanning /LukasMarx/react-file-upload/security/advisories" href="/LukasMarx/react-file-upload/security/advisories">
+      <svg class="octicon octicon-shield" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 2l7-2 7 2v6.02C14 12.69 8.69 16 7 16c-1.69 0-7-3.31-7-7.98V2zm1 .75L7 1l6 1.75v5.268C13 12.104 8.449 15 7 15c-1.449 0-6-2.896-6-6.982V2.75zm1 .75L7 2v12c-1.207 0-5-2.482-5-5.985V3.5z"/></svg>
+      Security
+</a>
+    <a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /LukasMarx/react-file-upload/pulse" href="/LukasMarx/react-file-upload/pulse">
+      <svg class="octicon octicon-graph" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
+      Insights
+</a>
+
+</nav>
+
+  <div class="reponav-wrapper reponav-small d-lg-none">
+  <nav class="reponav js-reponav text-center no-wrap"
+       itemscope
+       itemtype="http://schema.org/BreadcrumbList">
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a class="js-selected-navigation-item selected reponav-item" itemprop="url" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /LukasMarx/react-file-upload" href="/LukasMarx/react-file-upload">
+        <span itemprop="name">Code</span>
+        <meta itemprop="position" content="1">
+</a>    </span>
+
+      <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+        <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /LukasMarx/react-file-upload/issues" href="/LukasMarx/react-file-upload/issues">
+          <span itemprop="name">Issues</span>
+          <span class="Counter">2</span>
+          <meta itemprop="position" content="2">
+</a>      </span>
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /LukasMarx/react-file-upload/pulls" href="/LukasMarx/react-file-upload/pulls">
+        <span itemprop="name">Pull requests</span>
+        <span class="Counter">0</span>
+        <meta itemprop="position" content="3">
+</a>    </span>
+
+      <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+        <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /LukasMarx/react-file-upload/projects" href="/LukasMarx/react-file-upload/projects">
+          <span itemprop="name">Projects</span>
+          <span class="Counter">0</span>
+          <meta itemprop="position" content="4">
+</a>      </span>
+
+
+      <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy code_scanning /LukasMarx/react-file-upload/security/advisories" href="/LukasMarx/react-file-upload/security/advisories">
+        <span itemprop="name">Security</span>
+        <meta itemprop="position" content="6">
+</a>
+      <a class="js-selected-navigation-item reponav-item" data-selected-links="pulse /LukasMarx/react-file-upload/pulse" href="/LukasMarx/react-file-upload/pulse">
+        Pulse
+</a>
+
+  </nav>
+</div>
+
+
+  </div>
+<div class="container-lg clearfix new-discussion-timeline experiment-repo-nav  p-responsive">
+  <div class="repository-content ">
+
+    
+    
+
+
+  
+
+
+    <a class="d-none js-permalink-shortcut" data-hotkey="y" href="/LukasMarx/react-file-upload/blob/b321778f03acb78a5da4311925f79dfea08eea4d/app/public/baseline-cloud_upload-24px.svg">Permalink</a>
+
+    <!-- blob contrib key: blob_contributors:v21:f3ae05fa37f6b3dd79d613dafe8f8c3b -->
+          <div class="signup-prompt-bg rounded-1">
+      <div class="signup-prompt p-4 text-center mb-4 rounded-1">
+        <div class="position-relative">
+          <!-- '"` --><!-- </textarea></xmp> --></option></form><form action="/prompt_dismissals/signup" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="5as33ntvNx8Sx93r0qHDFd+h/7nVx0TuHM6LIWMTiCoHH0GheMX7Phyr7IhIbbWqsYUHsG1xteUbQXuSLwxu+A==" />
+            <button type="submit" class="position-absolute top-0 right-0 btn-link link-gray" data-ga-click="(Logged out) Sign up prompt, clicked Dismiss, text:dismiss">
+              Dismiss
+            </button>
+</form>          <h3 class="pt-2">Join GitHub today</h3>
+          <p class="col-6 mx-auto">GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.</p>
+          <a class="btn btn-primary" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;files signup prompt&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e8546b4aa34ee98d93e03e26a752ca6c720229733da779d09690e2895bff5b8f" data-ga-click="(Logged out) Sign up prompt, clicked Sign up, text:sign-up" href="/join?source=prompt-blob-show&amp;source_repo=LukasMarx%2Freact-file-upload">Sign up</a>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="d-flex flex-items-start flex-shrink-0 pb-3 flex-column flex-md-row">
+      <span class="d-flex flex-justify-between width-full width-md-auto">
+        
+<details class="details-reset details-overlay select-menu branch-select-menu  hx_rsm" id="branch-select-menu">
+  <summary class="btn btn-sm select-menu-button css-truncate"
+           data-hotkey="w"
+           title="Switch branches or tags">
+    <i>Branch:</i>
+    <span class="css-truncate-target" data-menu-button>master</span>
+  </summary>
+
+  <details-menu class="select-menu-modal hx_rsm-modal position-absolute" style="z-index: 99;" src="/LukasMarx/react-file-upload/ref-list/master/app/public/baseline-cloud_upload-24px.svg?source_action=show&amp;source_controller=blob" preload>
+    <include-fragment class="select-menu-loading-overlay anim-pulse">
+      <svg height="32" class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"/></svg>
+    </include-fragment>
+  </details-menu>
+</details>
+
+        <div class="BtnGroup flex-shrink-0 d-md-none">
+          <a href="/LukasMarx/react-file-upload/find/master"
+                class="js-pjax-capture-input btn btn-sm BtnGroup-item"
+                data-pjax
+                data-hotkey="t">
+            Find file
+          </a>
+          <clipboard-copy value="app/public/baseline-cloud_upload-24px.svg" class="btn btn-sm BtnGroup-item">
+            Copy path
+          </clipboard-copy>
+        </div>
+      </span>
+      <h2 id="blob-path" class="breadcrumb flex-auto min-width-0 text-normal flex-md-self-center ml-md-2 mr-md-3 my-2 my-md-0">
+        <span class="js-repo-root text-bold"><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload"><span>react-file-upload</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload/tree/master/app"><span>app</span></a></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload/tree/master/app/public"><span>public</span></a></span><span class="separator">/</span><strong class="final-path">baseline-cloud_upload-24px.svg</strong>
+      </h2>
+
+      <div class="BtnGroup flex-shrink-0 d-none d-md-inline-block">
+        <a href="/LukasMarx/react-file-upload/find/master"
+              class="js-pjax-capture-input btn btn-sm BtnGroup-item"
+              data-pjax
+              data-hotkey="t">
+          Find file
+        </a>
+        <clipboard-copy value="app/public/baseline-cloud_upload-24px.svg" class="btn btn-sm BtnGroup-item">
+          Copy path
+        </clipboard-copy>
+      </div>
+    </div>
+
+
+
+    
+  <div class="Box Box--condensed d-flex flex-column flex-shrink-0">
+      <div class="Box-body d-flex flex-justify-between bg-blue-light flex-column flex-md-row flex-items-start flex-md-items-center">
+        <span class="pr-md-4 f6">
+          <a rel="author" data-skip-pjax="true" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx"><img class="avatar" src="https://avatars2.githubusercontent.com/u/8080408?s=40&amp;v=4" width="20" height="20" alt="@LukasMarx" /></a>
+          <a class="text-bold link-gray-dark lh-default v-align-middle" rel="author" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx">LukasMarx</a>
+            <span class="lh-default v-align-middle">
+              <a data-pjax="true" title="init" class="link-gray" href="/LukasMarx/react-file-upload/commit/4f6903a15c9d27697d88a5f6284683b9ef78074c">init</a>
+            </span>
+        </span>
+        <span class="d-inline-block flex-shrink-0 v-align-bottom f6 mt-2 mt-md-0">
+          <a class="pr-2 text-mono link-gray" href="/LukasMarx/react-file-upload/commit/4f6903a15c9d27697d88a5f6284683b9ef78074c" data-pjax>4f6903a</a>
+          <relative-time datetime="2019-02-07T10:25:40Z" class="no-wrap">Feb 7, 2019</relative-time>
+        </span>
+      </div>
+
+    <div class="Box-body d-flex flex-items-center flex-auto f6 border-bottom-0 flex-wrap" >
+      <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark float-left mr-2" id="blob_contributors_box">
+        <summary class="btn-link">
+          <span><strong>1</strong> contributor</span>
+        </summary>
+        <details-dialog
+          class="Box Box--overlay d-flex flex-column anim-fade-in fast"
+          aria-label="Users who have contributed to this file"
+          src="/LukasMarx/react-file-upload/contributors/master/app/public/baseline-cloud_upload-24px.svg/list" preload>
+          <div class="Box-header">
+            <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
+              <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+            </button>
+            <h3 class="Box-title">
+              Users who have contributed to this file
+            </h3>
+          </div>
+          <include-fragment class="octocat-spinner my-3" aria-label="Loading..."></include-fragment>
+        </details-dialog>
+      </details>
+    </div>
+  </div>
+
+
+
+
+
+    <div class="Box mt-3 position-relative">
+      
+<div class="Box-header py-2 d-flex flex-column flex-shrink-0 flex-md-row flex-md-items-center">
+  <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
+
+      1 lines (1 sloc)
+      <span class="file-info-divider"></span>
+    318 Bytes
+  </div>
+
+  <div class="d-flex py-1 py-md-0 flex-auto flex-order-1 flex-md-order-2 flex-sm-grow-0 flex-justify-between">
+      <div class="BtnGroup">
+        <a class="btn btn-sm BtnGroup-item tooltipped tooltipped tooltipped-n source "
+          href="/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg?short_path=cd21366" aria-label="Display the source blob">
+          <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+        </a>
+        <a class="btn btn-sm BtnGroup-item tooltipped tooltipped-n rendered selected"
+          href="/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg" aria-label="Display the rendered blob">
+          <svg class="octicon octicon-file" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"/></svg>
+        </a>
+      </div>
+
+    <div class="BtnGroup">
+      <a id="raw-url" class="btn btn-sm BtnGroup-item" href="/LukasMarx/react-file-upload/raw/master/app/public/baseline-cloud_upload-24px.svg">Raw</a>
+        <a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/LukasMarx/react-file-upload/blame/master/app/public/baseline-cloud_upload-24px.svg">Blame</a>
+      <a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/LukasMarx/react-file-upload/commits/master/app/public/baseline-cloud_upload-24px.svg">History</a>
+    </div>
+
+
+    <div>
+
+          <button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
+            aria-label="You must be signed in to make or propose changes">
+            <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
+          </button>
+          <button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
+            aria-label="You must be signed in to make or propose changes">
+            <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
+          </button>
+    </div>
+  </div>
+</div>
+
+
+
+
+      
+
+  <div itemprop="text" class="Box-body p-0 blob-wrapper data type-svg ">
+      
+  <div class="render-wrapper ">
+    <div class="render-container is-render-pending js-render-target  "
+      data-identity="7b28a6ed-5239-40b8-89de-232298558fce"
+      data-host="https://render.githubusercontent.com"
+      data-type="svg">
+      <img class="octospinner mx-auto" alt="" src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif" width="64" height="64" />
+      <div class="render-viewer-error">Sorry, something went wrong. <a href="https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg">Reload?</a></div>
+      <div class="render-viewer-fatal">Sorry, we cannot display this file.</div>
+      <div class="render-viewer-invalid">Sorry, this file is invalid so it cannot be displayed.</div>
+      <iframe class="render-viewer " src="https://render.githubusercontent.com/view/svg?commit=b321778f03acb78a5da4311925f79dfea08eea4d&amp;enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f4c756b61734d6172782f72656163742d66696c652d75706c6f61642f623332313737386630336163623738613564613433313139323566373964666561303865656134642f6170702f7075626c69632f626173656c696e652d636c6f75645f75706c6f61642d323470782e737667&amp;nwo=LukasMarx%2Freact-file-upload&amp;path=app%2Fpublic%2Fbaseline-cloud_upload-24px.svg&amp;repository_id=170667907&amp;repository_type=Repository#7b28a6ed-5239-40b8-89de-232298558fce" sandbox="allow-scripts allow-same-origin allow-top-navigation" title="File display">
+          Viewer requires iframe.
+      </iframe>
+    </div>
+  </div>
+
+  </div>
+
+    </div>
+
+  
+
+  <details class="details-reset details-overlay details-overlay-dark">
+    <summary data-hotkey="l" aria-label="Jump to line"></summary>
+    <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast linejump" aria-label="Jump to line">
+      <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-jump-to-line-form Box-body d-flex" action="" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
+        <input class="form-control flex-auto mr-3 linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
+        <button type="submit" class="btn" data-close-dialog>Go</button>
+</form>    </details-dialog>
+  </details>
+
+
+
+  </div>
+</div>
+
+    </main>
+  </div>
+  
+
+  </div>
+
+        
+<div class="footer container-lg width-full p-responsive" role="contentinfo">
+  <div class="position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light ">
+    <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
+      <li class="mr-3 mr-lg-0">&copy; 2019 <span title="0.18817s from unicorn-7d894d5b96-nprrp">GitHub</span>, Inc.</li>
+        <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to terms, text:terms" href="https://github.com/site/terms">Terms</a></li>
+        <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to privacy, text:privacy" href="https://github.com/site/privacy">Privacy</a></li>
+        <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to security, text:security" href="https://github.com/security">Security</a></li>
+        <li class="mr-3 mr-lg-0"><a href="https://githubstatus.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
+        <li><a data-ga-click="Footer, go to help, text:help" href="https://help.github.com">Help</a></li>
+    </ul>
+
+    <a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com">
+      <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+   <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
+        <li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to contact, text:contact" href="https://github.com/contact">Contact GitHub</a></li>
+        <li class="mr-3 mr-lg-0"><a href="https://github.com/pricing" data-ga-click="Footer, go to Pricing, text:Pricing">Pricing</a></li>
+      <li class="mr-3 mr-lg-0"><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
+      <li class="mr-3 mr-lg-0"><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
+        <li class="mr-3 mr-lg-0"><a href="https://github.blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
+        <li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li>
+
+    </ul>
+  </div>
+  <div class="d-flex flex-justify-center pb-6">
+    <span class="f6 text-gray-light"></span>
+  </div>
+</div>
+
+
+
+  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
+    <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
+    <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
+      <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+    </button>
+    You can’t perform that action at this time.
+  </div>
+
+
+    <script crossorigin="anonymous" integrity="sha512-Eg0rZwgV8u0mLVvo54G5pmppwDmFXNT3D1YomZlCZn4AKgzDxmyNpgiB9sRRNwzy3cr7M+xSvfrU+ABBnAIxag==" type="application/javascript" src="https://github.githubassets.com/assets/compat-bootstrap-e11c41e2.js"></script>
+    <script crossorigin="anonymous" integrity="sha512-EJ9X3kU95Ur4YFVhpmVSHT6zF64XDV+MbOYu10WmDE2YRui38aJjBC/pwA/xpAZ+iRV0wQK73yrus7bdvq55/Q==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-cd24d104.js"></script>
+    
+    <script crossorigin="anonymous" async="async" integrity="sha512-poSgUOrumpNwDX1IlydFTX5aTXcCcfTK2xHsXvLdSLPjFove3aMkFqMssKoKqdCiXaKCc3ckL4gth4r0jBGVdQ==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-513237e9.js"></script>
+    
+    
+    
+  <div class="js-stale-session-flash flash flash-warn flash-banner" hidden
+    >
+    <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
+    <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
+    <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
+  </div>
+  <template id="site-details-dialog">
+  <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark hx_rsm" open>
+    <summary role="button" aria-label="Close dialog"></summary>
+    <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal">
+      <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
+        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+      </button>
+      <div class="octocat-spinner my-6 js-details-dialog-spinner"></div>
+    </details-dialog>
+  </details>
+</template>
+
+  <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
+  <div class="Popover-message Popover-message--bottom-left Popover-message--large Box box-shadow-large" style="width:360px;">
+  </div>
+</div>
+
+  <div aria-live="polite" class="js-global-screen-reader-notice sr-only"></div>
+
+  </body>
+</html>
+

client/public/index.html

@@ -17,7 +17,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" type="text/css" href="./index.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/app/components/atoms/InputField/InputField.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './InputField.module.scss';
 
 const InputField = ({meta}) => {
   return (
-    <div className={styles['c-InputField']}>
+    <div className='c-InputField'>
       <div
             className={`form-group row ${
                 meta.container_class ? meta.container_class : ''

client/src/app/components/atoms/SelectOption/SelectOption.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styles from './SelectOption.module.css';
 
 const SelectOption = props => {
@@ -9,12 +8,4 @@ const SelectOption = props => {
   );
 };
 
-SelectOption.defaultProps = {
-
-};
-
-SelectOption.propTypes = {
-
-};
-
 export default SelectOption;

client/src/app/components/index.js

@@ -0,0 +1,55 @@
+/* PLOP_INJECT_IMPORT */
+import Progress from './Progress';
+import Uploader from './Uploader';
+import Dropzone from './Dropzone';
+import StepProgressBar from './StepProgressBar';
+import UserTools from './UserTools';
+import ToolItem from './ToolItem';
+import CommandAndUserTools from './CommandAndUserTools';
+import ImageViewerInner from './ImageViewerInner';
+import ImageHeader from './ImageHeader';
+import Image from './Image';
+import Paginator from './molecules/Paginator';
+import PrincipalContent from './molecules/PrincipalContent';
+import ImageViewer from './molecules/PrincipalContent/ImageViewer';
+import ImageContainer from './molecules/PrincipalContent/ImageContainer';
+import CommandPrompt from './molecules/common/CommandPrompt';
+import SideBarTab from './molecules/SideBar/SideBarTab';
+import SideBar from './molecules/SideBar';
+import Jumbotron from './molecules/common/Jumbotron';
+import FormFieldContainer from './molecules/common/FormFieldContainer';
+import Form from './molecules/common/Form';
+import SocialLogin from './molecules/SocialLogin';
+import LoginForm from './molecules/LoginForm';
+import SelectOption from './atoms/SelectOption';
+import InputField from './atoms/InputField';
+import PageLoader from './molecules/PageLoader';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	Progress,
+	Uploader,
+	Dropzone,
+	StepProgressBar,
+	UserTools,
+	ToolItem,
+	CommandAndUserTools,
+	ImageViewerInner,
+	ImageHeader,
+	Image,
+	Paginator,
+	PrincipalContent,
+	ImageViewer,
+	ImageContainer,
+	CommandPrompt,
+	SideBarTab,
+	SideBar,
+	Jumbotron,
+	FormFieldContainer,
+	Form,
+	SocialLogin,
+	LoginForm,
+	SelectOption,
+	InputField,
+	PageLoader,
+}

client/src/app/components/molecules/LoginForm/LoginForm.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './LoginForm.module.scss';
 
 import loginFormFields from './../../../config/forms-meta/login-form.json'
 import Form from './../common/Form'
 
 const LoginForm = props => {
   return (
-    <div className={styles['c-LoginForm']}>
+    <div className='c-LoginForm'>
       <Form 
         metaData={loginFormFields} 
         context="login"

client/src/app/components/molecules/PageLoader/PageLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+      <div className='c-PageLoader'>
+        <div className='is-animate'>
+          <div className='l'>l</div>
+          <div className='l'>o</div>
+          <div className='l'>a</div>
+          <div className='l'>d</div>
+          <div className='l'>i</div>
+          <div className='l'>n</div>
+          <div className='l'>g</div>
+        </div>
+      </div>
+  )
+};
+
+PageLoader.defaultProps = {
+
+};
+
+PageLoader.propTypes = {
+
+};
+
+export default PageLoader;

client/src/app/components/molecules/PageLoader/index.js

@@ -0,0 +1,3 @@
+import PageLoader from './PageLoader.jsx';
+
+export default PageLoader;

client/src/app/components/molecules/Paginator/Paginator.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Paginator.module.css';
+
+const Paginator = props => {
+  return (
+    <div className={styles.root}>
+    </div>
+  );
+};
+
+Paginator.defaultProps = {
+
+};
+
+Paginator.propTypes = {
+
+};
+
+export default Paginator;

client/src/app/components/molecules/Paginator/Paginator.module.css

@@ -0,0 +1,3 @@
+.c-Paginator {
+  
+}

client/src/app/components/molecules/Paginator/Paginator.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Paginator from './Paginator';
+
+describe('Paginator', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/Paginator/index.js

@@ -0,0 +1,3 @@
+import Paginator from './Paginator';
+
+export default Paginator;

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.component.scss

@@ -0,0 +1,4 @@
+.c-Image {
+  margin: 2rem;
+  width: 250px;
+}

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux'
+
+import {updateBackground} from './../../../../../pages/Home/actions'
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader'
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import ImageHeader from './ImageHeader/ImageHeader';
+
+const useStyles = makeStyles({
+  card: {
+    maxWidth: 345,
+  },
+  media: {
+    height: 140,
+  },
+});
+
+const Image = props => {
+  const image = props.image
+  const classes = useStyles()
+
+  return (
+    <Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(image.imageUrl)}>
+      <CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} style={{textTransform: 'capitalize'}} />
+      <CardActionArea>
+        <CardMedia
+          className={classes.media}
+          image={image.imageUrl}
+          title={image.imageTitle}
+        />
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">
+            {image.imageTitle}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            {image.imageDescription}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button size="small" color="primary">
+          Like
+        </Button>
+        <Button size="small" color="primary">
+          Share
+        </Button>
+        <Button size="small" color="primary">
+          More
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+Image.propTypes = {
+  image: PropTypes.object,
+  updateBackgroundDispatcher: PropTypes.func
+};
+
+const  mapDispatchToProps = {
+  updateBackgroundDispatcher: updateBackground
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(Image)

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Image from './Image';
+
+describe('Image', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.component.scss

@@ -0,0 +1,12 @@
+.c-ImageHeader {
+	// padding: 10px;
+  .avatar {
+		background-size: cover;
+		border-radius: 50%;
+		flex-shrink: 0;
+		height: 40px;
+		line-height: 24px;
+		object-fit: cover;
+		width: 40px;
+	}
+}

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ImageHeader = props => {
+  const image = props.image
+  return (
+    <div className="c-ImageHeader">
+      <div className="avatar" style={{backgroundImage: `url(${image.imageUrl})`}} />
+    </div>
+  );
+};
+
+ImageHeader.propTypes = {
+  image: PropTypes.object
+};
+
+export default ImageHeader

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ImageHeader from './ImageHeader';
+
+describe('ImageHeader', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/index.js

@@ -0,0 +1,3 @@
+import ImageHeader from './ImageHeader';
+
+export default ImageHeader;

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/index.js

@@ -0,0 +1,3 @@
+import Image from './Image';
+
+export default Image;

client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.component.scss

@@ -0,0 +1,5 @@
+.c-ImageContainer {
+  .c-Images {
+    justify-content: space-around;
+  }
+}

client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageCard from './Image'
+import Image from './../../../../models/image.model'
+
+class ImageContainer extends React.Component {
+
+  render() {
+    const images = [
+      new Image('dragonfly1', '/images/GUD_1.JPG', 'Guddu 1'),
+      new Image('dragonfly2', '/images/GUD_2.JPG', 'sampleDesc2'),
+      new Image('dragonfly3', '/images/GUD_3.JPG', 'sampleDesc3'),
+      new Image('dragonfly4', '/images/GUD_4.JPG', 'sampleDesc4'),
+      new Image('dragonfly1', '/images/GUD_5.JPG', 'sampleDesc1'),
+      new Image('dragonfly2', '/images/GUD_6.JPG', 'sampleDesc2'),
+      new Image('dragonfly3', '/images/GUD_7.JPG', 'sampleDesc3'),
+      new Image('dragonfly4', '/images/GUD_8.JPG', 'sampleDesc4'),
+      new Image('dragonfly1', '/images/GUD_9.JPG', 'sampleDesc1'),
+      new Image('dragonfly2', '/images/GUD_10.JPG', 'sampleDesc2'),
+      new Image('dragonfly3', '/images/GUD_11.JPG', 'sampleDesc3'),
+      new Image('dragonfly4', '/images/GUD_12.JPG', 'sampleDesc4'),
+      new Image('dragonfly1', '/images/GUD_4.JPG', 'sampleDesc1'),
+      new Image('dragonfly2', '/images/GUD_3.JPG', 'sampleDesc2'),
+      new Image('dragonfly3', '/images/GUD_2.JPG', 'sampleDesc3'),
+      new Image('dragonfly4', '/images/GUD_1.JPG', 'sampleDesc4')
+    ]
+    const imageRenders = images.map((image, index) => {
+      return <ImageCard image={image} key={index} />
+    })
+    return (
+      <div className="container-fluid c-ImageContainer">
+        <div className="row c-Images">
+          {imageRenders}
+        </div>
+      </div>
+    );
+  }
+}
+
+ImageContainer.propTypes = {
+  images: PropTypes.array
+};
+
+export default ImageContainer;

client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ImageContainer from './ImageContainer';
+
+describe('ImageContainer', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/PrincipalContent/ImageContainer/index.js

@@ -0,0 +1,3 @@
+import ImageContainer from './ImageContainer';
+
+export default ImageContainer;

client/src/app/components/molecules/PrincipalContent/ImageViewer/ImageViewer.component.scss

@@ -0,0 +1,3 @@
+.c-ImageViewer {
+
+}

client/src/app/components/molecules/PrincipalContent/ImageViewer/ImageViewer.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import { createPropsSelector } from 'reselect-immutable-helpers';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import {Zoom, Paper} from '@material-ui/core';
+import { updateModalState } from '../../../../pages/Home/actions';
+import { getModalState, getBackgroundImage } from '../../../../pages/Home/selectors';
+
+const useStyles = makeStyles(theme => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    width: '85%',
+    height: '85%'
+  },
+  polygon: {
+    fill: theme.palette.common.white,
+    stroke: theme.palette.divider,
+    strokeWidth: 1,
+  },
+}));
+
+const ImageViewer = props => {
+
+  const classes = useStyles();
+  return (
+    <div className="c-ImageViewer">
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={props.modalState || false}
+        onClose={() => props.handleCloseDispatcher(false)}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Zoom in={props.modalState || false}>
+          <Paper elevation={4} className={classes.paper}>
+            
+          </Paper>
+        </Zoom>
+      </Modal>
+    </div>
+  );
+};
+
+ImageViewer.propTypes = {
+  handleCloseDispatcher: PropTypes.func,
+  modalState: PropTypes.bool,
+  selectedImage: PropTypes.string
+};
+
+const mapStateToProps = createPropsSelector({
+  modalState: getModalState,
+  selectedImage: getBackgroundImage
+})
+
+const mapDispatchToProps = {
+  handleCloseDispatcher: updateModalState
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ImageViewer)

client/src/app/components/molecules/PrincipalContent/ImageViewer/ImageViewer.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ImageViewer from './ImageViewer';
+
+describe('ImageViewer', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/PrincipalContent/ImageViewer/index.js

@@ -0,0 +1,3 @@
+import ImageViewer from './ImageViewer';
+
+export default ImageViewer;

client/src/app/components/molecules/PrincipalContent/PrincipalContent.component.scss

@@ -0,0 +1,3 @@
+.c-PrincipalContent {
+  padding: 0 1.5rem;
+}

client/src/app/components/molecules/PrincipalContent/PrincipalContent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ImageContainer from './ImageContainer';
+import ImageViewer from './ImageViewer';
+
+const PrincipalContent = props => {
+  return (
+    <div className='c-PrincipalContent'>
+      <ImageContainer />
+      <ImageViewer />
+    </div>
+  );
+};
+
+export default PrincipalContent;

client/src/app/components/molecules/PrincipalContent/PrincipalContent.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PrincipalContent from './PrincipalContent';
+
+describe('PrincipalContent', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/PrincipalContent/index.js

@@ -0,0 +1,3 @@
+import PrincipalContent from './PrincipalContent';
+
+export default PrincipalContent;

client/src/app/components/molecules/SideBar/SideBar.component.scss

@@ -0,0 +1,477 @@
+// $themeColor-Light: #EEE2DC;
+// // $themeColor-Dark:#252525;
+// $themeColor-Dark:#E3E2DF;
+// $theme-font: verdana, sans-serif;
+// // $theme-supplementer: #f39c12;
+// $theme-supplementer: #5D001E;
+// $theme-supplementer-transparent: rgba(93,0,30,0.3);
+
+.c-SideBar {
+    // background: $theme-supplementer-transparent;
+	z-index: 20;
+	height: 100%;
+   
+	a,
+	a:hover,
+	a:focus {
+			color: inherit;
+			text-decoration: none;
+			transition: all 0.3s;
+	}
+
+	.navbar {
+			padding: 15px 10px;
+			background: #fff;
+			border: none;
+			border-radius: 0 5px 5px 0;
+			margin-bottom: 40px;
+			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.navbar-btn {
+			box-shadow: none;
+			outline: none !important;
+			border: none;
+	}
+
+	.line {
+			width: 100%;
+			height: 1px;
+			border-bottom: 1px dashed #ddd;
+			margin: 20px 0;
+	}
+
+	i,
+	span {
+			display: inline-block;
+	}
+
+	/* ---------------------------------------------------
+			SIDEBAR STYLE
+	----------------------------------------------------- */
+	&#sidebar {
+			min-width: 250px;
+			max-width: 250px;
+			background: $theme-supplementer;
+			color: $themeColor-Dark;
+			transition: all 0.3s;
+			height: 100%;
+			position:fixed;
+			z-index: 10;
+			left: -255px;
+			ul li {
+				&.active>a,
+				a[aria-expanded="true"] {
+						color: $theme-supplementer;
+						background: $themeColor-Dark;
+				}
+				a {
+					text-align: left;
+					padding: 10px;
+					font-size: 1.1em;
+					display: block;
+					:hover {
+						color: #7386D5;
+						background: #fff;
+					}
+					i {
+						margin-right: 10px;
+					}
+				}
+			}
+			ul.components {
+				padding: 20px 0;
+				border-bottom: 3px solid $themeColor-Dark;
+			}
+			.sidebar-header {
+				padding: 20px;
+				background: $themeColor-Dark;
+				h3 {
+					display: inline;
+					padding-left: 0.6em;
+					vertical-align: middle;
+				}
+				strong {
+					display: none;
+					font-size: 1.8em;
+				}
+			}
+			.triangle {
+					position: absolute;
+					background-color: $theme-supplementer;
+					opacity: 0.8;
+					text-align: left;
+					left: 6em;
+					top: 50%;
+					cursor: pointer;
+					&:before {
+						content: '';
+						width: 20px;
+						height: 50px;
+						transform: skewY(25deg);
+						background-color: $theme-supplementer;
+						position: absolute;
+						top: 40px;
+						border-radius: 8px;
+					}
+					&:after {
+						content: '';
+						width: 20px;
+						height: 50px;
+						transform: skewY(155deg);
+						background-color: $theme-supplementer;
+						position: absolute;
+						top: 60px;
+						border-radius: 8px;
+					}
+					&.animation {
+						animation: pulse 2s infinite;
+						-ms-animation: pulse 2s infinite;
+						-moz-animation: pulse 2s infinite;
+						-webkit-animation: pulse 2s infinite;
+					}
+			}
+			&.active {
+				min-width: 80px;
+				max-width: 80px;
+				text-align: center;
+				left: -85px;
+				.dropdown-toggle::after {
+					top: auto;
+					bottom: 10px;
+					right: 50%;
+					-webkit-transform: translateX(50%);
+					-ms-transform: translateX(50%);
+					transform: translateX(50%);
+				}
+				ul {
+					li a {
+						padding: 20px 10px;
+						text-align: center;
+						font-size: 0.85em;
+						i {
+							margin-right: 0;
+							display: block;
+							font-size: 1.8em;
+							margin-bottom: 5px;
+						}
+					}
+					ul a {
+						padding: 10px !important;
+					}
+				}
+				.sidebar-header {
+					h3 {
+						display: none;
+					}
+					strong {
+						display: block;
+					}
+				}
+				.CTAs {
+					display: none;
+				}
+			}
+	}
+
+	@keyframes pulse {
+			from { background-color: $theme-supplementer; box-shadow: 0 0 9px rgba(255, 255, 255, 0.5); }
+			50% { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 18px $theme-supplementer; }
+			to { background-color: $theme-supplementer; box-shadow: 0 0 9px rgba(255, 255, 255, 0.5); }
+	}
+
+	a[data-toggle="collapse"] {
+			position: relative;
+	}
+
+	.dropdown-toggle::after {
+			display: block;
+			position: absolute;
+			top: 50%;
+			right: 20px;
+			transform: translateY(-50%);
+	}
+
+	ul ul a {
+			font-size: 0.9em !important;
+			padding-left: 30px !important;
+			background: white;
+			font-weight: bolder;
+	}
+
+	ul.CTAs {
+			padding: 20px;
+	}
+
+	ul.CTAs a {
+			text-align: center;
+			font-size: 0.9em !important;
+			display: block;
+			border-radius: 5px;
+			margin-bottom: 5px;
+	}
+
+	a.download {
+			background: #fff;
+			color: #7386D5;
+	}
+
+	a.article,
+	a.article:hover {
+			background: #6d7fcc !important;
+			color: #fff !important;
+	}
+
+	/* ---------------------------------------------------
+			CONTENT STYLE
+	----------------------------------------------------- */
+
+	#content {
+			width: 100%;
+			padding: 20px;
+			min-height: 100vh;
+			transition: all 0.3s;
+	}
+
+	/* ---------------------------------------------------
+			MEDIAQUERIES
+	----------------------------------------------------- */
+
+	@media (max-width: 768px) {
+		#sidebar {
+			min-width: 80px;
+			max-width: 80px;
+			text-align: center;
+			margin-left: -80px !important;
+			// display: none;
+			.active {
+				margin-left: 0 !important;
+			}
+			.sidebar-header {
+				h3, .CTAs {
+					display: none;
+				}
+				strong {
+					display: block;
+				}
+			}
+			ul {
+				li a {
+					padding: 20px 10px;
+					span {
+						font-size: 0.85em;
+					}
+					i {
+						margin-right: 0;
+						display: block;
+						font-size: 1.3em;
+					}
+				}
+				ul a {
+					padding: 10px !important;
+				}
+			}
+		}
+		.dropdown-toggle::after {
+				top: auto;
+				bottom: 10px;
+				right: 50%;
+				-webkit-transform: translateX(50%);
+				-ms-transform: translateX(50%);
+				transform: translateX(50%);
+		}
+		#sidebarCollapse span {
+				display: none;
+		}
+		.text-muted {
+				color: #bcb !important;
+		}
+	}
+
+	@media(min-width: 576px) {
+			.card-group>.card:first-child {
+					border-top-right-radius: .25rem;
+					border-bottom-right-radius: .25rem;
+			}
+			.card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
+					border-radius: .25rem;
+			}
+			.card-group>.card:last-child {
+					border-top-left-radius: .25rem;
+					border-bottom-left-radius: .25rem;
+			}
+	}
+	/* -------------------------------------------------
+	ADDITIONS
+	--------------------------------------------------*/
+	.hide {
+		display: none;
+	}
+
+	.prompt {
+		display: flex;
+		width: 2em;
+		border-right: 1px solid #c99034;
+		background-color: #f5d38b;
+		width: 4%;
+		margin-bottom: 40px;
+		border-radius: 4px 0 0 4px;
+	}
+
+	.promptext {
+		animation:blinkingText 0.8s infinite;
+		color: #975f04;
+		text-align: center;
+		line-height: 2em;
+		font: 1.5em bolder;
+		margin: auto;
+	}
+
+	.good {
+			animation: anim .3s ease-in-out;
+	}
+
+	.repoLink {
+			color: #000;
+			font-weight: bolder;
+			text-decoration: underline;
+	}
+
+	.headerprompt {
+		display: flex;
+		width: 100%;
+	}
+
+	.logotext {
+		color: $theme-supplementer;
+	}
+
+	#content nav div.collapse li a.nav-link i.far {
+		color: $theme-supplementer;
+		font-size: 1.8em;
+		padding: 0.2em;
+	}
+
+	#loading-img {
+			background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
+			height: 100%;
+			z-index: 20;
+	}
+
+	.overlay {
+			background: #e9e9e9;
+			display: none;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			opacity: 0.5;
+	}
+
+	.loader {
+			border: 0px solid #f3f3f3;
+			border-radius: 50%;
+			border-top: 2px solid #3498db;
+			border-right: 2px solid #3498db;
+			width: 20px;
+			height: 20px;
+			-webkit-animation: spin 2s linear infinite; /* Safari */
+			animation: spin 2s linear infinite;
+		}
+	.card:not(.widget) {
+			background: linear-gradient(to right, white, lightblue)
+	}
+	.light-red {
+			// background:linear-gradient(white, lightblue);
+			background: linear-gradient(to right, white, #dfc99a)
+	}
+		
+	// f3d98c
+	.featureRequest {
+			background-color : #007bff;
+			color: white;
+			font-size: 1.5em;
+			padding: 10px 20px;
+			border-radius: 30px;
+	}
+		
+		#featureRequest {
+			position: fixed;
+			bottom: 2em;
+			right: 2.5em;
+		}
+
+	@keyframes spin {
+			0% { transform: rotate(0deg); }
+			100% { transform: rotate(360deg); }
+	}
+
+	@keyframes anim {
+			0% {
+				display: none;
+				opacity: 0;
+			}
+			1% {
+				display: block;
+				opacity: 0;
+				transform: scale(0);
+			}
+			100% {
+				opacity: 1;
+				transform: scale(1);
+			}
+	}
+	@keyframes blinkingText {
+		0%{     color: #000;    }
+		49%{    color: transparent; }
+		50%{    color: transparent; }
+		99%{    color:transparent;  }
+		100%{   color: #000;    }
+	}
+
+/* --------------------------------------------------
+  OVERRIDES
+  --------------------------------------------------*/
+  .btn:not(.featureRequest) {
+    background-color: $theme-supplementer;
+    color: $themeColor-Dark
+  }
+
+  #content #header .navbar {
+    width: 96%;
+  }
+
+  .navbar-form {
+    width: 88%;
+  }
+
+  .form-control {
+    padding: .6rem 1em;
+  }
+
+  .container-fluid {
+    padding-left: 0.3em;
+  }
+
+  .card-group {
+    flex-direction:column;
+  }
+
+  #command.form-control {
+      width: 87%;
+  }
+
+  .ml-auto {
+      margin-left: 0!important;
+  }
+
+  .btn-info {
+      border-color: orange;
+  }
+
+  .btn-info:hover {
+    border-color: orange;
+    opacity: 1
+  }
+}

client/src/app/components/molecules/SideBar/SideBar.jsx

@@ -0,0 +1,72 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import SideBarTab from './SideBarTab';
+import $ from 'jquery'
+
+const SideBar = props => {
+
+  useEffect(() => {
+    $('#sidebar.active > span').on('click', () => {
+      $('#sidebar').css('transform', 'translateX(85px)');
+      $('#sidebar').css('box-shadow', 'rgb(224, 151, 32) 10px 10px 30px');
+      $('.triangle').removeClass('animation');
+    });
+    $('*').on('click', (e) => {
+      // e.stopPropagation();
+      // console.log($(e.target).closest('#sidebar'))
+      if($(e.target).closest('#sidebar').length === 0) {
+        $('#sidebar').css('transform', 'translateX(0px)');
+        $('#sidebar').css('box-shadow', '');
+        $('.triangle').addClass('animation');
+      }
+    })
+  })
+
+  const toggleSidebar = () => {
+    const position = $('#sidebar').css('transform').split(/[()]/)[1]
+    const currentX = +position.split(',')[4]
+    if (currentX && currentX === 255) {
+      $('#sidebar').css('transform', 'translateX(85px)');
+    } else if (currentX && currentX === 85) {
+      $('#sidebar').css('transform', 'translateX(255px)');
+    }
+    $('#sidebar').toggleClass('active');
+    $('.hideable').toggleClass('hide');
+    // console.log(currentX)
+    // console.log($('#sidebar').css('transform'))
+    // console.log($('#sidebar').css('transform').split(/[()]/))
+    $('.triangle').addClass('animation');
+  }
+
+  const tabsData = [
+    {'href': 'homeSubmenu', 'tabImage': 'fa-home', 'tabText': 'Home', 'activeClass': true, 'subList': false},
+    {'href': 'about', 'tabImage': 'fa-briefcase', 'tabText': 'About', 'activeClass': false, 'subList': false},
+    {'href': 'pageSubmenu', 'tabImage': 'fa-copy', 'tabText': 'Tasks', 'activeClass': false, 'subList': true},
+    {'href': 'favorites', 'tabImage': 'fa-image', 'tabText': 'Favorites', 'activeClass': false, 'subList': false},
+    {'href': 'question', 'tabImage': 'fa-question', 'tabText': 'FAQ', 'activeClass': false, 'subList': false},
+    {'href': 'contact', 'tabImage': 'fa-paper-plane', 'tabText': 'Contact', 'activeClass': false, 'subList': false},
+  ]
+  const tabItems = tabsData && tabsData.map((tab, index) => {
+    return <SideBarTab tab={tab} key={index} />
+  })
+  return (
+    <nav id="sidebar" className="c-SideBar active">
+      <span className="triangle animation" id="pullOutButton"></span>
+      <div className="sidebar-header">
+        <button type="button" id="sidebarCollapse" className="btn btn-info" onClick={toggleSidebar}>
+          <i className="fas fa-align-justify"></i>
+        </button>
+        <h3 className="logotext">Ecstatica</h3>
+      </div>
+      <ul className="list-unstyled components">
+        {tabItems}
+      </ul>
+    </nav>
+  )
+};
+
+SideBar.propTypes = {
+  tabsData: PropTypes.array
+};
+
+export default SideBar;

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.component.scss

@@ -0,0 +1,107 @@
+.c-SideBarTab {
+  
+    a,
+    a:hover,
+    a:focus {
+        color: inherit;
+        text-decoration: none;
+        transition: all 0.3s;
+    }
+
+    i,
+    span {
+        display: inline-block;
+    }
+
+    /* ---------------------------------------------------
+        SIDEBAR STYLE
+    ----------------------------------------------------- */
+    a:hover {
+        color: #7386D5;
+        background: #fff;
+    }
+
+    a i {
+        margin-right: 10px;
+    }
+
+    &.active>a,
+    a[aria-expanded="true"] {
+        color: $theme-supplementer;
+        background:$themeColor-Dark;
+    }
+
+    a[data-toggle="collapse"] {
+        position: relative;
+    }
+
+    .dropdown-toggle::after {
+        display: block;
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+    }
+
+    a.article,
+    a.article:hover {
+        background: #6d7fcc !important;
+        color: #fff !important;
+    }
+
+    /* ---------------------------------------------------
+        CONTENT STYLE
+    ----------------------------------------------------- */
+
+    #content {
+        width: 100%;
+        padding: 20px;
+        min-height: 100vh;
+        transition: all 0.3s;
+    }
+
+    /* ---------------------------------------------------
+        MEDIAQUERIES
+    ----------------------------------------------------- */
+
+    @media (max-width: 768px) {
+        #sidebar {
+            min-width: 80px;
+            max-width: 80px;
+            text-align: center;
+            margin-left: -80px !important;
+            // display: none;
+        }
+        .dropdown-toggle::after {
+            top: auto;
+            bottom: 10px;
+            right: 50%;
+            -webkit-transform: translateX(50%);
+            -ms-transform: translateX(50%);
+            transform: translateX(50%);
+        }
+        a {
+            padding: 20px 10px;
+        }
+        a span {
+            font-size: 0.85em;
+        }
+        a i {
+            margin-right: 0;
+            display: block;
+        }
+        a i {
+            font-size: 1.3em;
+        }
+    }
+/* -------------------------------------------------
+ADDITIONS
+--------------------------------------------------*/
+    .hide {
+        display: none;
+    }
+
+/* --------------------------------------------------
+  OVERRIDES
+  --------------------------------------------------*/
+}

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Link} from 'react-router-dom'
+
+const SideBarTab = ({tab}) => {
+  return (
+    <li className={`${tab.activeClass ? 'active' : ''} c-SideBarTab` }>
+      <Link to={tab.href}>
+        <i className={`fas ${tab.tabImage}`}></i>
+        <span className="hideable hide">{tab.tabText}</span>
+      </Link>
+      {tab.subList && (<ul 
+        className="collapse list-unstyled" 
+        id="pageSubmenu">
+        <li>
+          <Link to="#">Repo</Link>
+        </li>
+        <li>
+          <Link to="#">Issues</Link>
+        </li>
+        <li>
+          <Link to="#">Admin</Link>
+        </li>
+      </ul>)}
+    </li>
+  );
+};
+
+SideBarTab.propTypes = {
+  tab: PropTypes.object
+};
+
+export default SideBarTab;

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import SideBarTab from './SideBarTab';
+
+describe('SideBarTab', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/SideBar/SideBarTab/index.js

@@ -0,0 +1,3 @@
+import SideBarTab from './SideBarTab.jsx';
+
+export default SideBarTab;

client/src/app/components/molecules/SideBar/index.js

@@ -0,0 +1,3 @@
+import SideBar from './SideBar.jsx';
+
+export default SideBar;

client/src/app/components/molecules/SocialLogin/SocialLogin.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {withRouter} from 'react-router-dom'
 import {gapi} from 'gapi-script'
-import styles from './SocialLogin.module.scss';
 
 class SocialLogin extends React.Component{
 
@@ -14,7 +13,7 @@ class SocialLogin extends React.Component{
   }
 
   componentDidMount() {
-    gapi.signin2.render('g-signin2', {
+    gapi && gapi.signin2 && gapi.signin2.render('g-signin2', {
       'scope': 'profile email',
       'width': this.width,
       'height': this.height,
@@ -36,7 +35,7 @@ class SocialLogin extends React.Component{
 
   render() {
     return (
-      <div className={styles['c-SocialLogin']}>
+      <div className='c-SocialLogin'>
         <div className="row">
           <div className="col-12">
             <div className="g-signin2" id="g-signin2"></div>

client/src/app/components/molecules/SocialLogin/index.js

@@ -0,0 +1,3 @@
+import SocialLogin from './SocialLogin.jsx';
+
+export default SocialLogin;

client/src/app/components/molecules/common/CommandPrompt/CommandAndUserTools/CommandAndUserTools.component.scss

@@ -0,0 +1,10 @@
+.c-CommandAndUserTools {
+  .c-commandTools {
+    border-right: 1px solid $theme-supplementer
+  }
+
+  .c-accountTools {
+    right: 2%;
+    position: absolute;
+  }
+}