From deb1920c03e80dfec7f955239a8d02ebf27bf884 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Feb 2023 21:24:58 -0600
Subject: [PATCH] Storybook: add hardcoded color variables, fix missing import

---
 .storybook/preview.ts |   1 +
 stories/Header.tsx    |   9 +++++----
 stories/theme.css     | Bin 0 -> 2305 bytes
 3 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 stories/theme.css

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 331938e1ea..c876c5abf9 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import '../app/styles/tailwind.css';
+import '../stories/theme.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
diff --git a/stories/Header.tsx b/stories/Header.tsx
index 99fd34d618..a9007d99fc 100644
--- a/stories/Header.tsx
+++ b/stories/Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button } from './Button';
+import Button from '../app/soapbox/components/ui/button/button';
+
 import './header.css';
 
 type User = {
@@ -42,12 +43,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
             <span className='welcome'>
               Welcome, <b>{user.name}</b>!
             </span>
-            <Button size='small' onClick={onLogout} label='Log out' />
+            <Button size='sm' onClick={onLogout} text='Log out' />
           </>
         ) : (
           <>
-            <Button size='small' onClick={onLogin} label='Log in' />
-            <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
+            <Button size='sm' onClick={onLogin} text='Log in' />
+            <Button theme='primary' size='sm' onClick={onCreateAccount} text='Sign up' />
           </>
         )}
       </div>
diff --git a/stories/theme.css b/stories/theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..cf6b093c4465e5f2cdd4e587db2db07702484e7e
GIT binary patch
literal 2305
zcmaKt!E&205Qgu5ialq>36hWi_u6|7%?n_oxU>#rfJ~F=^xgaKN)A!1cqTgWWf9;0
zyS}@jA7lHxA782SkL}B8p~H9@r<oqdi5}Yi^rs)X+YJ#t+<(8{(a{fnY8Ow-&mK^J
z^0a@W$+ulU9I2(J@$j4GQ1bTIJPx;XbGO+|<G9dYl-X{j{`Pt5pW5kdYl|J}QsXqF
zt@)NgRKbiXz!)$p$7p6$gF3ndXLF2UrfNvJ8d#k}N=9r+%37|JLo6d8_&&<z2p0)e
z;YQgS6%&S<8h6pT5;X&gOhYdFDNT5;EtQFm`Q>o%^Bk?>h8D)k<PK*fSk=tHn#q<4
zR_h8iaEe6PxsF&>2G(&~RVANuW<+ZRL~By1`7<I~QAITsrP9uXXypRVP?h~8(W(`{
zf?W24#4Fb*6xr-m#VoAUhSC&u?Qrx{FpGqQ%qArw5yUd09iNZ=jfi;Fj1+KR<f@2P
zZjEx5Po|1k)g?lt44(`lR=F{Vyi3{_ZxW>zWNQ3nDu`26V;nFvIUq!pbB2ginF=AR
z{1g-3d<2eDdtLx2ZaIp@#q*%ERGed+M5h!8GSPO-G(woj6d)wj!c&FQB*73sM5>ZK
zV`S?~Kr||zXMqyaQb9DT0u>D6S0)++5RElnUtmb|<sHSM!8n&xUOEb)L{!kE&$sJ(
zKP=mMX{Y6jz0_hS012B`HYo3fkD?<H7cHwsx6)ojB<@+n!64k}W{HUC#-~cQb?!al
z+wrWUqbdp2`(1heIdlw}DH0)(2*y#vL3o|35t54m;;mwnmc$w&-SWP7xoe7bL-_ad
zQ!G7v`d9c?*c1xcH|aj|hjHlEU$?CD`5n5ZeWk9MU#TndSLllW6$+WpwqS*>bYX?A
jG-8Fm>cvWY)sEQA{prQa09^j;VgkdI_@PT<^>6bZ=lWgD

literal 0
HcmV?d00001