Skip to content
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

Open
wants to merge 15 commits into
base: main
Choose a base branch
from

Conversation

RickDeb2004
Copy link

No description provided.

Copy link

vercel bot commented Mar 11, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
project-udon ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 24, 2024 11:43am

Copy link
Member

@Shurtu-gal Shurtu-gal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Fix this.

key={index}
className='bg-[#ffcccb] p-6 rounded-lg w-full sm:w-80 relative flex-shrink-0'
style={{
borderRadius: '8px',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use tailwind styles.

Comment on lines 34 to 42
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',
}}>
Copy link
Member

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>{' '}
Copy link
Member

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
Copy link
Member

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

Comment on lines 6 to 15
<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',
}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use variants

Copy link
Author

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
image
please check it

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as variant using h1

Copy link
Member

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.

@ashutosh-rath02 ashutosh-rath02 changed the title styled project cards feat: styled project cards Mar 23, 2024
@RickDeb2004
Copy link
Author

@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',
Copy link
Member

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',
}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change to tailwind styles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants