src/components/App.tsx

@@ -13,23 +13,19 @@ class App extends React.Component {
 		return <div>
 			<div className="center-wrapper">
 				<Quick>
-					<QuickCategory name="Cat 1">
+					<QuickCategory name="Productivity">
-						<QuickItem name="Hello World" />
+						<QuickItem name="Nextcloud" url="#"/>
-						<QuickItem name="Hello World" />
+						<QuickItem name="Git" url="#"/>
-						<QuickItem name="Hello World" />
+						<QuickItem name="GitHub" url="https://github.com/"/>
-						<QuickItem name="Hello World" />
 					</QuickCategory>
-					<QuickCategory name="Cat 2">
+
-						<QuickItem name="Hello World" />
+					<QuickCategory name="Personal">
-						<QuickItem name="Hello World" />
+						<QuickItem name="Youtube" url="https://youtube.com/"/>
-						<QuickItem name="Hello World" />
+						<QuickItem name="Reddit" url="https://reddit.com/"/>
-						<QuickItem name="Hello World" />
 					</QuickCategory>
-					<QuickCategory name="Cat 3">
+
-						<QuickItem name="Hello World" />
+					<QuickCategory name="Other">
-						<QuickItem name="Hello World" />
+						<QuickItem name="Bitwarden" url="#"/>
-						<QuickItem name="Hello World" />
-						<QuickItem name="Hello World" />
 					</QuickCategory>
 				</Quick>
 			</div>

src/components/Quick.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
 import "../style/quick.scss";
 
@@ -15,7 +14,6 @@ class Quick extends React.Component<Props> {
 
 	render(): JSX.Element {
 		return <div className="quick-component">
-			<p>Quick list</p>
 			<div className="container">
 				{this.props.children}
 			</div>

src/components/QuickCategory.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
 import "../style/quickCategory.scss";
 
@@ -16,8 +15,12 @@ class QuickCategory extends React.Component<Props> {
 
 	render(): JSX.Element {
 		return <div className="quickCategory-component">
+			<div className="title">
 				{this.props.name}
+			</div>
+			<div className="children">
 				{this.props.children}
+			</div>
 		</div>;
 	}
 

src/components/QuickItem.tsx

@@ -1,20 +1,24 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
 import "../style/quickItem.scss";
 
 interface Props {
 	name: string;
+	url: string;
 }
 
 class QuickItem extends React.Component<Props> {
 
-	constructor(props){
+	constructor(props) {
 		super(props);
 	}
 
+	onClick() {
+		window.location.href = this.props.url;
+	}
+
 	render(): JSX.Element {
-		return <div className="quickItem-component">
+		return <div className="quickItem-component" onClick={() => this.onClick()}>
 			{this.props.name}
 		</div>;
 	}

src/style/default.scss

@@ -1,7 +1,13 @@
 body {
-	background-color: darkgray;
+	background-image: url("./../assets/bg.png");
+	background-size: cover;
+
+	user-select: none;
+
+	color: white;
+	font-family: 'Raleway', sans-serif;
 }
 
 .center-wrapper{
-	margin-top: 30%;
+	margin-top: 25%;
 }

src/style/quick.scss

@@ -1,5 +1,4 @@
 .quick-component {
-	border: 3px solid green;
 	width: 70%;
 	margin: auto;
 

src/style/quickCategory.scss

@@ -1,3 +1,12 @@
 .quickCategory-component{
 
+	.title{
+		line-height: 3em;
+		font-weight: bold;
+		text-decoration: underline; 
+	}
+
+	.children{
+		line-height: 2em;
+	}
 }

src/style/quickItem.scss

@@ -0,0 +1,9 @@
+.quickItem-component{
+	color: rgba(#ffffff, 0.7);
+	cursor: pointer;
+
+	&:hover {
+		color: rgba(#ffffff, 1);
+	}
+
+}