fix: Adjust Padding for "+-Button" in Note Input Field

[dipesh1903]

Description

In the input field used for writing a note, there is too much padding to the right of the "+-button" compared to the border of the input field. Please adjust it so that the right-side padding is the same as the left-side padding.

Ticket number: #4551

Changelog

Removed the margin-left css property from class .note-input__icon--add inside NoteInput.scss file.

Checklist

• [yes] I have performed a self-review of my own code
• [yes ] I have commented my code, particularly in hard-to-understand areas
• [ yes ] The light- and dark-theme are both supported and tested
• [ yes ] The design was implemented and is responsive for all devices and screen sizes
• [yes ] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

Before Change -

After change -

[Schwehn42]

Hi, thanks for the contribution @dipesh1903!

Just reviewed this, and looks good all in all. One "issue" I noticed is the spare gap between the AddIcon and text field:

This wastes quite some space, so I would suggest changing things up:

• .note-input
  • remove justify-content: space-between
  • add gap: $spacing--xxs
• .note-input__input
  • remove width: calc(100% - 20px - 40px)
  • add width: 100%

The result looks like this:

Which is a slight improvement over the current design. @SelinaBuff lmk what you think?

[Schwehn42]

Ok, we want to keep it like this for the time being, so LGTM 👍

[dipesh1903]

Thanks @Schwehn42 for the feedback.