From 6ec6ea656453806dcb4da1c949ccf63c43199d15 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma 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 = ({ const { authError, getUserError, checkPermissionsError, getMethodsError } = context const styles = useStyles() + const { t } = useTranslation("loginPage") return isLoading ? ( @@ -61,6 +66,12 @@ export const LoginPageView: FC = ({
+ } + text={t("tipCaption")} + className={styles.pill} + type="secondary" + />

Scheduling

@@ -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: {