From 5ab5a1fa60410307ed93cc5def6ab1988e7aadcc Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Wed, 5 Jan 2022 09:21:22 +0100
Subject: [PATCH] Fix warnings and deprecations after updating tailwindcss
 (#213)

* update content directive, flex-grow -> grow

* fix flex behaviour and circular dependency

* remove grow from css
---
 web/assets/css/main.css                          | 3 +--
 web/tailwind.config.js                           | 2 +-
 web/template/admin/admin.gohtml                  | 4 ++--
 web/template/admin/admin_tabs/edit-course.gohtml | 4 ++--
 web/template/header.gohtml                       | 4 ++--
 web/template/partial/stream/chat.gohtml          | 2 +-
 web/template/watch.gohtml                        | 2 +-
 web/ts/schedule.ts                               | 6 +++---
 web/ts/watch.ts                                  | 2 +-
 9 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 7e97f91e2..28fc4e239 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -224,7 +224,6 @@ input[type='checkbox']:checked + label {
 }
 
 .dark .fc-scroller {
-    @apply scrollbarThin;
     margin-bottom: 0 !important;
 }
 
@@ -268,4 +267,4 @@ a.fc-event, a.fc-event:hover {
 
 [x-cloak] {
     display: none !important;
-}
\ No newline at end of file
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 51aa79630..9ebd55b16 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-undef
 module.exports = {
-    purge: [
+    content: [
         "./assets/css/*.css",
         "./template/**/*.gohtml",
         "./template/**/**/*.gohtml",
diff --git a/web/template/admin/admin.gohtml b/web/template/admin/admin.gohtml
index 6ce58fda5..8b3cab8a1 100755
--- a/web/template/admin/admin.gohtml
+++ b/web/template/admin/admin.gohtml
@@ -63,7 +63,7 @@
             {{end}}
             <li class="mt-8"><span
                         class="mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-2 flex">
-                            <span class="flex-grow">Courses</span><a href="/admin/create-course"><i
+                            <span class="grow">Courses</span><a href="/admin/create-course"><i
                                 class="fas fa-plus"></i></a></span>
                 <ul>
                     <li>
@@ -146,7 +146,7 @@
                     {{end}}
                     <li class="mt-8"><span
                                 class="mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-2 flex">
-                            <span class="flex-grow">Courses</span><a href="/admin/create-course"><i
+                            <span class="grow">Courses</span><a href="/admin/create-course"><i
                                         class="fas fa-plus"></i></a></span>
                         <ul>
                             <li>
diff --git a/web/template/admin/admin_tabs/edit-course.gohtml b/web/template/admin/admin_tabs/edit-course.gohtml
index d13dec759..e9d8fde08 100644
--- a/web/template/admin/admin_tabs/edit-course.gohtml
+++ b/web/template/admin/admin_tabs/edit-course.gohtml
@@ -121,7 +121,7 @@
                                                 title</label>
                                             <input id="lectureNameInput{{$lecture.Model.ID}}"
                                                    onfocus="focusNameInput(this, {{$lecture.Model.ID}})"
-                                                   class="flex-grow border-none" type="text" value="{{$lecture.Name}}"
+                                                   class="grow border-none" type="text" value="{{$lecture.Name}}"
                                                    placeholder="Lecture 2: Dark-Patterns I"
                                                    autocomplete="off">
                                             <button id="nameSubmitBtn{{$lecture.Model.ID}}"
@@ -139,7 +139,7 @@
                                                            class="hidden">Lecture description</label>
                                                     <textarea id="lectureDescriptionInput{{$lecture.Model.ID}}"
                                                               onfocus="focusDescriptionInput(this, {{$lecture.Model.ID}})"
-                                                              class="flex-grow border-none"
+                                                              class="grow border-none"
                                                               placeholder="Add a nice description, links, and more. You can use Markdown."
                                                               autocomplete="off">{{$lecture.Description}}</textarea>
                                                     <button id="descriptionSubmitBtn{{$lecture.Model.ID}}"
diff --git a/web/template/header.gohtml b/web/template/header.gohtml
index f04a2a2a4..721891eea 100644
--- a/web/template/header.gohtml
+++ b/web/template/header.gohtml
@@ -6,8 +6,8 @@
                       d="M49.986,7v31h8V7h37v38h-7V14h-8v31h-7V14h-8v31h-22V14h-7v31h-7V14h-7V7H49.986z"></path>
             </svg>
         </a>
-        <div class="block flex-grow flex items-center w-auto">
-            <div class="text-sm flex-grow">
+        <div class="block grow flex items-center w-auto">
+            <div class="text-sm grow">
                 <a href="/"
                    class="block inline-block align-middle mt-0 mr-4 hover:text-white text-gray-400">
                     Start
diff --git a/web/template/partial/stream/chat.gohtml b/web/template/partial/stream/chat.gohtml
index 38cc678f6..5c2d60c2a 100644
--- a/web/template/partial/stream/chat.gohtml
+++ b/web/template/partial/stream/chat.gohtml
@@ -7,7 +7,7 @@
             {{range $chat := $stream.Chats}}
                 <div class="rounded p-2 mx-2">
                     <div class="flex flex-row">
-                        <p class="flex-grow font-semibold {{if $chat.Admin}}text-warn{{end}}">{{$chat.UserName}}</p>
+                        <p class="grow font-semibold {{if $chat.Admin}}text-warn{{end}}">{{$chat.UserName}}</p>
                         <p class="text-4">
                             {{printf "%02d:%02d" $chat.CreatedAt.Hour $chat.CreatedAt.Minute}}
                         </p>
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index df7ff0e23..175597ff3 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -55,7 +55,7 @@
                 </p>
             </video>
             <div class="flex justify-between align-middle mt-4">
-                <h1 class="text-4 text-xl flex-grow">
+                <h1 class="text-4 text-xl grow">
                     {{if $stream.Name}}
                         {{$stream.Name}}
                     {{else}}
diff --git a/web/ts/schedule.ts b/web/ts/schedule.ts
index ad867bad5..0e9389399 100644
--- a/web/ts/schedule.ts
+++ b/web/ts/schedule.ts
@@ -30,7 +30,7 @@ document.addEventListener("DOMContentLoaded", function () {
             const streamInfo = JSON.parse(Get("/api/stream/" + data.event.extendedProps.description));
             popover.innerHTML = `;
             <p class="flex text-1 text-lg">
-                <span class="flex-grow">${streamInfo["course"]}</span>
+                <span class="grow">${streamInfo["course"]}</span>
                 <i id="closeBtn" class="transition-colors duration-200 hover:text-1 text-4 icon-close"></i>
             </p>
                 <div class="text-2">
@@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     <label for="lectureNameInput${streamInfo["streamID"]}" class="hidden">Lecture title</label>
                     <input id="lectureNameInput${streamInfo["streamID"]}"
                         onfocus="focusNameInput(this, ${streamInfo["streamID"]})"
-                        class="flex-grow border-none" type="text" value="${streamInfo["name"]}"
+                        class="grow border-none" type="text" value="${streamInfo["name"]}"
                         placeholder="Lecture 2: Dark-Patterns I"
                         autocomplete="off">
                     <button id="nameSubmitBtn${streamInfo["streamID"]}"
@@ -60,7 +60,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     <textarea id="lectureDescriptionInput${streamInfo["streamID"]}"
                         rows="3"
                         onfocus="focusDescriptionInput(this, ${streamInfo["streamID"]})"
-                        class="flex-grow border-none"
+                        class="grow border-none"
                         placeholder="Add a nice description, links, and more. You can use Markdown."
                         autocomplete="off">${streamInfo["description"]}</textarea>
                     <button id="descriptionSubmitBtn${streamInfo["streamID"]}"
diff --git a/web/ts/watch.ts b/web/ts/watch.ts
index aa2efab31..02632fb77 100644
--- a/web/ts/watch.ts
+++ b/web/ts/watch.ts
@@ -92,7 +92,7 @@ function createMessageElement(m): HTMLDivElement {
     const chatHeader = document.createElement("div") as HTMLDivElement;
     chatHeader.classList.add("flex", "flex-row");
     const chatNameField = document.createElement("p") as HTMLParagraphElement;
-    chatNameField.classList.add("flex-grow", "font-semibold");
+    chatNameField.classList.add("grow", "font-semibold");
     if (m["admin"]) {
         chatNameField.classList.add("text-warn");
     }