Search page - search bar full styling support

[ermish]

Requirements

• Finish up styling the search bar
  • change karat color to primary
  • fix font size and coloring
  • fix placeholders
• research using vue-select vs using native <select> element
  • Look into safari styling not applying
  • is it worth the overhead?
  • does it support multi-select?

Dependencies

• None (Add any issue dependencies here)

[NabbeunNabi]

I have some questions about the ticket I was assigned. There are a lot of designs on figma so I do not know exactly which one I am supposed to follow for the TopNav/SearchBar part. Which should I follow?

[NabbeunNabi]

<select> Choices

Make our own

• Pros

1. Can be customizable to exactly what we want
2. Possibly might not have trouble to adapt to our data
3. More control over performance cost

• Cons

1. Time consuming
2. Needs a lot of testing due to not being used by thousands of other developers

Use Vue Multi-Select

Link to Vue Multi-Select Page

• Pros

1. Tested and proven to work
2. Easy to add to our project
3. Solid documentation

• Cons

1. Might be tricky to adapt to our search query depending how we are handling it now
2. Could have extra performance costs that we cannot control
3. Not clear on whether it includes CSS

Use vue-select

Link to vue-select Page

• Pros

1. Tested and proven to work
2. Just like multi-select it has great documentation
3. Self-reported to be lightweight
4. Does not include any CSS so that way we do not have to worry about conflicts with our CSS in tailwind

• Cons

1. Might have to change how we handle the query

My Research and Thoughts

Through my research I think it will be better to use the built in vue-select component. For an open source project it will be easier for developers who come in and out of the project to read the documentation and adjust the files when needed. I do not think that it will be too much if any extra performance cost. It also handles typing search and multi-select which is wonderful for a built in component. It will also be better than the multi-select built in component as we do not have to worry about any styling from the CSS as there is no built in CSS.

Styling mismatch on Safari and Chrome (Firefox doesn't always accept webkit)

• The select itself needs to use webkit to get rid of the default styling so it then takes our styling based on my research. So we need to change the original CSS file. See MDN here
• I think this is worth it for the scroll bar like I was talking about before as they appear differently as well as the select field to make the styling consistent across browsers.

[ermish]

this looks great! let's try out vue-select