Skip to content
This repository was archived by the owner on Nov 5, 2024. It is now read-only.

Commit ded5ab4

Browse files
BramSuurdjeBramSuurdje
committed
Updated the theme to blue
1 parent 7515abf commit ded5ab4

File tree

3 files changed

+87
-59
lines changed

3 files changed

+87
-59
lines changed

‎app/globals.css

+33-33
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,47 @@
55
@layer base {
66
:root {
77
--background: 0 0% 100%;
8-
--foreground: 240 10% 3.9%;
8+
--foreground: 222.2 84% 4.9%;
99
--card: 0 0% 100%;
10-
--card-foreground: 240 10% 3.9%;
10+
--card-foreground: 222.2 84% 4.9%;
1111
--popover: 0 0% 100%;
12-
--popover-foreground: 240 10% 3.9%;
13-
--primary: 201 100% 38%;
14-
--primary-foreground: 0 0% 98%;
15-
--secondary: 240 4.8% 95.9%;
16-
--secondary-foreground: 240 5.9% 10%;
17-
--muted: 240 4.8% 95.9%;
18-
--muted-foreground: 240 3.8% 46.1%;
19-
--accent: 240 4.8% 95.9%;
20-
--accent-foreground: 240 5.9% 10%;
12+
--popover-foreground: 222.2 84% 4.9%;
13+
--primary: 221.2 83.2% 53.3%;
14+
--primary-foreground: 210 40% 98%;
15+
--secondary: 210 40% 96.1%;
16+
--secondary-foreground: 222.2 47.4% 11.2%;
17+
--muted: 210 40% 96.1%;
18+
--muted-foreground: 215.4 16.3% 46.9%;
19+
--accent: 210 40% 96.1%;
20+
--accent-foreground: 222.2 47.4% 11.2%;
2121
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 0 0% 98%;
23-
--border: 240 5.9% 90%;
24-
--input: 240 5.9% 90%;
25-
--ring: 240 5.9% 10%;
22+
--destructive-foreground: 210 40% 98%;
23+
--border: 214.3 31.8% 91.4%;
24+
--input: 214.3 31.8% 91.4%;
25+
--ring: 221.2 83.2% 53.3%;
2626
--radius: 0.5rem;
2727
}
2828

2929
.dark {
30-
--background: 240 10% 3.9%;
31-
--foreground: 0 0% 98%;
32-
--card: 240 10% 3.9%;
33-
--card-foreground: 0 0% 98%;
34-
--popover: 240 10% 3.9%;
35-
--popover-foreground: 0 0% 98%;
36-
--primary: 201 100% 38%;
37-
--primary-foreground: 240 5.9% 10%;
38-
--secondary: 240 3.7% 15.9%;
39-
--secondary-foreground: 0 0% 98%;
40-
--muted: 240 3.7% 15.9%;
41-
--muted-foreground: 240 5% 64.9%;
42-
--accent: 240 3.7% 15.9%;
43-
--accent-foreground: 0 0% 98%;
30+
--background: 222.2 84% 4.9%;
31+
--foreground: 210 40% 98%;
32+
--card: 222.2 84% 4.9%;
33+
--card-foreground: 210 40% 98%;
34+
--popover: 222.2 84% 4.9%;
35+
--popover-foreground: 210 40% 98%;
36+
--primary: 217.2 91.2% 59.8%;
37+
--primary-foreground: 222.2 47.4% 11.2%;
38+
--secondary: 217.2 32.6% 17.5%;
39+
--secondary-foreground: 210 40% 98%;
40+
--muted: 217.2 32.6% 17.5%;
41+
--muted-foreground: 215 20.2% 65.1%;
42+
--accent: 217.2 32.6% 17.5%;
43+
--accent-foreground: 210 40% 98%;
4444
--destructive: 0 62.8% 30.6%;
45-
--destructive-foreground: 0 0% 98%;
46-
--border: 240 3.7% 15.9%;
47-
--input: 240 3.7% 15.9%;
48-
--ring: 240 4.9% 83.9%;
45+
--destructive-foreground: 210 40% 98%;
46+
--border: 217.2 32.6% 17.5%;
47+
--input: 217.2 32.6% 17.5%;
48+
--ring: 224.3 76.3% 48%;
4949
}
5050
}
5151
@layer base {

‎components/Script.tsx

+17-10
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,12 @@ function ScriptItem({
167167
{item && (
168168
<div className="mr-7 mt-0 flex w-full min-w-fit">
169169
<div className="flex w-full min-w-fit">
170-
<div className="flex w-full flex-col animate-fade">
170+
<div className="flex w-full animate-fade flex-col">
171171
<div className="flex min-w-max items-center justify-between">
172172
<h2 className="text-lg font-semibold">Selected Script</h2>
173173
<X onClick={closeScript} className="cursor-pointer" />
174174
</div>
175-
<div className="border rounded-lg p-4 mt-2">
175+
<div className="mt-2 rounded-lg border p-4">
176176
<div className="mt-4 flex justify-between">
177177
<div className="flex">
178178
<Image
@@ -186,7 +186,9 @@ function ScriptItem({
186186
<div className="ml-4 flex flex-col justify-between">
187187
<div className="flex h-full w-full flex-col justify-between">
188188
<div>
189-
<h1 className="text-lg font-semibold">{item.title}</h1>
189+
<h1 className="text-lg font-semibold">
190+
{item.title}
191+
</h1>
190192
<p className="w-full text-sm text-muted-foreground">
191193
Date added: {extractDate(item.created)}
192194
</p>
@@ -238,7 +240,9 @@ function ScriptItem({
238240
<Button
239241
variant={"secondary"}
240242
size={"sm"}
241-
onClick={() => handleCopy("interface", item.interface)}
243+
onClick={() =>
244+
handleCopy("interface", item.interface)
245+
}
242246
>
243247
{item.interface}
244248
</Button>
@@ -314,7 +318,7 @@ function ScriptItem({
314318
)}
315319
</div>
316320

317-
<div className="mt-6 border rounded-lg p-4 dark:bg-neutral-900 bg-neutral-300">
321+
<div className="mt-6 rounded-lg border dark:bg-blue-900/20 bg-blue-900/20 p-4">
318322
<h2 className="text-lg font-semibold">
319323
How to {item.item_type ? "install" : "use"}
320324
</h2>
@@ -362,8 +366,8 @@ function ScriptItem({
362366
{item.hasAlpineScript && (
363367
<>
364368
<p className="mt-2 max-w-2xl text-sm">
365-
As an alternative option, you can use Alpine Linux
366-
and the {item.title} package to create a{" "}
369+
As an alternative option, you can use Alpine
370+
Linux and the {item.title} package to create a{" "}
367371
{item.title} {item.item_type} container with
368372
faster creation time and minimal system resource
369373
usage. You are also obliged to adhere to updates
@@ -381,7 +385,10 @@ function ScriptItem({
381385
variant={"secondary"}
382386
size={"sm"}
383387
onClick={() =>
384-
handleCopy("install command", item.alpineScript)
388+
handleCopy(
389+
"install command",
390+
item.alpineScript,
391+
)
385392
}
386393
>
387394
{!isMobile && item.alpineScript
@@ -403,8 +410,8 @@ function ScriptItem({
403410
</p>
404411
{item.isUpdateable && (
405412
<p className="text-sm">
406-
To Update {item.title}, run the command below (or
407-
type update) in the LXC Console.
413+
To Update {item.title}, run the command below
414+
(or type update) in the LXC Console.
408415
</p>
409416
)}
410417
</>

‎components/ScriptBrowser.tsx

+37-16
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const ScriptBrowser = ({
107107
<div className="flex min-w-72 flex-col sm:max-w-72">
108108
<h1 className="mb-5 text-xl font-bold">Scripts</h1>
109109
<div className="relative">
110-
<div className="flex items-center mb-1">
110+
<div className="mb-1 flex items-center">
111111
<Input
112112
className="flex-grow"
113113
type="text"
@@ -118,22 +118,38 @@ const ScriptBrowser = ({
118118
/>
119119
{searchTerm && (
120120
<X
121-
className="w-4 h-4 cursor-pointer ml-2"
121+
className="ml-2 h-4 w-4 cursor-pointer"
122122
onClick={() => handleSearch("")}
123123
style={{
124-
position: 'absolute',
125-
right: '0.5rem'
124+
position: "absolute",
125+
right: "0.5rem",
126126
}}
127127
/>
128128
)}
129129
</div>
130130
{searchTerm ? (
131-
<p className="text-xs text-neutral-500 mb-1 ml-2 animate-fade-left">Press &apos;Esc&apos; to clear the search</p>
131+
<p className="mb-1 ml-2 animate-fade-left text-xs text-muted-foreground">
132+
Press &apos;Esc&apos; to clear the search
133+
</p>
132134
) : (
133-
<p className="text-xs text-neutral-500 mb-1 ml-2 animate-fade-left">
134-
<a className="cursor-pointer" onClick={() => setShowLogos(!showLogos)}>
135-
{showLogos ? <><EyeOff className="inline-block align-text-bottom mr-1 w-4 h-4" />Hide Logos</> : <><Eye className="inline-block align-text-bottom mr-1 w-4 h-4" />Show Logos</>}
136-
</a></p>
135+
<p className="mb-1 ml-2 animate-fade-left text-xs text-muted-foreground">
136+
<a
137+
className="cursor-pointer"
138+
onClick={() => setShowLogos(!showLogos)}
139+
>
140+
{showLogos ? (
141+
<>
142+
<EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
143+
Hide Logos
144+
</>
145+
) : (
146+
<>
147+
<Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
148+
Show Logos
149+
</>
150+
)}
151+
</a>
152+
</p>
137153
)}
138154
</div>
139155
<Accordion {...accordionProps}>
@@ -145,7 +161,11 @@ const ScriptBrowser = ({
145161
>
146162
<AccordionTrigger>{category.catagoryName}</AccordionTrigger>
147163
<AccordionContent
148-
data-state={expandedItems.includes(category.catagoryName) ? "open" : "closed"}
164+
data-state={
165+
expandedItems.includes(category.catagoryName)
166+
? "open"
167+
: "closed"
168+
}
149169
className="pb-2 pt-0"
150170
>
151171
{category.expand.items
@@ -159,9 +179,9 @@ const ScriptBrowser = ({
159179
pathname: "/scripts",
160180
query: { id: script.title },
161181
}}
162-
className={`py-1 px-1 hover:rounded-lg hover:bg-neutral-50 hover:dark:bg-neutral-800 hover:dark:bg-neutral-700 flex cursor-pointer items-center justify-between gap-1 text-muted-foreground ${
182+
className={`hover:dark:bg-blue-900/20 flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-blue-300/20 hover:bg-neutral-50 ${
163183
selectedScript === script.title
164-
? "rounded-lg font-semibold dark:text-white bg-neutral-100 dark:bg-neutral-900"
184+
? "bg-blue-300/20 rounded-lg font-semibold dark:bg-blue-900/20 dark:text-white"
165185
: ""
166186
}`}
167187
onClick={() => handleSelected(script.title)}
@@ -173,7 +193,7 @@ const ScriptBrowser = ({
173193
alt={script.title}
174194
width={16}
175195
height={16}
176-
className="rounded-full mr-1"
196+
className="mr-1 rounded-full"
177197
/>
178198
)}
179199
<span className="flex items-center gap-2">
@@ -187,9 +207,10 @@ const ScriptBrowser = ({
187207
script.item_type === "VM",
188208
"border-yellow-500/75 text-yellow-500/75":
189209
script.item_type === "LXC",
190-
"border-none":
191-
script.item_type === "",
192-
hidden: !["VM", "LXC", ""].includes(script.item_type),
210+
"border-none": script.item_type === "",
211+
hidden: !["VM", "LXC", ""].includes(
212+
script.item_type,
213+
),
193214
},
194215
)}
195216
>

0 commit comments

Comments
 (0)