[Remove Vuetify from Studio] Informative pages in Accounts #5635

AadarshM07 · 2026-01-13T09:14:12Z

Summary

The following PR helps the initiative of removing Vuetify from Studio. This focuses on the accounts page, where previously, MessageLayout a vuetify built component was used. I have designed another component, StudioMessageLayout, which is built using StudioPage and custom styling. The PR has not explicitly removed MessageLayout or affected its present behavior. Instead ,its usage has been removed and replaced in the following files:

accounts/pages/accountDeleted/AccountDeleted.vue
accounts/pages/activateAccount/AccountCreated.vue
accounts/pages/activateAccount/AccountNotActivated.vue
accounts/pages/activateAccount/ActivationExpired.vue
accounts/pages/activateAccount/ActivationLinkReSent.vue
accounts/pages/activateAccount/ActivationSent.vue
accounts/pages/resetPassword/PasswordInstructionsSent.vue
accounts/pages/resetPassword/ResetLinkExpired.vue
accounts/pages/resetPassword/ResetPasswordSuccess.vue

screenshots

Since adding all the images in the PR would make it lengthy, I have uploaded all of them with labels in the following google-drive link: Studio issue#5631

References

Closes #5631

Reviewer guidance

The changes are reflected in the following files. After going to the login page, adding the following URL will take to the page:
AccountDeleted.vue = /account-deleted
AccountCreated.vue = /account-created
AccountNotActivated.vue = /account-not-active
ActivationExpired.vue = /activation-expired
ActivationLinkReSent.vue = /activation-resent
ActivationSent.vue = /activation-sent
PasswordInstructionsSent.vue = /password-reset-sent
ResetLinkExpired.vue = /reset-expired
ResetPasswordSuccess.vue = /password-reset-success

…

learning-equality-bot · 2026-01-13T09:14:45Z

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

You ran pre-commit locally
All issue requirements are satisfied
The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

rtibbles

This is an excellent start - thank you!

8 of 9 page migrations look correct
Screenshots provided via Google Drive link - very helpful for review (be sure to update them as you make follow up edits too).

Blocking issues:

No tests added.
Invalid attribute syntax for appearance.
Incorrect import path for one migrated component.

I look forward to your updates!

rtibbles · 2026-01-14T00:03:01Z

contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue

+            <KRouterLink
+              :to="{ name: 'Main' }"
+              :text="$tr('backToLogin')"
+              :appearance="basic - link"


blocking: Invalid attribute syntax - :appearance="basic - link" will evaluate as JavaScript (undefined - undefined = NaN), not as a string.

Should be:

appearance="basic-link"

(No colon, plain string attribute)

Thanks @rtibbles, I understood what you mentioned. I was facing an issue where binding the value as a string causes the link to appear covered with the link color. I tried removing the appearance prop since basic-link is the default, but the issue still there. Interestingly, when I bind it using JavaScript (sorry my mistake it was undefined here) the problem does not occur.

This has been confusing, as the issue only appears when using StudioMessageLayout . I will continue working on this to find the fix. I would also appreciate your insights on this

The issue:

Interesting - I'm not seeing anything in the styles for your new component that would cause this - if you inspect the link itself, and look at the CSS inspector, are you able to see where this background colour is coming from?

Hey @rtibbles , After spending some time debugging this is the conclusion that I came to regarding the issue.

Why this happens:
At its core, KRouterLink seems to be built on top of the button system (mixins: [buttonMixin]). Even when we use appearance="basic-link", it still creates a button that looks like a link. Further investigation in buttonMixin.js:64–71 made it clear that this is what applies the blue color on hover and the styling around the link text. And as it is a button it wraps up the rectangular space.

Why this issue was not experienced before:
Previously, most usages of KRouterLink were inside Vuetify layouts such as VApp, VLayout, and VFlex. Vuetify adds its own global CSS rules to components. Essentially, vuetify's styles were overriding the button styles applied by KRouterLink. Inorder to valide my point over here , I did an experiment with KRouterLink:

When the component is rendered in a normal blank page, the button-like styling is visible.

When the same component is wrapped inside Vuetify, it appears as a normal link.

I may be missing something. If you also think this is an issue, I do have an approach in mind that i'd like to share.

If you look at the KRouterLink documentation page, you can see that when it is rendered as a basic-link, it does not have this styling: https://design-system.learningequality.org/krouterlink something is going awry if this is the case.

Hey @MisRob, After checking further, I am still in the same conclusion. It seems similar issues with Vuetify overriding links where faced before, and main.scss:L100-L115 already contains some measures that were previously added to minimize this. But then they target cases where links appear inside Vuetify components. I will provide a screenshot that shows a css overriding when i inspected the link.

I found these CSS changes, which are not present anywhere in the codebase. It is highly likely that this is being generated by Vuetify during runtime. A fix for this issue at the studio level could be to add something like the following inside main.scss itself:

.link, a.link { background-color: transparent !important; border-color: transparent !important; }```

Hi @AadarshM07, okay thanks for further debugging. I think it will be more suitable to adjust on Studio side than on KDS side. I'm just a bit worried about touching global styles. Before I consider that, would it help to do this change specifically in StudioMessageLayout's scoped style?

And if my suggestion doesn't work, then yes we could probably take a bit of risk and adjust main.scss further. Thanks for locating that existing snippet, I wasn't aware of that one yet :)

And if my suggestion doesn't work, then yes we could probably take a bit of risk and adjust main.scss further. Thanks for locating that existing snippet, I wasn't aware of that one yet :)

yes, adding it inside StudioMessageLayout scoped css works here. I’ve updated the changes as well. Thank you

That's perfect, thanks

rtibbles · 2026-01-14T00:03:01Z

contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue

 <script>

-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/MessageLayout';


blocking: Wrong import path - this still imports from MessageLayout (the old Vuetify component) instead of StudioMessageLayout.

Should be:

import StudioMessageLayout from '../../components/StudioMessageLayout';

This defeats the purpose of this PR for AccountDeleted.vue - it's still using Vuetify.

Sorry about that, my mistake

rtibbles · 2026-01-14T00:03:01Z

contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue

@@ -0,0 +1,105 @@
+<template>


blocking: The acceptance criteria in issue #5631 state:

If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue.

This new component has no unit tests. Consider adding tests for:

Rendering with required header prop

Rendering with optional text prop

Default slot content

Named back slot override

Thanks for the input, I will work on this 👍

MisRob · 2026-01-21T17:10:31Z

contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue

    justify-content: center;
    min-height: 100vh;
  }



Would you please add a comment here on that it was needed because of Vuetify problems? That way, we can understand later more easily, and cleanup after Vuetify is gone.

Sure, I have added it :)

rtibbles self-assigned this Jan 13, 2026

rtibbles requested changes Jan 14, 2026

View reviewed changes

AadarshM07 force-pushed the issue#5631 branch from e55da17 to b207842 Compare January 21, 2026 06:20

MisRob reviewed Jan 21, 2026

View reviewed changes

MisRob requested a review from rtibbles January 21, 2026 17:10

AadarshM07 added 5 commits January 22, 2026 00:09

feat: developed new StudioMessageLayout component

a9bc625

feat(accounts): replaced messageLayout with StudioMessageLayout

7b48919

fix(StudioMessageLayout): link overrided by vuetify

6a2a22c

test: covered basic unit tests for StudioMessageLayout

27476d4

chore: mention Vuetify override issue

445a2a1

AadarshM07 force-pushed the issue#5631 branch from b207842 to 445a2a1 Compare January 21, 2026 18:41

[Remove Vuetify from Studio] Informative pages in Accounts #5635

Are you sure you want to change the base?

[Remove Vuetify from Studio] Informative pages in Accounts #5635

Conversation

AadarshM07 commented Jan 13, 2026

Summary

screenshots

References

Reviewer guidance

Uh oh!

learning-equality-bot bot commented Jan 13, 2026

Uh oh!

rtibbles left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AadarshM07 Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MisRob Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AadarshM07 Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AadarshM07 Jan 14, 2026 •

edited

Loading

MisRob Jan 20, 2026 •

edited

Loading

AadarshM07 Jan 21, 2026 •

edited

Loading