-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: styled project cards #15
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key={index} | ||
className='bg-[#ffcccb] p-6 rounded-lg w-full sm:w-80 relative flex-shrink-0' | ||
style={{ | ||
borderRadius: '8px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use tailwind styles.
className='bg-[#ff8c69] text-white px-3 py-1 rounded-full text-sm absolute -mt-10 ml-60' | ||
style={{ | ||
borderRadius: '9px', | ||
border: '2px solid #000', | ||
background: 'var(--Accent-Yellow, #F2DA05)', | ||
whiteSpace: 'nowrap', | ||
width: 'auto', | ||
fontSize: '14px', | ||
}}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are we using inline-styling
<ul className='text-[#d45500]'> | ||
{event.agenda.map((item, index) => ( | ||
<li key={index}> | ||
<Text style={{ color: '#000', fontSize: '16px' }}>{item}</Text>{' '} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Modify inline styling
WebkitTextStrokeWidth: 2.71052622795105, | ||
WebkitTextStrokeColor: '#252525', | ||
}}> | ||
Events |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Store the text in a constants file
<div className='p-8' style={{ border: '1px solid red' }}> | ||
<Heading | ||
variant='h1' | ||
className='text-primary-yellow text-center' | ||
style={{ | ||
fontSize: '80px', | ||
textShadow: '4.608px 4.608px 0px #000', | ||
WebkitTextStrokeWidth: 2.71052622795105, | ||
WebkitTextStrokeColor: '#252525', | ||
}}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use variants
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use variants
@ORKO06 Actually the typography defined in the code and the typography displayed in the figma not matched, so to get that desired output I have used style , if I remove this then the output is
please check it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as variant using h1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Another variant could be added the required styles in Heading component.
…oText1 for Events heading
@Shurtu-gal review and help me to fix the typo for events and the arrow image alignment |
key={index} | ||
className='p-6 rounded-lg flex-shrink-0 relative w-auto bg-[#FF9E7C]' | ||
style={{ | ||
borderRadius: '8px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove redundant styling
style={{ | ||
borderRadius: '9px', | ||
border: '2px solid #000', | ||
}}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change to tailwind styles
No description provided.