feature: Sticker Positioning

[alexanderl19]

Removes the sticker layer component, and adds a new component to position stickers relative to an element.

The component takes in any element as a child. It also takes in stickers in a prop like so:

<StickerPosition
	stickers={[
		{
			Node: HeartSticker,
			positionX: "right",
			positionY: "bottom",
			offsetX: 50,
			offsetY: 50,
		},
	]}
>
	<Button
		className={styles.applyButton}
		href="/apply"
		variant=""
		target="_blank"
		disabled
	>
		<span>Applications have closed!</span>
	</Button>
</StickerPosition>

The stickers are then positioned relative to one of the corners of the child element.

[github-actions]

Deploy preview for zothacks-site-2023 ready!

Name	Hack at UCI Site
Preview	Visit Preview
Commit	85c2212

[github-actions]

Deploy preview for zothacks-site-2023-sanity ready!

Name	Sanity Studio
Preview	Visit Preview
Commit	85c2212

[tyleryy]

I noticed the sticker position "jumps" as soon as you adjust the window. Sticker positioning changing while resizing has been an issue, so this could be resolved in another PR. Let me know what you think.

Screen.Recording.2023-10-22.at.3.09.59.AM.mov

[tyleryy]

I noticed the Hack Sticker "jumps" when the window is resized, as shown in the previous video. I'm a bit hesitant to merge into Prod with this behavior.

[taesungh]

Could you provide a title and include a description of changes in the PR?

[tyleryy]

I agree with @taesungh. At least for me, I get the big picture of creating a general use sticker wrapper component around some "anchor", but I am a bit lost on the details of this Sticker API.

[alexanderl19]

I've added some details documenting the API of the component. The wrapper component uses a flexbox to position the stickers.