Update new version toast style

[yangwao]

I guess this is the perfect opportunity to style a new update toast in the same neo-brutalism style. Now I've realized we don't have it in design and @exezbcz can sketch something! :)

[alabo-excel]

Hello I'll love to work on this issue kindly assign it to me

[exezbcz]

@alabo-excel Do you need the designs? I can make it by end of the week.

[alabo-excel]

Yes sure

On Wed, 12 Oct 2022 at 10:40 AM, Exez @.***> wrote:

@alabo-excel https://github.com/alabo-excel Do you need the designs? I can make it by end of the week.

— Reply to this email directly, view it on GitHub https://github.com/kodadot/nft-gallery/issues/4015#issuecomment-1275881133, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP7EL65XWICMWTDDNZT4HBTWC2BSNANCNFSM6AAAAAAQUAWLZE . You are receiving this because you were mentioned.Message ID: @.***>

[exezbcz]

hey @alabo-excel , the design is in this Figma: https://www.figma.com/file/gHSzqGPeQ9qK4L0qIDcTjY/gallery-item-handoff?node-id=1270%3A5615, right next to search bar components. How the button works:

• hover is accent light, in dark mode - accent.
• you can also see that if you play the prototype of the frame.

If you have any questions, feel free to ask.

[prachi00]

@alabo-excel are you working on this one?

[alabo-excel]

Yes, I am!

On Wed, 19 Oct 2022 at 1:23 AM, Darshana Prachi @.***> wrote:

@alabo-excel https://github.com/alabo-excel are you working on this one?

— Reply to this email directly, view it on GitHub https://github.com/kodadot/nft-gallery/issues/4015#issuecomment-1283171175, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP7EL62JBWUEZF3AKS62HU3WD45QDANCNFSM6AAAAAAQUAWLZE . You are receiving this because you were mentioned.Message ID: @.***>

[yangwao]

hey @prachi00 if you can take it :) Seems @alabo-excel did not deliver for 9 days:)

[prachi00]

hey @prachi00 if you can take it :) Seems @alabo-excel did not deliver for 9 days:)

sure I can take this one

[kodabot]

ASSIGNED - @prachi00 🔒 LOCKED -> Monday, October 31st 2022, 10:53:55 UTC -> 36 hours

[prachi00]

@exezbcz do we have any notifications where we have button? As I only see this format without any buttons

[prachi00]

Since we use https://buefy.org/documentation/notification so I think the best we can do here is change the colors, adding button probably would not be possible and we would need to remove buefy to make custom notis, which would require changes in a lot of files. Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now? @exezbcz

[exezbcz]

@exezbcz do we have any notifications where we have button? As I only see this format without any buttons

aand, the cross for close isnt button?

[exezbcz]

Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now?

I haven't yet created this type, but I will give it some thought and get back to you.

[prachi00]

Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now?

I haven't yet created this type, but I will give it some thought and get back to you.

okay can you just change the colours and font colours, because like I said since we use buefy, there isn't much customization we can do here

[kodabot]

ASSIGNMENT EXPIRED - @prachi00 has been unassigned.

[exezbcz]

Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now?

I haven't yet created this type, but I will give it some thought and get back to you.

okay can you just change the colours and font colours, because like I said since we use buefy, there isn't much customization we can do here

Well then, I don't think that's worth it. The colors look great as they do right now.

[prachi00]

Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now?

I haven't yet created this type, but I will give it some thought and get back to you.

okay can you just change the colours and font colours, because like I said since we use buefy, there isn't much customization we can do here

Well then, I don't think that's worth it. The colors look great as they do right now.

@yangwao @roiLeo what do you think?

[roiLeo]

Also, notifications have types like danger, info, success as you can see in buefy, are we going to use the same color for every case now?

IMO this is related with #4121

We need notification system design, not necessarily the same colours since everything is customizable, but I'll keep:

• green or primary for success
• orange/yellow for warning
• red for error
• blue for info

okay can you just change the colours and font colours, because like I said since we use buefy, there isn't much customization we can do here

Well then, I don't think that's worth it. The colors look great as they do right now.

Since the "Update new version" is not really a notification but a uniq component I have no problem with a different design.

Remember that we can use different type of component:

• Notification
• Modal
• Snackbar

[prachi00]

but isnt this for all the notifications/snackbars we have? so how do we add a button there since we dont have it in buefy?

[roiLeo]

but isnt this for all the notifications/snackbars we have? so how do we add a button there since we dont have it in buefy?

This issue is refering to update "New version" toast, global notifications design can be done another time

[prachi00]

but isnt this for all the notifications/snackbars we have? so how do we add a button there since we dont have it in buefy?

This issue is refering to update "New version" toast, global notifications design can be done another time

yeah but the new version thing is also a buefy notification currently right? I am not sure how do we add a custom component here

[roiLeo]

you can still change the component (Dialog could be suitable) and adapt with custom css class

[prachi00]

@roiLeo @yangwao One thing I don't understand about this is why we say 'close to upgrade', like isn't the user already upgraded? Its not like if they don't close, they wont upgrade?

[roiLeo]

One thing I don't understand about this is why we say 'close to upgrade', like isn't the user already upgraded? Its not like if they don't close, they wont upgrade?

Yes, take a look at https://github.com/kodadot/nft-gallery/blob/8761903fe507029066a2a1967fbe92b0bba3031e/plugins/pwa.ts#L31-L33 there is a hook on close to clear/flush session storage for cache utility

[prachi00]

yeah, I tried to do this with dialog as well, did not work well with css changes anyone else can feel free to take this one up :)

[exezbcz]

So, how about this one? Is it possible? 👀

[yangwao]

So having new notification toasts like descriped here

• https://github.com/kodadot/nft-gallery/issues/4121

[prachi00]

I can do this, but where are the new designs? I cant find on figma @yangwao @exezbcz

[exezbcz]

@prachi00 there are no new designs, only the old one - gallery item handoff figma https://www.figma.com/file/gHSzqGPeQ9qK4L0qIDcTjY/gallery-item-handoff?node-id=1270%3A5615&t=NyBM4JhPjCpIT8rf-1

I don't have new designs for all the toast notifications

[yangwao]

hey @prachi00 do you want to take this one? :)

[prachi00]

hey @prachi00 do you want to take this one? :)

sure I'll try to get this done again

[exezbcz]

continue to

• https://github.com/kodadot/nft-gallery/issues/10090