I spent 10 hrs on single page (screen)

Shelf-fish Devlog # 10

I didn’t knew it would take that long

So the add item page took around 10 hours to make, more than 10 hours if we include the time I spent 25 days ago to make it work, so here is what I have done:

• Completely change the design of the page, the previous design really sucked, It was there just so to make everything work, my previous self, for some reason, didn’t care about the design

• The new design uses something similar to drop-shadow except there is no box or drop/box shadow in native-wind, so i had to come up with a way to make my own, i used a self-closing View tag with absolute positioning, no inset and translated to some ammount with a background color…

• This offset View works as a drop shadow or box, it really doesn’t make difference here as I am working with rectangles. The Offset component worked when I using with a static color and size but for some parts of the design I needed different colors of shadow like the item image which uses red shadow or the tags which require small shadows as they themselves are pretty small. I made it dynamic by using inline css cuz native-wind calculates colors statically

• Though for some parts I didn’t used the component but used another View in the same way as the component cuz I was frustated and wanted flexibility which the component lacked at that time.

• The whole app now has a communist theme as explained in the previous devlog

• I have switched from using native-wind colors to using my own, these are the same i used for my earlier project

• I have also changed how inputs look, they really sucked previously as they didn’t had titles and the design was low effort too, now the title sits above the main input field and the input field has a sharp look with borders and drop-shadow

• The tags took the most amount of time, I tried so many designs, but all looked very repetitive with the inputs and I wanted them to fit in too. Also I needed to have 2 designs for the tags, as i have a button to toggle removing, when not removing the tags are small and cute but when you toggle removing, they become big so that it is easier to touch them.

• The final add button also took a lot of time, the same issue as the tags, since it is the main call-to-action, it needs to be unique, so I had to make it different, It incorporates all the three colors in the design, black, gold and black along with the communist logo. It also has 2 states, the normal state is what is in the attached screenshot, but when it is submitting the add request to the backend, it sticks to its shadow by translating to its shadow, i mean it just animation

That’s it for this devlog, since the last devlog was very short, I had to compensate for that and I over-explained in this one

The next steps would probably be to connect the detecting code to route to this page with the item object, and also work on the main distribution part which i think would be the hardest.