Skip to content

Conversation

vtushar06
Copy link
Contributor

This PR removes unused Vuetify styles from InfoModal.vue and moves necessary styling (specifically the line-height for license descriptions) to RequestForm.vue, where it’s actually used.

Summary

These updates are part of the ongoing effort to remove Vuetify from the Studio codebase.

Changes made:

(1)-InfoModal.vue
•	Removed scoped Vuetify-specific ::v-deep styles referencing deprecated CSS variables like --v-grey-darken3
•	Verified that these styles had no impact on modal rendering or text layout

(2)-RequestForm.vue
•	Wrapped license descriptions ({{ translateConstant(...) }})inside a <p> tag.
•	Moved line-height: 1.25 style directly to that tag via .license-description class.
•	Ensured styles are now locally scoped and meaningful — no use of ::v-deep or Vuetify tokens.

🧪 Manual Verification:
• Navigated to Settings > Storage > Request more space
• Opened the info modal beside “Who can use your content?”
• Manually toggled visibility of the modal in the component for testing

Confirmed that:
 •	✅ Modal renders correctly
•	✅ License description text uses proper line-height
•	✅ No visual regressions observed
•	✅ Vuetify-specific styles are fully removed
•	✅ Layout and functionality remain unchanged

References

Fixes: #5095 – Remove unused :v-deep styles from info modal
• Original (closed) PR: #5112 – Closed to avoid git rebase issues
• Part of broader task: #5060 – Full removal of Vuetify from Studio

Reviewer guidance

To test:
1. Log in with: [email protected] / password: a
2. Go to Settings > Storage > Request more space
3. Open the info modal next to “Who can use your content?”
• If modal does not open, temporarily force visibility from the component code
4. Verify:
• Modal renders and styles apply correctly
• License description text is styled with correct line-height
• No visual difference compared to production
• All removed styles were unused and related to Vuetify

…ensing details
@MisRob MisRob self-requested a review June 20, 2025 11:25
@MisRob MisRob self-assigned this Jun 20, 2025
@vtushar06
Copy link
Contributor Author

Hi @MisRob, I’ve fixed the linting issue and all checks are passing now. Could you please review and approve the PR? Thanks!

Copy link
Member

@MisRob MisRob left a comment

Choose a reason for hiding this comment

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

Hi @vtushar06, thank you.

Gap between link and paragraph above seems to be larger now review.

As per requirements, there should be no visual differences in before / after. I'm leaving few pointers. Before you request new review, please compare carefully everything one more time to the original version and make adjustments that are needed.

@vtushar06
Copy link
Contributor Author

Hi @MisRob I have resolved previous issue and set line height. to 1.5 as In testing, normal rendered with slightly tighter spacing, making the license description look more cramped than in production.

@MisRob MisRob self-requested a review June 30, 2025 08:48
@MisRob
Copy link
Member

MisRob commented Jun 30, 2025

Thanks @vtushar06. It looks fine overall, except still larger gap between link and paragraph I mentioned here. I've pushed a commit to resolve that and will merge now.

@MisRob MisRob merged commit 273e174 into learningequality:unstable Jun 30, 2025
13 checks passed
@vtushar06
Copy link
Contributor Author

Thanks a lot @MisRob for reviewing and making the final tweak! Really appreciate you catching that gap issue and pushing the fix. Glad it’s all set and merged now

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.

[Remove Vuetify from Studio] Remove unused :v-deep styles from info modal

2 participants