feat: keymanweb new interfaces are done part 1

[Meng-Heng]

Continue: #119

I'm placing the layout in here for now along with the stylings but I still have more interfaces to work on, including getting the actual keyman keyboard.

[Meng-Heng]

Latest commit has:

[Meng-Heng]

Desktop:

Mobile:

The interaction for search & selection dropdown is following the same flow and design from the desktop. That is my next to-do task.

[mcdurdin]

@Meng-Heng this is looking good! Can I suggest you take a look at the work that another SIL team have been doing on language selectors from which you might also get some good ideas (we do language + keyboard selector so it's not quite the same, but there's some nice designs): https://sillsdev.github.io/EthnoLib/?path=/story/demos-dialogdemo--primary

[Meng-Heng]

Thanks, @mcdurdin! I would like to ask some clarifying questions:

Are we thinking of using "cards" to display in the search instead of displaying all the languages? For me, I like this. I will use the design and the search flows from that.

As for the selector:

I haven't comprehend how to use the sample designs you showed me. Perhaps this is what you mean?

[Meng-Heng]

Update:
I am liking this instead of the previous design. Should I remove the Most Download & Map?

I am pausing the design for keyboard selection modal for now but this is my idea:

Now I start working on Close and Open: Example toggle + Font Size Slider Design.