\r\n\r\n## Hero section\r\n- big change: hero section is becoming one big banner, with the name, social buttons and profile picture on top. \r\n- there should be also option to upload this banner, issue already created, I will try to add designs as soon as possible.\r\n- #4983 \r\n\r\n- banner on desktop has 1440*560, it would be also recommended size for the customization - its also used on collection cards. It has quite close aspect ration\r\n- over banner is applied black gradient with lowered opacity, see figma\r\n\r\n\r\n\r\n\r\n## Hero Buttons: \r\n- first section are buttons of the collection, mainly socials and website.\r\n- Then there is share button and more options - they are divided to make clear that they are not associated with the specific collection \r\n - Share button is pretty clear, more options button is in case visitor - report button, and in case of owner its going to be a customize and other functionalities we already offer. \r\n\r\n\r\n\r\n## Under banner section\r\n- Creator - blue link with address/identity\r\nunder which is collection description\r\n\r\n\r\nright are stats, 2 columns, 3 rows\r\n- see figma for exact margin and padding\r\n\r\n\r\n## Collection Menubar - Controls\r\n\r\n\r\n- looks really similar compared to explore, only difference here is the collection offer, which we haven´t implemented yet, but there is made place for the future :D \r\n- Items and Activity switcher - with checkmark as on explore, activity tab tbd\r\n- section on mobile looks like this:\r\n\r\n\r\n## Burger menu/sidebar\r\n- really similar to the explore page one. \r\n- sticky to the top\r\n- There are trait selectors \r\n - the button itself is showing how many options are in the dropdown\r\n - basic check and then number of items having this trait\r\n\r\n\r\n## Breadcrumbs\r\n\r\n- buy now is by default\r\n- then showing how many items are there\r\n- option to clear all\r\n- margin is 24px top and 24px bottom (from the text)\r\n\r\n## Items\r\n- applied dynamic grid\r\n- #4444 \r\n- otherwise basic cards used on explore or landing page \r\n\r\n- we can maybe customize them later but I think we can keep the collection name in there. \r\n\r\n## Mobile \r\n\r\n\r\n- hero items still in the banner container\r\n- socials are collapsed to max 3 icons\r\n- under banner is description and stats\r\n- collapsed control section - almost like on explore\r\n- smaller cards - same as on explore\r\n- burger menu will work like this\r\n\r\n\r\n## Dark mode\r\n- Using same system for dark mode like on other pages, that means that borders are usually changing from black to white and the dropshadow as well, if something is not clear feel free to ping.\r\n\r\n## Others\r\n- whole page works like infinity scroll\r\n- burger menu is sticky to the top\r\n- no footer\r\n\r\nQ&A\r\n---\r\nIf you have any questions, please let me know. \r\nI appreciate feedback and pointing up items I may need to look into.\r\nThanks! \r\n",[3168,3170,3172],{"name":3169,"color":3147},"p2",{"name":3171,"color":3150},"A-collection",{"name":3152,"color":3153},5000,"Collection Redesign","2025-08-26T11:27:27Z","https://github.com/kodadot/nft-gallery/issues/5000",0.7001777,{"description":3179,"labels":3180,"number":3187,"owner":3158,"repository":3159,"state":3160,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### What happened?\r\n[Design](https://www.figma.com/file/gHSzqGPeQ9qK4L0qIDcTjY/gallery-item-handoff?t=gvuA1jNzdBFeEbPh-0): \r\n# Buttons and states in right section\r\n\r\n- profile photo should have stroke and drop shadow\r\n\r\n\r\ndivider color to #999999 (k-grey) please, this one looks too light\r\n\r\n\r\n\r\n\r\n- use either $ or USD, not both\r\n\r\naction buttons:\r\n\r\n- both have hover effect to white, not k-accentlight\r\n\r\n\r\nactive state of options and share buttons: \r\n\r\nthis is the state when you click on the button: \r\n\r\n\r\nhover stay the same, but when the dropdown occurs, the button still has active state.\r\n\r\n\r\n### Please reproduce in steps\r\n\r\n.\r\n\r\n### Expected Behavior\r\n\r\n.\r\n\r\n### What browsers are you seeing the problem on?\r\n\r\n_No response_\r\n\r\n### At which address did you encounter bug?\r\n\r\n_No response_\r\n\r\n### Are you logged in?\r\n\r\nNone\r\n\r\n### Which wallet you are using?\r\n\r\n_No response_\r\n\r\n### At which chain did you encounter bug?\r\n\r\n_No response_\r\n\r\n### Screenshots\r\n\r\n.\r\n\r\n### Relevant log output\r\n\r\n_No response_\r\n\r\n### Payment link for reward\r\n\r\nhttps://kodadot.xyz/transfer/?target=%3CMy_Kusama_Address_check_https://github.com/kodadot/nft-gallery/blob/main/CONTRIBUTING.md#creating-your-ksm-address%3E\r\n\r\n### Code of Conduct\r\n\r\n- [X] I agree to follow this project's Code of Conduct",[3181,3184,3185,3186],{"name":3182,"color":3183},"$","0E8A16",{"name":3169,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4581,"Gallery Redesign: Buttons and states in right section ","2023-01-04T16:01:12Z","https://github.com/kodadot/nft-gallery/issues/4581",0.703016,{"description":3193,"labels":3194,"number":3202,"owner":3158,"repository":3159,"state":3160,"title":3203,"updated_at":3204,"url":3205,"score":3206},"I had some ideas about the main gallery page to help make it a bit more informative. I know many of these ideas are being worked on (or have already been updated since I made this yesterday) and are listed in other issues, but sometimes its helpful to look at the big picture. This builds on Issue kodadot/nft-gallery#60. I'm a designer/artist so I made a quick mockup first and then wrote this stuff to explain my thoughts.\r\n\r\n\r\n**Thumbnail Preview**\r\nAt the moment, each preview only shows the NFT's title. It would be cool if we had the following:\r\n\r\n- Artist Name: This could be the pseudonym identity (if the artist has one) or the address. Maybe the address only gets shown if there is a pseudonym as an incentive, but even showing the address gives good incentive to the artist to verify their identity.\r\n- Edition Number: I think this may have already been solved this morning! Great work! This greatly helps declutter the interface with what looks like duplicates.\r\n- Price: If the NFT is for sale, it lists the sale price in KSM and USD (maybe there is a setting for this tied to the user's profile so that users always see the conversion in their preferred currency). If NFT isn't for sale, this field is blank. \r\n\r\n**Search/Filter Menus**\r\nIt would be great to be able to filter/sort the gallery (Issues kodadot/nft-gallery#35 & kodadot/nft-gallery#49) by things like:\r\n\r\n- Recently Sold\r\n- For Sale\r\n- Patronage\r\n- Editions of 1\r\n- Price\r\n- File Type\r\n\r\nOr to search the Gallery by:\r\n\r\n- Tags\r\n- Artist Name\r\n- Color\r\n- File Type\r\n\r\n**Top Left Menu**\r\nI put more externally focused major things here:\r\n\r\n- Gallery: Brings you back or reloads the main Gallery\r\n- Artist: Views Gallery based on collections by Artist (Issue kodadot/nft-gallery#157). Lists one image per artist. This would be defined by the info listed in their profile:\r\n\r\n> - image that represents their entire work\r\n> - metadata pulled from pseudonym identity like social links and name (Issue kodadot/nft-gallery#134 )\r\n> - others that could simply be text fields like a bio or artist statement\r\n> - List of NFTs by the artist sorted by collection\r\n\r\nOn each Artist preview thumbnail, it could show the chosen header image for that artist and maybe metadata about the work like the number of minted pieces, number sold, number currently for sale, etc. so users get a quite overview of the artist body of work (are they a longtime users with 100s of sold pieces or are they new to the market). This page could also be filtered/sorted so users could quickly discover new artists or artists that share certain tags.\r\n\r\n- Create: Brings users to existing Create page that clearly explains the creation process with links to helpful guides/videos. \r\n\r\n**Top Right Menus**\r\nI thought of these being more internally focused. \r\n\r\n- Profile: This would be the Profile of the user (artist/buyer/both). You could see your own collection of minted work or collection of work you have bought. And this is where you could update all of the artist metadata (bio, statement).\r\n- Buy $KSM: quick way to buy KSM via credit card. I know this is already (partially) working, but it's a bit hidden. Since this market specifically and the larger NFT space is still new for lots of people, having a quick and very visible way to add funds and buy seems like a useful link that should get top billing. Even better would be adding credit purchase directly into buying (Issue kodadot/ideas#2).\r\n- About Kodadot: Backstory of Kodadot, links to tutorials, Github, Medium, FAQ on low-carbon minting, etc.\r\n",[3195,3198,3199],{"name":3196,"color":3197},"UX first","7057ff",{"name":3182,"color":3183},{"name":3200,"color":3201},"redesign-seeds","053A03",225,"Kodadot Home UX","2021-08-24T08:39:35Z","https://github.com/kodadot/nft-gallery/issues/225",0.7135018,{"description":3208,"labels":3209,"number":3202,"owner":3158,"repository":3210,"state":3160,"title":3211,"updated_at":3212,"url":3213,"score":3206},"",[],"workers","OpenGraph - error 500 on new .motherboard drop item","2023-12-07T14:52:32Z","https://github.com/kodadot/workers/issues/225",{"description":3215,"labels":3216,"number":3217,"owner":3158,"repository":3159,"state":3160,"title":3218,"updated_at":3219,"url":3220,"score":3221}," i guess this is for another issue? \r\n\r\n\r\n_Originally posted by @exezbcz in https://github.com/kodadot/nft-gallery/issues/4766#issuecomment-1398418160_\r\n \r\n- @exezbcz can say more \r\n- please close if duplicate\r\n ",[],4796,"Alignment of buttons in the gallery item is off","2023-01-21T13:28:38Z","https://github.com/kodadot/nft-gallery/issues/4796",0.72265553,{"description":3223,"labels":3224,"number":3232,"owner":3158,"repository":3159,"state":3160,"title":3233,"updated_at":3234,"url":3235,"score":3236},"Hi, i will add here my feedback from on the gallery item just to keep it on one place. 🚀 \r\n\r\n# Layout\r\n\r\n\u003Cdetails>\r\n\u003Csummary>Grid\u003C/summary>\r\n\r\ngrid:\r\n- the grid does not have even spacing\r\n\r\n\r\n\r\n- gap between the img and the right section is to small\r\n- can we make it like 40px everywhere? \r\n- and also the gap here is too big \r\n\r\n\r\n\r\n\r\n\u003C/details>\r\n\r\n\u003Cdetails>\r\n\u003Csummary>Right Section\u003C/summary>\r\n\r\n- the price section is too low, then the gaps between creator/owner, divider are too large and it does not look good.\r\n\r\n\r\n- same thing here, too packed. \r\n\r\n- on the other hand, gap between buttons is bigger than needed. \r\n\r\n\r\n\r\n\u003C/details>\r\n\r\n\r\n",[3225,3226,3227,3228,3229],{"name":3182,"color":3183},{"name":3169,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3230,"color":3231},"visual change","6CDDCE",4478,"Galery item prelaunch feedback v1","2023-01-19T10:40:42Z","https://github.com/kodadot/nft-gallery/issues/4478",0.72350585,{"description":3238,"labels":3239,"number":3246,"owner":3158,"repository":3159,"state":3160,"title":3247,"updated_at":3248,"url":3249,"score":3250},"I guess we don't want to show the buy button when art is not on sale, even it's disabled?\r\nBut hence we can show related NFTs from particular collection/artist re #990\r\n\r\nhappened at https://deploy-preview-2558--koda-nuxt.netlify.app/rmrk/gallery/10279780-0a8ce195286c168f19-DONKEY-DONKEY_GANG_120-0000000000000120\r\n\r\n\u003Cimg width=\"351\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/158796423-72607478-dcb1-41f5-bfe7-3f8538158f94.png\">\r\n\r\n\u003Cimg width=\"1157\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/158796502-81753ec7-cdf2-40ea-a15c-6aad02bd5837.png\">\r\n\r\n\r\n### Ref\r\n- https://github.com/kodadot/nft-gallery/issues/957\r\n- https://github.com/kodadot/nft-gallery/issues/990",[3240,3243,3244],{"name":3241,"color":3242},"bug","d73a4a",{"name":3182,"color":3183},{"name":3245,"color":3147},"p3",2575,"Don't show buy when it's not for sale","2022-03-19T11:55:34Z","https://github.com/kodadot/nft-gallery/issues/2575",0.7246039,{"description":3252,"labels":3253,"number":3260,"owner":3158,"repository":3159,"state":3160,"title":3261,"updated_at":3262,"url":3263,"score":3264},"To remove clutter from UI, would be nice just keep top-border on action buttons. \r\n\r\n\u003Cimg width=\"253\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/177745861-52028f03-ff89-4e3d-9b82-27e86b5614b2.png\">\r\n\r\nchange it for \r\n- BUY\r\n- GIFT\r\n- BURN\r\n- LIST\r\n- SHARE JOY\r\n\r\n- remove Download button from actions and download functionality with icon https://fontawesome.com/icons/download?s=solid next to sharing icons as Download is not on-chain action. \r\n\r\n\r\n",[3254,3255,3256,3257],{"name":3182,"color":3183},{"name":3169,"color":3147},{"name":3149,"color":3150},{"name":3258,"color":3259},"css","8F33D1",3363,"Keep top border only on action buttons for on-chain actions","2022-07-17T08:23:51Z","https://github.com/kodadot/nft-gallery/issues/3363",0.72851884,{"description":3266,"labels":3267,"number":3272,"owner":3158,"repository":3159,"state":3160,"title":3273,"updated_at":3274,"url":3275,"score":3276},"\r\nmissing action button, closed by #11228\r\n\r\n\r\n\r\n### Swap Table\r\n\r\n- show `surcharge` `direction` and `amount` if there is enough space\r\n\r\n\r\n",[3268,3269,3270],{"name":3196,"color":3197},{"name":3169,"color":3147},{"name":3271,"color":3150},"A-atomic-swap",11213,"Swaps in Gallery Item follow up","2025-01-29T12:57:17Z","https://github.com/kodadot/nft-gallery/issues/11213",0.7312589,["Reactive",3278],{},["Set"],["ShallowReactive",3281],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fWsAeL8ZzPnQe6dPe2SZVWxHloTjfEWFFZJXLiEEHxbY":-1},"/kodadot/nft-gallery/261"]