UI: Add a way that makes possible change the "sidebar__logo" and the "login__text" content using CSS.

[jschmidtcordeiro]

Summary

Add a way that makes possible change the sidebar__logo and the login__text content using CSS.

Motivation

Following the same line of thought as the "Custom Styles" page "Sometimes, it may be desired to customize certain components of the UI for branding purposes", the motivation is to add a different title in these two contents, to customize the ArgoCD UI and fit the brand.

These images show an example of use case:

This image indicates the change of the phrase in the home screen (sidebar__logo)

This image indicates the change of the phrase in the login screen (login__text)

Proposal

At the moment the content is beeing written directly inside the <div>. My suggestion is to put the content inside a <span> and the <span> inside the <div>.

Here is an example of the before/after the suggestion.

Code Snippet Before the Suggestion

<div class="sidebar__logo">
    <img src="assets/images/logo.png" alt="Argo"> 
    Argo CD
</div>

Code Snippet After the Suggestion

<div class="sidebar__logo">
    <img src="assets/images/logo.png" alt="Argo"> 
    <span>Argo CD</span>
</div>

What is the actual change?

With this change, it is possible to apply the following CSS and get the expected result.

.sidebar__logo span {
  display: none;
}
.sidebar__logo:after {
  content: 'Customized Text';
}

Expected result:

[changhyuni]

i love it

[tdt-hai]

how to add

? please help me

<div class="sidebar__logo">
    <img src="assets/images/logo.png" alt="Argo"> 
    <span>Argo CD</span>
</div>