RSVP style fixes

app/profile/page.tsx

@@ -135,6 +135,7 @@ const Profile: React.FC = () => {
                     style={{
                         overlay: { zIndex: 1000 },
                         content: {
+                            borderRadius: "2rem",
                             inset:
                                 windowSizeHook?.width &&
                                 windowSizeHook?.width < 768

app/profile/styles.module.scss

@@ -103,7 +103,9 @@
     gap: 10px;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    width: 100%;
+    min-height: 100%;
+    padding: 2rem;
     background: linear-gradient(0deg, #98c8d3 0%, #5ea6b7 41%, #0a3147 100%);
 }
 

components/AcceptRSVPForm/AcceptRSVPForm.module.scss

@@ -1,7 +1,6 @@
 .container {
     width: 100%;
-    height: fit-content;
-    padding: 5rem;
+    height: 100%;
 }
 
 .form {

components/AvatarSelector/AvatarSelector.module.scss

@@ -12,7 +12,7 @@
     margin: 5px;
     cursor: pointer;
     border-radius: 50%;
-    border: 3px solid transparent;
+    border: 4px solid transparent;
     transition: border 0.2s ease-in-out;
     &:hover {
         cursor: pointer;
@@ -24,8 +24,8 @@
 }
 
 .avatarSelector .avatarIconImage {
-    width: 65px;
-    height: 65px;
+    width: 100%;
+    height: 100%;
     :hover {
         cursor: pointer;
     }

components/AvatarSelector/AvatarSelector.tsx

@@ -31,10 +31,6 @@ const AvatarSelector: React.FC<AvatarSelectorProps> = ({
             <div className={styles.avatarSelector}>
                 {avatars.map(avatar => (
                     <div
-                        style={{
-                            backgroundColor:
-                                avatar.backgroundColor ?? "transparent"
-                        }}
                         className={clsx(
                             styles.avatarIcon,
                             avatar.name === value && styles.selected

modules/avatars.ts

@@ -1,29 +1,17 @@
-import BunnyAvatar from "@/public/profile/avatars/bunny.svg";
-import ChipmunkAvatar from "@/public/profile/avatars/chipmunk.svg";
-import YodaAvatar from "@/public/profile/avatars/yoda.svg";
-import CatAvatar from "@/public/profile/avatars/cat.svg";
-import MushroomAvatar from "@/public/profile/avatars/mushroom.svg";
-import FisherAvatar from "@/public/profile/avatars/fisher.svg";
-import GarfieldAvatar from "@/public/profile/avatars/garfield.svg";
-import FishAvatar from "@/public/profile/avatars/fish.svg";
+import ArtemisAvatar from "@/public/profile/avatars/artemis.svg";
+import ZeusAvatar from "@/public/profile/avatars/zeus.svg";
+import AphroditeAvatar from "@/public/profile/avatars/aphrodite.svg";
+import PoseidonAvatar from "@/public/profile/avatars/poseidon.svg";
+import ApolloAvatar from "@/public/profile/avatars/apollo.svg";
+import AthenaAvatar from "@/public/profile/avatars/athena.svg";
 
 import { Avatars } from "@/util/types";
 
 export const avatars = [
-    { name: Avatars.BUNNY, icon: BunnyAvatar, backgroundColor: "#f0f0f0" },
-    {
-        name: Avatars.SQUIRREL,
-        icon: ChipmunkAvatar,
-        backgroundColor: "#f0f0f0"
-    },
-    { name: Avatars.GOBLIN, icon: YodaAvatar, backgroundColor: "#f0f0f0" },
-    { name: Avatars.CAT, icon: CatAvatar, backgroundColor: "#f0f0f0" },
-    {
-        name: Avatars.MUSHROOM,
-        icon: MushroomAvatar,
-        backgroundColor: "#f0f0f0"
-    },
-    { name: Avatars.FISHERCAT, icon: FisherAvatar, backgroundColor: "#f0f0f0" },
-    { name: Avatars.CHESTER, icon: GarfieldAvatar, backgroundColor: "#f0f0f0" },
-    { name: Avatars.AXOLOTL, icon: FishAvatar, backgroundColor: "#f0f0f0" }
+    { name: Avatars.ARTEMIS, icon: ArtemisAvatar },
+    { name: Avatars.ZEUS, icon: ZeusAvatar },
+    { name: Avatars.APHRODITE, icon: AphroditeAvatar },
+    { name: Avatars.POSEIDON, icon: PoseidonAvatar },
+    { name: Avatars.APOLLO, icon: ApolloAvatar },
+    { name: Avatars.ATHENA, icon: AthenaAvatar }
 ];