Base apparel page with React, Sass, Jsx

Community feedback

• 

  Aakash Verma•9,480

  @skyv26

  Posted 3 months ago

  Hi @tatyanepgoncalves,

  I noticed a couple of areas in your form design that could use some fine-tuning for better alignment and user experience. Here's my suggestion:

  1️⃣ Align the Email Button Properly
  The button inside the email input field is not aligned correctly. To fix this, you can add a height property to the button styling. Here's an example that should work:

  .btn-submit {
      background: linear-gradient(135deg,#f8bfbf,#ee8c8c);
      padding: 10px 23px;
      border-radius: 23px;
      border: none;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      box-shadow: 0 5px 10px #00000080;
      cursor: pointer;
      transition: all .5s;
  }
  

  2️⃣ Position the Error Message for a Cleaner Look
  Consider making the error message element's position absolute. This approach prevents it from disrupting the layout flow of the page and works well with the height adjustment applied to the button. Here's an updated style:

  .form-group.error .error-message {
      color: #f96262;
      text-align: left;
      position: absolute;
  }
  

  One more thing add position: relative to the form-group class, otherwise your button will acquire full screen height, doing this, will restrict the button height only up to the length of the form-group.

  These changes should give your form a more polished, visually appealing, and user-friendly design. Keep up the great work! 🚀 Let me know if you need help testing this out. 😊

  Best regards,
  Aakash Verma

  01