Skip to content

Commit 62f4ef5

Browse files
Oli0liOli0li
committed
Refactor language views to avoid inline stylings
1 parent 196df31 commit 62f4ef5

File tree

4 files changed

+90
-119
lines changed

4 files changed

+90
-119
lines changed

‎app/views/languages/_form.html.erb‎

Lines changed: 17 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,31 @@
1-
21
<%= form_for language, local: true do |f| %>
3-
<div style="space-y: 1.5rem;">
2+
<div class="space-y-6">
43
<%= render "shared/errors", errors: language.errors.full_messages, resource_name: language.class.name %>
5-
6-
<div style="margin-bottom: 1.5rem;">
7-
<%= f.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
4+
5+
<div>
6+
<%= f.label :name, class: "input-label" do %>
87
Language Name
9-
<span style="color: #ef4444;">*</span>
8+
<span class="text-red-500">*</span>
109
<% end %>
11-
<%= f.text_field :name,
12-
placeholder: "Enter language name (e.g., English, Spanish, French)",
13-
style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;" %>
14-
<p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">This will be used to identify the language throughout the system.</p>
10+
<%= f.text_field :name,
11+
placeholder: "Enter language name (e.g., English, Spanish, French)",
12+
class: "input-field bg-gray-50" %>
13+
<p class="mt-2 text-xs text-gray-500 m-0">This will be used to identify the language throughout the system.</p>
1514
</div>
16-
17-
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid #f3f4f6;">
18-
<div style="display: flex; gap: 1rem;">
15+
16+
<div class="flex justify-between items-center pt-8 border-t border-gray-100 mt-8">
17+
<div class="flex gap-4">
1918
<%= f.submit (language.persisted? ? "Update Language" : "Create Language"),
20-
class: "bg-gradient-green", style: "color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
21-
<%= link_to "Cancel", languages_path,
22-
style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
19+
class: "bg-gradient-green text-white font-semibold py-3 px-8 rounded-lg border-0 cursor-pointer text-sm shadow-green transition-all hover:-translate-y-0.5" %>
20+
<%= link_to "Cancel", languages_path,
21+
class: "bg-gray-100 text-gray-500 font-semibold py-3 px-8 rounded-lg no-underline text-sm transition-all hover:bg-gray-200" %>
2322
</div>
24-
23+
2524
<% if language.persisted? %>
26-
<div style="color: #6b7280; font-size: 0.75rem;">
25+
<div class="text-gray-500 text-xs">
2726
Last updated: <%= language.updated_at.strftime("%B %d, %Y at %I:%M %p") %>
2827
</div>
2928
<% end %>
3029
</div>
3130
</div>
3231
<% end %>
33-
34-
<style>
35-
/* Form input focus states */
36-
input[type="text"]:focus {
37-
outline: none !important;
38-
border-color: #3b82f6 !important;
39-
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
40-
background: white !important;
41-
}
42-
43-
/* Submit button hover */
44-
input[type="submit"]:hover {
45-
transform: translateY(-2px) !important;
46-
box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4) !important;
47-
}
48-
49-
/* Cancel link hover */
50-
a[href*="languages"]:hover {
51-
background: #e5e7eb !important;
52-
color: #374151 !important;
53-
transform: translateY(-1px);
54-
}
55-
56-
/* Input placeholder styling */
57-
input::placeholder {
58-
color: #9ca3af;
59-
font-style: italic;
60-
}
61-
</style>

‎app/views/languages/edit.html.erb‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
<% content_for :title, "Editing language" %>
22

3-
<div class="p-8">
4-
<div class="max-w-2xl mx-auto">
3+
<div class="bg-gradient-page page-container">
4+
<div class="max-w-2xl mx-auto px-4">
5+
56
<!-- Breadcrumb -->
6-
<nav class="mb-8">
7-
<div class="flex items-center gap-2 text-sm text-gray-500">
8-
<%= link_to "Languages", languages_path, class: "text-blue-500 no-underline hover:text-blue-600" %>
9-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
10-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
11-
</svg>
12-
<span>Edit <%= @language.name %></span>
13-
</div>
7+
<nav class="breadcrumb-nav">
8+
<ol class="breadcrumb-list">
9+
<li><%= link_to "Languages", languages_path, class: "text-gray-500 no-underline hover:text-gray-700" %></li>
10+
<li class="breadcrumb-separator">/</li>
11+
<li class="breadcrumb-current">Edit <%= @language.name %></li>
12+
</ol>
1413
</nav>
1514

1615
<!-- Main Card -->
17-
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
16+
<div class="card-elevated overflow-hidden">
1817
<!-- Header -->
19-
<div class="bg-gradient-gray p-8 border-b border-gray-200">
18+
<div class="bg-gradient-amber p-8 text-white">
2019
<div class="flex items-center gap-4">
21-
<div class="w-12 h-12 bg-gradient-amber rounded-xl flex items-center justify-center text-white font-semibold text-lg">
20+
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center font-semibold text-lg backdrop-blur-sm">
2221
<%= @language.name.first.upcase %>
2322
</div>
2423
<div>
25-
<h1 class="text-2xl font-bold text-gray-900 m-0">Edit Language</h1>
26-
<p class="text-gray-500 mt-1 mb-0 text-sm">Update settings for "<%= @language.name %>"</p>
24+
<h1 class="text-2xl font-bold m-0">Edit Language</h1>
25+
<p class="text-white/80 mt-1 m-0 text-sm">Update settings for "<%= @language.name %>"</p>
2726
</div>
2827
</div>
2928
</div>
3029

3130
<!-- Form Content -->
32-
<div class="p-8">
31+
<div class="card-body">
3332
<%= render "form", language: @language %>
3433
</div>
3534
</div>

‎app/views/languages/index.html.erb‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,80 @@
11
<% content_for :title, "Languages" %>
22

3-
<div class="min-h-screen py-8 bg-gradient-page">
4-
<div class="max-w-7xl mx-auto px-4 overflow-x-hidden">
3+
<div class="bg-gradient-page page-container">
4+
<div class="content-wrapper">
55

66
<!-- Header Section -->
7-
<div class="mb-8">
8-
<div class="flex justify-between items-center mb-6 flex-wrap gap-4">
7+
<div class="section-spacing">
8+
<div class="flex-between-wrap mb-6">
99
<div class="min-w-0 flex-1">
1010
<div class="flex items-center gap-4 mb-2">
1111
<div class="bg-gradient-blue text-white p-3 rounded-xl flex-shrink-0">
12-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
12+
<svg class="icon-size-md" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1313
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
1414
</svg>
1515
</div>
16-
<h1 class="text-4xl font-bold text-gray-900 m-0 min-w-0">Languages</h1>
16+
<h1 class="text-4xl font-bold text-gray-800 m-0 min-w-0">Languages</h1>
1717
</div>
1818
<p class="text-gray-500 m-0 text-base">Manage system languages and their file storage configurations</p>
1919
</div>
2020

21-
<%= link_to new_language_path, class: "bg-gradient-blue shadow-blue text-white px-7 py-3.5 rounded-xl no-underline font-semibold text-sm inline-flex items-center gap-2 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-blue-lg", data: {turbo: false } do %>
22-
<svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
21+
<%= link_to new_language_path, class: "bg-gradient-blue text-white py-3.5 px-7 rounded-xl no-underline font-semibold text-sm inline-flex items-center gap-2 shadow-blue transition-all hover:-translate-y-0.5", data: {turbo: false } do %>
22+
<svg class="icon-size" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2323
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
2424
</svg>
2525
<span>Add New Language</span>
2626
<% end %>
2727
</div>
2828
</div>
2929

30-
<!-- Table Card -->
31-
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
32-
<div class="overflow-x-auto">
30+
<!-- Languages Table Card -->
31+
<div class="card-elevated overflow-hidden">
32+
<div class="table-container overflow-x-auto">
3333
<table class="w-full border-collapse">
3434
<thead>
35-
<tr class="bg-gradient-gray border-b-2 border-gray-200">
36-
<th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Name</th>
37-
<th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">File Share Folder</th>
38-
<th class="px-6 py-5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Actions</th>
35+
<tr class="table-header">
36+
<th class="table-cell text-left">Name</th>
37+
<th class="table-cell text-left">File Share Folder</th>
38+
<th class="table-cell text-right">Actions</th>
3939
</tr>
4040
</thead>
4141
<tbody>
4242
<% if @languages.any? %>
4343
<% @languages.each_with_index do |language, index| %>
44-
<tr class="border-b border-gray-100 transition-all duration-200 hover:bg-gray-50 group">
45-
<td class="px-6 py-5">
44+
<tr class="border-b border-gray-100 transition-all hover:bg-gray-50">
45+
<td class="table-cell">
4646
<div class="flex items-center gap-3">
4747
<div>
4848
<div class="font-semibold text-gray-900 text-sm"><%= language.name.capitalize %></div>
4949
</div>
5050
</div>
5151
</td>
52-
<td class="px-6 py-5">
53-
<span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs font-medium font-mono">
52+
<td class="table-cell">
53+
<span class="bg-gray-100 text-gray-600 py-1 px-3 rounded-full text-xs font-medium font-mono">
5454
<%= language.file_storage_prefix.present? ? language.file_storage_prefix : 'Not configured' %>
5555
</span>
5656
</td>
57-
<td class="px-6 py-5 text-right">
58-
<%= link_to edit_language_path(language), class: "bg-gray-500 text-white px-4 py-2 rounded-md no-underline text-xs font-semibold inline-flex items-center gap-1.5 transition-all duration-200 hover:bg-gray-600 hover:-translate-y-px" do %>
59-
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
60-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
61-
</svg>
62-
<span>Edit</span>
63-
<% end %>
57+
<td class="table-cell text-right">
58+
<div class="flex gap-2 justify-end">
59+
<%= link_to edit_language_path(language), class: "btn-edit" do %>
60+
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
61+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
62+
</svg>
63+
<span>Edit</span>
64+
<% end %>
65+
</div>
6466
</td>
6567
</tr>
6668
<% end %>
6769
<% else %>
6870
<tr>
69-
<td colspan="3" class="px-6 py-12 text-center">
71+
<td colspan="3" class="empty-state">
7072
<div class="text-gray-400">
7173
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
72-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
73-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 21l4-4 4 4"></path>
74+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
7475
</svg>
7576
<p class="text-base font-medium text-gray-500 m-0">No languages configured yet</p>
76-
<p class="text-sm text-gray-400 mt-2 mb-0">Get started by adding your first language configuration.</p>
77+
<p class="text-sm text-gray-400 mt-2 m-0">Get started by adding your first language configuration.</p>
7778
</div>
7879
</td>
7980
</tr>

‎app/views/languages/new.html.erb‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,51 @@
11
<% content_for :title, "New language" %>
22

3-
<div style="padding: 2rem;">
4-
<div style="max-width: 600px; margin: 0 auto;">
3+
<div class="bg-gradient-page page-container">
4+
<div class="max-w-2xl mx-auto px-4">
5+
56
<!-- Breadcrumb -->
6-
<nav style="margin-bottom: 2rem;">
7-
<div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280;">
8-
<%= link_to "Languages", languages_path, style: "color: #3b82f6; text-decoration: none; hover: text-decoration: underline;" %>
9-
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
10-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
11-
</svg>
12-
<span>New Language</span>
13-
</div>
7+
<nav class="breadcrumb-nav">
8+
<ol class="breadcrumb-list">
9+
<li><%= link_to "Languages", languages_path, class: "text-gray-500 no-underline hover:text-gray-700" %></li>
10+
<li class="breadcrumb-separator">/</li>
11+
<li class="breadcrumb-current">New Language</li>
12+
</ol>
1413
</nav>
1514

1615
<!-- Main Card -->
17-
<div style="background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden;">
16+
<div class="card-elevated overflow-hidden">
1817
<!-- Header -->
19-
<div class="bg-gradient-gray" style="padding: 2rem; border-bottom: 1px solid #e2e8f0;">
20-
<div style="display: flex; align-items: center; gap: 1rem;">
21-
<div class="bg-gradient-green" style="width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white;">
22-
<svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
18+
<div class="bg-gradient-to-br from-blue-700 to-indigo-800 p-8 text-white">
19+
<div class="flex items-center gap-4">
20+
<div class="icon-wrapper-translucent">
21+
<svg class="icon-size-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2322
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
2423
</svg>
2524
</div>
2625
<div>
27-
<h1 style="font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0;">Add New Language</h1>
28-
<p style="color: #6b7280; margin: 0.25rem 0 0 0; font-size: 0.875rem;">Configure a new language for the system</p>
26+
<h1 class="text-2xl font-bold m-0">Add New Language</h1>
27+
<p class="text-white/80 mt-2 m-0 text-sm">Configure a new language for the system</p>
2928
</div>
3029
</div>
3130
</div>
3231

3332
<!-- Form Content -->
34-
<div style="padding: 2rem;">
33+
<div class="card-body">
3534
<%= render "form", language: @language %>
3635
</div>
3736
</div>
3837

39-
<!-- Help Text -->
40-
<div style="margin-top: 1.5rem; padding: 1rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.5rem;">
41-
<div style="display: flex; gap: 0.75rem;">
42-
<svg style="width: 1.25rem; height: 1.25rem; color: #0ea5e9; flex-shrink: 0; margin-top: 0.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
44-
</svg>
38+
<!-- Help Section -->
39+
<div class="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
40+
<div class="flex items-start gap-4">
41+
<div class="bg-blue-100 text-blue-800 p-2 rounded-lg mt-1 flex-shrink-0">
42+
<svg class="icon-size-md" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
44+
</svg>
45+
</div>
4546
<div>
46-
<h3 style="font-weight: 600; color: #0c4a6e; margin: 0 0 0.25rem 0; font-size: 0.875rem;">About Languages</h3>
47-
<p style="color: #075985; font-size: 0.75rem; margin: 0; line-height: 1.5;">Languages help organize content and file storage. Each language can have its own file storage prefix for better organization.</p>
47+
<h3 class="text-base font-semibold text-blue-900 m-0 mb-3">About Languages</h3>
48+
<p class="text-blue-800 text-sm m-0 leading-relaxed">Languages help organize content and file storage. Each language can have its own file storage prefix for better organization.</p>
4849
</div>
4950
</div>
5051
</div>

0 commit comments

Comments
 (0)