New design and migration to emotion(css-in-js) (#107)

* modify landingpage according to mockup

* test netlify deploys

* few suggestion from  #41 (comment)

* migrated header and footer to emotion

* migrated hero and learn section to emotion

* use preact in production

* fix some responsive issues

* add vscode support css autocomplete for emotion

* fix responsive padding issues

* change export routes

* disable eslint and add editorconfig

* make breakpoints consistent

* move images to cloudinary

* few improvements from lighthouse

* fix test and lint issues

* update readme

* extract subject card to file

* migrate space page to emotion

* migrate learn index page to emotion

* trim subtitle text

* change webp to png as most browser doesnt support it

* wip events page

* wip subject page

* update text and youtube link

* change white button hover color

* disable emotion cache

* fix padding issue in learn section

* disable preact due to hydrate bug

* revert hover color on buttons

* reduce timeline icons size

* shadow for buttons removed

* fixed on hover of menu bar items

* transform on card of learn removed,this might change later

* remove semantic-ui-react and ignore .vscode

* remove .vscode/* and jsconfig.json from git cache

* extract prettier config to .prettierrc file

* fix link in discord btn

* disable user-select and add login page

* configure yarnclean

Author: vinaypuppal

Diff for: .babelrc

@@ -12,9 +12,9 @@
   },
   "plugins": [
     [
-      "lodash",
+      "emotion",
       {
-        "id": ["lodash", "semantic-ui-react"]
+        "inline": true
       }
     ]
   ]

Diff for: .editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

Diff for: .gitignore

@@ -45,10 +45,7 @@ node_modules
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
+jsconfig.json
 
 ### Linux ###
 *~

Diff for: .prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true
+}

Diff for: .yarnclean

@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md

Diff for: README.md

@@ -11,7 +11,7 @@
 This project mainly uses
 
 - [Next.js](https://github.com/zeit/next.js/)
-- [Semantic UI React](http://react.semantic-ui.com/introduction)
+- [emotion](https://emotion.sh) As css-in-js library
 
 ### [Join our community here](https://www.coderplex.org)
 

Diff for: __tests__/__snapshots__/common-banner.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing Header of \`components/header\` Check the snapshot 1`] = `<NavBar />`;

Diff for: __tests__/__snapshots__/header.test.js.snap

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Header from '../components/common/header';
+
+describe('Testing Header of `components/header`', () => {
+  const shallowWrapper = shallow(<Header />);
+
+  it('Check the snapshot', () => {
+    expect(shallowWrapper).toMatchSnapshot();
+  });
+  /**
+   * Disable for now
+    it('should have title tag rendered', () => {
+      expect(shallowWrapper.find('h1').length).toBe(1);
+    });
+
+    it('should have subtitle tag rendered', () => {
+      expect(shallowWrapper.find('h2').length).toBe(1);
+    });
+
+    describe('should render the props', () => {
+      const pageTitle = 'title of the page';
+      const pageSubTitle = 'Subtitle of the page';
+      const rootWrapper = shallow(<CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />);
+
+      it('should display title', () => {
+        const headerElement = rootWrapper.find('.headline');
+        expect(headerElement.props().children).toEqual(pageTitle);
+      });
+
+      it('should display subtitle', () => {
+        const subHeaderElement = rootWrapper.find('h2');
+        expect(subHeaderElement.props().children).toEqual(pageSubTitle);
+      });
+    });
+   */
+});

Diff for: __tests__/common-banner.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+
+import { Container, Title, SubTitle } from '../../utils/base.styles';
+
+const BannerSection = styled.section`
+  background: #fbfbfb;
+  background-image: url('https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png');
+  min-height: 150px;
+  text-align: center;
+  ${space};
+`;
+
+export default ({ title, subTitle, textInverted = false }) => (
+  <BannerSection py={[2, 3]} px={[2, 1]}>
+    <Container>
+      <Title inverted={textInverted}>{title}</Title>
+      <SubTitle inverted={textInverted}>{subTitle}</SubTitle>
+    </Container>
+  </BannerSection>
+);