styling/Use tailwind classes for snippet forms

Author: LewisYoul

app/assets/stylesheets/snippets.scss

@@ -124,12 +124,6 @@
   }
 }
 
-.create-snippet--options-wrapper {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 16px;
-}
-
 .create-snippet--wrapper {
   // display: flex;
   // flex-direction: column;
@@ -139,17 +133,6 @@
   margin: 16px 0px;
 }
 
-// textarea {
-//   display: inline-block;
-//   font-family: "Monaco", courier, monospace;
-//   color: #333;
-//   padding: 0;
-//   height: 100%;
-// }
-
-// textarea:focus {
-//   outline: 0;
-// }
 
 .create-snippet--input-wrapper {
   flex: 1;

app/views/modals/snippets/edit.html.erb

@@ -17,11 +17,12 @@
         <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
       </div>
 
-      <div class="create-snippet--options-wrapper">
+      <div class="flex mt-4">
+        <div class="flex flex-1 items-center">
+          <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: !@snippet.public, flip: true } %>
+        </div>
 
-        <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: !@snippet.public, flip: true } %>
-        
-        <div class="flex">
+        <div class="flex flex-3">
           <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
           <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "ml-1 block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
           <%= f.submit 'Update', class: "button--cta-primary ml-4" %>

app/views/modals/snippets/new.html.erb

@@ -12,11 +12,12 @@
       <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
     </div>
 
-    <div class="create-snippet--options-wrapper">
-  
-      <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: false, flip: true } %>
-      
-      <div class="flex">
+    <div class="flex mt-4">
+      <div class="flex flex-1 items-center">
+        <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: false, flip: true } %>
+      </div>
+
+      <div class="flex flex-3">
         <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @javascript.id), { prompt: 'Select language...' }, class: "block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
         <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), { prompt: 'Select folder...' }, { class: "ml-1 block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
         <%= f.submit 'CREATE', class: "button--cta-primary ml-4" %>