Upgrade Carousel Designs

[eleanorreem]

Overview

We had some designs for our Carousel component which we didn't fulfill due to time constraints. Below is the design.

The improvements I want to try are:

• faded out slide on the right
• hover state with the play icon.

I had a brief look at I have a feeling this might not be possible with the nuka carousel implementation so if at the end of it, you can't find a way to do it, that's okay!

Action Items

• Take a look at nuka-carousel
• Take a look at our implementation. Any feedback on improving the implementation is welcome.
• See if you can make the carousel closer to the designs.
• Ensure the carousel works on the home page and also the /courses page.

[miusarname2]

Could I try to solve it myself, I have just read the documentation.

[salmafadlabdulrahman]

I'm going to try to fix the issue. and get closer to the design as possible.

[kyleecodes]

Hi @miusarname2 and @salmafadlabdulrahman thanks for your interest! Please note: this is an "advanced complexity level" issue, which may not have a solution. If there is no solution, a summary of the troubleshooting steps you've taken (and any ideas you have) will work to mark this issue as resolved.

Because you both commented within a short time (and this is an issue that could benefit from additional developers insight) would you both be open to working on this issue collaboratively? Similarly, you can both be assigned and open separate PRs. Otherwise, we have to assign based on who commented first.

[salmafadlabdulrahman]

After reviewing the issue and exploring the codebase, I realize that this problem requires a deeper understanding of the project structure. As I'm still familiarizing myself with the codebase, I believe it’s best for @miusarname2 to continue working on this issue.

That being said, I’m genuinely interested in contributing to the project and would love to assist with any beginner-friendly or intermediate tasks where I can add value. Thank you for the opportunity, and I look forward to contributing more in the future!

[miusarname2]

I was looking at the possibility of overwriting the styles a bit aggressively, which is the only viable way I see, that is to say forcibly overwrite at the end of ‘!important’, those styles, I do not know what you think of my idea, is what I've been exploring.

[miusarname2]

for example, this is what I've been doing, sorry, I was resting at the weekend.

avance.mp4

[miusarname2]

ok, and I improve a little, to something as desired, just need to tell me if you like it (obviously I will apply the colours), or remove the colour of Hover is to say that change colour

captura-_4_.mp4

the only thing that worries me is if it complies with the standards used, as I'm not very sure about using them, here is a sample of the changed code

<Box
              className="play-button"
              sx={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%) scale(0.8)',
                opacity: 0,
                transition: 'opacity 0.3s ease, transform 0.3s ease',
              }}
            >
              <IconButton sx={{ color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
                <PlayArrowIcon sx={{ fontSize: 40 }} />
              </IconButton>
            </Box>
          </Box>

I'm going to finish it, and get closer to the design with the colours, I'll commit, and if you want you can clone my repo, and look at it.

[github-actions]

Thank you @miusarname2 you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request. ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn's impact here. 🌸

[miusarname2]

I already made the commit in my personal repository, and this was the result, you can tell me if I start the pull request, what I'm still unsure is that it meets the code standards, in that sense I will see if it can be improved.

captura-_5_.mp4

The repository with the modifications

[miusarname2]

Today from 2pm to 3pm GMT-5, I will re-read the documentation and do the PR.

[miusarname2]

I was looking at how to do it, and I know that it can be done, and apply to that specific case, but I have a technical doubt and I am considering the possibility of modifying the properties of the ShortCards, and add a new one that is type ‘UsedShorts’, or something like that, but I'm a little scared, because it would create a property, which is only going to be used once, is it worth it or I explore other options? @kyleecodes

[miusarname2]

forget everything, I found a way to do it, but I think I will have to modify another module.

[miusarname2]

At the moment I'm have this, I think I'm going to have to look at how to take the swipe event.

captura-_6_.mp4