Issue 16 create feature box component#19
Merged
Conversation
Created the component as FeatureBox with two props: width and height, so you can dynamically change its size
Contributor
|
would you please be able to include a screenshot of the component in the PR description? thanks! |
Collaborator
Author
|
Done, tell me if you need any changes |
SafetyInObscurity
requested changes
Nov 29, 2025
SafetyInObscurity
left a comment
SafetyInObscurity
left a comment
Collaborator
There was a problem hiding this comment.
A good start! Some minor details to iron out before the pull
Added a custom dark purple colour to the config and globals files, seen in the desired component in the issue brief, as well as moving Also revised the feature box's props to title and text, instead of height and width (which now change from rem), which are strings that will be placed in the respective parts of the feature box.
SafetyInObscurity
requested changes
Dec 3, 2025
SafetyInObscurity
left a comment
SafetyInObscurity
left a comment
Collaborator
There was a problem hiding this comment.
Looking good! A few steps left for mobile compatibility and simplicity.
-Added a third prop called hOffset, which simply changes the marginLeft of the component, allowing for horizontal freedom
-Changed the geometry of the shape, where the trapezoids on the top-left and bottom-right corners have a fixed height, and so don't change as the box squishes inwards
- Made the component's width responsive at 60vw as opposed to a fixed rem value
- Made the component's height responsive to the amount of content, e.g it's height increases as its width decreases to still contain all the text
- Replaced divs containg title and text with appropriate h3 and p
- Migrated most properties in style to tailwind classes, some calc() and ${} things don't work in it so have been kept in style
Update dark-alt color value in globals.css
SafetyInObscurity
previously requested changes
Dec 9, 2025
SafetyInObscurity
left a comment
SafetyInObscurity
left a comment
Collaborator
There was a problem hiding this comment.
Looking good! If you're having trouble with proportions, remember box-border enables padding and borders in calculations of percentage dimensions.
-Removed the set width for the component at 60vw, the component will simply have a maximum width of 60% of the parent element's width. -Changed some style properties of the component, notably changing the background of the content of the box to be the standardised dark-alt colour -Removed the hOffset component as it is assumed to be horizontally centered -Modified the boxSizing property of the component to 'border-box', which will hopefully help more with responsiveness
laurenpudz
requested changes
Dec 13, 2025
laurenpudz
previously approved these changes
Dec 13, 2025
laurenpudz
left a comment
laurenpudz
left a comment
Contributor
There was a problem hiding this comment.
LGTM! Yippee feature box
Games4Doritos
dismissed
laurenpudz’s stale review
The merge-base changed after approval.
laurenpudz
previously approved these changes
Dec 13, 2025
laurenpudz
left a comment
laurenpudz
left a comment
Contributor
There was a problem hiding this comment.
APPROVE APPROVE APPROVE!! looks good, thanks for all the time you put towards the component :)
Games4Doritos
dismissed
laurenpudz’s stale review
The merge-base changed after approval.
laurenpudz
dismissed
SafetyInObscurity’s stale review
All concerns have been resolved
laurenpudz
previously approved these changes
Dec 13, 2025
Games4Doritos
dismissed
laurenpudz’s stale review
The merge-base changed after approval.
laurenpudz
previously approved these changes
Dec 13, 2025
Games4Doritos
dismissed
laurenpudz’s stale review
The merge-base changed after approval.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Change Summary
Created a component named FeatureBox that fulfills the description of this issue. Along with the special shape, it's title and text contents can be modified per component via the title and text props. Its width and height are responsive to the amount of text, scaling only to fit the space that it needs, with the prop's max width being 60% of its parent elements
featureBox.mp4
Change Form
Other Information
Related issue