The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
new "wamellow" color
+23
-28
+3
-3
app/globals.css
+3
-3
app/globals.css
···
9
9
10
10
.dark:root {
11
11
--background-rgb: rgb(13, 15, 17);
12
-
--wamellow-rgb: rgb(23, 24, 28);
12
+
--wamellow-rgb: rgb(22, 24, 26);
13
13
}
14
14
15
15
html {
···
40
40
41
41
42
42
::-webkit-scrollbar {
43
-
width: 6px;
43
+
width: 4px;
44
44
background: rgba(0, 0, 0, 0);
45
45
}
46
46
···
55
55
56
56
button.subpixel-antialiased:not(.w-unit-10):not(.default):not(.bg-secondary):not(.button-primary):not(.button-blurple):not(.button-underline),
57
57
a[role="button"]:not(.w-unit-10):not(.default):not(.bg-secondary):not(.button-primary):not(.button-blurple):not(.button-underline) {
58
-
@apply dark:hover:bg-wamellow-light hover:bg-wamellow-100-light py-2 px-4 rounded-md duration-200 justify-center gap-2 items-center text-medium
58
+
@apply py-2 px-4 rounded-md duration-200 justify-center gap-2 items-center text-medium
59
59
}
60
60
61
61
.text-sm button.subpixel-antialiased,
+7
-10
components/discord/Message-file.tsx
+7
-10
components/discord/Message-file.tsx
···
1
1
import { Fira_Code } from "next/font/google";
2
-
import React, { FunctionComponent } from "react";
2
+
import React from "react";
3
3
import { BsFillPlayFill } from "react-icons/bs";
4
4
import { HiVolumeUp } from "react-icons/hi";
5
5
···
7
7
8
8
interface Props {
9
9
mode: "DARK" | "LIGHT";
10
-
11
10
duration: number;
12
11
}
13
12
14
-
const DiscordMessageFile: FunctionComponent<Props> = ({ duration, mode }) => {
13
+
export default function FunctionComponent({ duration, mode }: Props) {
15
14
return (
16
-
<div className={`w-full ${mode === "DARK" ? "text-neutral-200" : "text-neutral-800"} font-light p-3 rounded mt-2`} style={{ backgroundColor: mode === "DARK" ? "rgb(43, 45, 49)" : "rgb(242, 243, 245)" }}>
15
+
<div className={`w-full ${mode === "DARK" ? "text-neutral-200" : "text-neutral-800"} font-light p-3 rounded mt-2`} style={{ backgroundColor: mode === "DARK" ? "rgb(40, 42, 46)" : "rgb(242, 243, 245)" }}>
17
16
18
17
<div className="flex gap-2 w-full max-w-full items-center">
19
18
<svg width={24 * 1.2} height={40 * 1.2}>
···
28
27
29
28
<div className={`${firacode.className} font-medium text-sm bg-neutral-900 text-neutral-400 w-full flex gap-2 py-1 px-2 items-center rounded-md mt-2`}>
30
29
<BsFillPlayFill className="h-7 w-7 cursor-pointer hover:text-neutral-300" />
31
-
<span className="text-neutral-300">00:{duration / 3}/00:{duration}</span>
32
-
<div className="bg-neutral-500 h-2 w-full rounded-full overflow-hidden cursor-pointer">
33
-
<div className="bg-blue-700/75 h-full w-1/3 rounded-full" />
30
+
<span className="text-neutral-300">00:{Math.round(duration / 3)}/00:{duration}</span>
31
+
<div className="bg-neutral-600 h-2 w-full rounded-full overflow-hidden cursor-pointer">
32
+
<div className="bg-blurple h-full w-1/3 rounded-full" />
34
33
</div>
35
34
<HiVolumeUp className="h-7 w-7 cursor-pointer hover:text-neutral-300" />
36
35
</div>
37
36
38
37
</div>
39
38
);
40
-
};
41
-
42
-
export default DiscordMessageFile;
39
+
}
+6
-8
components/discord/Message.tsx
+6
-8
components/discord/Message.tsx
···
1
1
"use client";
2
2
3
3
import { Avatar } from "@nextui-org/react";
4
-
import React, { FunctionComponent } from "react";
4
+
import React from "react";
5
5
import { HiCheck } from "react-icons/hi";
6
6
7
7
import cn from "@/utils/cn";
···
24
24
}
25
25
}
26
26
27
-
const DiscordMessage: FunctionComponent<Props> = ({ children, commandUsed, user, mode }) => {
27
+
export default function DiscordMessage({ children, commandUsed, user, mode }: Props) {
28
28
29
29
function formatTime(date: Date) {
30
30
const timeString = date.toLocaleString("en-US", { hour: "numeric", minute: "numeric" });
···
32
32
}
33
33
34
34
return (
35
-
<div className={cn("group relative rounded-lg px-1 w-full", mode === "DARK" ? "text-neutral-100 hover:bg-neutral-800/40" : "text-neutral-900 hover:bg-neutral-200/40")}>
35
+
<div className={cn("group relative rounded-lg px-1 w-full", mode === "DARK" ? "text-neutral-100" : "text-neutral-900")}>
36
36
37
37
{commandUsed ?
38
38
<div className={cn("flex items-center gap-1 opacity-70 text-sm ml-4", mode === "DARK" ? "text-neutral-400" : "text-neutral-600")} >
···
77
77
}
78
78
<time
79
79
className="mt-[2px] text-xs opacity-70 font-light"
80
-
dateTime={new Date().toISOString()}
80
+
dateTime={new Date(955988260).toISOString()}
81
81
>
82
-
{formatTime(new Date())}
82
+
{formatTime(new Date(955988260))}
83
83
</time>
84
84
</div>
85
85
···
93
93
94
94
</div>
95
95
);
96
-
};
97
-
98
-
export default DiscordMessage;
96
+
}
+1
-1
components/discord/message-embed.tsx
+1
-1
components/discord/message-embed.tsx
···
29
29
if (!title && !image && !footer?.text && (!children || children.toString() === ",false")) return <></>;
30
30
31
31
return (
32
-
<div className={cn("w-full font-light p-3 rounded border-l-4 mt-2", mode === "DARK" ? "text-neutral-200" : "text-neutral-800", classname)} style={{ backgroundColor: mode === "DARK" ? "rgb(43, 45, 49)" : "rgb(242, 243, 245)", borderLeftColor: `#${color?.toString(16)}` }}>
32
+
<div className={cn("w-full font-light p-3 rounded border-l-4 mt-2", mode === "DARK" ? "text-neutral-200" : "text-neutral-800", classname)} style={{ backgroundColor: mode === "DARK" ? "rgb(40, 42, 46)" : "rgb(242, 243, 245)", borderLeftColor: `#${color?.toString(16)}` }}>
33
33
34
34
<div className="flex w-full max-w-full">
35
35
<div className={thumbnail ? "w-9/12" : "w-full"}>
+1
-1
components/embed-creator.tsx
+1
-1
components/embed-creator.tsx
···
165
165
166
166
</div>
167
167
168
-
<div className="relative lg:w-3/6 lg:mt-2 m-1 md:mt-8 mt-4 min-h-full rounded-md p-4 break-all overflow-hidden max-w-full text-neutral-200" style={{ backgroundColor: mode === "DARK" ? "rgb(49, 51, 56)" : "rgb(255, 255, 255)" }}>
168
+
<div className="relative lg:w-3/6 lg:mt-2 m-1 md:mt-8 mt-4 min-h-full rounded-md p-4 break-all overflow-hidden max-w-full text-neutral-200" style={{ backgroundColor: mode === "DARK" ? "rgb(43, 45, 49)" : "rgb(255, 255, 255)" }}>
169
169
170
170
<div className="absolute z-10 top-2 right-2 hidden md:block">
171
171
{modeToggle}
+5
-5
tailwind.config.js
+5
-5
tailwind.config.js
···
10
10
theme: {
11
11
extend: {
12
12
colors: {
13
-
"wamellow": "rgb(23, 24, 28)",
14
-
"wamellow-light": "rgb(33, 34, 38)",
13
+
"wamellow": "rgb(22, 24, 26)",
14
+
"wamellow-light": "rgb(32, 34, 36)",
15
15
"wamellow-alpha": "rgba(255, 255, 255, 0.06)",
16
16
17
17
···
91
91
secondary: {
92
92
foreground: "rgb(255 255 255)",
93
93
DEFAULT: "rgb(139 92 246)",
94
-
divider: "rgb(23, 24, 28)",
94
+
divider: "rgb(22, 24, 26)",
95
95
focus: "rgb(139 92 246)"
96
96
},
97
97
default: {
98
98
foreground: "rgb(212 212 212)",
99
-
DEFAULT: "rgb(23, 24, 28)",
100
-
divider: "rgb(23, 24, 28)",
99
+
DEFAULT: "rgb(22, 24, 26)",
100
+
divider: "rgb(22, 24, 26)",
101
101
focus: "rgb(139 92 246)"
102
102
}
103
103
}