search

open-dollar / od-app

https://app.dev.opendollar.com
6 stars 4 forks source link

App Redesign: new hero section (no vaults) #291

Closed jahabeebs closed 7 months ago

jahabeebs commented 8 months ago

New hero section when no vaults

Current design as of 3/22 but reference latest

Screen 1: Hero & connect wallet

image

Screen 2: Connecting Wallet

image

Screen 3: Create Vault facilitator

image

Screen 4: Create Vault

image

The main moving piece here is the stepper, connecting the wallet, and creating a facilitator is simple signatures in the wallet.

latest designs as of 4/02:

https://www.figma.com/file/EkcMRZhPra8NezYKt4zn7s/OD-testnet-app?type=design&node-id=678-1010&mode=design&t=QjIydVLUL2op02il-0

alekseevaiana commented 7 months ago

Hi @Seroxdesign, I reviewed the code base today and have outlined a plan and some questions below. Let's discuss these in our morning meeting.

  1. Should we create components specifically for mobile screens? If so, how should the stepper component be adapted for mobile use?
  2. There are 3 steps and screens, but I need to figure out how to make additional step which has a different layout.
  3. Consider changing the layout for each step to accommodate two different designs.
  4. I need to change button styling, including main colors and borders. However, access to the design page is required to view all button variations.
  5. Style cookie wrapper
  6. Make Stepper component: do we want to use library for this kind of components? How do we choose a library so it will be safe? I couldn't find a library in a package.json that already in use. Also I took a look at the most popular libraries, and steppers look different everywhere. But I can make my own stepper, don’t think that it will take long.
  7. Changing background. I see there is gradient and a picture. Hope that I can use it from Figma, but need to have access first.
Seroxdesign commented 7 months ago
  1. Should we create components specifically for mobile screens? If so, how should the stepper component be adapted for mobile use?

adopt a no text stepper like the following (using the same color schemes as the figma designs): image

  1. There are 3 steps and screens, but I need to figure out how to make additional step which has a different layout.

Preferably we should stick to custom code, as we are using styled components already and do not need the limitations that come with dependencies.

  1. Consider changing the layout for each step to accommodate two different designs.

These separate layouts are going to be part of the same page:

  1. need to change button styling, including main colors and borders. However, access to the design page is required to view all button variations. 5 & 7 Resolved

  2. Make Stepper component: do we want to use library for this kind of components? How do we choose a library so it will be safe? I couldn't find a library in a package.json that already in use. Also I took a look at the most popular libraries, and steppers look different everywhere. But I can make my own stepper, don’t think that it will take long.

This will contain template components for you, so you don't need to install dependencies and libraries, first you will check in the components folder if something already exists, and you will change that. Otherwise, you can copy a component from styled-components or another template provider and customize it to fit the designs. https://styled-components.com/docs/advanced

pi0neerpat commented 7 months ago

closed by #328