From 31835d2b7cfa81c2146a9561f63e88f834738f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 10:04:12 -0300
Subject: [PATCH] Adding Button Underlined

---
 src/core/client/stream/components/Auth.css    |  3 +
 src/core/client/stream/components/Auth.tsx    | 15 +++-
 .../client/ui/components/Button/Button.css    | 70 +++++++++++++++++++
 .../client/ui/components/Button/Button.tsx    |  3 +-
 4 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/components/Auth.css

diff --git a/src/core/client/stream/components/Auth.css b/src/core/client/stream/components/Auth.css
new file mode 100644
index 000000000..aa42b9550
--- /dev/null
+++ b/src/core/client/stream/components/Auth.css
@@ -0,0 +1,3 @@
+.root {
+  padding: var(--spacing-unit) 0;
+}
diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx
index c922ef7ae..168b30d8d 100644
--- a/src/core/client/stream/components/Auth.tsx
+++ b/src/core/client/stream/components/Auth.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import * as styles from "./Auth.css";
 
 import { Button, Flex, Popup, Typography } from "talk-ui/components";
 
@@ -24,12 +25,20 @@ const Auth: StatelessComponent<AuthProps> = props => {
         onBlur={() => props.setFocus(false)}
         onClose={props.closePopup}
       />
-      <Flex justifyContent="center">
-        <Typography>Join the conversation </Typography> |
-        <Button color="primary" onClick={props.openPopup} disabled={props.open}>
+      <Flex itemGutter className={styles.root}>
+        <Typography>Join the conversation </Typography>
+        <span>|</span>
+        <Button
+          size="small"
+          color="primary"
+          variant="underlined"
+          onClick={props.openPopup}
+          disabled={props.open}
+        >
           Sign In
         </Button>
         <Button
+          size="small"
           color="primary"
           variant="outlined"
           onClick={props.openPopup}
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 3a0151ecc..d6153e530 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -280,3 +280,73 @@
     }
   }
 }
+
+.variantUnderlined {
+  padding-right: 0;
+  padding-left: 0;
+  border-radius: 0;
+
+  &.colorRegular {
+    color: var(--palette-grey-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+    border-bottom: 1px solid currentColor;
+  }
+
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-grey-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-success-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+  }
+}
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index fe11b0dfc..c984c2c5e 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,7 +28,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "regular" | "primary" | "error" | "success";
 
   /** Variant of the button */
-  variant?: "regular" | "filled" | "outlined" | "ghost";
+  variant?: "regular" | "filled" | "outlined" | "ghost" | "underlined";
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -72,6 +72,7 @@ export class Button extends React.Component<InnerProps> {
       [classes.variantFilled]: variant === "filled",
       [classes.variantOutlined]: variant === "outlined",
       [classes.variantGhost]: variant === "ghost",
+      [classes.variantUnderlined]: variant === "underlined",
       [classes.fullWidth]: fullWidth,
       [classes.active]: active,
       [classes.disabled]: disabled,