Improve tags UI/X

[vikaspotluri123]

Currently tags are all lower case:

They would look better if they were Sentence cased

[aslafy-z]

One way of doing it is to use the CSS ::first-letter pseudo-element:

p.sentence-case::first-letter {
  text-transform: uppercase;
}

<p class="sentence-case">this string has a CAPITAL first-letter</p>

[vikaspotluri123]

Or just p.sc { text-transform: capitalize; }?

I'd rather do this during the build step to keep the client minimal, but if you want to go the CSS route, that's fine

[aslafy-z]

Yes, but text-transform: capitalize does Title Case not Sentence case. I think we can go title case. I don't know which way of implementation would be better as it would add some logic to keep tags in url lowercase if done on buildtime.

[swapagarwal]

I have mostly seen tags as being lowercase everywhere. Can you provide examples where sentence-case is used?

[plibither8]

I agree with @swapagarwal here!

[vikaspotluri123]

Good point, to me personally, there's something visually off in the select box; it might be the caps or something else (outside from the persistent scrollbar) 😕

[plibither8]

I guess we should get rid of the search box. There are not many tags right now (and won't be in the future, most probably), and search is not possible on mobile devices by default.

The scrollbar can be hidden by just adding overflow: hidden to the custom CSS.

[swapagarwal]

The UI can be made more consistent, yes. How about merging the tag filters with the difficulty bar above it?

[vikaspotluri123]

Updated the issue title to reflect the change in roadmap

[plibither8]

I'll try working on this if it hasn't been picked up by anyone else :sweat_smile:

[vikaspotluri123]

I'm not working on it, go ahead 👍

[aslafy-z]

Related to https://github.com/swapagarwal/swag-for-dev/issues/407