Skip to content

Refine student dashboard hierarchy with stronger section structure and action emphasis - #2

Merged
VishakhaVB merged 2 commits into
mainfrom
copilot/improve-student-dashboard-visual-hierarchy
May 27, 2026
Merged

Refine student dashboard hierarchy with stronger section structure and action emphasis#2
VishakhaVB merged 2 commits into
mainfrom
copilot/improve-student-dashboard-visual-hierarchy

Conversation

Copilot AI commented May 27, 2026

Copy link
Copy Markdown
Contributor

The student dashboard currently gives similar visual weight to all sections, making key actions harder to scan. This update improves hierarchy, spacing, and card emphasis so important actions stand out faster.

  • Typography and section hierarchy

    • Added a dedicated Quick Actions section heading above dashboard cards.
    • Increased heading prominence for the welcome title and section headers to create clearer reading order.
  • Section spacing and layout rhythm

    • Increased vertical spacing between welcome, actions, notes, and motivation sections.
    • Tightened card grid spacing/margins for cleaner grouping and better chunking of content.
  • Card consistency and action emphasis

    • Standardized card elevation/border treatment for visual consistency.
    • Enhanced hover depth and border transition for clearer affordance.
    • Highlighted Daily Mission as the primary action using a dedicated card-primary style.
<h3 class="section-title">🚀 Quick Actions</h3>
<div class="card card-primary" onclick="goTo('dailychallenge.html')"><span>Daily Mission</span>
</div>

@netlify

netlify Bot commented May 27, 2026

Copy link
Copy Markdown

Deploy Preview for ignitera-gamified-learning ready!

Name Link
🔨 Latest commit 8ff93e4
🔍 Latest deploy log https://app.netlify.com/projects/ignitera-gamified-learning/deploys/6a16dc2f2de5fd0008783854
😎 Deploy Preview https://deploy-preview-2--ignitera-gamified-learning.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI linked an issue May 27, 2026 that may be closed by this pull request
@VishakhaVB
VishakhaVB marked this pull request as ready for review May 27, 2026 11:58
Copilot AI review requested due to automatic review settings May 27, 2026 11:58
Copilot AI changed the title [WIP] Improve visual hierarchy in student dashboard Refine student dashboard hierarchy with stronger section structure and action emphasis May 27, 2026
Copilot AI requested a review from VishakhaVB May 27, 2026 11:59

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Improves the visual hierarchy of the student dashboard by introducing clearer section titling, more consistent spacing, and refined card styling (including a highlighted primary action).

Changes:

  • Added a “Quick Actions” section title and emphasized the “Daily Mission” card as a primary action.
  • Adjusted typography, spacing, and shadows across the welcome/cards/notes/motivation sections for clearer hierarchy.
  • Introduced new utility styles (line-height, .section-title, .card-primary) and refined card hover styling.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File Description
studentdash.html Adds a “Quick Actions” heading and marks “Daily Mission” as a primary card.
studentdash.css Refines global typography and reworks spacing/shadows; adds section title + primary card styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread studentdash.html
Comment on lines 41 to +45
<div class="card" onclick="goTo('course.html')">📚 <span>Courses</span></div>
<div class="card" onclick="goTo('quizz.html')">🎯 <span>Quizzes</span></div>
<div class="card" onclick="goTo('progress.html')">📊 <span>Progress</span></div>
<div class="card" onclick="goTo('leaderboard.html')">🏆 <span>Leaderboard</span></div>
<div class="card" onclick="goTo('dailychallenge.html')">⚡ <span>Daily Mission</span></div>
<div class="card card-primary" onclick="goTo('dailychallenge.html')">⚡ <span>Daily Mission</span></div>
Comment thread studentdash.css
Comment on lines +151 to +155
.card-primary {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-color: #93c5fd;
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
}
Comment thread studentdash.css
Comment on lines 144 to 148
.card:hover {
transform: translateY(-6px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
border-color: #bfdbfe;
background: #f1f5f9;
@VishakhaVB
VishakhaVB merged commit 3f09340 into main May 27, 2026
5 checks passed
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.

[UI/UX] Improve Student Dashboard Visual Hierarchy

3 participants