Skip to content

PCD-3250 :: Skin dex login page with PCD colors#55

Merged
pratik1499 merged 5 commits intomasterfrom
private/pratik/PCD-3250-dex-ui-changes
Aug 22, 2025
Merged

PCD-3250 :: Skin dex login page with PCD colors#55
pratik1499 merged 5 commits intomasterfrom
private/pratik/PCD-3250-dex-ui-changes

Conversation

@pratik1499
Copy link
Collaborator

@pratik1499 pratik1499 commented Aug 19, 2025

Overview

Skin dex login page with PCD colors - https://platform9.atlassian.net/browse/PCD-3250

What this PR does / why we need it

This pull request improves the DEX login page to align its design with the PCD login page.

image image image

Summary by Bito

This pull request updates the DEX login page with PCD branding, including font families, color schemes, and new assets. The changes modify the login header text to a more concise branded version and refine template structures to align with updated design guidelines. The PR enhances the password page with a visibility toggle button and adds new logo assets for both dark and light themes to ensure consistent branding.

…tics and responsiveness, and enhance overall theme consistency.
- Replaced the existing keystone-icon.svg with a new SVG design featuring updated paths and colors.
- Removed the background-size property from the .dex-btn-icon--keystone class in main.css.
- Changed the favicon link in header.html from favicon.png to favicon.ico.
- Added new favicon.ico files for both dark and light themes, replacing the previous favicon.png files.
@bito-code-review
Copy link

bito-code-review bot commented Aug 19, 2025

Changelist by Bito

This pull request implements the following key changes.

Key Change Files Impacted
Feature Improvement - UI Branding Enhancements

password.html - Enhanced login form with updated labels, refined input styling, and an added password visibility toggle for improved usability.

styles.css - Reworked CSS styling by adjusting colors, fonts, spacing, and layout to align the login page with the new PCD branding.

templates.go - Updated font family and label colors to enforce consistent branding.

templates.go - Replaced the old PNG logo URL with an SVG version to boost scalability and clarity.

main.css - Refined CSS rules by adjusting font families, colors, font sizes, and added autofill styling for better UI consistency.

header.html - Included the new fonts stylesheet, updated favicon link, and enhanced logo markup with defined dimensions.

login.html - Changed the login page heading from 'Log in to {{ issuer }}' to 'Sign In' for enhanced clarity.

New Feature - Custom Asset Integration

logo.svg - Added a new dark theme SVG logo for improved visual quality and scalability.

logo.svg - Introduced a new light theme SVG logo to support consistent branding across themes.

fonts.css - Added comprehensive @font-face definitions for the custom 'Eina04' font.

eye-slash-solid-full.svg - Introduced a new eye-slash icon SVG to support password visibility toggling.

eye-solid-full.svg - Introduced a complementary eye icon SVG for enhanced user interface interactions.

keystone-icon.svg - Refined the keystone icon by overhauling its SVG markup and vector paths for improved graphic quality.

Copy link

@bito-code-review bito-code-review bot left a comment

Choose a reason for hiding this comment

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

Code Review Agent Run #cd8158

Actionable Suggestions - 1
  • web/templates/password.html - 1
    • Toggle password button lacks functionality implementation · Line 18-20
Additional Suggestions - 2
  • web/templates/header.html - 1
    • Misspelled HTML height attribute in logo · Line 17-17
      The attribute `hight` is misspelled and should be `height`. This typo will cause the height attribute to be ignored by browsers.
      Code suggestion
       @@ -17,1 +17,1 @@
      -        <img class="theme-navbar__logo" src="{{ url .ReqPath logo }}" hight="29px" width="190px">
      +        <img class="theme-navbar__logo" src="{{ url .ReqPath logo }}" height="29px" width="190px">
  • web/templates/password.html - 1
    • Duplicated eye icon URL in HTML and JavaScript · Line 51-52
      The `eye` variable is initialized with the same value that's already set in the HTML (line 19). This creates semantic duplication that could lead to inconsistency if one value is updated but not the other.
      Code suggestion
       @@ -50,7 +50,7 @@
      +      var icon = document.getElementById('toggle-password-icon');
      -+      var eye = '{{ url .ReqPath "static/img/eye-solid-full.svg" }}';
      ++      var eye = icon.getAttribute('src');
      +      var eyeSlash = '{{ url .ReqPath "static/img/eye-slash-solid-full.svg" }}';
      +      btn.addEventListener('click', function() {
Review Details
  • Files reviewed - 13 · Commit Range: f36a899..f19f023
    • examples/example-app/templates.go
    • server/templates.go
    • web/static/fonts.css
    • web/static/fonts/Eina-04/Licenses/Textaxis Commercial License.html
    • web/static/img/eye-slash-solid-full.svg
    • web/static/img/eye-solid-full.svg
    • web/static/img/keystone-icon.svg
    • web/static/main.css
    • web/templates/header.html
    • web/templates/password.html
    • web/themes/dark/logo.svg
    • web/themes/light/logo.svg
    • web/themes/light/styles.css
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Golangci-lint (Linter) - ✖︎ Failed

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at mithil@platform9.com.

Documentation & Help

AI Code Review powered by Bito Logo

Copy link

@mithilarun mithilarun left a comment

Choose a reason for hiding this comment

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

Do we also need to get rid of the my-dex in the first screenshot?

@mithilarun
Copy link

@srm6867 why does it have the login with example button too?

@pratik1499 pratik1499 closed this Aug 20, 2025
@pratik1499 pratik1499 reopened this Aug 20, 2025
@pratik1499
Copy link
Collaborator Author

pratik1499 commented Aug 20, 2025

@srm6867 why does it have the login with example button too?

@mithilarun, it is due to the mock setup on my local machine. As the config that I have has a connector name of Example that's why it is showing login with Example button. Once we have another connector for sso it will display login with sso button

@pratik1499
Copy link
Collaborator Author

Do we also need to get rid of the my-dex in the first screenshot?

@mithilarun It is the name of the issuer, as specified in config.yaml under the frontend section. We can change it to Platform9. If we dont pass any issuer name it takes dex as default.

@bito-code-review
Copy link

bito-code-review bot commented Aug 21, 2025

Bito Review Skipped - No Changes Detected

Bito didn't review this pull request because we did not detect any changes in the pull request to review.

@srm6867
Copy link

srm6867 commented Aug 21, 2025

Do we also need to get rid of the my-dex in the first screenshot?

@mithilarun We will need to update the config for dex in PCD chart repo. created tracker for this -
https://platform9.atlassian.net/browse/KAAP-962

I think, instead of renaming can we just remove this section heading? we already have Platform9 header/logo above.
@vaibhsir1991 @pratik1499 ?

Screenshot 2025-08-21 at 2 45 20 PM

vaibhsir1991
vaibhsir1991 previously approved these changes Aug 21, 2025
@pratik1499
Copy link
Collaborator Author

@mithilarun @vaibhsir1991 @srm6867
updated the Login in to dex text to Sign In

image

@bito-code-review
Copy link

bito-code-review bot commented Aug 21, 2025

Code Review Agent Run #2abe4f

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: f19f023..4cf7f92
    • web/templates/login.html
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at mithil@platform9.com.

Documentation & Help

AI Code Review powered by Bito Logo

@pratik1499 pratik1499 merged commit 05d7a87 into master Aug 22, 2025
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants