From a231c1a38481e2b04c648d2d291ae28738df84ad Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Wed, 4 Jan 2023 14:46:41 -0700
Subject: [PATCH] fix: styles for <AlertBanner /> (#5579)

* feat: add new story for LoginPageView

* fix: update <AlertBanner /> styles

- align text to the left
- add padding to the top of span inside

* fixup: formatting
---
 site/src/components/AlertBanner/AlertBanner.tsx    |  5 +++++
 site/src/pages/LoginPage/LoginPageView.stories.tsx | 13 +++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
index d2d1c06bee..05cd96a328 100644
--- a/site/src/components/AlertBanner/AlertBanner.tsx
+++ b/site/src/components/AlertBanner/AlertBanner.tsx
@@ -96,6 +96,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     borderRadius: theme.shape.borderRadius,
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
     backgroundColor: `${colors.gray[16]}`,
+    textAlign: "left",
+
+    "& span": {
+      paddingTop: `${theme.spacing(0.25)}px`,
+    },
 
     // targeting the alert icon rather than the expander icon
     "& svg:nth-child(2)": {
diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx
index 9ecacde906..057e4760ad 100644
--- a/site/src/pages/LoginPage/LoginPageView.stories.tsx
+++ b/site/src/pages/LoginPage/LoginPageView.stories.tsx
@@ -17,3 +17,16 @@ Example.args = {
   onSignIn: action("onSignIn"),
   context: {},
 }
+
+const err = new Error(
+  "You are signed out or your session has expired. Please sign in again to continue.",
+)
+
+export const AuthError = Template.bind({})
+AuthError.args = {
+  isLoading: false,
+  onSignIn: action("onSignIn"),
+  context: {
+    authError: err,
+  },
+}