Skip to content

Commit db362be

Browse files
jaspermayonejaspermayone
committed
style?
1 parent 3df6862 commit db362be

5 files changed

Lines changed: 77 additions & 21 deletions

File tree

‎PRODUCT.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Product
2+
3+
## Register
4+
5+
product
6+
7+
## Users
8+
9+
WIT Coding Club officers and calendar admin staff managing the backend of the WIT Calendar system. Users are technical — developers and club leads who know what they're doing. They use the admin panel to manage course data, faculty records, Google Calendar sync, and system state. The interface should trust them as capable operators.
10+
11+
The same M3 warm palette governs both this admin panel and the user-facing Chrome extension, so both surfaces must feel like one product family.
12+
13+
## Product Purpose
14+
15+
WIT Calendar is a student-built academic scheduling tool for Wentworth Institute of Technology. The admin panel lets authorized staff manage the data that powers the calendar: courses, faculty, terms, finals, university events, RMP ratings, and system jobs. Success is a fast, low-friction session where the admin can find, verify, and act on data without fighting the interface.
16+
17+
## Brand Personality
18+
19+
Calm, precise, institutional. The interface should feel like a confident internal tool — not corporate sterile, not flashy SaaS. It earns trust through consistency and clarity.
20+
21+
## Anti-references
22+
23+
- Gradient-heavy SaaS dashboards (big colourful hero metrics, neon accents)
24+
- Generic Bootstrap admin themes (navy sidebars, no personality)
25+
- Dense legacy admin panels (WordPress-style, no breathing room)
26+
27+
## Design Principles
28+
29+
1. **Trust the operator.** Admins are technical. Don't over-explain, don't add confirmation theatre, don't hide actions behind layers.
30+
2. **Data first, chrome second.** The interface exists to surface data. Decoration earns its place only when it adds clarity.
31+
3. **Coherent with the extension.** The M3 warm palette (golds, warm neutrals, soft purples) is the shared visual language. Don't drift from it.
32+
4. **Dark mode is primary.** Most admin sessions happen on developers' machines with dark mode on. The dark scheme must be polished, not an afterthought.
33+
5. **Rhythm over uniformity.** Vary spacing and weight to create visual hierarchy. Same padding everywhere is monotony.
34+
35+
## Accessibility & Inclusion
36+
37+
WCAG AA minimum. All interactive elements must have sufficient contrast against their backgrounds. Reduced motion should be respected for any transitions added.

‎app/assets/tailwind/application.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,10 +231,10 @@ html, body {
231231

232232
/* List / nav items */
233233
.m3-list-item {
234-
@apply flex items-center gap-3 px-4 py-3 rounded-2xl text-sm text-on-surface-variant hover:bg-surface-container transition-colors;
234+
@apply flex items-center gap-3 px-4 py-3 rounded-2xl text-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-colors cursor-pointer;
235235
}
236236
.m3-list-item-active {
237-
@apply flex items-center gap-3 px-4 py-3 rounded-2xl text-sm bg-secondary-container text-on-secondary-container font-medium;
237+
@apply flex items-center gap-3 px-4 py-3 rounded-2xl text-sm bg-primary-container text-on-primary-container font-semibold;
238238
}
239239

240240
/* Tables */

‎app/views/admin/application/index.html.erb‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,39 @@
1313
<%= render "shared/stat_card", title: "Uni Events", count: @university_events_count, path: admin_university_calendar_events_path %>
1414
</div>
1515

16-
<div class="m3-card shadow-sm">
17-
<div class="px-4 py-5 sm:p-6">
18-
<h3 class="text-lg leading-6 font-medium text-on-surface mb-4">Quick Actions</h3>
19-
<div class="space-y-2">
20-
<%= link_to "Manage Users", admin_users_path, class: "m3-btn-text block w-fit" %>
21-
<%= link_to "Manage Calendars", admin_calendars_path, class: "m3-btn-text block w-fit" %>
22-
<%= link_to "Fill Missing RMP IDs#{" (#{@missing_rmp_ids_count})" if @missing_rmp_ids_count&.> 0}", missing_rmp_ids_admin_faculties_path, class: "m3-btn-text block w-fit" %>
23-
<% if policy(:course_catalog).index? %>
24-
<%= link_to "Fetch Course Catalog", admin_course_catalog_path, class: "m3-btn-text block w-fit" %>
16+
<div class="m3-card">
17+
<div class="px-4 py-4 border-b border-outline-variant">
18+
<h3 class="text-sm font-semibold text-on-surface-variant uppercase tracking-wide">Quick Actions</h3>
19+
</div>
20+
<div class="p-2">
21+
<%= link_to admin_users_path, class: "m3-list-item" do %>
22+
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
23+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
24+
</svg>
25+
Manage Users
26+
<% end %>
27+
<%= link_to admin_calendars_path, class: "m3-list-item" do %>
28+
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
30+
</svg>
31+
Manage Calendars
32+
<% end %>
33+
<%= link_to missing_rmp_ids_admin_faculties_path, class: "m3-list-item" do %>
34+
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
35+
<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"/>
36+
</svg>
37+
Fill Missing RMP IDs
38+
<% if @missing_rmp_ids_count&.> 0 %>
39+
<span class="ml-auto m3-badge-error"><%= @missing_rmp_ids_count %></span>
40+
<% end %>
41+
<% end %>
42+
<% if policy(:course_catalog).index? %>
43+
<%= link_to admin_course_catalog_path, class: "m3-list-item" do %>
44+
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
45+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
46+
</svg>
47+
Fetch Course Catalog
2548
<% end %>
26-
</div>
49+
<% end %>
2750
</div>
2851
</div>

‎app/views/shared/_admin_sidebar.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<% category[:items].each do |item| %>
4545
<% resolved_path = item[:path].is_a?(Symbol) ? send(item[:path]) : item[:path] %>
4646
<%= link_to item[:title], resolved_path,
47-
class: "flex items-center gap-2 px-3 py-2 rounded-2xl text-sm #{request.path.start_with?(resolved_path.to_s) ? 'bg-secondary-container text-on-secondary-container font-medium' : 'text-on-surface-variant hover:bg-surface-container-high'}" %>
47+
class: "flex items-center gap-2 px-3 py-2 rounded-2xl text-sm #{request.path.start_with?(resolved_path.to_s) ? 'bg-primary-container text-on-primary-container font-semibold' : 'text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-colors'}" %>
4848
<% end %>
4949
</div>
5050
</div>

‎app/views/shared/_stat_card.html.erb‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<%# Usage: render "shared/stat_card", title: "Users", count: @users_count, path: admin_users_path %>
2-
<div class="m3-card">
3-
<div class="p-3">
4-
<%= link_to title, path, class: "text-base font-medium text-on-surface hover:underline" %>
5-
<div class="mt-1 text-3xl font-semibold text-primary">
6-
<%= count %>
7-
</div>
8-
</div>
9-
</div>
2+
<%= link_to path, class: "m3-card block p-4 hover:bg-surface-container-high transition-colors group" do %>
3+
<p class="text-xs font-medium text-on-surface-variant uppercase tracking-wide mb-2"><%= title %></p>
4+
<p class="text-2xl font-bold text-primary group-hover:text-on-primary-container transition-colors"><%= count %></p>
5+
<% end %>

0 commit comments

Comments
 (0)