fix: styles for <AlertBanner /> (#5579)

jsjoeio · web-flow · commit a231c1a38481 · 2023-01-04T14:46:41.000-07:00
* feat: add new story for LoginPageView

* fix: update &lt;AlertBanner /&gt; styles

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

* fixup: formatting
diff --git 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
@@ -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,
+  },
+}
