System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-19 19:55:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix broken color definition (#826)

Browse source 
* fix broken color definition

* switch to real colors

* fix bg

* fix leaderboards

* tidy up settings page
This commit is contained in:
Echo 2026-01-25 12:05:22 -05:00 • committed by GitHub
parent 33113b1680
commit 89c2649898
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 81 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/tailwind/application.css
View file

@ -17,7 +17,7 @@ main {
}
}
:root {
@theme {
--color-darker: #121217;
--color-dark: #17171D;
--color-darkless: #252429;
@ -36,46 +36,6 @@ main {
--color-primary: var(--color-green);
}
/* for some reason tailwind just does not want to work, so lets make sure it does */
.bg-darker { background-color: var(--color-darker) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-darkless { background-color: var(--color-darkless) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-red { background-color: var(--color-red) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-green { background-color: var(--color-green) !important; }
.bg-cyan { background-color: var(--color-cyan) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-purple { background-color: var(--color-purple) !important; }
.text-darker { color: var(--color-darker) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-darkless { color: var(--color-darkless) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-red { color: var(--color-red) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-green { color: var(--color-green) !important; }
.text-cyan { color: var(--color-cyan) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-purple { color: var(--color-purple) !important; }
.border-darker { border-color: var(--color-darker) !important; }
.border-dark { border-color: var(--color-dark) !important; }
.border-darkless { border-color: var(--color-darkless) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-red { border-color: var(--color-red) !important; }
.border-orange { border-color: var(--color-orange) !important; }
.border-yellow { border-color: var(--color-yellow) !important; }
.border-green { border-color: var(--color-green) !important; }
.border-cyan { border-color: var(--color-cyan) !important; }
.border-blue { border-color: var(--color-blue) !important; }
.border-purple { border-color: var(--color-purple) !important; }
.project-toggle-group {
@apply flex items-center gap-2 rounded-lg p-1;
background-color: var(--color-darkless);

10
app/assets/tailwind/nav.css
View file

@ -1,5 +1,5 @@
aside[data-nav-target="nav"] {
@apply fixed inset-y-0 left-0 w-[15.625rem] bg-[#181c23] text-[#f3f3f3] border-r border-r-[#222] z-1000 overflow-y-auto py-6 px-2 transition-transform duration-300 ease-in-out;
@apply fixed inset-y-0 left-0 w-[15.625rem] bg-dark text-[#f3f3f3] border-r border-r-darkless z-1000 overflow-y-auto py-6 px-2 transition-transform duration-300 ease-in-out;
}
aside[data-nav-target="nav"] a.block {
@ -7,13 +7,13 @@ aside[data-nav-target="nav"] a.block {
}
aside[data-nav-target="nav"] a.block.bg-primary\/20 {
color: var(--primary-color, #e13950);
@apply text-primary;
@apply bg-[rgba(225,57,80,0.12)];
}
aside[data-nav-target="nav"] a.block:hover {
@apply bg-[#23272a];
color: var(--primary-color, #e13950);
@apply bg-darkless;
@apply text-primary;
}
@media (max-width: 1023px) {
@ -33,7 +33,7 @@ aside[data-nav-target="nav"] a.block:hover {
}
.mobile-nav-button:hover {
@apply bg-[#23272a];
@apply bg-darkless;
}
.mobile-nav-button svg {

4
app/views/extensions/index.html.erb
View file

@ -3,13 +3,13 @@
<em class="m-4">These are third-party extensions that can be used with Hackatime. Everything in the list is community made and not guaranteed to work!</em>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border rounded-lg p-4 bg-[#2c2f33]">
<div class="border rounded-lg p-4 bg-darkless">
<h2 class="font-bold text-2xl mb-2">Hackatime Desktop</h2>
<p>Desktop app for Hackatime. Runs on Mac, Windows, and Linux.</p>
<%= link_to "Source", "https://github.com/hackclub/hackatime-desktop", class: "text-primary hover:underline", allow_host: true %> |
<%= link_to "Install", "https://github.com/hackclub/hackatime-desktop/releases", class: "text-primary hover:underline", allow_host: true %>
</div>
<div class="border rounded-lg p-4 bg-[#2c2f33]">
<div class="border rounded-lg p-4 bg-darkless">
<h2 class="font-bold text-2xl mb-2">Cattatime</h2>
<p>A Tamagotchi system for Hackatime. Code, fill your cup, and get your pet rewards. Available for windows and mac.</p>
<%= link_to "Source", "https://github.com/joysudo/catatime/tree/master", class: "text-primary hover:underline", allow_host: true %> |

14
app/views/leaderboards/index.html.erb
View file

@ -4,14 +4,14 @@
<div class="inline-flex rounded-full p-1 mb-4">
<%= link_to "Last 24 Hours", leaderboards_path(period_type: 'daily'),
class: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 #{@period_type == :daily ? 'bg-primary text-white' : 'text-muted bg-darkless hover:text-white'}", style: "background:none; border:none;" %>
class: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 #{@period_type == :daily ? 'bg-primary text-white' : 'text-muted bg-darkless hover:text-white'}" %>
<%= link_to "Last 7 Days", leaderboards_path(period_type: 'last_7_days'),
class: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 #{@period_type == :last_7_days ? 'bg-primary text-white' : 'text-muted bg-darkless hover:text-white'}", style: "background:none; border:none;" %>
class: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 #{@period_type == :last_7_days ? 'bg-primary text-white' : 'text-muted bg-darkless hover:text-white'}" %>
</div>
<% if current_user && current_user.github_uid.blank? %>
<div class="bg-dark border border-primary rounded-lg p-4 mb-6">
<%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-red-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
<% if current_user && !current_user.github_uid.blank? %>
<div class="bg-darker border border-primary rounded-lg p-4 mb-6">
<%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-primary/50 text-white font-medium mr-2 px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
</div>
<% end %>
@ -41,7 +41,7 @@
<div class="divide-y divide-gray-800">
<% @entries.each_with_index do |entry, index| %>
<div class="flex items-center p-2 hover:bg-dark transition-colors duration-200 <%= 'bg-dark border-l-4 border-l-primary' if entry.user_id == current_user&.id %> <%= 'opacity-40 hover:opacity-60' if entry.user.red? && current_user&.admin_level.in?([ "admin", "superadmin" ]) %>">
<div class="w-12 flex-shrink-0 text-center font-medium text-muted">
<div class="w-12 shrink-0 text-center font-medium text-muted">
<% case index %>
<% when 0 then %>
<span class="text-2xl">🥇</span>
@ -74,7 +74,7 @@
<% end %>
</div>
</div>
<div class="flex-shrink-0 font-mono text-sm text-white font-medium">
<div class="shrink-0 font-mono text-sm text-white font-medium">
<%= short_time_detailed entry.total_seconds %>
</div>
</div>

8
app/views/shared/_interval_selector.html.erb
View file

@ -1,6 +1,6 @@
<%= turbo_frame_tag "interval_selector" do %>
<div class="relative inline-block w-full max-w-xs">
<button type="button" id="interval-dropdown-trigger" class="w-full px-4 py-2 bg-[#23272f] text-gray-100 border border-gray-700 rounded cursor-pointer text-left flex items-center justify-between shadow-lg" onclick="toggleIntervalDropdown()">
<button type="button" id="interval-dropdown-trigger" class="w-full px-4 py-2 bg-darkless text-gray-100 border border-gray-700 rounded cursor-pointer text-left flex items-center justify-between shadow-lg" onclick="toggleIntervalDropdown()">
<span id="interval-dropdown-label">
<%= human_interval_name(params[:interval], from: params[:from], to: params[:to]) %>
</span>
@ -10,7 +10,7 @@
</svg>
</button>
<div id="interval-dropdown-menu" class="w-full px-3 py-2 mt-2 bg-[#23272f] text-gray-100 border border-gray-700 rounded-lg absolute z-1000 shadow-lg" style="display: none;">
<div id="interval-dropdown-menu" class="w-full px-3 py-2 mt-2 bg-darkless text-gray-100 border border-gray-700 rounded-lg absolute z-1000 shadow-lg" style="display: none;">
<ul class="list-none m-0 p-0 overflow-y-auto max-h-60">
<% TimeRangeFilterable::RANGES.each do |key, config| %>
<li class="py-1.5 px-2 cursor-pointer rounded bg-transparent hover:bg-[#2c313a] transition" onclick="selectInterval('<%= key %>', '<%= config[:human_name] %>')"><%= config[:human_name] %></li>
@ -22,11 +22,11 @@
<div class="flex flex-col gap-2 mt-2">
<label class="flex items-center justify-between">Start:
<input type="date" class="ml-2 py-1 px-2 bg-[#181b20] border border-gray-700 rounded" id="custom-start" value="<%= params[:from] %>">
<input type="date" class="ml-2 py-1 px-2 bg-dark border border-gray-700 rounded" id="custom-start" value="<%= params[:from] %>">
</label>
<label class="flex items-center justify-between">End:
<input type="date" class="ml-2 py-1 px-2 bg-[#181b20] border border-gray-700 rounded" id="custom-end" value="<%= params[:to] %>">
<input type="date" class="ml-2 py-1 px-2 bg-dark border border-gray-700 rounded" id="custom-end" value="<%= params[:to] %>">
</label>
<button type="button" class="interval-selector-button px-3 py-2 mt-2 mb-1 rounded font-semibold transition cursor-pointer" onclick="applyCustomRange()">Apply</button>

48
app/views/shared/_nav.html.erb
View file

@ -27,55 +27,55 @@
<div>
<div class="space-y-1 text-lg">
<div>
<%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Home
<% end %>
</div>
<div>
<%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Leaderboards
<% end %>
</div>
<% unless current_user %>
<div>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Docs
<% end %>
</div>
<div>
<%= link_to extensions_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(extensions_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to extensions_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(extensions_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Extensions
<% end %>
</div>
<div>
<%= link_to "/what-is-hackatime", class: "block px-2 py-1 rounded-lg transition #{current_page?('/what-is-hackatime') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to "/what-is-hackatime", class: "block px-2 py-1 rounded-lg transition #{current_page?('/what-is-hackatime') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
What is Hackatime?
<% end %>
</div>
<% end %>
<% if current_user %>
<div>
<%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Projects
<% end %>
</div>
<div>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Docs
<% end %>
</div>
<div>
<%= link_to extensions_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(extensions_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to extensions_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(extensions_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Extensions
<% end %>
</div>
<div>
<%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Settings
<% end %>
</div>
<div>
<%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) || request.path.start_with?('/oauth/applications') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) || request.path.start_with?('/oauth/applications') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
My OAuth Apps
<% end %>
</div>
@ -92,24 +92,24 @@
</div>
<% end %>
<% dev_tool(nil, "div") do %>
<%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Letter Opener
<% end %>
<% end %>
<% dev_tool(nil, "div") do %>
<%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Mailers
<% end %>
<% end %>
<% if current_user&.admin_level == "admin" || current_user&.admin_level == "superadmin" %>
<% admin_tool(nil, "div") do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Review Timeline
<% end %>
<% end %>
<% elsif current_user&.admin_level == "viewer" %>
<% viewer_tool(nil, "div") do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Review Timeline
<% end %>
<% end %>
@ -117,13 +117,13 @@
<% if current_user&.admin_level == "admin" || current_user&.admin_level == "superadmin" %>
<% admin_tool(nil, "div") do %>
<%= link_to admin_trust_level_audit_logs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_trust_level_audit_logs_path) || request.path.start_with?('/admin/trust_level_audit_logs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_trust_level_audit_logs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_trust_level_audit_logs_path) || request.path.start_with?('/admin/trust_level_audit_logs') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Trust Level Logs
<% end %>
<% end %>
<% elsif current_user&.admin_level == "viewer" %>
<% viewer_tool(nil, "div") do %>
<%= link_to admin_trust_level_audit_logs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_trust_level_audit_logs_path) || request.path.start_with?('/admin/trust_level_audit_logs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_trust_level_audit_logs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_trust_level_audit_logs_path) || request.path.start_with?('/admin/trust_level_audit_logs') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Trust Level Logs
<% end %>
<% end %>
@ -131,24 +131,24 @@
<% if current_user&.admin_level == "admin" || current_user&.admin_level == "superadmin" %>
<% admin_tool(nil, "div") do %>
<%= link_to admin_admin_api_keys_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_api_keys_path) || request.path.start_with?('/admin/admin_api_keys') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_admin_api_keys_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_api_keys_path) || request.path.start_with?('/admin/admin_api_keys') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Admin API Keys
<% end %>
<% end %>
<% elsif current_user&.admin_level == "viewer" %>
<% viewer_tool(nil, "div") do %>
<%= link_to admin_admin_api_keys_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_api_keys_path) || request.path.start_with?('/admin/admin_api_keys') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_admin_api_keys_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_api_keys_path) || request.path.start_with?('/admin/admin_api_keys') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Admin API Keys
<% end %>
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to admin_admin_users_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_users_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_admin_users_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_admin_users_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Admin Management
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to admin_deletion_requests_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_deletion_requests_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_deletion_requests_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_deletion_requests_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Account Deletions
<% pending_count = DeletionRequest.pending.count %>
<% if pending_count > 0 %>
@ -157,22 +157,22 @@
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Ahoy Captain
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
GoodBoy
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to admin_oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_oauth_applications_path) || request.path.start_with?('/admin/oauth_applications') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_oauth_applications_path) || request.path.start_with?('/admin/oauth_applications') ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
All OAuth Apps
<% end %>
<% end %>
<% superadmin_tool(nil, "div") do %>
<%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-primary text-primary' : 'hover:bg-darkless'}", data: { action: "click->nav#clickLink" } do %>
Feature Flags
<% end %>
<% end %>

77
app/views/users/edit.html.erb
View file

@ -13,19 +13,19 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🚀</span>
</div>
<h2 class="text-xl font-semibold text-white">Time Tracking Wizard</h2>
</div>
<p class="text-gray-300 mb-4">Get started with tracking your coding time in just a few minutes.</p>
<%= link_to "Set up time tracking", my_wakatime_setup_path,
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200" %>
</div>
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🌍</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_timezone">Timezone</h2>
@ -42,13 +42,13 @@
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<p class="text-xs text-gray-400">This affects how your activity graph and other time-based features are displayed.</p>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">⚙️</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_hackatime_extension">Extension Settings</h2>
@ -64,13 +64,13 @@
{},
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🪪</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_username">Username</h2>
@ -97,13 +97,13 @@
Your profile is currently live at <%= link_to "hackati.me/#{@user.username}", "https://hackati.me/#{@user.username}", target: "_blank", class: "text-primary hover:underline" %>
</p>
<% end %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">💬</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_slack_status">Slack Integration</h2>
@ -126,7 +126,7 @@
<%= f.label :uses_slack_status, "Update my Slack status automatically",
class: "text-sm text-gray-200" %>
</div>
<%= f.submit "Save", class: "mt-3 px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save", class: "mt-3 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -153,7 +153,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🔒</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_privacy">Privacy Settings</h2>
@ -169,12 +169,12 @@
class: "text-sm text-gray-200" %>
</div>
<p class="text-xs text-gray-400">When enabled, others can view your coding statistics through public APIs. Many Hack Club YSWS programs use this to track your progress. Disabling this can prevent you from participating in some programs.</p>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
<div class="border-t border-gray-700 pt-4 mt-4 space-y-3">
<div class="flex items-center gap-3">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🗑️</span>
</div>
<h3 class="text-lg font-semibold text-white" id="delete_account">Delete Account</h3>
@ -187,7 +187,7 @@
<button type="button"
data-controller="account-deletion"
data-action="click->account-deletion#confirm"
class="w-full px-4 py-2 bg-primary text-white font-medium rounded cursor-pointer">
class="w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer">
Request Account Deletion
</button>
<% else %>
@ -200,7 +200,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🔑</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_api_key">API Key</h2>
@ -214,7 +214,7 @@
<button type="button"
data-controller="api-key-rotation"
data-action="click->api-key-rotation#confirm"
class="w-full px-4 py-2 bg-primary hover:bg-red text-white font-medium rounded transition-colors duration-200 cursor-pointer">
class="w-full px-4 py-2 bg-primary hover:bg-primary/50 text-white font-medium rounded transition-colors duration-200 cursor-pointer">
Rotate API Key
</button>
</div>
@ -222,7 +222,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🔗</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_github_account">Connected Accounts</h2>
@ -238,12 +238,12 @@
<span class="text-gray-200 text-sm">Connected: <%= link_to "@#{h(@user.github_username)}", "https://github.com/#{h(@user.github_username)}", target: "_blank", class: "text-primary hover:text-primary/80 underline" %></span>
</div>
<div class="flex items-center gap-2">
<%= link_to "Relink GitHub Account", github_auth_path, data: { turbo: "false" }, class: "inline-flex items-center gap-2 px-3 py-2 bg-primary text-white text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= button_to "Unlink", github_unlink_path, method: :delete, data: { turbo_confirm: "Are you sure you want to unlink your GitHub account? This will remove your GitHub connection and you may need to re-link to use GitHub-dependent features." }, class: "inline-flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= link_to "Relink GitHub Account", github_auth_path, data: { turbo: "false" }, class: "inline-flex items-center gap-2 px-3 py-2 bg-primary text-white hover:bg-primary/50 text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= button_to "Unlink", github_unlink_path, method: :delete, data: { turbo_confirm: "Are you sure you want to unlink your GitHub account? This will remove your GitHub connection and you may need to re-link to use GitHub-dependent features." }, class: "inline-flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white hover:text-white/80 text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
</div>
<% else %>
<%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" },
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -265,7 +265,7 @@
method: :delete,
class: "space-y-4" do |f| %>
<%= f.hidden_field :email, value: email.email %>
<%= f.submit "Unlink!", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Unlink!", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
<% end %>
</div>
@ -287,7 +287,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">📊</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_stats_badges">Stats Badges</h2>
@ -361,7 +361,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 space-y-6">
<div>
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">📄</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_config_file">Config File</h2>
@ -378,7 +378,7 @@
<div class="border-t border-gray-700 pt-6">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🚚</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_migration_assistant">Migration Assistant</h2>
@ -386,7 +386,7 @@
<p class="text-gray-300 text-sm mb-4">This will migrate your heartbeats from waka.hackclub.com to this platform.</p>
<%= button_to "Migrate heartbeats", my_settings_migrate_heartbeats_path, method: :post,
class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200 cursor-pointer" %>
class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% if @heartbeats_migration_jobs.any? %>
<div class="mt-4 space-y-2">
@ -403,7 +403,7 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">📝</span>
</div>
<h2 class="text-xl font-semibold text-white" id="user_markscribe">Markscribe Templates</h2>
@ -431,23 +431,22 @@
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<% if @user.trust_level == "red" %>
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">💾</span>
</div>
<h2 class="text-xl font-semibold text-white" id="download_user_data">Download Your Data</h2>
</div>
<div class="bg-red-900 border border-red-700 rounded-lg p-4">
<div class="bg-red-500/20 border border-red-500 rounded-lg p-4">
<div class="flex items-center gap-2">
<span class="text-red-400">⚠️</span>
<span class="text-red-300 font-medium">Export Restricted</span>
<span class="text-red-500 font-medium">⚠️ Export Restricted</span>
</div>
<p class="text-red-200 text-sm mt-2">
<p class="text-red-500 text-sm mt-2">
Sorry, due to your account standing, you are unable to perform this action.
</p>
</div>
<% else %>
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">💾</span>
</div>
<h2 class="text-xl font-semibold text-white" id="download_user_data">Download Your Data</h2>
@ -492,7 +491,7 @@
<div class="space-y-2">
<%= link_to export_my_heartbeats_path(format: :json, all_data: "true"),
class: "w-full bg-primary hover:bg-red text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
class: "w-full bg-primary hover:bg-primary/50 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
method: :get do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
@ -501,7 +500,7 @@
<% end %>
<%= link_to "#",
class: "w-full bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
class: "w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
data: {
controller: "heartbeat-export",
action: "click->heartbeat-export#handleExport"
@ -542,7 +541,7 @@
<div class="flex gap-3">
<%= form.submit "Import Heartbeats",
class: "bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center gap-2",
class: "w-full px-3 py-2 bg-primary hover:bg-primary/80 text-white text-md font-medium rounded transition-colors duration-200 cursor-pointer",
data: { confirm: "Are you sure you want to import heartbeats? This will add new data to your account." } %>
</div>
<% end %>
@ -556,7 +555,7 @@
<% admin_tool do %>
<div class="p-6 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<div class="p-2 bg-primary/10 rounded">
<span class="text-2xl">🔧</span>
</div>
<h2 class="text-xl font-semibold text-white">WakaTime Mirrors</h2>
@ -609,7 +608,7 @@
},
{
text: "Rotate Now",
class: "bg-primary text-white hover:bg-red-600 font-medium",
class: "bg-primary text-white hover:bg-primary/50 font-medium",
action: "click->api-key-rotation#rotate"
}
] %>
@ -629,7 +628,7 @@
},
{
text: "Copy Key",
class: "bg-primary text-white hover:bg-red-600 font-medium",
class: "bg-primary text-white hover:bg-primary/50 font-medium",
action: "click->api-key-rotation#copyKey"
}
],
@ -652,7 +651,7 @@
},
{
text: "Delete My Account",
class: "bg-primary text-white hover:bg-red-600 font-medium",
class: "bg-primary text-white hover:bg-primary/50 font-medium",
form: true,
url: create_deletion_path,
method: "post"