[ui] : create single speaker screen

[brianwachira]

Create Single Speaker Screen as per the guideline - Single Speaker Screen Design Adobe XD Link

Follow contribution guidelines laid out in our contribution guide

Additional context

[mathewTheGreat]

@brianwachira Been following you guys online, would like to contribute, can i get this screen?

[brianwachira]

@brianwachira Been following you guys online, and would like to contribute, can I get this screen?

Sure thing @mathewTheGreat Make sure to check contribution guidelines.

Also, you can join our contributors telegram group for communication purposes. All the best!

[mathewTheGreat]

@brianwachira Been following you guys online, and would like to contribute, can I get this screen?

Sure thing @mathewTheGreat Make sure to check contribution guidelines.

Also, you can join our contributors telegram group for communication purposes. All the best!

Ok will check it out.

[mathewTheGreat]

There's no library for icons, i'm i allowed to install or is there another approach? Content in the screen is currently static, is it supposed to be dynamic and if yes, could you point me to where i'm i fetching the information frm kindly ?

[brianwachira]

There's no library for icons, am I allowed to install or is there another approach? Content on the screen is currently static, is it supposed to be dynamic and if yes, could you point me to where am I fetching the information from kindly?

• Since we are following the XD Designs, you can download the specific icon you want to use from the design in SVG format and then convert it to a component by copy-pasting the SVG contents to https://react-svgr.com/playground/?native=true&typescript=true, convert it, save it as an icon component on src/assets/icons/
  You can check out how we have done it on src/assets/icons and also BottomNavigation.tsx file on how we have imported the icons.

• Yes the content is supposed to be dynamic 😅​. In the meantime, you can create a mock speaker object with content like { name: "Frank Tamre", about: "Kenya Partner Lead at droidcon Berlin | Android | Kotlin | Flutter | C++", bio: "Worked at Intel, co-Founded Moringa School, then started @earlycamp to train young children from 5-16 on how to solve problems with technology......", twitterHandle: "@priestamzi" } and use that to do your design layout. The speakers screen has been created and is underway. By the time you are done, it will be ready and I'll help you out in connecting the 2 screens & making it dynamic.

[mathewTheGreat]

There's no library for icons, am I allowed to install or is there another approach? Content on the screen is currently static, is it supposed to be dynamic and if yes, could you point me to where am I fetching the information from kindly?

• Since we are following the XD Designs, you can download the specific icon you want to use from the design in SVG format and then convert it to a component by copy-pasting the SVG contents to https://react-svgr.com/playground/?native=true&typescript=true, convert it, save it as an icon component on src/assets/icons/ You can check out how we have done it on src/assets/icons and also BottomNavigation.tsx file on how we have imported the icons.
• Yes the content is supposed to be dynamic 😅​. In the meantime, you can create a mock speaker object with content like { name: "Frank Tamre", about: "Kenya Partner Lead at droidcon Berlin | Android | Kotlin | Flutter | C++", bio: "Worked at Intel, co-Founded Moringa School, then started @earlycamp to train young children from 5-16 on how to solve problems with technology......", twitterHandle: "@priestamzi" } and use that to do your design layout. The speakers screen has been created and is underway. By the time you are done, it will be ready and I'll help you out in connecting the 2 screens & making it dynamic.

understood, thanks.

[mathewTheGreat]

would you know what this means: First-time contributors need a maintainer to approve running workflows.

[brianwachira]

would you know what this means: First-time contributors need a maintainer to approve running workflows.

That is information from a bot managing our Pull Request workflows.

Also, next time, when creating a pull request, use one of the pull request templates provided. Incase it is a feature, use the feature pull request template. If it is a bug fix, use bug fix pull request template.

[mathewTheGreat]

I have pushed changes to my branch would that be all or is there a step I have missed, kindly advise.

PS: This is my first time contributing to an open source project on GitHub.

[brianwachira]

I have pushed changes to my branch would that be all or is there a step I have missed, kindly advise.

PS: This is my first time contributing to an open-source project on GitHub.

Okay, I see. I think that it is all. I honestly like your work. You are very keen on design.💯 We are continuously working to improve your contribution experience for you. In case you have any suggestions/comments please feel free to share. 🙂 Also, in case you need any help feel free to ask.😄

[brianwachira]

also, @mathewTheGreat, might you by any chance be participating in Hacktoberfest this year?

I can add an acceptance label so that it's added to your progress.

[mathewTheGreat]

just joined rn, please do add the acceptance label