Polish homework UI audit blockers

Author: alexeygrigorev

courses/static/courses.css

@@ -180,7 +180,10 @@ header nav li:not(:last-child) {
 
 /* Style each list item */
 .breadcrumbs ul li {
+  align-items: center;
+  display: inline-flex;
   margin-right: 0.5rem;
+  min-width: 0;
   font-size: 0.9rem;
   white-space: nowrap;
 }
@@ -406,15 +409,15 @@ form select {
 }
 
 .cadmin-shell .primer-button-success {
-  background: #1f883d;
-  border-color: #1f883d;
-  color: #ffffff;
+  background: #f6f8fa;
+  border-color: #d0d7de;
+  color: #116329;
 }
 
 .cadmin-shell .primer-button-success:hover {
-  background: #1a7f37;
-  border-color: #1a7f37;
-  color: #ffffff;
+  background: #eef1f4;
+  border-color: #d0d7de;
+  color: #116329;
 }
 
 .cadmin-meta-grid > * {
@@ -635,23 +638,27 @@ body.dark-mode [class*="text-red-700"] {
 
 /* Adjustments for smaller screens */
 @media (max-width: 768px) {
-  nav .breadcrumbs ul {
+  .breadcrumbs ul {
     flex-wrap: wrap;
     gap: 0.25rem 0;
   }
 
-  nav .breadcrumbs ul li a {
+  .breadcrumbs ul li a {
     max-width: 150px;
   }
 }
 
 @media (max-width: 480px) {
-  nav .breadcrumbs ul li {
+  .breadcrumbs ul li:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .breadcrumbs ul li {
     font-size: 0.8rem;
   }
 
-  nav .breadcrumbs ul li a {
-    max-width: 100px;
+  .breadcrumbs ul li a {
+    max-width: 220px;
   }
 }
 
@@ -663,6 +670,15 @@ body.dark-mode [class*="text-red-700"] {
   margin-bottom: 0;
 }
 
+.invalid-feedback {
+  display: none;
+}
+
+.was-validated .form-control:invalid ~ .invalid-feedback,
+.form-control.is-invalid ~ .invalid-feedback {
+  display: block;
+}
+
 
 .option-answer-correct {
   align-items: center;
@@ -960,9 +976,9 @@ body.dark-mode .cadmin-shell .primer-button.cadmin-primary:hover {
 }
 
 body.dark-mode .cadmin-shell .primer-button-success {
-  background: #238636;
-  border-color: #238636;
-  color: #ffffff;
+  background: #21262d;
+  border-color: #30363d;
+  color: #7ee787;
 }
 
 body.dark-mode .cadmin-shell table tbody tr:hover {
@@ -1030,13 +1046,13 @@ body.dark-mode .alert-danger {
 
 /* Subtle correct/incorrect answer colors for dark mode */
 body.dark-mode .option-answer-correct {
-  background-color: rgba(31, 111, 59, 0.28);
-  color: #7ee787;
+  background: transparent;
+  color: var(--text-primary);
 }
 
 body.dark-mode .option-answer-incorrect {
-  background-color: rgba(218, 54, 51, 0.18);
-  color: #ff7b72;
+  background: transparent;
+  color: var(--text-primary);
 }
 
 body.dark-mode .error-message {

courses/static/time_left.js

@@ -44,7 +44,12 @@ document.addEventListener('DOMContentLoaded', function() {
     var diff = deadline - new Date();
     var days = Math.floor(diff / (1000 * 60 * 60 * 24));
 
-    el.classList.remove('text-slate-500', 'text-[#9a6700]', 'text-[#cf222e]', 'dark:text-[#8b949e]');
+    el.classList.remove('text-slate-500', 'text-[#9a6700]', 'text-[#cf222e]', 'dark:text-[#8b949e]', 'app-muted');
+
+    if (diff <= 0 && el.getAttribute('data-past-tone') === 'muted') {
+      el.classList.add('app-muted');
+      return;
+    }
 
     if (diff <= 0 || days < 1) {
       el.classList.add('text-[#cf222e]');

courses/templates/courses/course.html

@@ -92,7 +92,7 @@ <h2 class="text-2xl font-semibold">Homework</h2>
           <div class="text-sm app-text">
             <i class="far fa-calendar-alt mr-2 hidden app-muted md:inline"></i>
             <span>Deadline: <span class="local-date" data-timestamp="{{ hw.due_date|date:'U' }}">{{ hw.due_date | date:"j F Y, H:i" }}</span></span>
-            <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ hw.due_date | date:"c" }}"></div>
+            <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ hw.due_date | date:"c" }}" data-past-tone="muted"></div>
           </div>
 
           <div class="md:text-right">
@@ -149,12 +149,12 @@ <h2 class="text-2xl font-semibold">Projects</h2>
             <i class="far fa-calendar-alt mr-2 hidden app-muted md:inline"></i>
             {% if project.state == 'PR' and project.submitted %}
               <span>Review due: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
-              <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.peer_review_due_date | date:"c" }}"></div>
+              <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.peer_review_due_date | date:"c" }}" data-past-tone="muted"></div>
             {% elif project.state == 'CO' %}
               <span>Completed: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
             {% else %}
               <span>Due: <span class="local-date" data-timestamp="{{ project.submission_due_date|date:'U' }}">{{ project.submission_due_date | date:"j F Y, H:i" }}</span></span>
-              <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.submission_due_date | date:"c" }}"></div>
+              <div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.submission_due_date | date:"c" }}" data-past-tone="muted"></div>
             {% endif %}
           </div>