[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.

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.

Oh yes, my earlier conclusion about it being primarily caused by buttonMixin may not be the exact root issue if that is the case.

I now suspect the issue is on the Studio side, as @MisRob also mentioned that this can happen in some cases. One fix I found that seems like a win-win and does not affect behavior is to add background-color: transparent !important; to the link styling in button.scss (KDS side fix). This resolves the link styling issue here and is unlikely to impact other KRouterLink use cases.

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?

@rtibbles like you suggested, while inspecting the CSS I noticed that Vue Router automatically adds classes such as router-link-active for active links, which might be picking up styles and adding this blue background. In earlier cases, since most usages of KRouterLink were within Vuetify layouts, its global styles may have been neutralizing these effects, which could explain why it wasn't seen before.

Thanks for looking into it more @AadarshM07. It sounds that the KDS adjustments you found out supports hypothesis that it may be a Vuetify style that's causing the problem, but we don't yet know how exactly what's happening on Studio side right? With my suggestion I meant if you could track the root cause in Studio (and post reference to related styles). Then the decision on how to proceed will be clearer (adjusting KDS is possible in some cases, but doing so prematurely would lead to adding style that, after Vuetify is removed, wouldn't be needed).

And the screenshot is good information - it's just not clear to me where those styles are coming from exactly in the codebase - and that's what I'm trying to get at.

@MisRob , Thanks for the input, I understood the mission. Also, I have an event over the next two days, so I may be a bit slow to respond, but I will look into this and update you right after

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 👍

AadarshM07 added 2 commits January 13, 2026 14:10

feat: developed new StudioMessageLayout component

025e7c1

feat(accounts): replaced messageLayout with StudioMessageLayout

e55da17

rtibbles self-assigned this Jan 13, 2026

rtibbles requested changes Jan 14, 2026

View reviewed changes

[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!

Choose a reason for hiding this comment

Uh oh!

MisRob Jan 16, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AadarshM07 Jan 14, 2026 •

edited

Loading

MisRob Jan 16, 2026 •

edited

Loading