From 3f6e68361eb1d63d083444c3c56e3b7dd0e99279 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 1 Oct 2020 15:16:58 +0300
Subject: [PATCH] Button outlined style

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/button/button.scss | 11 +++++++++++
 src/renderer/components/button/button.tsx  |  5 +++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/button/button.scss b/src/renderer/components/button/button.scss
index e85647ca9f..f586a03c5a 100644
--- a/src/renderer/components/button/button.scss
+++ b/src/renderer/components/button/button.scss
@@ -41,6 +41,17 @@
     }
   }
 
+  &.outlined {
+    color: inherit;
+    background: transparent;
+
+    &.active,
+    &:focus {
+      color: inherit;
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
   &.big {
     font-size: 2.2 * $unit;
     border-radius: 50px;
diff --git a/src/renderer/components/button/button.tsx b/src/renderer/components/button/button.tsx
index c0cb8dcc49..65aa3a979e 100644
--- a/src/renderer/components/button/button.tsx
+++ b/src/renderer/components/button/button.tsx
@@ -9,6 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<any>, TooltipDecorator
   primary?: boolean;
   accent?: boolean;
   plain?: boolean;
+  outlined?: boolean;
   hidden?: boolean;
   active?: boolean;
   big?: boolean;
@@ -23,12 +24,12 @@ export class Button extends React.PureComponent<ButtonProps, {}> {
   private button: HTMLButtonElement;
 
   render() {
-    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props;
+    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, outlined, tooltip, children, ...props } = this.props;
     const btnProps = props as Partial<ButtonProps>;
     if (hidden) return null;
 
     btnProps.className = cssNames('Button', className, {
-      waiting, primary, accent, plain, active, big, round,
+      waiting, primary, accent, plain, active, big, round, outlined
     });
 
     const btnContent: ReactNode = (