senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling for buttons

Browse Source
This commit is contained in:
Moris Zen
2018-07-04 20:37:35 +02:00
parent 6df7085f1b
commit d4e662be82
2 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Button.js
View File

@@ -1,14 +1,22 @@
import React from 'react'
import Link from 'gatsby-link'
let defaultClasses = 'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'
let defaultClasses =
'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'
let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
let filledBtn = 'text-grey-lightest bg-grey-darkest hover:bg-teal'
const Button = ({ ...props }) => (
<Link to={props.url} className={`${props.standard ? standardBtn : ''} ${props.filled ? filledBtn : ''} ${defaultClasses} ${props.classes}`}>{props.text}</Link>
<Link
to={props.url}
className={`${props.standard ? standardBtn : ''} ${
props.filled ? filledBtn : ''
} ${defaultClasses} ${props.classes}`}
>
{props.text}
</Link>
)
export default Button
export default Button

25
src/pages/index.js
View File

@@ -69,24 +69,37 @@ const IndexPage = () => (
/>
</svg>
<Service img={ImgDesign} title="UX & UI Design" text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis" />
<Service
img={ImgDesign}
title="UX & UI Design"
text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis"
/>
<Service img={ImgFullstack} title="Fullstack Web Development" text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time" />
<Service
img={ImgFullstack}
title="Fullstack Web Development"
text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"
/>
<Service img={ImgMobile} imgClasses="max-h-sm" title="Mobile Development" text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once" />
<Service
img={ImgMobile}
imgClasses="max-h-sm"
title="Mobile Development"
text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once"
/>
<div className="lg:flex justify-center">
<div className="p-8 text-center lg:flex justify-center">
<Button
standard
text="More About What We Do"
url="/services"
classes="rounded-full"
classes="m-1 rounded-full text-black hover:shadow"
/>
<Button
standard
text="How We Work"
url="/work"
classes="rounded-full"
classes="m-1 rounded-full text-black hover:shadow"
/>
</div>
</section>