Skip to content

Commit c0de938

Browse files
3kh03kh0
committed
reorg setup flow
1 parent e4b8f39 commit c0de938

File tree

2 files changed

+211
-218
lines changed

2 files changed

+211
-218
lines changed

‎app/views/users/wakatime_setup_step_2.html.erb‎

Lines changed: 78 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -22,89 +22,88 @@
2222
<p class="text-secondary text-lg"><em>Let's setup one for now, you can setup more later!</em></p>
2323
</div>
2424

25-
<div class="grid gap-4 max-w-2xl mx-auto">
26-
<div class="bg-dark rounded-lg p-6 hover:bg-darkless transition-colors">
27-
<%= link_to my_wakatime_setup_step_3_path(anchor: "vs-code"), class: "flex items-center gap-4 text-white no-underline" do %>
28-
<div class="w-12 h-12 rounded-lg flex items-center justify-center">
29-
<img src="/images/editor-icons/vs-code-128.png" alt="VS Code" class="w-full h-full object-contain">
30-
</div>
31-
<div>
32-
<h3 class="text-xl font-bold">Visual Studio Code</h3>
33-
<p class="text-secondary">Most popular code editor, loved by millions</p>
34-
</div>
35-
<div class="ml-auto text-primary flex items-center">
36-
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
37-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
38-
</svg>
39-
</div>
40-
<% end %>
41-
</div>
25+
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
26+
<%= link_to my_wakatime_setup_step_3_path(editor: "vscode"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
27+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
28+
<img src="/images/editor-icons/vs-code-128.png" alt="VS Code" class="w-16 h-16 object-contain">
29+
</div>
30+
<div>
31+
<h3 class="font-bold text-lg">VS Code</h3>
32+
</div>
33+
<% end %>
4234

43-
<div class="bg-dark rounded-lg p-6 hover:bg-darkless transition-colors">
44-
<%= link_to my_wakatime_setup_step_3_path(anchor: "vim"), class: "flex items-center gap-4 text-white no-underline" do %>
45-
<div class="w-12 h-12 rounded-lg flex items-center justify-center">
46-
<img src="/images/editor-icons/vim-128.png" alt="Vim" class="w-full h-full object-contain">
47-
</div>
48-
<div>
49-
<h3 class="text-xl font-bold">Vim</h3>
50-
<p class="text-secondary">Terminal-based editor, for the cool kids</p>
51-
</div>
52-
<div class="ml-auto text-primary flex items-center">
53-
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
54-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
55-
</svg>
56-
</div>
57-
<% end %>
58-
</div>
35+
<%= link_to my_wakatime_setup_step_3_path(editor: "vim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
36+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
37+
<img src="/images/editor-icons/vim-128.png" alt="Vim" class="w-16 h-16 object-contain">
38+
</div>
39+
<div>
40+
<h3 class="font-bold text-lg">Vim</h3>
41+
</div>
42+
<% end %>
5943

60-
<div class="bg-dark rounded-lg p-6 hover:bg-darkless transition-colors">
61-
<%= link_to my_wakatime_setup_step_3_path(anchor: "emacs"), class: "flex items-center gap-4 text-white no-underline" do %>
62-
<div class="w-12 h-12 rounded-lg flex items-center justify-center">
63-
<img src="/images/editor-icons/emacs-128.png" alt="Emacs" class="w-full h-full object-contain">
64-
</div>
65-
<div>
66-
<h3 class="text-xl font-bold">Emacs</h3>
67-
<p class="text-secondary">Powerful extensible editor, for the power users</p>
68-
</div>
69-
<div class="ml-auto text-primary flex items-center">
70-
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
71-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
72-
</svg>
73-
</div>
74-
<% end %>
75-
</div>
44+
<%= link_to my_wakatime_setup_step_3_path(editor: "neovim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
45+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
46+
<img src="/images/editor-icons/neovim-128.png" alt="Neovim" class="w-16 h-16 object-contain">
47+
</div>
48+
<div>
49+
<h3 class="font-bold text-lg">Neovim</h3>
50+
</div>
51+
<% end %>
7652

77-
<div class="bg-dark rounded-lg p-6 hover:bg-darkless transition-colors">
78-
<%= link_to my_wakatime_setup_step_3_path(anchor: "godot"), class: "flex items-center gap-4 text-white no-underline" do %>
79-
<div class="w-12 h-12 rounded-lg flex items-center justify-center">
80-
<img src="/images/editor-icons/godot-128.png" alt="Godot" class="w-full h-full object-contain">
81-
</div>
82-
<div>
83-
<h3 class="text-xl font-bold">Godot</h3>
84-
<p class="text-secondary">Open source game engine for all</p>
85-
</div>
86-
<div class="ml-auto text-primary flex items-center">
87-
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
88-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
89-
</svg>
90-
</div>
91-
<% end %>
92-
</div>
53+
<%= link_to my_wakatime_setup_step_3_path(editor: "emacs"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
54+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
55+
<img src="/images/editor-icons/emacs-128.png" alt="Emacs" class="w-16 h-16 object-contain">
56+
</div>
57+
<div>
58+
<h3 class="font-bold text-lg">Emacs</h3>
59+
</div>
60+
<% end %>
9361

94-
<div class="bg-dark rounded-lg p-6 hover:bg-darkless transition-colors">
95-
<%= link_to my_wakatime_setup_step_3_path, class: "flex items-center gap-4 text-white no-underline" do %>
96-
<div class="w-12 h-12 bg-orange rounded-lg flex items-center justify-center text-2xl">🔧</div>
97-
<div>
98-
<h3 class="text-xl font-bold">Not listed here!</h3>
99-
<p class="text-secondary">Any WakaTime-supported editor, there are hundreds!</p>
100-
</div>
101-
<div class="ml-auto text-primary flex items-center">
102-
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
103-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
104-
</svg>
105-
</div>
106-
<% end %>
107-
</div>
62+
<%= link_to my_wakatime_setup_step_3_path(editor: "pycharm"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
63+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
64+
<img src="/images/editor-icons/pycharm-128.png" alt="PyCharm" class="w-16 h-16 object-contain">
65+
</div>
66+
<div>
67+
<h3 class="font-bold text-lg">PyCharm</h3>
68+
</div>
69+
<% end %>
70+
71+
<%= link_to my_wakatime_setup_step_3_path(editor: "sublime"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
72+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
73+
<img src="/images/editor-icons/sublime-text-128.png" alt="Sublime" class="w-16 h-16 object-contain">
74+
</div>
75+
<div>
76+
<h3 class="font-bold text-lg">Sublime Text</h3>
77+
</div>
78+
<% end %>
79+
80+
<%= link_to my_wakatime_setup_step_3_path(editor: "unity"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
81+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
82+
<img src="/images/editor-icons/unity-128.png" alt="Unity" class="w-16 h-16 object-contain">
83+
</div>
84+
<div>
85+
<h3 class="font-bold text-lg">Unity</h3>
86+
</div>
87+
<% end %>
88+
89+
<%= link_to my_wakatime_setup_step_3_path(editor: "godot"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
90+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
91+
<img src="/images/editor-icons/godot-128.png" alt="Godot" class="w-16 h-16 object-contain">
92+
</div>
93+
<div>
94+
<h3 class="font-bold text-lg">Godot</h3>
95+
</div>
96+
<% end %>
97+
98+
<%= link_to my_wakatime_setup_step_3_path(editor: "other"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full col-span-2 md:col-span-3 lg:col-span-4" do %>
99+
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
100+
<div class="text-4xl">🔧</div>
101+
</div>
102+
<div>
103+
<h3 class="font-bold text-lg">Other Editor</h3>
104+
<p class="text-secondary text-sm">Hackatime supports 70+ editors</p>
105+
</div>
106+
<% end %>
108107
</div>
109108
</div>
110109
</div>

0 commit comments

Comments
 (0)