From 6ec6ea656453806dcb4da1c949ccf63c43199d15 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 29 Nov 2022 19:57:50 +0000
Subject: [PATCH] refactor: Add coder tip pill on sign in page

---
 site/src/i18n/en/loginPage.json            |  3 ++-
 site/src/pages/LoginPage/LoginPageView.tsx | 30 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/site/src/i18n/en/loginPage.json b/site/src/i18n/en/loginPage.json
index 329dc925a2e8e..dad411cba4425 100644
--- a/site/src/i18n/en/loginPage.json
+++ b/site/src/i18n/en/loginPage.json
@@ -1,3 +1,4 @@
 {
-  "signInTo": "Sign in to"
+  "signInTo": "Sign in to",
+  "tipCaption": "Coder Tip"
 }
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
index bd15ed218c463..4c8748073f9d9 100644
--- a/site/src/pages/LoginPage/LoginPageView.tsx
+++ b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -6,6 +6,10 @@ import { useLocation } from "react-router-dom"
 import { AuthContext } from "xServices/auth/authXService"
 import { LoginErrors, SignInForm } from "components/SignInForm/SignInForm"
 import { retrieveRedirect } from "util/redirect"
+import { Pill } from "components/Pill/Pill"
+import { useTranslation } from "react-i18next"
+import IdeaIcon from "@material-ui/icons/EmojiObjects"
+import { colors } from "theme/colors"
 
 interface LocationState {
   isRedirect: boolean
@@ -31,6 +35,7 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
   const { authError, getUserError, checkPermissionsError, getMethodsError } =
     context
   const styles = useStyles()
+  const { t } = useTranslation("loginPage")
 
   return isLoading ? (
     <FullScreenLoader />
@@ -61,6 +66,12 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 
       <div className={styles.right}>
         <div className={styles.tipWrapper}>
+          <Pill
+            icon={<IdeaIcon className={styles.pillIcon} />}
+            text={t("tipCaption")}
+            className={styles.pill}
+            type="secondary"
+          />
           <div className={styles.tipContent}>
             <h2 className={styles.tipTitle}>Scheduling</h2>
             <p>
@@ -132,6 +143,25 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
+    position: "relative",
+  },
+
+  pill: {
+    position: "absolute",
+    top: theme.spacing(3),
+    right: theme.spacing(3),
+    fontWeight: 600,
+    fontSize: 10,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    background: theme.palette.divider,
+    border: 0,
+    padding: theme.spacing(0, 1.5),
+    height: theme.spacing(3.5),
+  },
+
+  pillIcon: {
+    color: colors.yellow[5],
   },
 
   tipContent: {