Redesign AdminLessonExerciseCard

[flacial]

Related to #1990

Description

This PR redesign the AdminLessonExerciseCard to achieve:

1. No extra space between the paragraphs when they're short
2. Looks good on mobile
3. Admin can copy Discord username

Visual difference

Before

After

[vercel]

@flacial is attempting to deploy a commit to the c0d3-prod Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
c0d3-app	✅ Ready (Inspect)	Visit Preview	Oct 23, 2022 at 0:22AM (UTC)

[codecov]

Codecov Report

Merging #2437 (04900d4) into master (5cefffa) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master     #2437   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          185       185           
  Lines         3292      3307   +15     
  Branches       874       878    +4     
=========================================
+ Hits          3292      3307   +15     

Impacted Files	Coverage Δ
...mponents/admin/lessons/AdminLessonExerciseCard.tsx	100.00% <100.00%> (ø)
...es/admin/lessons/[lessonSlug]/[pageName]/index.tsx	100.00% <100.00%> (ø)

[SlyBouhafs]

Can you add the relevant path for the admin exercises page?

[flacial]

Can you add the relevant path for the admin exercises page?

We don't have this page yet. It'll be added in a subsequent PR

[SlyBouhafs]

We don't have this page yet. It'll be added in a subsequent PR

Oh ok, i wanted to leave a few comments on it via the Vercel comment feature. I left a few comments on this image instead:

[flacial]

We don't have this page yet. It'll be added in a subsequent PR

Oh ok, i wanted to leave a few comments on it via the Vercel comment feature. I left a few comments on this image instead:

I addressed the comments in the last commit. This is how it now looks:

Image

When the admin click the username, it'll open the user's profile page.

[SlyBouhafs]

I addressed the comments in the last commit. This is how it now looks:

Nice, prepending an @ was a good idea! I also think that we should make the unflag and remove exercise buttons a bit a more obvious, should they look like button or links? Should they have the same color? The remove button should probably be in red and the unflag maybe green?

[flacial]

I addressed the comments in the last commit. This is how it now looks:

Nice, prepending an @ was a good idea! I also think that we should make the unflag and remove exercise buttons a bit a more obvious, should they look like button or links? Should they have the same color? The remove button should probably be in red and the unflag maybe green?

I like the idea of changing the remove button color to red, but the unflag is suitable because purple represents a primary action, but at the same time it's overused in the component. I'll give changing the unflag to green a shot.

It terms of being obvious, I think with colors other than purple, they're quite obvious.

[flacial]

@SlyBouhafs What do you think?

I chose orange because green represents something positive, something good. While orange is like "Are you sure you want to unflag this?".

[SlyBouhafs]

Looks good to me!