Update front-end to display titles and accomodate playlists

1 files changed, 58 insertions, 0 deletions

diff --git a/front-end/src/App.css b/front-end/src/App.css
index 19cddd2..714d6fb 100644
--- a/front-end/src/App.css
+++ b/front-end/src/App.css
@@ -88,10 +88,68 @@ body {
   font-size: 0.9rem;
 }
 
+.subscription-main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.3rem 0;
+}
+
 .channel-info strong {
   color: #74b9ff;
 }
 
+.subscription-type {
+  color: #74b9ff;
+  font-size: 0.8em;
+  background: rgba(116, 185, 255, 0.2);
+  padding: 0.2rem 0.5rem;
+  border-radius: 10px;
+}
+
+.last-dates {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 0;
+  font-size: 0.9em;
+}
+
+.last-updated {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.last-fetched {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.subscription-id {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.8em;
+  font-weight: normal;
+}
+
+/* Responsive updates */
+@media (max-width: 768px) {
+  .subscription-main {
+    justify-content: center;
+    text-align: center;
+    gap: 0.3rem;
+  }
+
+  .last-dates {
+    justify-content: center;
+    text-align: center;
+    gap: 0.5rem;
+  }
+
+  .channel-info {
+    font-size: 0.8rem;
+  }
+}
+
 .subscription-section {
   max-width: 600px;
   margin: 1.5rem auto 0;