techishiring-website
techishiring-website copied to clipboard
Contact Heading and Contact Form Refactor
Description
With the removal of ChakraUI coming soon, I've refactored components that were on the Contact Heading Page and Contact Form Page to utilize tailwind classes for styling. Since these same components exist on other pages, I've also made sure that I wasn't impacting the other pages and any additional attributes that was added on the pages were accounted for. For example, the Button
component can be displayed as a <a>
or a <button>
and the DefaultText
component can be a <p>
or a <span>
.
The following components have been refactored as a result.
- Button
- TextInput
- TextBox
- DefaultText
- HeaderText
- DefaultButton
- Spinner
Some of the components have default styling hardcoding that I took from the ChakraUI component's attributes (matched it as best as I could either using the direct values or using a tailwind class that was close in value). This could be changed or removed at a later time.
Note: This branch branches off of branch 133-set-up-shadcn. I will make sure that this branch is kept up to date with that parent branch. But regardless PR #164 will have to be merged into dev
before this branch can be merged.
Related Issue
Resolves: #134
Motivation and Context
Change is required due to the removal/deprecation of ChakraUI for this project.
How Has This Been Tested?
I tested visually through making sure the styling of the previous components matches exactly or closest to the old ChakraUI styling via tailwind classes. And went through to double check other pages that utilize the components that were refactored to make sure there weren't any styling or type issues.
Screenshots (if appropriate):
Incompatibility
The Spinner Component doesn't have an equivalent component in ShadCN UI's library. I created a customized solution for the spinner that could work. This could be replaced at a later time should a ShadCN UI equivalent come out.
Future Considerations
Some future considerations of refactoring, some which have been mentioned in #138
- Button Component could be replaced by ShadCN UI Button component
- TextBox Component could be replaced by ShadCN UI Textarea component
- TextInput Component could be replaced by ShadCN UI Input component
- HeaderText Component could just be replaced by native H1-H6 HTML elements
- DefaultText Component could just be replaced by native
<p>
and<span>
HTML elements
Someone is attempting to deploy a commit to a Personal Account owned by @TechIsHiring on Vercel.
@TechIsHiring first needs to authorize it.
@chadstewart Almost done with this PR. I've noted a few things including no current replacement for the Spinner Component in the ShadCN UI. Is there an alternative that you were thinking for this?
@chadstewart Almost done with this PR. I've noted a few things including no current replacement for the Spinner Component in the ShadCN UI. Is there an alternative that you were thinking for this?
@chadstewart I created a custom spinner component in the meantime that could take it's place. This should be good to go and ready for review.