Issue#5123 : Migrated the offline alert bar in Settings from Vuetify to Kolibri Design System.

[AadarshM07]

Summary

Migrated the OfflineText Vuetify component with a new StudioOfflineAlert component that uses Kolibri Design System by following the guidelines .

KDS components used:

• KTransition : for smooth transition of alertbar
• KIcon : disconnect icon used for alert
• KLiveRegion : Screen reader accessability

Manual verification steps performed:

• Switched network offline and back online to overview the behaviour.
• Verified the alert appears with transition and UI consistency.
• Confirmed accessibility messages are announced via useKLiveRegion
• Checked responsiveness across viewports

UI screenshots:

Desktop:

Mobile:

References

• Related issue: [Remove Vuetify from Studio] Offline alert bar in Settings #5123

Reviewer guidance

• Toggle the app offline and online to test the component behaviour.
• Ensure if the new component is visually appealing.

[MisRob]

Thank you @AadarshM07, I will review soon.

[MisRob]

Very nice work @AadarshM07! I successfully tested on multiple screen sizes, on both RTL and LTR, and with screen reader too. Thanks for following the guidance, much appreciated.

Leaving few notes, let me know what you think.

[MisRob]

notranslate needs to be removed here - its only for texts that shouldn't be translated. Here we are translating.

[AadarshM07]

Sure, thanks for clarifying — I will remove it.

[MisRob]

Thanks for resolving feedback @AadarshM07!

Two small styling changes and then we can merge.

Generally during this project, we don't want to introduce unexpected visual changes, even minor ones in padding and such.

[AadarshM07]

I’ve made the necessary updates - thank you for the guidance👍

[MisRob]

Thanks @AadarshM07!