From 86266609aa45df9fe11af934839049e5cb5d744b Mon Sep 17 00:00:00 2001
From: BlowaterNostr <127284497+BlowaterNostr@users.noreply.github.com>
Date: Sun, 24 Dec 2023 17:26:49 +0800
Subject: [PATCH] Christmas (#365)

* christmas hat
---
 UI/components/avatar.test.tsx |  5 +++
 UI/components/avatar.tsx      | 78 ++++++++++++++++++++++++++---------
 UI/edit-profile.tsx           |  7 +---
 UI/right-panel.tsx            |  2 +-
 4 files changed, 66 insertions(+), 26 deletions(-)
 create mode 100644 UI/components/avatar.test.tsx

diff --git a/UI/components/avatar.test.tsx b/UI/components/avatar.test.tsx
new file mode 100644
index 0000000..e308e32
--- /dev/null
+++ b/UI/components/avatar.test.tsx
@@ -0,0 +1,5 @@
+/** @jsx h */
+import { h, render } from "https://esm.sh/preact@10.17.1";
+import { Avatar } from "./avatar.tsx";
+
+render(<Avatar picture="logo.webp" class="border"></Avatar>, document.body);
diff --git a/UI/components/avatar.tsx b/UI/components/avatar.tsx
index 31620bf..f36bc70 100644
--- a/UI/components/avatar.tsx
+++ b/UI/components/avatar.tsx
@@ -12,26 +12,64 @@ export function Avatar(props: {
     onClick?: h.JSX.MouseEventHandler<HTMLImageElement>;
 }) {
     return (
-        <img
-            onClick={props.onClick}
-            style={props.style}
-            class={[
-                `rounded-full${props.onClick ? " cursor-pointer" : ""}`,
-                props.class,
-            ].join(" ")}
-            src={props.picture ? props.picture : "logo.webp"}
-            alt="avatar"
-            onError={(e) => {
-                e.currentTarget.src = "logo.webp";
-                e.currentTarget.style.objectFit = "contain";
-            }}
-            onLoad={(e) => {
-                if (e.currentTarget.src.endsWith("logo.webp")) {
+        <div class={`sticky ${props.class}`} style={props.style}>
+            {/* Container for positioning */}
+            <SantaHat class="absolute -top-1/3 left-1/4 w-full z-10 -scale-x-100 opacity-50" />
+            <SantaHat class="absolute -top-1/3 left-1/4 w-full -z-10 -scale-x-100" />
+            <img
+                onClick={props.onClick}
+                class={`w-full h-full rounded-full ${props.onClick ? "cursor-pointer" : ""}`}
+                src={props.picture ? props.picture : "logo.webp"}
+                alt="avatar"
+                onError={(e) => {
+                    e.currentTarget.src = "logo.webp";
                     e.currentTarget.style.objectFit = "contain";
-                } else {
-                    e.currentTarget.style.objectFit = "cover";
-                }
-            }}
-        />
+                }}
+                onLoad={(e) => {
+                    if (e.currentTarget.src.endsWith("logo.webp")) {
+                        e.currentTarget.style.objectFit = "contain";
+                    } else {
+                        e.currentTarget.style.objectFit = "cover";
+                    }
+                }}
+            >
+            </img>
+        </div>
+    );
+}
+
+function SantaHat(props: { class?: string }) {
+    return (
+        <svg
+            class={props.class}
+            viewBox="0 0 43 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M11.8794 22.028L12.501 17.9282L10.8138 14.6134L8.41627 17.3176L5.3973 15.5731C5.3973 15.5731 6.90678 13.654 7.79486 10.2521C8.68271 6.85025 10.7831 -0.657747 17.7295 0.0462892C25.4739 0.831317 29.994 1.96543 37.4527 10.2521C37.4527 10.2521 37.6099 26.0139 25.8204 27.4361C15.6977 28.6573 13.3438 25.9813 11.8794 22.028Z"
+                fill="#E91E63"
+            />
+            <path
+                d="M10.8138 14.6134C10.8138 14.6134 11.0186 14.3669 11.3766 13.9354C11.5554 13.7199 11.77 13.4563 12.0111 13.1502C12.2517 12.8441 12.5233 12.4987 12.8194 12.1222C13.1126 11.7435 13.4276 11.332 13.7528 10.8911C13.9145 10.6702 14.0807 10.4432 14.2505 10.2113C14.4153 9.97604 14.5836 9.73565 14.7547 9.49126C14.9221 9.24454 15.0921 8.99358 15.2641 8.73957C15.4332 8.48369 15.5961 8.21982 15.7649 7.95666C15.9264 7.6895 16.0893 7.42001 16.2529 7.1498C16.4147 6.87842 16.5595 6.59695 16.7142 6.3204C16.8635 6.04128 16.9988 5.75581 17.142 5.47504C17.2086 5.34241 17.2873 5.17197 17.3941 5.02666C17.4962 4.88346 17.6143 4.75152 17.7469 4.64025C18.2808 4.1867 18.9409 4.01791 19.5466 3.93199C20.1602 3.85076 20.7528 3.85851 21.3077 3.90264C21.8627 3.94725 22.3824 4.02049 22.8569 4.11134C23.8058 4.29375 24.5795 4.50949 25.1171 4.6703C25.6531 4.83791 25.9529 4.95083 25.9529 4.95083C25.9529 4.95083 25.6444 4.86327 25.0981 4.74119C24.5535 4.61442 23.7705 4.44775 22.8228 4.32614C22.3491 4.26698 21.8352 4.21111 21.2915 4.19397C20.7488 4.17778 20.1748 4.18881 19.6001 4.28365C19.0308 4.3799 18.4444 4.56818 18.0157 4.94707C17.9084 5.04051 17.8164 5.14873 17.7366 5.26494C17.6577 5.37785 17.6016 5.49735 17.5314 5.65252C17.3927 5.94338 17.2678 6.24364 17.1154 6.5291C16.9607 6.81292 16.8152 7.10238 16.6534 7.38057C16.4879 7.65617 16.3337 7.93764 16.1614 8.20456C15.9874 8.47007 15.8191 8.73652 15.6449 8.99429C15.4672 9.24923 15.2916 9.50112 15.1191 9.74903C14.9383 9.99059 14.7608 10.2284 14.5869 10.461C14.4075 10.6892 14.2321 10.9125 14.0615 11.1299C13.7098 11.5562 13.376 11.9579 13.0558 12.318C12.7337 12.6764 12.4405 13.0063 12.1658 13.2856C11.8947 13.5678 11.6543 13.8099 11.4547 14.0073C11.2571 14.2064 11.0949 14.3564 10.9845 14.4585C10.873 14.5594 10.8138 14.6134 10.8138 14.6134Z"
+                fill="#880E4F"
+            />
+            <path
+                d="M12.501 17.9282C12.501 17.9282 12.5745 17.9193 12.7032 17.9035C12.7663 17.8951 12.8428 17.885 12.9306 17.8733C13.0177 17.8639 13.1152 17.8416 13.2206 17.8291C13.4302 17.7878 13.6722 17.747 13.918 17.6716C14.0441 17.6432 14.1638 17.5887 14.2887 17.546C14.4108 17.4969 14.5305 17.4394 14.6462 17.3784C14.7547 17.3068 14.8754 17.2502 14.9679 17.1624C15.0167 17.1216 15.0667 17.0826 15.1177 17.045C15.1601 16.9988 15.2019 16.9532 15.243 16.9084C15.3325 16.823 15.3977 16.723 15.4623 16.6272C15.4937 16.579 15.5301 16.5347 15.5562 16.4863C15.5808 16.4365 15.6045 16.3887 15.6273 16.3426C15.6681 16.248 15.728 16.1661 15.7522 16.0832C15.7789 16.0015 15.8074 15.9299 15.8299 15.8701C15.8764 15.7506 15.9078 15.6799 15.9078 15.6799C15.9078 15.6799 15.9161 15.7527 15.9224 15.8839C15.9247 15.9494 15.9287 16.0299 15.9276 16.1229C15.9322 16.2168 15.9022 16.3175 15.882 16.4314C15.8703 16.4884 15.8581 16.5481 15.8454 16.6096C15.8299 16.6706 15.7973 16.7279 15.7724 16.7908C15.7449 16.853 15.7165 16.9171 15.6876 16.9824C15.6618 17.0502 15.6078 17.1028 15.567 17.1655C15.5224 17.226 15.4768 17.2878 15.431 17.3502C15.3766 17.4047 15.3195 17.4587 15.2606 17.5115C15.15 17.6279 15.0066 17.7009 14.8733 17.7892C14.7326 17.8611 14.5878 17.928 14.4413 17.9744C14.2943 18.019 14.1479 18.0561 14.0051 18.0747C13.8636 18.104 13.7244 18.1054 13.5941 18.1108C13.464 18.1172 13.3408 18.1052 13.2285 18.0975C12.7783 18.0531 12.501 17.9282 12.501 17.9282Z"
+                fill="#880E4F"
+            />
+            <path
+                d="M9.78867 20.1089C9.78867 20.4657 9.37596 20.7704 9.29802 21.104C9.21773 21.4479 9.45037 21.9036 9.29684 22.2134C9.1412 22.5273 8.63624 22.6186 8.41557 22.8877C8.19467 23.1572 8.20453 23.6696 7.92822 23.8844C7.65426 24.0974 7.16033 23.9619 6.842 24.1115C6.52977 24.2582 6.31943 24.726 5.97387 24.8026C5.63957 24.8765 5.25128 24.5434 4.89445 24.5434C4.53738 24.5434 4.14909 24.8765 3.8148 24.8023C3.46924 24.7258 3.25866 24.2577 2.94667 24.1112C2.62834 23.9617 2.13417 24.0971 1.86045 23.8842C1.58414 23.6694 1.59423 23.1569 1.37309 22.8874C1.15242 22.6182 0.647467 22.5271 0.491823 22.2132C0.338292 21.9033 0.570935 21.4477 0.490648 21.1037C0.412709 20.7702 0 20.4657 0 20.1089C0 19.752 0.412709 19.4473 0.490648 19.1137C0.570935 18.7698 0.338292 18.3141 0.491823 18.0043C0.647467 17.6904 1.15242 17.5993 1.37309 17.33C1.594 17.0605 1.58414 16.5481 1.86045 16.3333C2.13417 16.1203 2.62834 16.2558 2.94667 16.1062C3.2589 15.9595 3.46924 15.4917 3.8148 15.4151C4.14909 15.3412 4.53739 15.6743 4.89422 15.6743C5.25128 15.6743 5.63957 15.3412 5.97387 15.4154C6.31943 15.4919 6.53 15.96 6.842 16.1065C7.16033 16.256 7.65449 16.1206 7.92822 16.3335C8.20453 16.5483 8.19443 17.061 8.41557 17.3303C8.63624 17.5995 9.1412 17.6906 9.29684 18.0045C9.45037 18.3144 9.21773 18.77 9.29802 19.1139C9.37596 19.4475 9.78867 19.752 9.78867 20.1089Z"
+                fill="white"
+            />
+            <path
+                d="M11.8073 21.7289C12.232 21.6266 11.7897 22.5229 12.1351 22.9417C12.293 23.1332 12.937 22.9271 13.1825 23.1513C13.3795 23.3314 13.2224 23.9953 13.4814 24.1765C13.7051 24.3331 14.2735 23.9631 14.5469 24.1079C14.7911 24.2373 14.8 24.9183 15.0864 25.0298C15.3454 25.1308 15.8142 24.6394 16.1093 24.7192C16.3785 24.7923 16.5318 25.4552 16.8325 25.5057C17.1084 25.5522 17.473 24.9782 17.7765 25.0021C18.0563 25.0242 18.3237 25.6501 18.6277 25.6501C19.4991 25.6501 20.4119 24.9458 21.4389 24.7523C22.3338 24.5838 23.4276 24.9338 24.3837 24.6122C25.2662 24.3152 25.9308 23.3835 26.8217 22.9513C27.6699 22.5398 28.8155 22.5992 29.6341 22.0609C30.4269 21.5392 30.8252 20.4694 31.5567 19.8253C32.2702 19.1968 33.3862 18.9372 34.0106 18.1888C34.618 17.4608 34.6741 16.3229 35.1685 15.4783C35.6443 14.6653 36.6148 14.0608 36.9606 13.137C37.2881 12.2621 36.9918 11.085 37.1808 10.1082C37.3874 9.71804 37.6522 10.5315 38.1687 10.7695C38.3898 10.8714 38.9577 10.4909 39.2366 10.6986C39.4464 10.8547 39.2671 11.509 39.4988 11.7435C39.688 11.9348 40.3437 11.7492 40.5418 12.0022C40.7106 12.2177 40.381 12.8135 40.5529 13.0798C40.7029 13.3122 41.3818 13.2504 41.532 13.5251C41.6658 13.7699 41.2515 14.3108 41.3839 14.5921C41.5036 14.8463 42.1851 14.8679 42.3025 15.1536C42.41 15.4151 41.9424 15.9114 42.0469 16.2009C42.3319 16.9892 42.6079 18.3254 41.8494 19.853C41.3574 20.8443 40.1493 21.6035 39.2899 22.7036C38.5579 23.6403 38.1565 25.0002 37.1961 25.9085C36.3054 26.7508 34.9372 27.084 33.8792 27.8204C32.857 28.5319 32.0694 29.7064 30.9165 30.2471C29.7829 30.7786 28.3896 30.633 27.1536 30.9314C25.9444 31.2234 24.7652 31.9944 23.4806 31.9995C22.2573 32.0045 21.0765 31.2586 19.8046 30.9478C18.6381 30.6626 17.2445 30.8067 16.0527 30.2119C15.7881 30.0799 15.7916 29.3646 15.455 29.1223C15.1864 28.9291 14.5181 29.1813 14.2331 28.9256C13.977 28.6958 14.1528 28.0065 13.9037 27.7316C13.668 27.4713 12.9619 27.5776 12.7494 27.2814C12.5424 26.9926 12.8713 26.364 12.7013 26.0452C12.5332 25.7301 11.8249 25.6456 11.7078 25.305C11.5921 24.9679 12.0998 24.4753 12.048 24.1169C11.9975 23.7678 11.3693 23.4339 11.3925 23.068C11.4148 22.721 11.7078 22.0879 11.8073 21.7289Z"
+                fill="white"
+            />
+            <path
+                d="M10.8138 14.6134C10.8138 14.6134 10.9657 14.6031 11.2273 14.5623C11.489 14.5228 11.8602 14.45 12.2952 14.328C12.5147 14.2747 12.745 14.1909 12.9898 14.1096C13.1124 14.0693 13.233 14.0124 13.3589 13.9632C13.4833 13.9094 13.615 13.8664 13.7396 13.8009C13.9936 13.6805 14.2563 13.5573 14.5087 13.4042C14.6352 13.3288 14.7695 13.2638 14.892 13.1791L15.2618 12.9258L15.4479 12.8006L15.6219 12.6595C15.7376 12.5656 15.8529 12.4722 15.9672 12.3792C16.1931 12.1905 16.3917 11.9776 16.5971 11.786C16.7945 11.5865 16.9619 11.3712 17.1359 11.1801C17.3154 10.9928 17.4382 10.7794 17.5744 10.5991C17.7 10.4115 17.8378 10.2531 17.9235 10.0899C18.0174 9.93144 18.0991 9.79316 18.1664 9.67931C18.3042 9.45206 18.3831 9.32201 18.3831 9.32201C18.3831 9.32201 18.319 9.45957 18.2068 9.70043C18.1491 9.82063 18.0791 9.96641 17.9988 10.1338C17.927 10.3066 17.8035 10.477 17.684 10.6723C17.5561 10.8618 17.442 11.0857 17.2704 11.2857C17.1044 11.4893 16.9462 11.72 16.7476 11.9276C16.6469 12.0302 16.5445 12.1346 16.4407 12.2403C16.3353 12.3443 16.2372 12.4591 16.1161 12.5501C15.9996 12.6464 15.882 12.7436 15.7642 12.841L15.5867 12.9875L15.3965 13.1176L15.0144 13.3741C14.8876 13.4598 14.7493 13.5258 14.6188 13.6019C14.3592 13.758 14.084 13.8723 13.8215 13.9899C13.5584 14.1054 13.2924 14.1895 13.0431 14.2714C12.7893 14.3413 12.5515 14.4134 12.3259 14.4559C12.1031 14.5101 11.8942 14.5364 11.7104 14.5625C11.5259 14.5843 11.3646 14.5998 11.2315 14.6076C10.966 14.6238 10.8138 14.6134 10.8138 14.6134Z"
+                fill="#880E4F"
+            />
+        </svg>
     );
 }
diff --git a/UI/edit-profile.tsx b/UI/edit-profile.tsx
index 0a997a7..d75118e 100644
--- a/UI/edit-profile.tsx
+++ b/UI/edit-profile.tsx
@@ -51,10 +51,7 @@ export class EditProfile extends Component<Props, State> {
         container: `py-4 bg-[${SecondaryBackgroundColor}]`,
         banner: {
             container: `h-72 w-full rounded-lg mb-20 relative`,
-            avatar:
-                `w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`,
         },
-        avatar: `w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`,
         field: {
             title: `text-[${PrimaryTextColor}] mt-8`,
             input: `${InputClass}`,
@@ -199,14 +196,14 @@ export class EditProfile extends Component<Props, State> {
                 >
                     <Avatar
                         picture={this.state.profile?.picture}
-                        class={this.styles.banner.avatar}
+                        class={`w-24 h-24 m-auto absolute top-60 left-1/2 rounded-full box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`}
                     />
                 </div>
             )
             : (
                 <Avatar
                     picture={this.state.profile?.picture}
-                    class={this.styles.avatar}
+                    class={`w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`}
                 />
             );
 
diff --git a/UI/right-panel.tsx b/UI/right-panel.tsx
index 8c43067..dd4d545 100644
--- a/UI/right-panel.tsx
+++ b/UI/right-panel.tsx
@@ -32,7 +32,7 @@ export class RightPanel extends Component<RightPanelProps, RightPanelState> {
                 class={`border-l fixed top-0 right-0 h-full bg-[#2F3136] overflow-hidden overflow-y-auto z-20 transition-all duration-300 ease-in-out w-96 max-w-full`}
             >
                 <button
-                    class={`w-6 min-w-[1.5rem] h-6 ml-4 ${IconButtonClass} hover:bg-[#36393F] absolute right-2 top-3`}
+                    class={`w-6 min-w-[1.5rem] h-6 ml-4 ${IconButtonClass} hover:bg-[#36393F] absolute right-2 top-3 z-10 border-2`}
                     onClick={() => {
                         emit({
                             type: "ToggleRightPanel",