Improve button UI with icon

[mparvazi]

Fixes #241

btn-with-icon:
Vertical alignment for icons inside buttons (inline-flex)

The size of icon and gap will be changed based on button size (btn-sm, btn, btn-lg):

Variables

$default-button-icon-size: 1.5rem;
$default-button-icon-gap: 0.25rem;

$small-button-icon-size: 1.25rem;
$small-button-icon-gap: 0.125rem;

$large-button-icon-size: 1.875rem;
$large-button-icon-gap: 0.375rem;

SCSS

.btn-with-icon {
  display: inline-flex;
  gap: $default-button-icon-gap;
  align-items: center;
  justify-content: center;

  .material-icons {
    font-size: $default-button-icon-size;
  }

  &.btn-sm {
    gap: $small-button-icon-gap;

    .material-icons {
      font-size: $small-button-icon-size;
    }
  }

  &.btn-lg {
    gap: $large-button-icon-gap;

    .material-icons {
      font-size: $large-button-icon-size;
    }
  }
}

[SharakPL]

All of these paddings and rtl can be avoided if you simply use gap on the button 😉

[NeOMakinG]

I guess it looks fine, but didn't tested it yet so!

[NeOMakinG]

@Hlavtox @SharakPL if you find something wrong with this one afterwhile, please open an issue or a PR :)

Looked fine and wants to clean a bit the current PR flow of this repository in order to avoid stacking too much stuff

[SharakPL]

Looks good for me.

One thing though. I see some duplications throughout the theme (not specific to this PR):

hummingbird/src/scss/partials/_helpers.scss

Lines 39 to 49 in 5c5319f

	.text-gray {
	color: $gray-700;
	}
	.w-full {
	width: 100%;
	}
	.h-full {
	height: 100%;
	}

Can I remove these and just use Bootstrap classes w-100 and h-100 instead? text-muted isn't really the same as text-gray but I'm guessing the purpose of it is the same, so it also could be used here.

hummingbird/src/scss/partials/_helpers.scss

Lines 51 to 53 in 5c5319f

	.cursor-pointer {
	cursor: pointer;
	}

This also could be removed. Adding role="button" to the element does exactly the same.

[NeOMakinG]

Looks good for me.

One thing though. I see some duplications throughout the theme (not specific to this PR):

hummingbird/src/scss/partials/_helpers.scss

Lines 39 to 49 in 5c5319f

	.text-gray {
	color: $gray-700;
	}
	.w-full {
	width: 100%;
	}
	.h-full {
	height: 100%;
	}

Can I remove these and just use Bootstrap classes w-100 and h-100 instead? text-muted isn't really the same as text-gray but I'm guessing the purpose of it is the same, so it also could be used here.

hummingbird/src/scss/partials/_helpers.scss

Lines 51 to 53 in 5c5319f

	.cursor-pointer {
	cursor: pointer;
	}

This also could be removed. Adding role="button" to the element does exactly the same.

Feel free, you're welcome!