Skip to content

feat: Add dark mode styles for notes page and comment section in new student UI #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
barani-2502 wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat: Add dark mode styles for notes page and comment section in new student UI #736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3ae0128
style: Add dark styles on content detail page for running, upcoming, …
barani-2502 Jan 29, 2026
02a1d2d
style: Add dark styles for notes and comments
barani-2502 Jan 31, 2026
f776ebb
fix: correct invalid HTML tags and sticky header styling
barani-2502 Jan 31, 2026
642bc72
Add missing border for content heading
barani-2502 Jan 31, 2026
f9d0131
fix: Fix view replies option
barani-2502 Feb 2, 2026
a176927
style: Update main content area color in dark mode
barani-2502 Feb 4, 2026
3257007
style: Update dark styles for bookmark folder dropdown
barani-2502 Feb 4, 2026
aacd535
fix: Update dark styles for comment button and pending moderation tag
barani-2502 Feb 4, 2026
4bdfe7f
Update style for pending moderation tag
barani-2502 Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content_detail_page/empty_history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mx-auto text-gray-500 dark:text-neutral-500"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-neutral-200">History is Empty</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-neutral-400c">This section will display contents once they have been engaged with or completed.</p>
<p class="mt-1 text-sm text-gray-500 dark:text-neutral-400">This section will display contents once they have been engaged with or completed.</p>
</div>
</div>
</main>
Expand Down
40 changes: 20 additions & 20 deletions src/content_detail_page/includes/comment_section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!-- Comments-->
<section aria-labelledby="notes-title" class="mt-6">
<div class="bg-white sm:overflow-hidden sm:rounded-lg">
<div class="bg-white sm:overflow-hidden sm:rounded-lg dark:bg-neutral-800">
<div class="">
<div class="px-4 sm:px-6 lg:px-8">
<h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comments</h2>
<h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900 dark:text-neutral-200">Comments</h2>
</div>
<div class="px-4 py-6 sm:px-6 lg:px-8 border-t border-gray-200 mt-4">
<div class="px-4 py-6 sm:px-6 lg:px-8 border-t border-gray-200 mt-4 dark:border-neutral-700">
<ul role="list" class="space-y-8">
{% for comment in comments %}
<li>
Expand All @@ -15,29 +15,29 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
</div>
<div>
<div class="text-sm flex space-x-2 items-center">
<a href="#" class="font-medium text-gray-900">{{ comment.author }}</a>
<span class="font-medium text-gray-500">4d ago</span>
<a href="#" class="font-medium text-gray-900 dark:text-neutral-200">{{ comment.author }}</a>
<span class="font-medium text-gray-500 dark:text-neutral-400">4d ago</span>
{% if comment.warning %}
<span class="inline-flex items-center rounded-md bg-yellow-50 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Pending Moderation</span>
<span class="inline-flex items-center rounded-md bg-yellow-50 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-500">Pending Moderation</span>
{% endif %}
</div>
<div class="mt-1 text-sm text-gray-700">
<div class="mt-1 text-sm text-gray-700 dark:text-neutral-300">
<p>{{ comment.text }}</p>
</div>
<div class="flex mt-2 truncate text-sm">
<span class="flex items-center hover:cursor-pointer" :class="{ 'text-emerald-600':'{{comment.upvoted}}', 'text-gray-600': !'{{comment.downvoted}}'}">
<span class="flex items-center hover:cursor-pointer" :class="{ 'text-emerald-600 dark:text-emerald-400':'{{comment.upvoted}}', 'text-gray-600 dark:text-neutral-200': !'{{comment.downvoted}}'}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665 8.97 8.97 0 0 0 .654 3.375z"/></svg>
<span>{{ comment.upvotes }}</span>
</span>
<span class="mx-2 text-gray-400" aria-hidden="true">·</span>
<span class="flex items-center hover:cursor-pointer" :class="{ 'text-red-600':!'{{comment.downvoted}}', 'text-gray-600': '{{comment.upvoted}}'}">
<span class="mx-2 text-gray-400 dark:text-neutral-500" aria-hidden="true">·</span>
<span class="flex items-center hover:cursor-pointer" :class="{ 'text-red-600 dark:text-red-400':!'{{comment.downvoted}}', 'text-gray-600 dark:text-neutral-200': '{{comment.upvoted}}'}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 0 1-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54m.023-8.25H16.48a4.5 4.5 0 0 1-1.423-.23l-3.114-1.04a4.5 4.5 0 0 0-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 0 0 2.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.5a2.25 2.25 0 0 0 2.25 2.25.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"/></svg>
<span>{{ comment.downvotes }}</span>
</span>
</div>
{% if comment.replies %}
<div class="mt-4 text-sm" x-data="{ showReply: false }">
<span class="flex items-center space-x-2 font-medium text-emerald-700 hover:cursor-pointer" @click="showReply = !showReply">
<span class="flex items-center space-x-2 font-medium text-emerald-700 hover:cursor-pointer dark:text-emerald-400" @click="showReply = !showReply">
<svg class="w-3 h-3 mr-1 transition-transform duration-300 transform" fill="currentColor" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24"
:class="{ '-rotate-90': !showReply, 'rotate-0': showReply }">
<path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z"/>
Expand All @@ -54,19 +54,19 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
</div>
<div>
<div class="text-sm flex space-x-2 items-center">
<a href="#" class="font-medium text-gray-900">{{ reply.author }}</a>
<span class="font-medium text-gray-500">4d ago</span>
<a href="#" class="font-medium text-gray-900 dark:text-neutral-200">{{ reply.author }}</a>
<span class="font-medium text-gray-500 dark:text-neutral-400">4d ago</span>
</div>
<div class="mt-1 text-sm text-gray-700">
<div class="mt-1 text-sm text-gray-700 dark:text-neutral-300">
<p>{{ reply.text }}</p>
</div>
<div class="flex mt-2 truncate text-sm">
<span class="flex text-gray-600 items-center hover:cursor-pointer">
<span class="flex text-gray-600 items-center hover:cursor-pointer dark:text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665 8.97 8.97 0 0 0 .654 3.375z"/></svg>
<span>{{ reply.upvotes }}</span>
</span>
<span class="mx-2 text-gray-400" aria-hidden="true">·</span>
<span class="flex text-gray-600 items-center hover:cursor-pointer">
<span class="mx-2 text-gray-400 dark:text-neutral-500" aria-hidden="true">·</span>
<span class="flex text-gray-600 items-center hover:cursor-pointer dark:text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 0 1-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54m.023-8.25H16.48a4.5 4.5 0 0 1-1.423-.23l-3.114-1.04a4.5 4.5 0 0 0-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 0 0 2.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.5a2.25 2.25 0 0 0 2.25 2.25.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"/></svg>
<span>{{ reply.downvotes }}</span>
</span>
Expand All @@ -85,7 +85,7 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
</ul>
</div>
</div>
<div class="bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
<div class="bg-gray-50 px-4 py-6 sm:px-6 lg:px-8 dark:bg-neutral-800">
<div class="flex space-x-3">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
Expand All @@ -94,10 +94,10 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
<form action="#">
<div>
<label for="comment" class="sr-only">About</label>
<textarea id="comment" name="comment" rows="3" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6" placeholder="Add a note"></textarea>
<textarea id="comment" name="comment" rows="3" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6 dark:bg-neutral-800 dark:ring-neutral-600 dark:placeholder:text-neutral-400 dark:text-neutral-200" placeholder="Add a note"></textarea>
</div>
<div class="mt-3 flex items-center justify-end">
<button type="submit" class="inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">Comment</button>
<button type="submit" class="inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500">Comment</button>
</div>
</form>
</div>
Expand Down
Loading