diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index 5e602d48..7363ba19 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -2,14 +2,25 @@
.root {
@apply --marketplaceButtonStyles;
+
+ /* Clear padding that is set for link elements looking like buttons */
+ padding: 0;
}
.primaryButton {
@apply --marketplaceButtonStylesPrimary;
+
+ /* Clear padding that is set for link elements looking like buttons */
+ padding: 0;
}
.secondaryButton {
@apply --marketplaceButtonStylesSecondary;
+
+ /* We must lift up the text from the center since it looks better with
+ the button border. Also clears the top padding set for link
+ elements looking like buttons */
+ padding: 0 0 2px 0;
}
.inlineTextButton {
diff --git a/src/components/Button/Button.example.css b/src/components/Button/Button.example.css
index 2c46adc8..ad984d2d 100644
--- a/src/components/Button/Button.example.css
+++ b/src/components/Button/Button.example.css
@@ -14,6 +14,14 @@
.customButton {
@apply --marketplaceButtonStyles;
+ padding: 0;
border-radius: 8px;
height: 100px;
}
+
+.searchIcon {
+ width: 16px;
+ height: 16px;
+ stroke: #fff;
+ margin-right: 10px;
+}
diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js
index 026699d6..66c67447 100644
--- a/src/components/Button/Button.example.js
+++ b/src/components/Button/Button.example.js
@@ -1,5 +1,6 @@
/* eslint-disable jsx-a11y/href-no-hash */
import React, { Component } from 'react';
+import { IconSearch } from '../../components';
import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
import css from './Button.example.css';
@@ -21,6 +22,8 @@ class InteractiveButton extends Component {
}
render() {
const handleClick = () => {
+ window.clearTimeout(this.inProgressTimeoutId);
+ window.clearTimeout(this.readyTimeoutId);
this.setState({ inProgress: true, disabled: true });
this.inProgressTimeoutId = window.setTimeout(
() => {
@@ -46,6 +49,15 @@ const ButtonsComponent = () => {
Interactive button:
+ Button with a translation:
+
+
+ Button with an icon and a text:
+
+
Default button:
@@ -79,7 +91,7 @@ const ButtonsComponent = () => {
Primary button disabled and in progress:
Click me
- Primary button disabled ready:
+ Primary button disabled and ready:
Click me
Secondary button:
@@ -97,7 +109,7 @@ const ButtonsComponent = () => {
Secondary button disabled and in progress:
Click me
- Secondary button disabled ready:
+ Secondary button disabled and ready:
Click me
Inline text button:
@@ -109,6 +121,11 @@ const ButtonsComponent = () => {
Link that looks like a default button:
Click me
+ Translated link that looks like a default button:
+
+ Clique moi
+
+
Link that looks like a primary button:
Click me
diff --git a/src/marketplace.css b/src/marketplace.css
index 49bd86d2..f6c484bc 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -152,18 +152,14 @@
@apply --marketplaceButtonFontStyles;
/* Dimensions */
- display: flex;
+ display: block;
width: 100%;
min-height: 65px;
margin: 0;
- /* Center contents within flexbox */
- flex-direction: row;
- align-items: center;
- justify-content: center;
-
- /* Push the text up from center */
- padding-bottom: 2px;
+ /* Padding is only for elements where button styles are applied,
+ buttons elements should have zero padding */
+ padding: 20px 0 0 0;
/* Borders */
border: none;
@@ -178,11 +174,11 @@
text-decoration: none;
/* Effects */
-
transition: all var(--transitionStyleButton);
+ cursor: pointer;
- &:enabled:hover,
- &:enabled:focus {
+ &:hover,
+ &:focus {
outline: none;
background-color: var(--marketplaceColorDark);
text-decoration: none;
@@ -192,9 +188,7 @@
background-color: var(--matterColorNegative);
color: var(--matterColorLight);
cursor: not-allowed;
- }
- &:enabled {
- cursor: pointer;
+ box-shadow: none;
}
}
--marketplaceButtonStylesPrimary {
@@ -203,10 +197,14 @@
background-color: var(--successColor);
color: var(--matterColorLight);
- &:enabled:hover,
- &:enabled:focus {
+ &:hover,
+ &:focus {
background-color: var(--successColorDark);
}
+ &:disabled {
+ background-color: var(--matterColorNegative);
+ color: var(--matterColorLight);
+ }
}
--marketplaceButtonStylesSecondary {
@apply --marketplaceButtonStyles;
@@ -214,15 +212,24 @@
background-color: var(--matterColorLight);
color: var(--matterColor);
+ /* Padding is only for elements where button styles are applied,
+ buttons elements should have zero padding */
+ padding: 18px 0 0 0;
+
border-width: 1px;
border-style: solid;
border-color: var(--matterColorNegative);
- &:enabled:hover,
- &:enabled:focus {
+ &:hover,
+ &:focus {
background-color: var(--matterColorLight);
border-color: var(--matterColorAnti);
}
+ &:disabled {
+ background-color: var(--matterColorNegative);
+ color: var(--matterColorLight);
+ border-color: var(--matterColorNegative);
+ }
}