diff --git a/src/assets/bg.png b/src/assets/bg.png new file mode 100644 index 0000000..385eb0d Binary files /dev/null and b/src/assets/bg.png differ diff --git a/src/components/App.tsx b/src/components/App.tsx index afe68b5..1efb0a4 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -13,23 +13,19 @@ class App extends React.Component { return
- - - - - + + + + - - - - - + + + + - - - - - + + +
diff --git a/src/components/Quick.tsx b/src/components/Quick.tsx index 5d04ae9..11be145 100644 --- a/src/components/Quick.tsx +++ b/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 { render(): JSX.Element { return
-

Quick list

{this.props.children}
diff --git a/src/components/QuickCategory.tsx b/src/components/QuickCategory.tsx index 482da47..d784a51 100644 --- a/src/components/QuickCategory.tsx +++ b/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 { render(): JSX.Element { return
- {this.props.name} - {this.props.children} +
+ {this.props.name} +
+
+ {this.props.children} +
; } diff --git a/src/components/QuickItem.tsx b/src/components/QuickItem.tsx index c9c6e6d..08400dd 100644 --- a/src/components/QuickItem.tsx +++ b/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 { - constructor(props){ + constructor(props) { super(props); } + onClick() { + window.location.href = this.props.url; + } + render(): JSX.Element { - return
+ return
this.onClick()}> {this.props.name}
; } diff --git a/src/style/default.scss b/src/style/default.scss index 44b2ed7..d4ec085 100644 --- a/src/style/default.scss +++ b/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%; } \ No newline at end of file diff --git a/src/style/quick.scss b/src/style/quick.scss index 9c89e27..30d5eae 100644 --- a/src/style/quick.scss +++ b/src/style/quick.scss @@ -1,5 +1,4 @@ .quick-component { - border: 3px solid green; width: 70%; margin: auto; diff --git a/src/style/quickCategory.scss b/src/style/quickCategory.scss index 36db9a4..ac57124 100644 --- a/src/style/quickCategory.scss +++ b/src/style/quickCategory.scss @@ -1,3 +1,12 @@ .quickCategory-component{ + .title{ + line-height: 3em; + font-weight: bold; + text-decoration: underline; + } + + .children{ + line-height: 2em; + } } \ No newline at end of file diff --git a/src/style/quickItem.scss b/src/style/quickItem.scss index e69de29..435c64a 100644 --- a/src/style/quickItem.scss +++ b/src/style/quickItem.scss @@ -0,0 +1,9 @@ +.quickItem-component{ + color: rgba(#ffffff, 0.7); + cursor: pointer; + + &:hover { + color: rgba(#ffffff, 1); + } + +} \ No newline at end of file