forked from
tangled.org/core
Monorepo for Tangled
appview/repo/pulls/new: add dark mode and responsive styles
Signed-off-by: eti <eti@eti.tf>
+154
-154
+50
-50
appview/pages/templates/repo/pulls/new-branch.html
+50
-50
appview/pages/templates/repo/pulls/new-branch.html
···
2
2
3
3
<div class="flex flex-row gap-4">
4
4
<div class="flex flex-col items-center relative w-6">
5
-
<div class="absolute top-0 bottom-0 w-px bg-gray-200"></div>
5
+
<div class="absolute top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
6
6
</div>
7
-
<div class="flex flex-col gap-10">
7
+
<div class="flex flex-col gap-10 w-full">
8
8
<div id="step-1" class="flex flex-col gap-4">
9
9
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
10
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">1</span>
10
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">1</span>
11
11
</div>
12
12
<div class="flex flex-col gap-1">
13
13
<span class="font-bold text-sm uppercase dark:text-white">method</span>
14
-
<p class="text-gray-700 text-sm">
14
+
<p class="text-gray-700 dark:text-gray-300 text-sm">
15
15
choose your preferred pull strategy.
16
16
<a href="#">more information here</a>
17
17
</p>
18
18
</div>
19
-
<div class="flex gap-4 w-full">
20
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
19
+
<div class="flex flex-col md:flex-row gap-4 w-full">
20
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
21
21
<span class="text-base">patch</span>
22
-
<span class="text-gray-700">paste a `git diff` or a `git format-patch`</span>
22
+
<span class="text-gray-700 dark:text-gray-300">paste a `git diff` or a `git format-patch`</span>
23
23
</button>
24
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
24
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
25
25
<span class="text-base">compare branches</span>
26
-
<span class="text-gray-700">select a source branch</span>
26
+
<span class="text-gray-700 dark:text-gray-300">select a source branch</span>
27
27
</button>
28
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
28
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
29
29
<span class="text-base">compare forks</span>
30
-
<span class="text-gray-700">select a fork and branch as the source</span>
30
+
<span class="text-gray-700 dark:text-gray-300">select a fork and branch as the source</span>
31
31
</button>
32
32
</div>
33
33
</div>
34
34
<div id="step-2" class="flex flex-col gap-4">
35
35
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
36
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">2</span>
36
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">2</span>
37
37
</div>
38
38
<div class="header flex flex-col gap-1">
39
39
<span class="font-bold text-sm uppercase dark:text-white">compare</span>
40
40
</div>
41
-
<div class="flex gap-4 w-full">
42
-
<div class="flex flex-col gap-1.5">
41
+
<div class="flex flex-col md:flex-row gap-4 w-full">
42
+
<div class="flex flex-col gap-1.5 w-full md:w-auto">
43
43
<label for="target-branch" class="uppercase p-0">merge into</label>
44
-
<div class="relative inline-flex border border-gray-200 divide-x divide-gray-200 rounded overflow-hidden">
45
-
<span class="rounded-l bg-gray-50 py-1 px-2 text-gray-600">tangled.org</span>
46
-
<select name="target-branch" id="target-branch" class="min-w-80 py-1 px-2 pr-10 appearance-none">
44
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700 rounded overflow-hidden w-full md:w-fit">
45
+
<span class="rounded-l bg-gray-50 dark:bg-gray-800 py-1 px-2 text-gray-600 dark:text-gray-400">tangled.org</span>
46
+
<select name="target-branch" id="target-branch" class="min-w-0 w-full md:min-w-80 py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
47
47
<option value="master">master</option>
48
48
<option value="master">master</option>
49
49
<option value="master">master</option>
···
51
51
<div class="self-center absolute right-2 color-red-600 border-none">{{ i "chevron-down" "size-4" }}</div>
52
52
</div>
53
53
</div>
54
-
<div class="flex flex-col gap-1.5">
54
+
<div class="flex flex-col gap-1.5 w-full md:w-auto">
55
55
<label for="pull-from" class="uppercase p-0">pull from</label>
56
-
<div class="relative inline-flex">
57
-
<select name="pull-from" id="pull-from" class="rounded border border-gray-200 min-w-80 py-1 px-2 pr-10 appearance-none">
56
+
<div class="relative inline-flex w-full md:w-fit">
57
+
<select name="pull-from" id="pull-from" class="rounded border border-gray-200 dark:border-gray-700 min-w-0 w-full md:min-w-80 py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white">
58
58
<option value="master">ci-thing</option>
59
59
<option value="master">ci-other</option>
60
60
<option value="master">ci-statuses</option>
···
70
70
<a href="#">more information</a>
71
71
</label>
72
72
</fieldset>
73
-
<p class="text-gray-700">Title and description are optional; if left out, they will be extracted from the first commit.</p>
73
+
<p class="text-gray-700 dark:text-gray-300">Title and description are optional; if left out, they will be extracted from the first commit.</p>
74
74
</div>
75
75
<div id="step-3" class="flex flex-col gap-4">
76
76
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
77
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">3</span>
77
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">3</span>
78
78
</div>
79
79
<div class="header flex flex-col gap-1">
80
80
<span class="font-bold text-sm uppercase dark:text-white">review</span>
81
81
</div>
82
82
<div class="flex flex-col gap-4 w-full">
83
-
<div class="flex w-full flex-row justify-between">
83
+
<div class="flex w-full flex-col md:flex-row gap-1 md:justify-between">
84
84
<span>4 commits</span>
85
-
<span class="text-gray-700">master <-> ci-statuses</span>
85
+
<span class="text-gray-700 dark:text-gray-300">master <-> ci-statuses</span>
86
86
</div>
87
87
<div class="flex flex-col gap-2">
88
-
<div class="flex flex-row justify-between p-2 border border-gray-200 rounded">
88
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between p-2 border border-gray-200 dark:border-gray-700 rounded">
89
89
<div class="flex flex-row gap-4">
90
90
<div class="flex flex-row gap-2 items-center">
91
91
<img src="#" alt="" class="size-5 rounded-full bg-gray-400" />
92
92
<span>user.tld</span>
93
93
</div>
94
-
<span class="text-gray-700">knotmirror: add missing returns</span>
94
+
<span class="text-gray-700 dark:text-gray-300">knotmirror: add missing returns</span>
95
95
</div>
96
96
<div class="flex flex-row gap-2">
97
-
<span class="text-gray-500">2 hours ago</span>
97
+
<span class="text-gray-500 dark:text-gray-400">2 hours ago</span>
98
98
<span>233111b3</span>
99
99
<div class="flex flex-row gap-2 items-center">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
100
100
</div>
101
101
</div>
102
-
<div class="flex flex-row justify-between p-2 border border-gray-200 rounded">
102
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between p-2 border border-gray-200 dark:border-gray-700 rounded">
103
103
<div class="flex flex-row gap-4">
104
104
<div class="flex flex-row gap-2 items-center">
105
105
<img src="#" alt="" class="size-5 rounded-full bg-gray-400" />
106
106
<span>user.tld</span>
107
107
</div>
108
-
<span class="text-gray-700">knotmirror: add missing returns</span>
108
+
<span class="text-gray-700 dark:text-gray-300">knotmirror: add missing returns</span>
109
109
</div>
110
110
<div class="flex flex-row gap-2">
111
-
<span class="text-gray-500">2 hours ago</span>
111
+
<span class="text-gray-500 dark:text-gray-400">2 hours ago</span>
112
112
<span>233111b3</span>
113
113
<div class="flex flex-row gap-2 items-center">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
114
114
</div>
115
115
</div>
116
-
<div class="flex flex-row justify-between p-2 border border-gray-200 rounded">
116
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between p-2 border border-gray-200 dark:border-gray-700 rounded">
117
117
<div class="flex flex-row gap-4">
118
118
<div class="flex flex-row gap-2 items-center">
119
119
<img src="#" alt="" class="size-5 rounded-full bg-gray-400" />
120
120
<span>user.tld</span>
121
121
</div>
122
-
<span class="text-gray-700">knotmirror: add missing returns</span>
122
+
<span class="text-gray-700 dark:text-gray-300">knotmirror: add missing returns</span>
123
123
</div>
124
124
<div class="flex flex-row gap-2">
125
-
<span class="text-gray-500">2 hours ago</span>
125
+
<span class="text-gray-500 dark:text-gray-400">2 hours ago</span>
126
126
<span>233111b3</span>
127
127
<div class="flex flex-row gap-2 items-center">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
128
128
</div>
129
129
</div>
130
-
<div class="flex flex-row justify-between p-2 border border-gray-200 rounded">
130
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between p-2 border border-gray-200 dark:border-gray-700 rounded">
131
131
<div class="flex flex-row gap-4">
132
132
<div class="flex flex-row gap-2 items-center">
133
133
<img src="#" alt="" class="size-5 rounded-full bg-gray-400" />
134
134
<span>user.tld</span>
135
135
</div>
136
-
<span class="text-gray-700">knotmirror: add missing returns</span>
136
+
<span class="text-gray-700 dark:text-gray-300">knotmirror: add missing returns</span>
137
137
</div>
138
138
<div class="flex flex-row gap-2">
139
-
<span class="text-gray-500">2 hours ago</span>
139
+
<span class="text-gray-500 dark:text-gray-400">2 hours ago</span>
140
140
<span>233111b3</span>
141
141
<div class="flex flex-row gap-2 items-center">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
142
142
</div>
143
143
</div>
144
144
</div>
145
-
<div class="flex flex-row justify-between items-center">
145
+
<div class="flex flex-col md:flex-row gap-2 md:justify-between md:items-center">
146
146
<p>showing 2 changed files with 5 additions and 1 deletion</p>
147
147
<div class="flex gap-2">
148
148
<button class="btn gap-2">{{ i "fold-vertical" "size-4" }} collapse all</button>
···
271
271
</div>
272
272
<div id="step-4" class="flex flex-col gap-4">
273
273
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
274
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">4</span>
274
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">4</span>
275
275
</div>
276
276
<div class="header flex flex-col gap-1">
277
277
<span class="font-bold text-sm uppercase dark:text-white">details</span>
278
278
</div>
279
-
<div class="flex gap-4 w-full">
280
-
<div class="flex flex-col gap-4 w-2/3">
279
+
<div class="flex flex-col md:flex-row gap-4 w-full">
280
+
<div class="flex flex-col gap-4 w-full md:w-2/3">
281
281
<div class="flex flex-col gap-1.5 w-full">
282
282
<label for="title" class="text-sm uppercase p-0">title</label>
283
-
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white border border-gray-200 min-w-80 py-1 px-2" />
283
+
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 w-full py-1 px-2" />
284
284
</div>
285
285
<div class="flex flex-col gap-2">
286
286
<div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden self-start">
287
287
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center unified">{{ i "pencil" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} write</button>
288
288
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center split">{{ i "eye" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} preview</button>
289
289
</div>
290
-
<textarea name="description" id="description" class="rounded bg-white border border-gray-200 min-w-80 min-h-48" rows="4">
290
+
<textarea name="description" id="description" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 min-h-48 w-full" rows="4">
291
291
Update the visual styling for pull request rounds to provide better visual distinction between active and inactive rounds. Changes include:
292
292
- Better background colors for active rounds (blue tint)
293
293
- Improved text contrast in both light and dark modes
···
296
296
Signed-off-by: eti <eti@eti.tf></textarea
297
297
>
298
298
</div>
299
-
<div class="flex flex-row gap-4 justify-end items-center">
300
-
<span class="text-red-600">× can’t automatically merge</span>
301
-
<span class="text-gray-600">you can still create the pull request</span>
299
+
<div class="flex flex-col md:flex-row gap-2 md:gap-4 justify-end items-end md:items-center">
300
+
<span class="text-red-600 dark:text-red-400">× can't automatically merge</span>
301
+
<span class="text-gray-600 dark:text-gray-400">you can still create the pull request</span>
302
302
<button class="btn-create gap-2">{{ i "git-pull-request-create" "size-4" }} create pull request</button>
303
303
</div>
304
304
</div>
305
-
<div class="flex flex-col gap-4 w-1/3">
305
+
<div class="flex flex-col gap-4 w-full md:w-1/3">
306
306
<div class="flex flex-col gap-1.5">
307
307
<label for="labels" class="uppercase p-0">labels</label>
308
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
309
-
<select name="labels" id="labels" class="min-w-80 py-1 px-2 pr-10 appearance-none">
308
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
309
+
<select name="labels" id="labels" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
310
310
<option value="" hidden class="hidden">select a label</option>
311
311
<option value="good-first-issue">good-first-issue</option>
312
312
<option value="wontfix">wontfix</option>
···
317
317
</div>
318
318
<div class="flex flex-col gap-1.5">
319
319
<label for="assignees" class="uppercase p-0">assignees</label>
320
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
321
-
<select name="assignees" id="assignees" class="min-w-80 py-1 px-2 pr-10 appearance-none">
320
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
321
+
<select name="assignees" id="assignees" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
322
322
<option value="" hidden>select an assignee</option>
323
323
<option value="akshay">akshay</option>
324
324
<option value="anirudh">anirudh</option>
+74
-74
appview/pages/templates/repo/pulls/new-fork.html
+74
-74
appview/pages/templates/repo/pulls/new-fork.html
···
2
2
3
3
<div class="flex flex-row gap-4">
4
4
<div class="flex flex-col items-center relative w-6">
5
-
<div class="absolute top-0 bottom-0 w-px bg-gray-200"></div>
5
+
<div class="absolute top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
6
6
</div>
7
7
<div class="flex flex-col gap-10 w-full">
8
8
<div id="step-1" class="flex flex-col gap-4">
9
9
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
10
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">1</span>
10
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">1</span>
11
11
</div>
12
12
<div class="flex flex-col gap-1">
13
13
<span class="font-bold text-sm uppercase dark:text-white">method</span>
14
-
<p class="text-gray-700 text-sm">
14
+
<p class="text-gray-700 dark:text-gray-300 text-sm">
15
15
choose your preferred pull strategy.
16
16
<a href="#">more information here</a>
17
17
</p>
18
18
</div>
19
-
<div class="flex gap-4 w-full">
20
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
19
+
<div class="flex flex-col md:flex-row gap-4 w-full">
20
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
21
21
<span class="text-base">patch</span>
22
-
<span class="text-gray-700">paste a `git diff` or a `git format-patch`</span>
22
+
<span class="text-gray-700 dark:text-gray-300">paste a `git diff` or a `git format-patch`</span>
23
23
</button>
24
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
24
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
25
25
<span class="text-base">compare branches</span>
26
-
<span class="text-gray-700">select a source branch</span>
26
+
<span class="text-gray-700 dark:text-gray-300">select a source branch</span>
27
27
</button>
28
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
28
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
29
29
<span class="text-base">compare forks</span>
30
-
<span class="text-gray-700">select a fork and branch as the source</span>
30
+
<span class="text-gray-700 dark:text-gray-300">select a fork and branch as the source</span>
31
31
</button>
32
32
</div>
33
33
</div>
34
34
<div id="step-2" class="flex flex-col gap-4">
35
35
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
36
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">2</span>
36
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">2</span>
37
37
</div>
38
38
<div class="header flex flex-col gap-1">
39
39
<span class="font-bold text-sm uppercase dark:text-white">compare</span>
40
40
</div>
41
-
<div class="flex gap-4 w-full">
42
-
<div class="flex flex-col gap-1.5">
41
+
<div class="flex flex-col md:flex-row gap-4 w-full">
42
+
<div class="flex flex-col gap-1.5 w-full md:w-auto">
43
43
<label for="target-branch" class="uppercase p-0">merge into</label>
44
-
<div class="relative inline-flex border border-gray-200 divide-x divide-gray-200 rounded overflow-hidden">
45
-
<span class="rounded-l bg-gray-50 py-1 px-2 text-gray-600">tangled.org</span>
46
-
<select name="target-branch" id="target-branch" class="min-w-80 py-1 px-2 pr-10 appearance-none">
44
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700 rounded overflow-hidden w-full md:w-fit">
45
+
<span class="rounded-l bg-gray-50 dark:bg-gray-800 py-1 px-2 text-gray-600 dark:text-gray-400">tangled.org</span>
46
+
<select name="target-branch" id="target-branch" class="min-w-0 w-full md:min-w-80 py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
47
47
<option value="master">master</option>
48
48
<option value="master">master</option>
49
49
<option value="master">master</option>
···
51
51
<div class="self-center absolute right-2 color-red-600 border-none">{{ i "chevron-down" "size-4" }}</div>
52
52
</div>
53
53
</div>
54
-
<div class="flex flex-col gap-1.5">
54
+
<div class="flex flex-col gap-1.5 w-full md:w-auto">
55
55
<label for="pull-from" class="uppercase p-0">pull from</label>
56
-
<div class="relative inline-flex">
57
-
<select name="pull-from" id="pull-from" class="rounded border border-gray-200 min-w-80 py-1 px-2 pr-10 appearance-none">
56
+
<div class="relative inline-flex w-full md:w-fit">
57
+
<select name="pull-from" id="pull-from" class="rounded border border-gray-200 dark:border-gray-700 min-w-0 w-full md:min-w-80 py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white">
58
58
<option value="master">ci-thing</option>
59
59
<option value="master">ci-other</option>
60
60
<option value="master">ci-statuses</option>
···
70
70
<a href="#">more information</a>
71
71
</label>
72
72
</fieldset>
73
-
<p class="text-gray-700">Title and description are optional; if left out, they will be extracted from the first commit.</p>
73
+
<p class="text-gray-700 dark:text-gray-300">Title and description are optional; if left out, they will be extracted from the first commit.</p>
74
74
</div>
75
75
<div id="step-3" class="flex flex-col gap-4">
76
76
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
77
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">3</span>
77
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">3</span>
78
78
</div>
79
79
<div class="header flex flex-col gap-1">
80
80
<span class="font-bold text-sm uppercase dark:text-white">review</span>
81
81
</div>
82
82
<div class="flex flex-col gap-4 w-full">
83
-
<div class="flex w-full flex-row justify-between">
83
+
<div class="flex w-full flex-col md:flex-row gap-1 md:justify-between">
84
84
<div class="flex flex-row gap-2 items-center">
85
85
{{ i "chevrons-down-up" "size-4 mt-px" }}
86
86
<span>stack</span>
87
-
<span class="text-gray-700">6 pull requests</span>
87
+
<span class="text-gray-700 dark:text-gray-300">6 pull requests</span>
88
88
</div>
89
-
<span class="text-gray-700">master <-> ci-statuses</span>
89
+
<span class="text-gray-700 dark:text-gray-300">master <-> ci-statuses</span>
90
90
</div>
91
-
<div class="flex flex-col rounded border border-gray-200">
92
-
<div class="flex flex-row justify-between border-b border-gray-200">
93
-
<div class="flex flex-row gap-2 items-center px-3">
94
-
{{ i "git-pull-request" "size-4 text-gray-700" }}
91
+
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700">
92
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between border-b border-gray-200 dark:border-gray-700">
93
+
<div class="flex flex-row gap-2 items-center px-3 py-2 md:py-0">
94
+
{{ i "git-pull-request" "size-4 text-gray-700 dark:text-gray-300" }}
95
95
<span>Fix: Prevent buffer overflows</span>
96
96
</div>
97
-
<div class="flex flex-row divide-x divide-gray-200">
97
+
<div class="flex flex-row divide-x divide-gray-200 dark:divide-gray-700">
98
98
<div class="flex flex-row gap-2 items-center px-3">
99
-
<span class="text-gray-700">2 hours ago</span>
99
+
<span class="text-gray-700 dark:text-gray-300">2 hours ago</span>
100
100
<span>233111b3</span>
101
101
</div>
102
102
<div class="flex flex-row gap-4 items-center p-3">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
···
104
104
</div>
105
105
</div>
106
106
<div class="flex flex-col gap-8 p-4">
107
-
<div class="flex gap-4 w-full">
108
-
<div class="flex flex-col gap-4 w-2/3">
107
+
<div class="flex flex-col md:flex-row gap-4 w-full">
108
+
<div class="flex flex-col gap-4 w-full md:w-2/3">
109
109
<div class="flex flex-col gap-1.5 w-full">
110
110
<label for="title" class="text-sm uppercase p-0">title</label>
111
-
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white border border-gray-200 min-w-80 py-1 px-2" />
111
+
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 w-full py-1 px-2" />
112
112
</div>
113
113
<div class="flex flex-col gap-2">
114
114
<div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden self-start">
115
115
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center unified">{{ i "pencil" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} write</button>
116
116
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center split">{{ i "eye" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} preview</button>
117
117
</div>
118
-
<textarea name="description" id="description" class="rounded bg-white border border-gray-200 min-w-80 min-h-48" rows="4"></textarea>
118
+
<textarea name="description" id="description" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 min-h-48 w-full" rows="4"></textarea>
119
119
</div>
120
120
</div>
121
-
<div class="flex flex-col gap-4 w-1/3">
121
+
<div class="flex flex-col gap-4 w-full md:w-1/3">
122
122
<div class="flex flex-col gap-1.5">
123
123
<label for="labels" class="uppercase p-0">labels</label>
124
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
125
-
<select name="labels" id="labels" class="min-w-80 py-1 px-2 pr-10 appearance-none">
124
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
125
+
<select name="labels" id="labels" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
126
126
<option value="" hidden class="hidden">select a label</option>
127
127
<option value="good-first-issue">good-first-issue</option>
128
128
<option value="wontfix">wontfix</option>
···
133
133
</div>
134
134
<div class="flex flex-col gap-1.5">
135
135
<label for="assignees" class="uppercase p-0">assignees</label>
136
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
137
-
<select name="assignees" id="assignees" class="min-w-80 py-1 px-2 pr-10 appearance-none">
136
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
137
+
<select name="assignees" id="assignees" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
138
138
<option value="" hidden>select an assignee</option>
139
139
<option value="akshay">akshay</option>
140
140
<option value="anirudh">anirudh</option>
···
150
150
</div>
151
151
</div>
152
152
</div>
153
-
<hr />
153
+
<hr class="dark:border-gray-700" />
154
154
<div class="flex flex-col gap-4">
155
-
<div class="flex flex-row justify-between items-center">
155
+
<div class="flex flex-col md:flex-row gap-2 md:justify-between md:items-center">
156
156
<p>showing 2 changed files with 5 additions and 1 deletion</p>
157
157
<div class="flex gap-2">
158
158
<button class="btn gap-2">{{ i "fold-vertical" "size-4" }} collapse all</button>
···
281
281
</div>
282
282
</div>
283
283
<div class="flex flex-col gap-2">
284
-
<div class="flex flex-row justify-between rounded border border-gray-200">
285
-
<div class="flex flex-row gap-2 items-center px-3">
286
-
{{ i "git-pull-request" "size-4 text-gray-700" }}
284
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between rounded border border-gray-200 dark:border-gray-700">
285
+
<div class="flex flex-row gap-2 items-center px-3 py-2 md:py-0">
286
+
{{ i "git-pull-request" "size-4 text-gray-700 dark:text-gray-300" }}
287
287
<span>Fix: Prevent buffer overflows</span>
288
288
</div>
289
-
<div class="flex flex-row divide-x divide-gray-200">
289
+
<div class="flex flex-row divide-x divide-gray-200 dark:divide-gray-700">
290
290
<div class="flex flex-row gap-2 items-center px-3">
291
-
<span class="text-gray-700">2 hours ago</span>
291
+
<span class="text-gray-700 dark:text-gray-300">2 hours ago</span>
292
292
<span>233111b3</span>
293
293
</div>
294
294
<div class="flex flex-row gap-4 items-center p-3">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
295
295
<div class="flex items-center p-3">{{ i "chevron-right" "size-4" }}</div>
296
296
</div>
297
297
</div>
298
-
<div class="flex flex-row justify-between rounded border border-gray-200">
299
-
<div class="flex flex-row gap-2 items-center px-3">
300
-
{{ i "git-pull-request" "size-4 text-gray-700" }}
298
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between rounded border border-gray-200 dark:border-gray-700">
299
+
<div class="flex flex-row gap-2 items-center px-3 py-2 md:py-0">
300
+
{{ i "git-pull-request" "size-4 text-gray-700 dark:text-gray-300" }}
301
301
<span>Fix: Prevent buffer overflows</span>
302
302
</div>
303
-
<div class="flex flex-row divide-x divide-gray-200">
303
+
<div class="flex flex-row divide-x divide-gray-200 dark:divide-gray-700">
304
304
<div class="flex flex-row gap-2 items-center px-3">
305
-
<span class="text-gray-700">2 hours ago</span>
305
+
<span class="text-gray-700 dark:text-gray-300">2 hours ago</span>
306
306
<span>233111b3</span>
307
307
</div>
308
308
<div class="flex flex-row gap-4 items-center p-3">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
309
309
<div class="flex items-center p-3">{{ i "chevron-right" "size-4" }}</div>
310
310
</div>
311
311
</div>
312
-
<div class="flex flex-row justify-between rounded border border-gray-200">
313
-
<div class="flex flex-row gap-2 items-center px-3">
314
-
{{ i "git-pull-request" "size-4 text-gray-700" }}
312
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between rounded border border-gray-200 dark:border-gray-700">
313
+
<div class="flex flex-row gap-2 items-center px-3 py-2 md:py-0">
314
+
{{ i "git-pull-request" "size-4 text-gray-700 dark:text-gray-300" }}
315
315
<span>Fix: Prevent buffer overflows</span>
316
316
</div>
317
-
<div class="flex flex-row divide-x divide-gray-200">
317
+
<div class="flex flex-row divide-x divide-gray-200 dark:divide-gray-700">
318
318
<div class="flex flex-row gap-2 items-center px-3">
319
-
<span class="text-gray-700">2 hours ago</span>
319
+
<span class="text-gray-700 dark:text-gray-300">2 hours ago</span>
320
320
<span>233111b3</span>
321
321
</div>
322
322
<div class="flex flex-row gap-4 items-center p-3">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
323
323
<div class="flex items-center p-3">{{ i "chevron-right" "size-4" }}</div>
324
324
</div>
325
325
</div>
326
-
<div class="flex flex-row justify-between rounded border border-gray-200">
327
-
<div class="flex flex-row gap-2 items-center px-3">
328
-
{{ i "git-pull-request" "size-4 text-gray-700" }}
326
+
<div class="flex flex-col md:flex-row gap-1 md:gap-0 md:justify-between rounded border border-gray-200 dark:border-gray-700">
327
+
<div class="flex flex-row gap-2 items-center px-3 py-2 md:py-0">
328
+
{{ i "git-pull-request" "size-4 text-gray-700 dark:text-gray-300" }}
329
329
<span>Fix: Prevent buffer overflows</span>
330
330
</div>
331
-
<div class="flex flex-row divide-x divide-gray-200">
331
+
<div class="flex flex-row divide-x divide-gray-200 dark:divide-gray-700">
332
332
<div class="flex flex-row gap-2 items-center px-3">
333
-
<span class="text-gray-700">2 hours ago</span>
333
+
<span class="text-gray-700 dark:text-gray-300">2 hours ago</span>
334
334
<span>233111b3</span>
335
335
</div>
336
336
<div class="flex flex-row gap-4 items-center p-3">{{ i "copy" "size-4" }} {{ i "folder-code" "size-4" }}</div>
···
342
342
</div>
343
343
<div id="step-4" class="flex flex-col gap-4">
344
344
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
345
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">4</span>
345
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">4</span>
346
346
</div>
347
347
<div class="header flex flex-col gap-1">
348
348
<span class="font-bold text-sm uppercase dark:text-white">details</span>
349
349
</div>
350
-
<div class="flex gap-4 w-full">
351
-
<div class="flex flex-col gap-4 w-2/3">
350
+
<div class="flex flex-col md:flex-row gap-4 w-full">
351
+
<div class="flex flex-col gap-4 w-full md:w-2/3">
352
352
<div class="flex flex-col gap-1.5 w-full">
353
353
<label for="title" class="text-sm uppercase p-0">title</label>
354
-
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white border border-gray-200 min-w-80 py-1 px-2" />
354
+
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 w-full py-1 px-2" />
355
355
</div>
356
356
<div class="flex flex-col gap-2">
357
357
<div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden self-start">
358
358
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center unified">{{ i "pencil" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} write</button>
359
359
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center split">{{ i "eye" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} preview</button>
360
360
</div>
361
-
<textarea name="description" id="description" class="rounded bg-white border border-gray-200 min-w-80 min-h-48" rows="4">
361
+
<textarea name="description" id="description" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 min-h-48 w-full" rows="4">
362
362
Update the visual styling for pull request rounds to provide better visual distinction between active and inactive rounds. Changes include:
363
363
- Better background colors for active rounds (blue tint)
364
364
- Improved text contrast in both light and dark modes
···
367
367
Signed-off-by: eti <eti@eti.tf></textarea
368
368
>
369
369
</div>
370
-
<div class="flex flex-row gap-4 justify-end items-center">
371
-
<span class="text-red-600">× can’t automatically merge</span>
372
-
<span class="text-gray-600">you can still create the pull request</span>
370
+
<div class="flex flex-col md:flex-row gap-2 md:gap-4 justify-end items-end md:items-center">
371
+
<span class="text-red-600 dark:text-red-400">× can't automatically merge</span>
372
+
<span class="text-gray-600 dark:text-gray-400">you can still create the pull request</span>
373
373
<button class="btn-create gap-2">{{ i "git-pull-request-create" "size-4" }} create pull request</button>
374
374
</div>
375
375
</div>
376
-
<div class="flex flex-col gap-4 w-1/3">
376
+
<div class="flex flex-col gap-4 w-full md:w-1/3">
377
377
<div class="flex flex-col gap-1.5">
378
378
<label for="labels" class="uppercase p-0">labels</label>
379
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
380
-
<select name="labels" id="labels" class="min-w-80 py-1 px-2 pr-10 appearance-none">
379
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
380
+
<select name="labels" id="labels" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
381
381
<option value="" hidden class="hidden">select a label</option>
382
382
<option value="good-first-issue">good-first-issue</option>
383
383
<option value="wontfix">wontfix</option>
···
388
388
</div>
389
389
<div class="flex flex-col gap-1.5">
390
390
<label for="assignees" class="uppercase p-0">assignees</label>
391
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
392
-
<select name="assignees" id="assignees" class="min-w-80 py-1 px-2 pr-10 appearance-none">
391
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
392
+
<select name="assignees" id="assignees" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
393
393
<option value="" hidden>select an assignee</option>
394
394
<option value="akshay">akshay</option>
395
395
<option value="anirudh">anirudh</option>
+30
-30
appview/pages/templates/repo/pulls/new-patch.html
+30
-30
appview/pages/templates/repo/pulls/new-patch.html
···
2
2
3
3
<div class="flex flex-row gap-4">
4
4
<div class="flex flex-col items-center relative w-6">
5
-
<div class="absolute top-0 bottom-0 w-px bg-gray-200"></div>
5
+
<div class="absolute top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
6
6
</div>
7
7
<div class="flex flex-col gap-10 w-full">
8
8
<div id="step-1" class="flex flex-col gap-4">
9
9
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
10
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">1</span>
10
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">1</span>
11
11
</div>
12
12
<div class="flex flex-col gap-1">
13
13
<span class="font-bold text-sm uppercase dark:text-white">method</span>
14
-
<p class="text-gray-700 text-sm">
14
+
<p class="text-gray-700 dark:text-gray-300 text-sm">
15
15
choose your preferred pull strategy.
16
16
<a href="#">more information here</a>
17
17
</p>
18
18
</div>
19
-
<div class="flex gap-4 w-full">
20
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
19
+
<div class="flex flex-col md:flex-row gap-4 w-full">
20
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] before:bg-gray-50 dark:before:bg-gray-700">
21
21
<span class="text-base">patch</span>
22
-
<span class="text-gray-700">paste a `git diff` or a `git format-patch`</span>
22
+
<span class="text-gray-700 dark:text-gray-300">paste a `git diff` or a `git format-patch`</span>
23
23
</button>
24
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
24
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
25
25
<span class="text-base">compare branches</span>
26
-
<span class="text-gray-700">select a source branch</span>
26
+
<span class="text-gray-700 dark:text-gray-300">select a source branch</span>
27
27
</button>
28
-
<button class="btn w-full min-w-48 min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
28
+
<button class="btn w-full md:min-w-48 min-h-24 md:min-h-40 px-4 py-3 bg-white inline-flex flex-col justify-start items-start gap-1.5">
29
29
<span class="text-base">compare forks</span>
30
-
<span class="text-gray-700">select a fork and branch as the source</span>
30
+
<span class="text-gray-700 dark:text-gray-300">select a fork and branch as the source</span>
31
31
</button>
32
32
</div>
33
33
</div>
34
34
<div id="step-2" class="flex flex-col gap-4">
35
35
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
36
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">2</span>
36
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">2</span>
37
37
</div>
38
38
<div class="header flex flex-col gap-1">
39
39
<span class="font-bold text-sm uppercase dark:text-white">compare</span>
···
41
41
<div class="flex flex-col gap-4 w-full">
42
42
<div class="flex flex-col gap-1.5">
43
43
<label for="target-branch" class="uppercase p-0">merge into</label>
44
-
<div class="relative inline-flex border border-gray-200 divide-x divide-gray-200 rounded overflow-hidden w-fit">
45
-
<span class="rounded-l bg-gray-50 py-1 px-2 text-gray-600">tangled.org</span>
46
-
<select name="target-branch" id="target-branch" class="min-w-80 py-1 px-2 pr-10 appearance-none">
44
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700 rounded overflow-hidden w-full md:w-fit">
45
+
<span class="rounded-l bg-gray-50 dark:bg-gray-800 py-1 px-2 text-gray-600 dark:text-gray-400">tangled.org</span>
46
+
<select name="target-branch" id="target-branch" class="min-w-0 w-full md:min-w-80 py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
47
47
<option value="master">master</option>
48
48
<option value="master">master</option>
49
49
<option value="master">master</option>
···
51
51
<div class="self-center absolute right-2 color-red-600 border-none">{{ i "chevron-down" "size-4" }}</div>
52
52
</div>
53
53
</div>
54
-
<textarea name="patch" id="patch" class="rounded bg-white border border-gray-200 min-w-80 min-h-48 w-full" rows="4" placeholder="`git diff` or `git format-patch`"></textarea>
54
+
<textarea name="patch" id="patch" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 min-h-48 w-full" rows="4" placeholder="`git diff` or `git format-patch`"></textarea>
55
55
<div class="w-fit self-end">
56
56
<button class="btn">
57
57
{{ i "pencil" "size-4" }}
···
62
62
</div>
63
63
<div id="step-3" class="flex flex-col gap-4">
64
64
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
65
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">3</span>
65
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">3</span>
66
66
</div>
67
67
<div class="header flex flex-col gap-1">
68
68
<span class="font-bold text-sm uppercase dark:text-white">review</span>
69
69
</div>
70
70
<div class="flex flex-col gap-4 w-full">
71
-
<div class="flex flex-row justify-between items-center">
71
+
<div class="flex flex-col md:flex-row gap-2 md:justify-between md:items-center">
72
72
<p>showing 2 changed files with 5 additions and 1 deletion</p>
73
73
<div class="flex gap-2">
74
74
<button class="btn gap-2">{{ i "fold-vertical" "size-4" }} collapse all</button>
···
197
197
</div>
198
198
<div id="step-4" class="flex flex-col gap-4">
199
199
<div class="flex absolute left-6 -mt-0.5 items-start justify-center">
200
-
<span class="size-6 rounded-full bg-gray-200 flex items-center justify-center text-xs pt-0.5">4</span>
200
+
<span class="size-6 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs pt-0.5 dark:text-white">4</span>
201
201
</div>
202
202
<div class="header flex flex-col gap-1">
203
203
<span class="font-bold text-sm uppercase dark:text-white">details</span>
204
204
</div>
205
-
<div class="flex gap-4 w-full">
206
-
<div class="flex flex-col gap-4 w-2/3">
205
+
<div class="flex flex-col md:flex-row gap-4 w-full">
206
+
<div class="flex flex-col gap-4 w-full md:w-2/3">
207
207
<div class="flex flex-col gap-1.5 w-full">
208
208
<label for="title" class="text-sm uppercase p-0">title</label>
209
-
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white border border-gray-200 min-w-80 py-1 px-2" />
209
+
<input type="text" id="title" name="title" value="knotmirror: add missing returns" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 w-full py-1 px-2" />
210
210
</div>
211
211
<div class="flex flex-col gap-2">
212
212
<div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden self-start">
213
213
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center unified">{{ i "pencil" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} write</button>
214
214
<button class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center split">{{ i "eye" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} preview</button>
215
215
</div>
216
-
<textarea name="description" id="description" class="rounded bg-white border border-gray-200 min-w-80 min-h-48" rows="4">
216
+
<textarea name="description" id="description" class="rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 min-w-0 min-h-48 w-full" rows="4">
217
217
Update the visual styling for pull request rounds to provide better visual distinction between active and inactive rounds. Changes include:
218
218
- Better background colors for active rounds (blue tint)
219
219
- Improved text contrast in both light and dark modes
···
222
222
Signed-off-by: eti <eti@eti.tf></textarea
223
223
>
224
224
</div>
225
-
<div class="flex flex-row gap-4 justify-end items-center">
226
-
<span class="text-red-600">× can’t automatically merge</span>
227
-
<span class="text-gray-600">you can still create the pull request</span>
225
+
<div class="flex flex-col md:flex-row gap-2 md:gap-4 justify-end items-end md:items-center">
226
+
<span class="text-red-600 dark:text-red-400">× can't automatically merge</span>
227
+
<span class="text-gray-600 dark:text-gray-400">you can still create the pull request</span>
228
228
<button class="btn-create gap-2">{{ i "git-pull-request-create" "size-4" }} create pull request</button>
229
229
</div>
230
230
</div>
231
-
<div class="flex flex-col gap-4 w-1/3">
231
+
<div class="flex flex-col gap-4 w-full md:w-1/3">
232
232
<div class="flex flex-col gap-1.5">
233
233
<label for="labels" class="uppercase p-0">labels</label>
234
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
235
-
<select name="labels" id="labels" class="min-w-80 py-1 px-2 pr-10 appearance-none">
234
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
235
+
<select name="labels" id="labels" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
236
236
<option value="" hidden class="hidden">select a label</option>
237
237
<option value="good-first-issue">good-first-issue</option>
238
238
<option value="wontfix">wontfix</option>
···
243
243
</div>
244
244
<div class="flex flex-col gap-1.5">
245
245
<label for="assignees" class="uppercase p-0">assignees</label>
246
-
<div class="relative inline-flex border border-gray-200 rounded overflow-hidden">
247
-
<select name="assignees" id="assignees" class="min-w-80 py-1 px-2 pr-10 appearance-none">
246
+
<div class="relative inline-flex border border-gray-200 dark:border-gray-700 rounded overflow-hidden w-full">
247
+
<select name="assignees" id="assignees" class="min-w-0 w-full py-1 px-2 pr-10 appearance-none bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
248
248
<option value="" hidden>select an assignee</option>
249
249
<option value="akshay">akshay</option>
250
250
<option value="anirudh">anirudh</option>