Active

Payout
300 DAI

$297.19

Remaining Balance
300 DAI

$297.19

Fix UI/UX bugs

HTML

CSS

Solidity

JavaScript

This is a list of UI/UX bugs to fix:

Across steps

General

  • General left & right margins should be 24px and all elements should be aligned to this
  • Step title should be font-size: 22p; line-height: 28px;
  • Font should be Inter UI

Input fields

  • Input field right margin should be 24px (now is too closed to the right border)
  • Input field should have border-radius: 8px;
  • Input field label color should be Black (see color variables in Figma)
  • Input field label should be font-size: 15px; line-height:22px;
  • Space between step title and input field label should be 24px
  • Input field should be height: 52px;
  • Placeholder should be aligned in the center (vertically)
  • Char counter label should be font-size: 12px;
  • Char counter right padding should be 24px
  • Padding for the multi-line input field should be 14px (distance between text inside the input field and the borders of the input field)

Call to action

  • Call to action white container's height should be 52px
  • CTA label should be font-size: 15px; line-height:22px; (now is too small)

Step 3 - Add options

  • Plus (+) icon is missing (broken in Chrome).
  • "New option" modal should slide from the bottom
  • [UX] "New option" modal: "Save" button should be disabled until user enter option title and description
  • "New option" modal: Close icon should be aligned to the left
  • "New option" modal: Close icon should be the provided icon (see Figma)
  • "New option" modal: "Save" label should be font-size: 15px; line-height:22px;
  • [UX] "Poll description" input field label should say "Option description"
  • [UX] When user taps on a created option in the list, the modal should open with pre-loaded data, ready to edit, with "Save" enabled.
  • Header should be fixed (see Figma prototype)
  • [UX] Options should be ordered chronologically (latest first). By this, when you create a new one, you don't need to scroll all the way down to see what you just created and we give the user a sense of feedback/completion of the task of adding an option.

Step 4 - Set date/time

  • [UX] CTA should say "Review" instead of "Next".

Step 5 - Review

  • Poll title (not page title) should be font-size: 17px; line-height: 24px;
  • Poll description text should be font-size: 15px; line-height:22px;
  • Distance between poll description and date card should be 32px
  • Time/Date card: height should be 144px (need to adjust text and spaces inside, see next items)
  • Time/Date card: border should be #EEF2F5
  • Time/Date card: "Poll starts" and "Poll ends" titles should be font-size: 15px; line-height:22px;
  • Time/Date card: dates/time text should be font-size: 15px; line-height:22px; font-weight: 600; (semibold)
  • "Options" grey label should be font-size: 15px; line-height:22px;
  • Distance between "Options" grey label and first option should be 8px (is too close now)
  • Options cards: Height should be 72px (need to adjust text and spaces inside, see next items)
  • Options cards: Paddings should be 16px
  • Options cards: Option title should be font-size: 15px; line-height:22px; font-weight: 600; (semibold)
  • Options cards: Option grey description should be font-size: 13px;
  • Options cards: Distance between option cards should be 12px
  • CTA should say "Sign to confirm" not "Sign To Confirm" (no capitalization)

Designs on Figma

Submissions

1

Comments

1

Submissions are private

The submissions for this bounty have been set to private.