"Preferences" styling

[saviusz]

Done in this commit:

• added @fortawsome/fontawsome-free package to package.json
• changed positions of options in preferences
• fixed switch vertical position, by setting margin-top, margin-bottom to
  'auto' in style.css
• aligned work hours input to the right
• added styles and code to icons in Preferences window - resolve to International title of "Language" option in preferences #557
• improved grouping in Preferences
• Modified structure of preferences.html, changing

     <div class="flex-box">
        <p {jQuery tag}>{Name}</p>
     </div>

  to

     <div class="flex-box">
        <p>
          <i class="fas fa-icon"></i>
          <span {jQuery tag}>{Name}</span>
        </p>
     </div>

Related issue

Closes #557

Showcase

Before

---

After

[codecov]

Codecov Report

Merging #563 into main will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #563   +/-   ##
=======================================
  Coverage   71.54%   71.54%           
=======================================
  Files          28       28           
  Lines        2583     2583           
  Branches      391      391           
=======================================
  Hits         1848     1848           
  Misses        656      656           
  Partials       79       79           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f28f747...b6bcd6f. Read the comment docs.

[saviusz]

@thamara, can you review this?

[thamara]

Looks really good with the icons and the sections! Loved it!

[thamara]

Looks great!

[thamara]

\changelog-update
Message: Enhancement: [#563] Making the preferences window more organized and pretty
User: SaviPrograms

[thamara]

Thanks!