Remove Vuetify color used for the button hover state

[MisRob]

🌱 Are you new to the codebase? Welcome and please see the contributing guidelines.

Blocked by

• Implement $darken1, $darken2, and $darken3 utilities kolibri-design-system#726

Summary

After Kolibri Design System provides $darken_ utilities, let's use them to get rid of this Vuetify color

studio/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue

Lines 107 to 108 in a4a3c8f

	// TODO: Replace with KDS lighten/darken utilities
	backgroundColor: 'var(--v-error-darken1)',

by applying the most appropriate $darken_ on the base red color color that the button has when it's not in hovered state.

[shivam-daksh]

Hey @MisRob, I would like to work on this.

[MisRob]

Hello @shivam-daksh, thanks! There is a related issue that needs to be resolved at first learningequality/kolibri-design-system#726. Feel free to message us there if you'd like to give it a try. Note that even though it is beginner friendly, it's a bit more complex due to some experimentation you would need to do - more in the linked issue. Also I'd ask you to wait a day or two since it's in the proposal stage and I may need to do some tweaks to the issue. You could use that time to understand Kolibri Design System and the way we work with colors in our codebases.

[shivam-daksh]

Sure @MisRob, I would wait and understand the issue till then.

[MisRob]

Okay @shivam-daksh, let us know if you had any questions and if it still seems to be something you'd like to work on, just message me in learningequality/kolibri-design-system#726 starting this Wednesday and I will assign :) I'd recommend you study Kolibri Design System (KDS) contributing guidelines, developers documentation, and try to set up your KDS development server and put something on the playground page. Also running KDS development in parallel with Kolibri or Studio is a useful skill to have.

[shivam-daksh]

Hey @MisRob, I'm having little trouble regarding managing multiple versions of Node in both projects simultaneously. As KDS and Studio both uses different versions of Node (i.e. Node@10 and Node@16 respectively), it is conflicting SOMETIMES when I open new fresh terminal.

What's really happening?
When I'm in KDS project and I switch to Node@10 using volta or nvm and then either I'm opening new fresh terminal in the same project or in Studio. It doesn't reflects there.
However, when I use same instance of terminal, then it works well.
Any solutions to this if it is not concerning?

Screen.Recording.2024-08-12.at.4.06.12.PM.mov

[MisRob]

Hey @shivam-daksh, I am not certain if I can understand right. From the recording it seems you need to again nvm use/volta install from the newly opened terminal? I don't see any issue that should prevent you from doing this, or is there something troubling?

Typically, you don't even need to run KDS development server when running Studio development server - if you wish to see your KDS changes in Studio via yarn link, then running Studio will do :)

In some cases and if your CPU allows, it can be handy to run both KDS development server and Studio development server when you wish to preview a component in both environments - in that case you can do so from separate terminals.

Let me know if this helps or if there was something else.

[shivam-daksh]

Hi @MisRob, I got it. I've learned to experiment with KDS playgroud, gone through KDS Colors guide and able to run both projects by using yarn link simultaneously. What next I've to do?

[MisRob]

Hi @shivam-daksh, great! Please send a comment to learningequality/kolibri-design-system#726, otherwise I can't assign you. Then you can start working. Let me know if the issue is clear and if you had any questions, ask there.

[shivam-daksh]

Hey @MisRob, since #726 has been solved. I would continue to work on this issue.

[MisRob]

Hi @shivam-daksh, assigned, thank you :) You can use yarn link to link Studio with KDS so you can access your work from learningequality/kolibri-design-system#728.

[shivam-daksh]

Hi @MisRob, I'm having error while starting the studio. I've attached the video and logs:

Screen.Recording.2024-08-26.at.12.14.57.PM.mov

[MisRob]

Hi @shivam-daksh, I assume you yarn linked Kolibri Design System (KDS) and Studio? If that's the case and it doesn't work with new 'color' dependency, you could also try to

1. Unlink KDS and Studio - see yarn unlink docs
2. Remove Studio's node_modules and also possibly clear yarn cache yarn cache clean
3. Update kolibri-design-system package reference in Studio's package.json to https://github.com/learningequality/kolibri-design-system#8fd5d35b818d283a744a1e2c3e0c3d8debad0363
4. Run Studio's yarn install

You could also try yarn install --force

[shivam-daksh]

Hi @MisRob, I've reinstalled both studio and kolibri-design-system at separate place. Still it's not working. I think, the issue is persisting because I'm running two node versions simultaneouly in both projects.
I've tried both volta and nvm for managing versions.
When I change the node version in studio and in KDS then either one of them work properly, other one start having error in runtime.
Studio when I run yarn run devserver:hot :

[MisRob]

@shivam-daksh I'm sorry to hear about trouble. Let's see if we can do something about it.

When I change the node version in studio and in KDS then either one of them work properly, other one start having error in runtime.

I don't exactly understand - you don't need to run Studio dev server in parallel to KDS dev server, right? Or do you mean something else?

Also I don't understand "I've reinstalled both studio and kolibri-design-system at separate place" so would need some clarification.

[shivam-daksh]

Hi @MisRob, I'm sorry I wasn't clear before. The line "I've reinstalled both studio and kolibri-design-system at separate place" means that I've re-cloned the studio and KDS repositories in separate local directory.
As you said it is not mandatory to run both studio and KDS simultaneously and what I've figured out till now is that when I run yarn run devserver after linking the KDS by running command yarn link kolibri-design-system then it shows me the given below error:

However, when I unlink KDS using yarn unlink kolibri-design-system and run yarn run devsetup and yarn run devserver, it works fine. It seems like recent changes done in KDS is not reflecting into studio after linking locally. From the image below, you can clearly see that it is not able to find the darkenColors.js in /KDS/lib/styles path (which was contributed by me).

[MisRob]

@shivam-daksh Can you unlink and install the newest KDS release via package.json? https://github.com/learningequality/kolibri-design-system/releases/tag/v5.0.0-rc3. Then run yarn install. This should make the utilities you wrote available in Studio.

[MisRob]

@shivam-daksh ^ Let's just leave linking and KDS devserver etc. aside for now, and do these changes in Studio. If it still doesn't work, would you follow #4634 (comment) step by step (except instead of the commit I originally referenced, you will install v5.0.0-rc3) and upload full logs of all the steps, including the commands you wrote and package.json and yarn.lock diffs). I would then try to reproduce. However I hope that installing the release without linking helps.

[MisRob]

@shivam-daksh Meanwhile I will see if someone on the team has an idea what's wrong with the yarn link method. Thanks for reporting.

[MisRob]

@shivam-daksh The issue may indeed be just something specific about the linking methods as I was just able to install KDS that has this change to Studio and see it running without trouble https://github.com/learningequality/studio/pull/4633/commits/ff3c26c1fafdf127a3b125396881a8409f6c1aca#diff-7ae45ad102eab3b6[…]70d7bc6507b6481575d519

[MisRob]

Hi @shivam-daksh, my colleague @AlexVelezLl jumped in to help and he was able to reproduce the issue with yarn link you saw. Re-posting his message with guidance on how to resolve it. Let us know if it helped!

It seems that yarn link doesnt bring the node_modules of the linked package, so if the linked package dependencies are not installed in the current package, we get this error yarnpkg/yarn#2914. The solution is first install the updated package with yarn install and then we can link it.

[MisRob]

@shivam-daksh yesterday we also figured out that in Studio, you could simply yarn install the color package in the same version as is in KDS. But use it just as local way to resolve the issue and don't commit Studio's updated package.json and yarn.lock :) Hopefully some of these ways help.

[shivam-daksh]

Hi @MisRob, That was little overwhelming, it finally worked after manually adding node modules color and vue2-teleport in studio. Kindly review the PR 😄 .

[MisRob]

I'm sorry this was such a hassle @shivam-daksh and glad finally something helped. Some of the other contributors and also team members experienced that too so I was posting here as we were figuring it out gradually. We will review, thanks :)