[Settings | Desktop] Components Implementation

Components Implementation

Settings | Desktop

New components available for anyone that wants to contribute to the new design (kibbeh). Make sure to read the guidelines at the bottom of the issue.

---

New components

• SettingsWrapper - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9018%3A9349
  • Requires none ✅
  • Container for each page in settings (padding: 20px or .p-4)
• BaseSettingsItem - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A69
  • Requires none ✅
  • Container/Wrapper for some settings items, size can (and must) vary
• ChangeAvatarCard - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9018%3A9352
  • Requires BaseSettingsItem, UserAvatar, Button ✅
• ChangeBannerCard - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9018%3A9354
  • Requires Button ✅
• NativeCheckbox - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A0
  • Requires none ✅
  • The on/off functionality is important
• NativeRadio - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9018%3A9356
  • Requires none ✅
  • Handle children (text) as you think is best
• ErrorButtonItem - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A5
  • Requires BaseSettingsItem, Button ✅
• VolumeIndicator - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A58
  • Requires none ✅
  • It should react to some value (convert it to percentage maybe)
• UserWideButton - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A3
  • Requires UserAvatar, Button ✅
• SettingsItemButton - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A87
  • Requires BaseSettingsItem, Button ✅
• KeybindCard - https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9055%3A18
  • Requires BaseSettingsItem ✅
  • Should match current behavior with regard to listening for user input after the keyboard icon is pressed
  • The red border appears when the listening mode is on

---

Guidelines:

• Don’t add margin around the components.
• The bordered rectangle around each component in Figma is just for delimitation purposes.
• Put your component in kibbeh/src/ui and create a story in kibbeh/src/stories.
• Use tailwind for styling (see the tailwind config for theme info).
• You have to use TypeScript.
• Work on the staging branch.
• Please comment below if you start to work on a component, but only claim a component if you plan to work on it right away, so it doesn’t block other people.
• Don’t start working on a component if its dependencies aren’t done.

Mockup & grid (get some context about each component): https://www.figma.com/file/CS01VVLR7ArQl0afYFkNj3/Web-App?node-id=9018%3A1060

Most icons should be available under kibbeh/src/icons, but if the one you need isn’t, ask on Discord or place a temp one with a comment pointing it out

If you have any questions ask Ben or @ ajb on Discord.

[wes337]

I’m also going to take “BaseSettingsItem”. It’s just a container component and was claimed 3 days ago. It should not take that long imo

[BronzW]

But sure it’s yours