Cleaned and refactored app buttons

[JuanjiJG]

Hello all,

Description

This pull request introduces the first approach to refactoring the app buttons. The objective is to unify the HTML and CSS code throughout the app. In order to achieve this, a new CSS class, wazuh-button, was created in order to store the customizations from the original AngularJS Material.

This work involves removing old CSS classes and styles, who were creating incompatibilities not only between the different buttons but also with different components such as the navbar. Now we have less CSS code with the same effect as before, and with unified buttons.

Example screenshots

Description of new HTML code

In order to prevent the same HTML code when new buttons are added to the app, I'll show an example HTML code describing the structure:

<div layout="row" layout-align="center center">
    <md-button flex="15" type="submit" class="wazuh-button md-raised md-primary" aria-label="Save API button">
        <i class="fa fa-floppy-o fa-fw" aria-hidden="true"></i> Save API
    </md-button>
</div>

Important things:

• The div element helps to organize the button on the layout. Not all the buttons have this structure, and more future work will be needed to clean this. The flex attribute defines the width, which is better than define a custom CSS class with hard-coded pixel width.
  • Note: I'm not sure if the flex attribute is appropriate on buttons, but we'll keep that until we do more research.
• The wazuh-button md-raised md-primary classes are mandatory in every new button. Some buttons have one more class defining some custom width or height, but in the future, this should be removed too.
• If we use a FontAwesome icon, we should always use the fa-fw class to align the icon with the text, and not use other classes, (except fa and fa-<icon_name>).
• aria-label is mandatory, no button shouldn't miss this attribute. This should describe the button and its action (for example, "Decoders table button").

Hoping this likes, any feedback or suggestions are welcome.

Regards,
Juanjo

[havidarou]

LGTM!