Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] Rebranding #3788

Merged
merged 18 commits into from
Jan 25, 2022
Merged

[Feature] Rebranding #3788

merged 18 commits into from
Jan 25, 2022

Conversation

matiasmoreno876
Copy link
Contributor

@matiasmoreno876 matiasmoreno876 commented Jan 5, 2022 •
edited by Desvelao
Loading

Hi team, in this PR I merged, the work done by @yenienserrano in the PR. Changes are for version 4.3

Closes #3575

@matiasmoreno876 matiasmoreno876 mentioned this pull request Jan 5, 2022
Closed
2 tasks
Desvelao
Desvelao reviewed Jan 10, 2022
View reviewed changes
public/styles/component.scss Outdated
Comment on lines 121 to 124
}

.euiCard .euiCard__top .euiIcon--app .euiIcon__fillSecondary{
fill: #256BD1
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: This style could be affecting some components of Kibana apart from the Wazuh app. We should restrict this to the Wazuh app.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: Was the secondary color changed? In this comment, the color seems to be #3585F9. Could we be sure that color we should apply?

@Desvelao
Copy link
Member

Desvelao commented Jan 10, 2022 •
edited
Loading

review:

In dark mode, the logo doesn't look so good.
image
image

Should we replace it depending on the selected theme?

Theses icons have 2 tones:
image
but these only have a tone:
image

Could this be related to the addition of next CSS and they are not affecting to the icons of Wazuh menu?

.euiCard .euiCard__top .euiIcon--app .euiIcon__fillSecondary{
    fill: #256BD1
}

@Desvelao Desvelao linked an issue Jan 10, 2022 that may be closed by this pull request
Rebranding logos #3575
Closed
8 tasks
@Desvelao
fix: removed fixed value of brand color in some icons
e5f365d
@Desvelao
fix: Apply brand logos depending on custom or default images with the…
1371ee6 
… selected theme

  - Apply brand images depending on app configuration with custom (no themes) or default (with themes)
  - Changed default values of `customization` app setting to empty.
    - customization.logo.app
    - customization.logo.sidebar
    - customization.logo.healthcheck
    - customization.logo.reports
  - Moved the app screenshots images to `screenshots` directory
  - Organize the default assets in the next structure:
    - fonts
    - images
      - icons: moved the icons (office365 and gmail)
      - themes: moved the default brand images. Added images for dark theme.
  - Moved some values to `contants.ts` file
  - Created functions related to the assets that create the path of them
@Desvelao
fix: set some butotns as primary
5e42db3
@Desvelao
feat(rebranding): Add brand colors and replace some module icons in M…
73faef4 
…anagement directory

  - Add logos (line art) for Docker, GitHub, Google Cloud, Office 365 as ReactJS components
  - Replaced logos for Docker, GitHub, Google Cloud and Office 365 in `Management directory`
  - Add app styles for `light` and `dark` theme.
    - Created mixin to apply the brand color in `light` and `dark` themes.
    - Centralized the brand colors using SCSS variables
  - Changed some styles in the health check
  - Apply `primary` color for icons in the app menu
@Desvelao Desvelao changed the title Feature/rebranding logos [Feature] Rebranding Jan 24, 2022
@Desvelao
Copy link
Member

Changes

  • Apply brand images depending on app configuration with custom (no themes) or default (with themes)
  • Changed default values of customization app setting to empty.
    • customization.logo.app
    • customization.logo.sidebar
    • customization.logo.healthcheck
    • customization.logo.reports
  • Moved the app screenshots images to screenshots directory
  • Organize the default assets in the next structure:
    • fonts
    • images
      • icons: moved the icons (gmail)
      • themes: moved the default brand images. Added images for dark theme.
  • Moved some values to contants.ts file
  • Created functions related to the assets that create the path of them
  • Add logos (line art) for Docker, GitHub, Google Cloud, Office 365 as ReactJS components
  • Replaced logos for Docker, GitHub, Google Cloud and Office 365 in Modules directory
  • Add app styles for light and dark themes.
    • Created mixin to apply the brand color in light and dark themes.
    • Centralized the brand colors using SCSS variables
    • Changed some styles in the health check
  • Apply primary color for icons in the app menu

Screenshots

light theme:

  • Logos

    • Menu and sidebar
      image

    • Health check
      image

    • Report
      image

    • Loading
      image

  • Module logos in Modules directory
    image
    image
    image
    image
    image

  • Module logo in Panel tab
    image
    image

dark theme

  • Logos

    • Menu and sidebar
      image

    • Health check
      image

    • Report
      image

    • Loading
      image

    • Module logos in Modules directory
      image
      image
      image
      image
      image

    • Module logo in Panel tab
      image
      image

@yenienserrano yenienserrano requested review from yenienserrano and removed request for yenienserrano January 24, 2022 20:33
@yenienserrano
Copy link
Member

Shouldn't that icon be blue?
image
image

@Desvelao
Copy link
Member

Desvelao commented Jan 25, 2022 •
edited
Loading

Shouldn't that icon be blue?
image
image

This is not related to the PR but it is a good appreciation that we could consider.

The colors of that icon are defined with the fill property and they are not altered when setting the color property of the button. We could change this with styles.

@Desvelao Desvelao merged commit 8a90a3f into 4.3-7.10-RC2 Jan 25, 2022
@Desvelao Desvelao deleted the feature/rebranding-logos branch January 25, 2022 10:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Desvelao Desvelao Desvelao left review comments

Assignees

@matiasmoreno876 matiasmoreno876

@yenienserrano yenienserrano

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Rebranding logos
3 participants
@matiasmoreno876 @Desvelao @yenienserrano