feat: course page redesign

school/public/css/style.css

@@ -403,6 +403,8 @@ input[type=checkbox] {
   font-size: var(--text-md);
   line-height: 20px;
   box-shadow: var(--btn-shadow);
+  border: none;
+  width: fit-content;
 }
 
 .button:disabled {
@@ -435,10 +437,8 @@ input[type=checkbox] {
   color: var(--gray-700);
 }
 
-@media (max-width: 600px) {
-  .video-preview {
-    margin-top: 16px;
-  }
+.is-default:disabled {
+  color: var(--gray-500);
 }
 
 .is-primary {
@@ -561,7 +561,7 @@ input[type=checkbox] {
 }
 
 .course-content-parent .lesson-links {
-  padding: 0 0 0 1rem;
+  padding: 0.5rem 1rem;
   margin-bottom: 0.75rem;
   font-size: 0.85rem;
   line-height: 200%;
@@ -669,7 +669,7 @@ input[type=checkbox] {
   font-weight: 600;
   font-size: var(--text-3-5xl);
   letter-spacing: -0.0175em;
-  color: var(--gray-800);
+  color: var(--gray-900);
   margin-bottom: 1rem;
 }
 
@@ -859,8 +859,7 @@ input[type=checkbox] {
 }
 
 .lesson-content-card {
-  padding: 24px;
-  flex-direction: column;
+  margin-top: 2rem;
 }
 
 .lesson-content-card .alert-dismissible .close {
@@ -905,8 +904,15 @@ input[type=checkbox] {
 }
 
 .active-lesson {
-  background-color: var(--gray-100);
+  background-color: var(--blue-100);
   border-radius: var(--border-radius-md);
+  color: var(--blue-500);
+}
+
+.lesson-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
 .lesson-progress {
@@ -914,7 +920,7 @@ input[type=checkbox] {
   padding: 4px 8px 4px;
   font-size: 10px;
   line-height: 120%;
-  margin: 0px 10px 20px;
+  margin-left: 1rem;
   border-radius: var(--border-radius-md);
   font-weight: bold;
 }