From 344dfb7f776881e2300abb19b2ee2c80fb569b8f Mon Sep 17 00:00:00 2001
From: Gabriel Quaresma <j.quaresmasantos_98@hotmail.com>
Date: Wed, 11 Oct 2023 13:17:05 -0300
Subject: [PATCH] Indicate required fields on podcasts/new (#20223)

---
 app/assets/stylesheets/components/forms.scss |  6 +++++-
 app/views/podcasts/_form.html.erb            | 14 +++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index f4e1f8472..7eb1c5fe3 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -169,6 +169,10 @@
     + .crayons-field__description {
       margin-top: 0;
     }
+
+    &.required:after {
+      content: '*';
+    }
   }
 
   &__required {
@@ -216,7 +220,7 @@
   }
 }
 
-input[type=file]::file-selector-button {
+input[type='file']::file-selector-button {
   @extend .crayons-btn;
   @extend .crayons-btn--secondary;
 }
diff --git a/app/views/podcasts/_form.html.erb b/app/views/podcasts/_form.html.erb
index 300cb7f0a..d67f5ce6d 100644
--- a/app/views/podcasts/_form.html.erb
+++ b/app/views/podcasts/_form.html.erb
@@ -2,12 +2,12 @@
 
 <%= form_with(model: podcast, local: true) do |form| %>
   <div>
-    <header class="mb-4">
+    <header class="mb-4 flex flex-col">
       <a href="/pod" class="crayons-link crayons-link--secondary fs-s"><%= t("views.podcasts.form.return") %></a>
       <h1 class="crayons-title"><%= t("views.podcasts.form.heading") %></h1>
     </header>
     <% if podcast.errors.any? %>
-      <div class="podcast-errors">
+      <div class="mb-4 crayons-notice crayons-notice--danger">
         <h2><%= t("views.podcasts.form.errors", count: podcast.errors.count) %></h2>
         <ul>
         <% podcast.errors.full_messages.each do |message| %>
@@ -22,7 +22,7 @@
         <%= label_tag :i_am_owner, t("views.podcasts.form.owner"), class: "crayons-field__label" %>
       </div>
       <div class="crayons-field">
-        <%= form.label :title, class: "crayons-field__label" %>
+        <%= form.label :title, class: "crayons-field__label required" %>
         <%= form.text_field :title, placeholder: "Code Newbie", class: "crayons-textfield" %>
       </div>
       <div class="crayons-field">
@@ -34,7 +34,7 @@
         <%= form.text_field :website_url, class: "crayons-textfield", placeholder: "https://codenewbie.org/podcast" %>
       </div>
       <div class="crayons-field">
-        <%= form.label :feed_url, class: "crayons-field__label" %>
+        <%= form.label :feed_url, class: "crayons-field__label required" %>
         <%= form.text_field :feed_url, class: "crayons-textfield", placeholder: "http://feeds.codenewbie.org/cnpodcast.xml" %>
       </div>
       <div class="crayons-field">
@@ -42,15 +42,15 @@
         <%= form.text_field :twitter_username, class: "crayons-textfield", placeholder: "CodeNewbies" %>
       </div>
       <div class="crayons-field">
-        <%= form.label :slug, class: "crayons-field__label" %>
+        <%= form.label :slug, class: "crayons-field__label required" %>
         <%= form.text_field :slug, class: "crayons-textfield", placeholder: "podcast-title" %>
       </div>
       <div class="crayons-field">
-        <%= form.label :main_color_hex, class: "crayons-field__label" %>
+        <%= form.label :main_color_hex, class: "crayons-field__label required" %>
         <%= form.text_field :main_color_hex, placeholder: "FF00FF", class: "crayons-textfield" %>
       </div>
       <div class="crayons-field">
-        <%= form.label :image, class: "crayons-field__label" %>
+        <%= form.label :image, class: "crayons-field__label required" %>
         <%= form.file_field :image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
       </div>
       <div class="crayons-field">