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.

Sign up for GitHub

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

Jump to bottom

Create custom Button Component #124

Closed
ryandotfurrer opened this issue Apr 10, 2024 · 1 comment · Fixed by #132
Closed

Create custom Button Component #124

ryandotfurrer opened this issue Apr 10, 2024 · 1 comment · Fixed by #132
Assignees
@ryandotfurrer
Labels
point-1 within 1/2 day UI/UX
Milestone
MVP

Comments

@ryandotfurrer
Copy link
Member

  • Use Shadcn as the base
  • Extend Shadcn to create our own component. For instance, button will extend shadcn's button. But our button only uses the variation for our designs.
    • Create variant for our design(s)
  • Create PR for review of the construction of this component.
    • After approval, move onto unit tests.
@ryandotfurrer ryandotfurrer self-assigned this Apr 10, 2024
@shashilo shashilo moved this from Tasks To Do to In Progress in Gridiron Survivor Sprint Board Apr 11, 2024
@ryandotfurrer ryandotfurrer moved this from In Progress to Blocked in Gridiron Survivor Sprint Board Apr 12, 2024
@ryandotfurrer
Copy link
Member Author

Will begin after completing #127

@ryandotfurrer ryandotfurrer moved this from Blocked to Tasks To Do in Gridiron Survivor Sprint Board Apr 12, 2024
@ryandotfurrer ryandotfurrer added the point-1 within 1/2 day label Apr 12, 2024
@ryandotfurrer ryandotfurrer moved this from Tasks To Do to In Progress in Gridiron Survivor Sprint Board Apr 12, 2024
@ryandotfurrer ryandotfurrer mentioned this issue Apr 13, 2024
Merged
@ryandotfurrer ryandotfurrer linked a pull request Apr 13, 2024 that will close this issue
Created custom button variants #132
Merged
@ryandotfurrer ryandotfurrer mentioned this issue Apr 13, 2024
Closed
4 tasks
@shashilo shashilo added this to the MVP milestone Apr 18, 2024
shashilo added a commit that referenced this issue Apr 25, 2024
@ryandotfurrer @shashilo
Created custom button variants (#132)
ec0d34b 
Closes issue #124 
## Change Description(s)
-Edited Button component to customize to our colors
- Commented out the initial "default" and "outline" variants and made my
own.
- [Our
design](https://www.figma.com/file/jJXt7OmmwSvHLpkFa8zEDh/Gridiron-Survivor-App?type=design&node-id=1-153&mode=design&t=yuGQC9u2T3Dxgmvn-0)
currently only uses one type of button, but I thought it wise to at
least add one other variant.
- ![Screenshot of Gridiron Survivor login
screen](https://github.com/LetsGetTechnical/gridiron-survivor/assets/40150036/d1b16b72-884a-40cf-a8f3-ca775443b9de)
- I also edited the base button component, not just our variants, to be
the full-width of their container as no part of our design has a button
that is not as wide as the parent container.
## Finished Results
Below is a screenshot of their buttons. I placed them inside a div with
a border and some padding so you could see that they are the full-width
of the parent container (minus the padding).

![Screenshot of current Gridiron Survivor homepage showcasing the two
button
variants](https://github.com/LetsGetTechnical/gridiron-survivor/assets/40150036/334f1ec5-c184-433c-ae14-71fb7277576d)

---------

Co-authored-by: Shashi Lo <[email protected]>
@github-project-automation github-project-automation bot moved this from In Progress to Done in Gridiron Survivor Sprint Board Apr 25, 2024
Clue355 pushed a commit that referenced this issue May 1, 2024
@ryandotfurrer @shashilo @Clue355
Created custom button variants (#132)
c3c051c 
Closes issue #124 
## Change Description(s)
-Edited Button component to customize to our colors
- Commented out the initial "default" and "outline" variants and made my
own.
- [Our
design](https://www.figma.com/file/jJXt7OmmwSvHLpkFa8zEDh/Gridiron-Survivor-App?type=design&node-id=1-153&mode=design&t=yuGQC9u2T3Dxgmvn-0)
currently only uses one type of button, but I thought it wise to at
least add one other variant.
- ![Screenshot of Gridiron Survivor login
screen](https://github.com/LetsGetTechnical/gridiron-survivor/assets/40150036/d1b16b72-884a-40cf-a8f3-ca775443b9de)
- I also edited the base button component, not just our variants, to be
the full-width of their container as no part of our design has a button
that is not as wide as the parent container.
## Finished Results
Below is a screenshot of their buttons. I placed them inside a div with
a border and some padding so you could see that they are the full-width
of the parent container (minus the padding).

![Screenshot of current Gridiron Survivor homepage showcasing the two
button
variants](https://github.com/LetsGetTechnical/gridiron-survivor/assets/40150036/334f1ec5-c184-433c-ae14-71fb7277576d)

---------

Co-authored-by: Shashi Lo <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ryandotfurrer ryandotfurrer

Labels
point-1 within 1/2 day UI/UX
Projects
Gridiron Survivor Sprint Board
Archived in project
Milestone
MVP
Development

Successfully merging a pull request may close this issue.

Created custom button variants LetsGetTechnical/gridiron-survivor
2 participants
@shashilo @ryandotfurrer