From dbdb2ed4cb044131d5588647c627af20da27f35f Mon Sep 17 00:00:00 2001
From: Mauricio Fierro <mauriciofierrom@gmail.com>
Date: Tue, 19 Mar 2024 17:07:58 -0500
Subject: [PATCH 1/4] Add lesson styles

- Extract non-layout styles from the lesson layout styles
- Use css nesting in layout styles
- Add video-card styles
---
 app/assets/stylesheets/application.css    |  1 +
 app/assets/stylesheets/layouts/lesson.css | 27 +--------
 app/assets/stylesheets/lesson.css         | 74 +++++++++++++++++++++++
 3 files changed, 77 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/stylesheets/lesson.css

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 0c8adfa..4e992e5 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -12,4 +12,5 @@
  *
  *= require_self
  *= require layouts/main
+ *= require lesson
  */
diff --git a/app/assets/stylesheets/layouts/lesson.css b/app/assets/stylesheets/layouts/lesson.css
index 3ffc715..cc0d88b 100644
--- a/app/assets/stylesheets/layouts/lesson.css
+++ b/app/assets/stylesheets/layouts/lesson.css
@@ -88,31 +88,6 @@
   justify-self: end;
 }
 
-.lesson-item {
-  display: grid;
-  grid-template-columns: 20% 80%;
-  grid-template-rows: auto;
-  width: 50%;
-}
-
-.lesson-item-thumbnail {
-  grid-column: 1 / 2;
-  grid-row: 1 / span 3;
-  place-self: center;
-}
-
-.lesson-item-title {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-  padding: 10px;
-}
-
-.lesson-item-subtitle {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
-  padding: 10px;
-}
-
 .lesson-list {
   display: flex;
   flex-wrap: wrap;
@@ -121,6 +96,8 @@
 
 .lesson-header {
   display: flex;
+  flex-flow: row no-wrap;
+  justify-content: space-between;
   gap: 10px;
   margin-bottom: 20px;
 }
diff --git a/app/assets/stylesheets/lesson.css b/app/assets/stylesheets/lesson.css
new file mode 100644
index 0000000..359b275
--- /dev/null
+++ b/app/assets/stylesheets/lesson.css
@@ -0,0 +1,74 @@
+.lessons {
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .header {
+    display: flex;
+    flex-flow: row no-wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .title {
+      order: 1;
+      align-self: flex-start;
+    }
+
+    .new {
+      order: 2;
+      align-self: center;
+    }
+  }
+}
+
+.video-card {
+  display: grid;
+
+  grid-template-columns: 20% 80%;
+  grid-template-rows: auto;
+  width: 45%;
+
+  background-color: var(--bg-dark);
+  border-radius: 5px;
+  /* border: 1px solid red; */
+
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+
+  .thumbnail {
+    grid-column: 1 / 2;
+    grid-row: 1 / span 3;
+    place-self: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    padding: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    a {
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 24px;
+    }
+  }
+
+  .subtitle {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    padding: 10px;
+
+    color: var(--neutral);
+    font-size: 14px;
+    text-overflow: ellipsis;
+  }
+}

From d0e73f86d9538e74cd5b159734ea58cdf1832556 Mon Sep 17 00:00:00 2001
From: Mauricio Fierro <mauriciofierrom@gmail.com>
Date: Tue, 19 Mar 2024 17:09:17 -0500
Subject: [PATCH 2/4] Update classes in lesson index and item

---
 app/views/lessons/_lesson.html.erb |  8 +++----
 app/views/lessons/index.html.erb   | 37 ++++++++++++++++--------------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/views/lessons/_lesson.html.erb b/app/views/lessons/_lesson.html.erb
index 9faae16..d517a2a 100644
--- a/app/views/lessons/_lesson.html.erb
+++ b/app/views/lessons/_lesson.html.erb
@@ -1,11 +1,11 @@
-<div id="<%= dom_id lesson %>" class="lesson-item">
-  <%= image_tag(video_thumbnail_url(lesson), class: "lesson-item-thumbnail", size: "314x177") %>
-  <div class="lesson-item-title">
+<div id="<%= dom_id lesson %>" class="video-card">
+  <%= image_tag(video_thumbnail_url(lesson), class: "thumbnail") %>
+  <div class="title">
     <%= instrument_emoji(lesson) %>
     <%= link_to lesson.name, lesson, data: { turbo: false } %>
   </div>
   <% if lesson.sections.size > 0 && lesson.current_objective then %>
-    <div class="lesson-item-subtitle">
+    <div class="subtitle">
       Now learning: <%= lesson.sections.where(current: true)&.first&.name %>
     </div>
   <% end %>
diff --git a/app/views/lessons/index.html.erb b/app/views/lessons/index.html.erb
index f469348..82f80c7 100644
--- a/app/views/lessons/index.html.erb
+++ b/app/views/lessons/index.html.erb
@@ -1,24 +1,27 @@
 <p style="color: green"><%= notice %></p>
 
-<div class="lesson-header">
-  <div class="lesson-title">
-    Lessons
-  </div>
-  <div class="lesson-new">
-    <%= link_to "New lesson",
-      new_lesson_path,
-      data: { turbo_frame: dom_id(Lesson.new) },
-      class: "lesson-new"
-    %>
+<div class="lessons">
+  <div class="header">
+    <div class="title">
+      <h1>Lessons</h1>
+    </div>
+
+    <div class="new">
+      <%= link_to "New lesson",
+        new_lesson_path,
+        data: { turbo_frame: dom_id(Lesson.new) }
+      %>
+    </div>
   </div>
-</div>
 
-<%= turbo_frame_tag Lesson.new %>
+  <%= turbo_frame_tag Lesson.new %>
 
-<%= turbo_frame_tag "lessons", class: "lesson-list" do %>
-  <% @lessons.each do |lesson| %>
-    <%= render lesson %>
+  <%= turbo_frame_tag "lessons", class: "list" do %>
+    <% @lessons.each do |lesson| %>
+      <%= render lesson %>
+    <% end %>
   <% end %>
-<% end %>
 
-<%= paginate @lessons %>
+  <%= paginate @lessons %>
+</div>
+

From e8c2e8dd7f64c9c45043f5ffe73a4b1732de81e0 Mon Sep 17 00:00:00 2001
From: Mauricio Fierro <mauriciofierrom@gmail.com>
Date: Tue, 19 Mar 2024 17:09:31 -0500
Subject: [PATCH 3/4] Add general a styles

---
 app/assets/stylesheets/layouts/main.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/stylesheets/layouts/main.css b/app/assets/stylesheets/layouts/main.css
index c276b93..049bdce 100644
--- a/app/assets/stylesheets/layouts/main.css
+++ b/app/assets/stylesheets/layouts/main.css
@@ -128,3 +128,10 @@ article {
         font-size: 2rem;
     }
 }
+
+a {
+  color: var(--secondary);
+  text-decoration: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+}

From c391ccdb5282323676af8e3787aaf4320bfedaa9 Mon Sep 17 00:00:00 2001
From: Mauricio Fierro <mauriciofierrom@gmail.com>
Date: Tue, 19 Mar 2024 17:10:49 -0500
Subject: [PATCH 4/4] Update lesson system test

---
 test/system/lessons_test.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/system/lessons_test.rb b/test/system/lessons_test.rb
index a20332a..6da9aed 100644
--- a/test/system/lessons_test.rb
+++ b/test/system/lessons_test.rb
@@ -8,7 +8,7 @@ class LessonsTest < ApplicationSystemTestCase
 
   test "visiting the index" do
     visit lessons_url
-    assert_selector ".lesson-title", text: "Lessons"
+    assert_selector ".title", text: "Lessons"
   end
 
   test "should create lesson" do
@@ -37,7 +37,7 @@ class LessonsTest < ApplicationSystemTestCase
     # assert_text "Lesson was successfully updated"
     click_on "Back to lessons"
 
-    assert_selector ".lesson-title", text: "Lessons"
+    assert_selector ".title", text: "Lessons"
     assert_text "New Light"
   end