Hey Lana
I'm going to start developing the front-end components for this feature next week.
So I had a couple of thoughts on the UI of the badges components that I wanted to share with you.
\- We should consider that the badges description will in most cases be longer than 1 sentence. Since we will be using the badges to educate people about some parts of the platform that they might not have used.
So I think the description for some badges will be multiple lines.
\- The images are nice & neat. But I feel that they are a bit too "abstract" or "generic".
I saw the images at the top of the figma file (the ones that seem to be generated using mid-journey) & I think they look more "interesting".
\- The progress bar should be bigger so that in the case of badges that require a lot of progress steps (e.g. write 50 stories), the progress is kind of visible.
\- I think it would also be a good idea to have a progress count close to the progress bar somewhere (saying something like: "14/30")
For most of the points above, I think making the layout of the badges component list-like instead of grid-like would fix them.
So the items list would look something like:
\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
Let me know your thoughts on my thoughts 😄
Mtg /
npub1zu…tdx38
2023-10-05 12:36:57
in reply to nevent1q…27du
Author Public Key
npub1zug85tns97cfxafjpa2rh28d45d6h4txgxt3vr8rxe9czr85j47qntdx38Published at
2023-10-05 12:36:57Event JSON
{
"id": "71eb8c50557e3c1e311cc91047860a68994fa304d9e9949c3882d5b4de067bb1",
"pubkey": "17107a2e702fb09375320f543ba8edad1babd5664197160ce3364b810cf4957c",
"created_at": 1696509417,
"kind": 1,
"tags": [
[
"client",
"bolt.fun"
],
[
"c",
"bolt.fun"
],
[
"e",
"fbf6b43288244d56188cfa2cb118d111ffccdaf9ac806a723505d8deb25673fe",
"",
"root"
],
[
"r",
"https://bolt.fun/story/1077"
]
],
"content": "Hey Lana\n\nI'm going to start developing the front-end components for this feature next week.\n\nSo I had a couple of thoughts on the UI of the badges components that I wanted to share with you.\n\n\\- We should consider that the badges description will in most cases be longer than 1 sentence. Since we will be using the badges to educate people about some parts of the platform that they might not have used.\n\nSo I think the description for some badges will be multiple lines.\n\n\\- The images are nice \u0026 neat. But I feel that they are a bit too \"abstract\" or \"generic\".\n\nI saw the images at the top of the figma file (the ones that seem to be generated using mid-journey) \u0026 I think they look more \"interesting\".\n\n\\- The progress bar should be bigger so that in the case of badges that require a lot of progress steps (e.g. write 50 stories), the progress is kind of visible.\n\n\\- I think it would also be a good idea to have a progress count close to the progress bar somewhere (saying something like: \"14/30\")\n\nFor most of the points above, I think making the layout of the badges component list-like instead of grid-like would fix them.\n\nSo the items list would look something like: \n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE\n\n\\\\\\\\ IMAGE \\\\\\\\ PROGRESS BAR\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION\n\n\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE\n\n\\\\\\\\ IMAGE \\\\\\\\ PROGRESS BAR\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION\n\n\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\\_\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE\n\n\\\\\\\\ IMAGE \\\\\\\\ PROGRESS BAR\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION\n\n \nLet me know your thoughts on my thoughts 😄",
"sig": "998d71798ee31ad28d40bc578606caf214173d899df41e7d7b211759a2ed3ca901d46986c3d7c15b2837ecb19677270781e4af5a17bdcf9887c5d35e42248901"
}