Skip to content

[fix]:Remove Vuetify styles from InfoModal.vue and relocate license description styling #5129

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

Open
wants to merge 3 commits into
base: unstable
Choose a base branch
from

Conversation

vtushar06
Copy link

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

@MisRob MisRob self-requested a review June 20, 2025 11:25
@MisRob MisRob self-assigned this Jun 20, 2025
@vtushar06
Copy link
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
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.

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