The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve emoji upload panel mobile design
+19
-11
+19
-11
app/profile/rank/card-style.component.tsx
+19
-11
app/profile/rank/card-style.component.tsx
···
4
4
import { ChangeEvent, useRef, useState } from "react";
5
5
import { HiUpload } from "react-icons/hi";
6
6
7
-
import { userStore } from "@/common/user";
8
-
import { User } from "@/common/user";
7
+
import { User, userStore } from "@/common/user";
9
8
import Box from "@/components/box";
9
+
import { Shiggy } from "@/components/shiggy";
10
10
import { ApiV1UsersMeRankEmojiDeleteResponse, ApiV1UsersMeRankEmojiPutResponse } from "@/typings";
11
11
import cn from "@/utils/cn";
12
12
import { deepMerge } from "@/utils/deepMerge";
···
28
28
if (user?.id && !user.extended) return <></>;
29
29
30
30
// TODO: Confetti & rainbow animation
31
-
// TODO: Add skeletons
32
31
// TODO: Image replace animation(?)
33
32
// TODO: Better error message
34
33
···
114
113
type="file"
115
114
/>
116
115
117
-
<Box className="flex h-56">
118
-
<div className="w-1/2 flex items-center justify-center">
116
+
<Box className="flex flex-col md:flex-row justify-center items-center h-56 relative overflow-hidden">
117
+
118
+
<Shiggy
119
+
className="hidden md:block absolute bottom-0 left-2 w-52 opacity-40"
120
+
/>
121
+
122
+
<div className="md:w-1/2 flex items-center justify-center relative z-10">
119
123
<div className="flex flex-col">
120
124
<Button
121
125
className={cn(state === State.Loading && "shake")}
···
139
143
}
140
144
</div>
141
145
</div>
142
-
<div className="w-1/2 grid grid-cols-6 lg:grid-cols-6 gap-4 rotate-1 relative bottom-4">
146
+
147
+
<div className="absolute blur-sm gap-4 grid grid-cols-6 left-4 lg:grid-cols-6 md:blur-none md:bottom-4 md:left-0 md:opacity-100 md:relative md:scale-100 md:top-0 md:w-1/2 opacity-45 rotate-1 scale-105 top-6 w-full">
143
148
{new Array(18).fill(0).map((_, i) =>
144
149
<Emoji
145
150
key={"emoji-" + i}
···
148
153
/>
149
154
)}
150
155
</div>
156
+
151
157
</Box>
152
158
153
159
<div className="flex">
···
169
175
emojiId: string | null
170
176
}) {
171
177
const classNames = "rounded-xl relative size-12 aspect-square";
178
+
const style = {
179
+
transform: `rotate(${(index / 2.3) * 360}deg)`,
180
+
top: `${index * 2 % 4}px`,
181
+
left: `${index * 8 / 2}px`
182
+
};
172
183
173
184
if (!emojiId) return (
174
185
<div
175
186
className={cn(classNames, "bg-wamellow shadow-xl hover:scale-105 duration-100")}
187
+
style={style}
176
188
/>
177
189
);
178
190
···
183
195
draggable={false}
184
196
height={64}
185
197
src={`https://r2.wamellow.com/emoji/${emojiId}`}
186
-
style={{
187
-
transform: `rotate(${(index / 2.3) * 360}deg)`,
188
-
top: `${index * 2 % 4}px`,
189
-
left: `${index * 8 / 2}px`
190
-
}}
198
+
style={style}
191
199
width={64}
192
200
/>
193
201
);