Adding Button Underlined

src/core/client/stream/components/Auth.css

@@ -0,0 +1,3 @@
+.root {
+  padding: var(--spacing-unit) 0;
+}

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}

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;
+      }
+    }
+  }
+}

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,