Made basic style

Signed-off-by: Jaid <jaid.jsx@gmail.com>

package.json

@@ -10,7 +10,9 @@
     "debug": "^4.1.1",
     "immer": "^3.1.3",
     "lodash": "^4.17.11",
+    "magina": "^1.1.0",
     "modern-normalize": "^0.5.0",
+    "moment": "^2.24.0",
     "query-string": "^6.7.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/App/index.js

@@ -2,19 +2,14 @@ import React from "react"
 import PropTypes from "prop-types"
 import {connect} from "react-redux"
 import classnames from "classnames"
+import PatchList from "components/PatchList"
 
 import css from "./style.scss"
 
 export default class App extends React.Component {
 
-  static propTypes = {
-  }
-
-  static defaultProps = {
-  }
-
   render() {
-    return "a"
+    return <div className={css.container}><PatchList/></div>
   }
 
 }

src/components/App/style.scss

@@ -1,43 +1,24 @@
 @import url("modern-normalize");
+@import url("https://fonts.googleapis.com/css?family=Ramabhadra&display=swap&subset=telugu");
+@import url('https://fonts.googleapis.com/css?family=Assistant:300&display=swap&subset=hebrew');
+@import url('https://fonts.googleapis.com/css?family=Hind&display=swap&subset=devanagari,latin-ext');
 
 body {
-  color: #DCDDDE;
-  background: #1e1e1e;
+  color     : #DCDDDE;
+  background: black;
+  max-width : 800px;
+  margin    : 0 auto;
 }
 
 ::-webkit-scrollbar {
   width: 2px;
 }
 
 ::-webkit-scrollbar-thumb {
-  width: 2px;
+  width     : 2px;
   background: rgba(255, 255, 255, 0.1);
 }
 
 .container {
-  display: flex;
-}
-
-.previews {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-  height: 100vh;
-  max-width: 200px;
-}
-
-.previewsRight {
-  flex-direction: row-reverse;
-}
-
-.controls {
-  height: 100vh;
-  overflow: auto;
-  padding: 8px;
-}
-
-.control {
-  margin: 0.5em;
+  margin-top: 20px;
 }

src/components/PatchBlock/index.js

@@ -0,0 +1,43 @@
+import React from "react"
+import PropTypes from "prop-types"
+import classnames from "classnames"
+import patchData from "src/data/patches"
+import moment from "moment"
+
+import css from "./style.scss"
+
+const getHeaderText = patch => {
+  const agoString = moment(patch.date, "DD.MM.YYYY").fromNow()
+  if (patch.title) {
+    return {
+      title: patch.title,
+      info: path.semver + " - " + agoString
+    }
+  } else {
+    return {
+      title: "Patch " + patch.semver,
+      info: agoString
+    }
+  }
+}
+
+export default class PatchBlock extends React.Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+    patch: PropTypes.object.isRequired
+  }
+
+  render() {
+    const headerText = getHeaderText(this.props.patch)
+
+    return <div className={classnames(css.container, this.props.className)}>
+      <div className={css.header}>
+        <div className={css.headerInfo}>{headerText.info}</div>
+        <div className={css.title}>{headerText.title}</div>
+      </div>
+      <div className={css.content}>Content</div>
+    </div>
+  }
+
+}

src/components/PatchBlock/style.scss

@@ -0,0 +1,18 @@
+.header {
+  background    : rgb(149, 27, 27);
+  padding       : 10px 16px;
+  text-transform: uppercase;
+}
+
+.headerInfo {
+  font-family  : Hind, sans-serif;
+  color        : #FFFFFF99;
+  margin-bottom: -6px;
+}
+
+.title {
+  font-family: Ramabhadra,
+    sans-serif;
+  font-size: 130%;
+  color    : white;
+}

src/components/PatchList/index.js

@@ -0,0 +1,22 @@
+import React from "react"
+import PropTypes from "prop-types"
+import classnames from "classnames"
+import patchData from "src/data/patches.yml"
+import PatchBlock from "components/PatchBlock"
+
+import css from "./style.scss"
+
+export default class PatchList extends React.Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+  }
+
+  render() {
+    const patchBlocks = patchData.map(patch => <PatchBlock patch={patch}/>)
+    return <div className={classnames(css.container, this.props.className)}>
+      {patchBlocks}
+    </div>
+  }
+
+}

src/data/patches.js

@@ -0,0 +1,3 @@
+import patches from "./patches.yml"
+
+export default patches