Updated loged in header styles

storybookjs · Jan 28, 2022 · fc1c138 · fc1c138
1 parent 7bc2cfc
commit fc1c138
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx b/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx
@@ -38,7 +38,11 @@ export const Header = ({ user, isLoggedIn, onLogin, onLogout, onCreateAccount }:
         <h1>Acme</h1>
       </div>
       <div>
-        {user && <span>Hello, {user.name}!</span>}
+        {user && (
+          <span className="welcome">
+            Welcome, <b>{user.name}</b>!
+          </span>
+        )}
         {isLoggedIn ? (
           <Button size="small" onClick={onLogout} label="Log out" />
         ) : (

diff --git a/examples/cra-ts-essentials/src/stories/cli-templates/header.css b/examples/cra-ts-essentials/src/stories/cli-templates/header.css
@@ -24,3 +24,9 @@ h1 {
 button + button {
   margin-left: 10px;
 }
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}