# Roadmap & Progress

[Figma - Design System](https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=0%3A1)

## Implementation status

| | Issue | Status | Design
:--- | :------: | :-----------: | :-----------:
**StatusQ.Core** | |
[`StatusBaseText`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusBaseText.qml) | [#20](https://github.com/status-im/StatusQ/issues/20) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A9
[`StatusIcon`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusIcon.qml) | [#2](https://github.com/status-im/StatusQ/issues/2) | ✅ |https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=63%3A0
[`StatusIconBackgroundSettings`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusIconBackgroundSettings.qml) | - | ✅ |
[`StatusIconSettings`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusIconSettings.qml) | - | ✅ |
[`StatusImageSettings`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusImageSettings.qml) | - | ✅ |
[`StatusModalHeaderSettings`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/StatusModalHeaderSettings.qml) | - | ✅ |
**StatusQ.Core.Theme** |
[`StatusColors`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/StatusColors.qml) | [#3](https://github.com/status-im/StatusQ/issues/3) | ✅ |https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A10
[`StatusDarkTheme`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/StatusDarkTheme.qml) | [#3](https://github.com/status-im/StatusQ/issues/3) | ✅ |https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A10
[`StatusLightTheme`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/StatusLightTheme.qml) | [#3](https://github.com/status-im/StatusQ/issues/3) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A10
[`Theme`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/Theme.qml) | [#3](https://github.com/status-im/StatusQ/issues/3) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A10
[`ThemePalette`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/ThemePalette.qml) | [#3](https://github.com/status-im/StatusQ/issues/3) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A10
**StatusQ.Components** |
[`StatusBadge`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusBadge.qml) | [#15](https://github.com/status-im/StatusQ/issues/15) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=817%3A4719
[`StatusChatInfoToolBar`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatInfoToolBar.qml) | [#141](https://github.com/status-im/StatusQ/issues/141) | ✅ |
[`StatusChatList`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatList.qml) | [#100](https://github.com/status-im/StatusQ/issues/100) | ✅ |
[`StatusChatListAndCategories`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatListAndCategories.qml) | [#133](https://github.com/status-im/StatusQ/issues/133) | ✅ |
[`StatusChatListCategory`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatListCategory.qml) | [#123](https://github.com/status-im/StatusQ/issues/123) | ✅ |
[`StatusChatListCategoryItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatListCategoryItem.qml) | [#123](https://github.com/status-im/StatusQ/issues/123) | ✅ |
[`StatusChatListItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatListItem.qml) | [#65](https://github.com/status-im/StatusQ/issues/65) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=853%3A3088
[`StatusChatToolBar`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusChatToolBar.qml) | [#80](https://github.com/status-im/StatusQ/issues/80) | ✅ |
[`StatusContactRequestsIndicatorListItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml) | [#175](https://github.com/status-im/StatusQ/issues/175) | ✅ |
[`StatusDescriptionListItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusDescriptionListItem.qml) | [#73](https://github.com/status-im/StatusQ/issues/73) | ✅ |
[`StatusLetterIdenticon`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusLetterIdenticon.qml) | [#28](https://github.com/status-im/StatusQ/issues/28) | ✅ |
[`StatusListItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusListItem.qml) | [#19](https://github.com/status-im/StatusQ/issues/19) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=792%3A80
[`StatusListSectionHeadline`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusListSectionHeadline.qml) | [#164](https://github.com/status-im/StatusQ/issues/164) | ✅ |
[`StatusLoadingIndicator`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusLoadingIndicator.qml) | [#7](https://github.com/status-im/StatusQ/issues/7) | ✅ |
[`StatusNavigationListItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusNavigationListItem.qml) | [#72](https://github.com/status-im/StatusQ/issues/72) | ✅ |
[`StatusNavigationPanelHeadline`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusNavigationPanelHeadline.qml) | [#162](https://github.com/status-im/StatusQ/issues/162) | ✅ |
`StatusNotification` | [#104](https://github.com/status-im/StatusQ/issues/104) |
[`StatusRoundIcon`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusRoundIcon.qml) | [#53](https://github.com/status-im/StatusQ/issues/53) | ✅ |
[`StatusRoundedImage`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/StatusRoundedImage.qml) | [#32](https://github.com/status-im/StatusQ/issues/32) | ✅ |
`StatusThemeSelector` | [#105](https://github.com/status-im/StatusQ/issues/105) |
**StatusQ.Controls** |
`StatusAudioMessage` | [#207](https://github.com/status-im/StatusQ/issues/207) |-|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A11
[`StatusBaseButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusBaseButton.qml) | [#6](https://github.com/status-im/StatusQ/issues/6) | ✅ |
`StatusBaseInput` | [#106](https://github.com/status-im/StatusQ/issues/106) | 🚧
[`StatusButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusButton.qml) | [#6](https://github.com/status-im/StatusQ/issues/6) | ✅ |
[`StatusChatInfoButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusChatInfoButton.qml) | [#79](https://github.com/status-im/StatusQ/issues/79) | ✅ |
`StatusChatInput` | [#201](https://github.com/status-im/StatusQ/issues/201) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=861%3A3288
`StatusChatInputImageArea` | [#211](https://github.com/status-im/StatusQ/issues/211) |
`StatusChatInputReplyArea` | [#210](https://github.com/status-im/StatusQ/issues/210) |
`StatusChatInputFormatter` | [#209](https://github.com/status-im/StatusQ/issues/209) |
[`StatusChatListCategoryItemButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml) | [#117](https://github.com/status-im/StatusQ/issues/117) | ✅
[`StatusCheckBox`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusCheckBox.qml) | [#10](https://github.com/status-im/StatusQ/issues/10) | ✅|https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=706%3A1642
`StatusEmojiPicker` | [#204](https://github.com/status-im/StatusQ/issues/204) ||https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A11
[`StatusFlatButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusFlatButton.qml) | [#6](https://github.com/status-im/StatusQ/issues/6) | ✅ |
[`StatusFlatRoundButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusFlatRoundButton.qml) | [#6](https://github.com/status-im/StatusQ/issues/6) | ✅ |
[`StatusIconTabButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusIconTabButton.qml) | [#16](https://github.com/status-im/StatusQ/issues/16) | ✅ |
[`StatusNavBarTabButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusNavBarTabButton.qml) | [#17](https://github.com/status-im/StatusQ/issues/17) | ✅ |
`StatusPickerButton` | [#202](https://github.com/status-im/StatusQ/issues/202) |
`StatusPickerToolbar` | [#206](https://github.com/status-im/StatusQ/issues/206) |
[`StatusRadioButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusRadioButton.qml) | [#11](https://github.com/status-im/StatusQ/issues/11) | ✅ |
[`StatusRoundButton`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusRoundButton.qml) | [#6](https://github.com/status-im/StatusQ/issues/6) | ✅ |
[`StatusSlider`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusSlider.qml) | [#13](https://github.com/status-im/StatusQ/issues/13) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1380%3A676
`StatusStickerPicker` | [#205](https://github.com/status-im/StatusQ/issues/205) ||https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1%3A11
[`StatusSwitch`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusSwitch.qml) | [#12](https://github.com/status-im/StatusQ/issues/12) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=706%3A1628
`StatusTextArea` | [#203](https://github.com/status-im/StatusQ/issues/203) |
[`StatusToolTip`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/StatusToolTip.qml) | [#14](https://github.com/status-im/StatusQ/issues/14) | ✅| https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=721%3A1878
`StatusTransactionsPicker` | [#208](https://github.com/status-im/StatusQ/issues/208) |
`StatusWalletColorButton` | [#101](https://github.com/status-im/StatusQ/issues/101) |
`StatusWalletColorSelect` | [#102](https://github.com/status-im/StatusQ/issues/102) |
**StatusQ.Layout** |
[`StatusAppLayout`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/StatusAppLayout.qml) | [#77](https://github.com/status-im/StatusQ/issues/77) | ✅ |
[`StatusAppNavBar`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/StatusAppNavBar.qml) | [#18](https://github.com/status-im/StatusQ/issues/18) | ✅ |
[`StatusAppTwoPanelLayout`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml) | [#78](https://github.com/status-im/StatusQ/issues/78) | ✅ |
**StatusQ.Platform** |
[`StatusMacTrafficLights`](https://github.com/status-im/StatusQ/tree/master/src/StatusQ/Platform) | [#108](https://github.com/status-im/StatusQ/pull/108) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1394%3A6954
`StatusWindowsToolBar` | [#200](https://github.com/status-im/StatusQ/issues/200) | | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=1398%3A55
**StatusQ.Popups** |
[`StatusMenuItem`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/StatusMenuItem.qml) | [#74](https://github.com/status-im/StatusQ/issues/74) | ✅ |
[`StatusMenuSeparator`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/StatusMenuSeparator.qml) | - | ✅ |
[`StatusModal`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/StatusModal.qml) | [#97](https://github.com/status-im/StatusQ/issues/97) | ✅ | https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?node-id=706%3A1043
`StatusWizard` | |
[`StatusModalDivider`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/StatusModalDivider.qml) | [#97](https://github.com/status-im/StatusQ/issues/97) | ✅
[`StatusPopupMenu`](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/StatusPopupMenu.qml) | [#96](https://github.com/status-im/StatusQ/issues/96) | ✅
`StatusTextFormatMenu` | [#103](https://github.com/status-im/StatusQ/issues/103) |