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

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

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