Add hero buttons

This commit is contained in:
Jan Tuomi
2018-11-16 23:04:23 +02:00
parent 00eb1c459a
commit 5eaf6ec459
3 changed files with 19 additions and 6 deletions
+12 -5
View File
@@ -3,14 +3,21 @@
.button {
-webkit-appearance: none;
border-radius: none;
padding: 0.5rem 1rem;
padding: 0.8rem 2rem;
margin: 0.5rem;
border: 2px solid $blue;
font-size: 1rem;
font-weight: 500;
font-size: 10px;
background: none;
text-transform: uppercase;
&.hero {
background-color: $dark-blue;
color: $blue;
font-weight: 500;
letter-spacing: 1.5px;
border: 1px solid $white;
}
&:hover {
border: 2px solid $dark-blue;
cursor: pointer;
}
+4 -1
View File
@@ -3,12 +3,15 @@ import "./Button.scss";
export interface ButtonProps {
onClick: () => void;
type: string;
}
export default class Button extends React.Component<ButtonProps, undefined> {
render() {
const { type } = this.props;
const className = `button ${type}`;
return (
<button onClick={this.props.onClick} className="button">
<button onClick={this.props.onClick} className={className}>
{this.props.children}
</button>
);
+3
View File
@@ -11,6 +11,7 @@ import PageSection from "../../components/PageSection";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import HeroMainSection from "../../components/HeroMainSection";
import HeroAsideSection from "../../components/HeroAsideSection";
import Button from "../../components/Button";
interface FrontPageProps {
staticContext: StaticContext;
@@ -71,6 +72,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
avainasemassa vauhdilla sähköistyvän maailmamme
kehityksessä.</p>
<Button type="hero" onClick={() => { }}>Killan tehtävät </Button>
<Button type="hero" onClick={() => { }}>Vastapainoa opiskelulle </Button>
</HeroMainSection>
<HeroAsideSection>
Kikkeli