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

ui(web): Various tweaks for input fields in preview modal #165

Merged
merged 1 commit into from
May 19, 2024

Conversation

lilacpixel
Copy link
Contributor

Another fresh batch of styles from me today! πŸ§‘β€πŸ³

  • Set the tag input field to 100% width to fix an issue where the tag select dropdown could overflow when inputting short sections of text.

Screenshot 2024-05-18 at 9 24 19β€―PM

  • Fixed an issue where the corners of the tag input field and select dropdown did not match the corners of the note field. (Below image shows the issue at 400% zoom.)

Screenshot 2024-05-18 at 1 02 34 PM

  • Changed some styles to align labels to their respective fields and make field contents more visually consistent (text size, colors, etc).

Screenshot 2024-05-18 at 9 14 40 PM

…erflow issues on select dropdown

ui(web): Fixed issue with rounded corners on tag input field in preview modal

ui(web): Adjusted styles for labels and fields in preview modal for visual consistency
Copy link

vercel bot commented May 19, 2024

@lilacpixel is attempting to deploy a commit to the Mohamed Bassem's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Collaborator

@MohamedBassem MohamedBassem left a comment

Choose a reason for hiding this comment

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

As usual, thank you! Love the attention to the small details!

Comment on lines +123 to +148
container: (styles) => ({
...styles,
width: "100%",
}),
control: (styles) => ({
...styles,
overflow: "hidden",
backgroundColor: "hsl(var(--background))",
borderColor: "hsl(var(--border))",
":hover": {
borderColor: "hsl(var(--border))",
},
}),
input: (styles) => ({
...styles,
color: "rgb(156 163 175)",
}),
menu: (styles) => ({
...styles,
overflow: "hidden",
color: "rgb(156 163 175)",
}),
placeholder: (styles) => ({
...styles,
color: "hsl(var(--muted-foreground))",
}),
Copy link
Collaborator

Choose a reason for hiding this comment

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

One day, I'll get rid of this ugly react-select component and all the hacks I did to make look like the rest of our components :D

@MohamedBassem MohamedBassem merged commit cb62db7 into hoarder-app:main May 19, 2024
3 of 5 checks passed
@lilacpixel lilacpixel deleted the tag-select-styles branch May 19, 2024 14:59
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.

2 participants