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.

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

Apply MUI theming to "Versions" and "Details" Screens #471

Merged
merged 1 commit into from
Oct 11, 2024

Conversation

jenny-s51
Copy link
Contributor

Description

Applies MUI theming to "Versions" and "Details" Screens

Model Versions List View - Before:
Screenshot 2024-10-10 at 2 03 19 PM

Model Versions List View - After:
Screenshot 2024-10-10 at 2 02 56 PM

Model Details Description Input - Before:
Screenshot 2024-10-10 at 2 03 32 PM

Model Details Description Input - After:
Screenshot 2024-10-10 at 2 02 07 PM

Model Details Properties Table - Before:
Screenshot 2024-10-10 at 2 03 48 PM

Model Details Properties Table - After:
Screenshot 2024-10-10 at 2 04 14 PM

How Has This Been Tested?

What's been changed:

  1. Model Versions List View

    • "Register Version" Button - applied MUI hover color
    • Page container - updated to apply MUI border radius and drop shadow
    • Tabs - Fixed padding bug to center text within tab correctly
    • Search input - replaced existing search filter component with new FormFieldset component to apply MUI theming
  2. Model Details View

    • Action buttons (i.e. "Edit", "Add Property") - applied MUI link styling to darken underline of link button when hovered
    • "Description" field - replaced with new FormFieldset component to apply MUI theming
    • Properties table - replaced Key / Value inputs with FormFieldset components to apply MUI theming
    • Action buttons: Updated border radius on hover to apply MUI theming

Merge criteria:

  • All the commits have been signed-off (To pass the DCO check)
  • The commits have meaningful messages; the author will squash them after approval or in case of manual merges will ask to merge with squash.
  • Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
  • The developer has manually tested the changes and verified that the changes work.
  • Code changes follow the kubeflow contribution guidelines.

If you have UI changes

  • The developer has added tests or explained why testing cannot be added.
  • Included any necessary screenshots or gifs if it was a UI change.
  • Verify that UI/UX changes conform the UX guidelines for Kubeflow.

Signed-off-by: Jenny <[email protected]>

apply theming to model info screens

fix button color on hover

add comment

fix button color on hover

Signed-off-by: Jenny <[email protected]>

format

update to absolute path
Copy link
Contributor

@Griffin-Sullivan Griffin-Sullivan left a comment

Choose a reason for hiding this comment

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

Everything looks good to me. The spacing on Model / Version details looks a little pushed together vertically but not something we need to address in this PR. I notice your screenshots look different from mine though.

image

Copy link

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, Griffin-Sullivan

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@ederign
Copy link
Member

ederign commented Oct 11, 2024

/lgtm

@google-oss-prow google-oss-prow bot added the lgtm label Oct 11, 2024
@google-oss-prow google-oss-prow bot merged commit 115e195 into kubeflow:main Oct 11, 2024
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants