[$40] Correcting final fixes `Add` button styling

[RishiRajSahu]

This is in continuation of #2301 list-

Aha! Link: https://topcoder.aha.io/features/TCCONNECT-457

[RishiRajSahu]

@vic-topcoder could you please provide exact details ?

[vikasrohit]

Sorry @vic-topcoder to jump in. However, @RishiRajSahu @maxceem It is about the shape of the icon, it is looking oval right now, instead of being circular.

@vic-topcoder Please feel free to add more details if your intent was to get some thing else get fixed here as well.

[maxceem]

@vic-topcoder @vikasrohit @RishiRajSahu

In FireFox it looks even slightly worse, and same for remove "-" button.

There are three ways to solve it:

1. Just adjust styles to match desgin as close as possible including:

   • make sure the buttons are circle (not oval)
   • make sure there is not boder like if FireFox
   • make sure the "-" and "+" signs are vertically and horizontaly centered

   Note, Currently "+" and "-" are done by text chaacters.

2. We already have an SVG for "+" and "-" signs in project. Where the "+" sign is being used for creating new projects. But I'm not sure if these are the same SVG which we need and if it's desirable to reuse them.

   

   If we use these SVGs for "+" and "-" signs, we still have to make sure that we don't have any of the issues from the point 1.

3. Probably somebody can provide correct SVG for these buttons as SVGs are not available trought Marvel Handoff.

[vic-georgiev]

Let's fix the CSS styles of the buttons. I'd like to keep using the SVG icons and build a straight logical system for small circular buttons. Right now the styles break. This means going with @maxceem's suggestion for point 2.

The correct SVG should be already in the project assets folder, no?
small plus and minus 16px.zip

[vikasrohit]

@RishiRajSahu please remove the Blocked status if we have the requirements clear now.

[maxceem]

To sum up:

1. We already have an SVG for "+" and "-" signs in project.
2. We can reuse these SVGs to recreate + and - buttons in MilestonePostEditText component. (Note, Currently "+" and "-" are done by text characters but has to be done using SVG.)
3. We have to match design here https://marvelapp.com/8a94680/screen/41372926, in particular:
   • make sure the buttons are circle (not oval)
   • make sure there is not border like if FireFox
   • make sure the "-" and "+" signs are vertically and horizontaly centered
   • keep these buttons as <button> HTML tag unless it's impossible to match the design using button tag in some reason.
4. Use variables for colors in SCSS from https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss.
5. Test it crossbrowser.