update

Author: Kakuev

dist/bundle.css

@@ -13,12 +13,16 @@
 .flex-wrap {
   flex-wrap: wrap; }
 
+button::-moz-focus-inner,
+button:focus::-moz-focus-inner {
+  border: 0; }
+
 .btn {
-  padding: 0.3em 1em;
   border: 1px solid #d3d3d3;
   background: white;
-  transition: all 0.2s;
-  outline: none; }
+  transition: all 0.2s; }
+  .btn:focus {
+    outline: 0; }
   .btn:hover {
     cursor: pointer; }
   .btn:disabled {
@@ -27,6 +31,10 @@
 .round-btn {
   border-radius: 30px; }
 
+.primary-btn,
+.secondary-btn {
+  padding: 0.7em 1.5em; }
+
 .primary-btn {
   border: 1px solid #b515cf;
   color: white;

dist/index.js

@@ -108,7 +108,7 @@ function (_Component) {
     key: "render",
     value: function render() {
       return React.createElement("button", {
-        className: "btn ".concat(this.props.primary ? 'primary-btn' : 'secondary-btn'),
+        className: "text-uppercase text-bold btn ".concat(this.props.primary ? 'primary-btn' : 'secondary-btn'),
         onClick: this.props.clickAction,
         disabled: this.props.disabled
       }, this.props.children);
@@ -176,7 +176,7 @@ function (_Component) {
       this.setState({
         checked: e.target.id
       });
-      this.props.action(e.target.value);
+      this.props.action(e.target);
     }
   }, {
     key: "openMore",
@@ -210,7 +210,7 @@ function (_Component) {
       return React.createElement("form", {
         action: "",
         className: "flex justify-content-center align-items-center flex-column"
-      }, options.length <= 3 && options, options.length > 3 && options.slice(0, 3), !this.state.showHidden && React.createElement("label", {
+      }, options.length <= 4 && options, options.length > 4 && options.slice(0, 3), !this.state.showHidden && options.length > 4 && React.createElement("label", {
         htmlFor: "more",
         className: "single-option ".concat(this.state.checked === 'more' ? 'checked-option' : '')
       }, React.createElement("input", {

src/components/Btn/index.js

@@ -8,7 +8,7 @@ class Btn extends Component {
 	render() {
 		return (
 			<button
-				className={`btn ${this.props.primary ? 'primary-btn' : 'secondary-btn'}`}
+				className={`text-uppercase text-bold btn ${this.props.primary ? 'primary-btn' : 'secondary-btn'}`}
 				onClick={this.props.clickAction}
 				disabled={this.props.disabled}
 			>

src/components/OptionsList/index.js

@@ -16,7 +16,7 @@ class OptionsList extends Component {
 			checked: e.target.id
 		});
 
-		this.props.action(e.target.value);
+		this.props.action(e.target);
 	}
 
 	openMore(e) {
@@ -52,9 +52,10 @@ class OptionsList extends Component {
 
 		return (
 			<form action="" className="flex justify-content-center align-items-center flex-column">
-				{options.length <= 3 && options}
-				{options.length > 3 && options.slice(0, 3)}
-				{!this.state.showHidden && (
+				{options.length <= 4 && options}
+				{options.length > 4 && options.slice(0, 3)}
+				{!this.state.showHidden &&
+				options.length > 4 && (
 					<label
 						htmlFor="more"
 						className={`single-option ${this.state.checked === 'more' ? 'checked-option' : ''}`}

src/style/_buttons.scss

@@ -1,9 +1,16 @@
+button::-moz-focus-inner,
+button:focus::-moz-focus-inner {
+	border: 0;
+}
+
 .btn {
-	padding: 0.3em 1em;
 	border: 1px solid $colorGrey;
 	background: $colorWhite;
 	transition: all 0.2s;
-	outline: none;
+
+	&:focus {
+		outline: 0;
+	}
 
 	&:hover {
 		cursor: pointer;
@@ -18,6 +25,11 @@
 	border-radius: 30px;
 }
 
+.primary-btn,
+.secondary-btn {
+	padding: 0.7em 1.5em;
+}
+
 .primary-btn {
 	border: 1px solid $themeColor;
 	color: $colorWhite;