sparkletown · mike-lvov · Jul 22, 2021 · Jul 21, 2021 · Jul 22, 2021 · Jul 22, 2021
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "eslint": "^7.19.0",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-promise": "^5.1.0",
     "firebase-functions-test": "^0.2.3",
     "firebase-tools": "^9.2.2",
     "prettier": "^2.2.1"

@@ -8,14 +8,14 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.13",
     "@reduxjs/toolkit": "^1.6.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/mousetrap": "^1.6.4",
-    "@types/qs": "^6.9.3",
+    "@types/qs": "^6.9.7",
     "@types/react-resize-detector": "^4.2.0",
     "@types/styled-components": "^5.1.4",
     "@types/ws": "^7.2.6",
@@ -27,6 +27,7 @@
     "date-fns": "^2.22.1",
     "dayjs": "^1.8.35",
     "emoji-mart": "^3.0.1",
+    "eslint-plugin-promise": "^5.1.0",
     "esm": "^3.2.25",
     "firebase": "^7.14.2",
     "fuse.js": "^6.4.1",
@@ -152,7 +153,6 @@
     "babel-plugin-lodash": "^3.3.4",
     "cypress": "^4.11.0",
     "cypress-file-upload": "^4.0.7",
-    "eslint-plugin-promise": "^4.2.1",
     "firebase-admin": "^9.1.1",
     "firebase-tools": "^8.6.0",
     "gifwrap": "^0.9.2",

@@ -75,6 +75,6 @@
 
   <body>
     <noscript>You need to enable JavaScript to use Sparkle.</noscript>
-    <div id="root"></div>
+    <div id="root">Loading...</div>
   </body>
 </html>
@@ -11,6 +11,6 @@
   },
   "private": true,
   "devDependencies": {
-    "@types/puppeteer": "^5.4.3"
+    "@types/puppeteer": "^5.4.4"
   }
 }
@@ -1,9 +1,26 @@
 @import "scss/constants";
 
 .UserAvatar {
+  $avatar-sizes-map: (
+    small: 25px,
+    medium: 40px,
+    large: 54px,
+    full: 100%,
+  );
+  $indicator-sizes-map: (
+    small: 8px,
+    medium: 10px,
+    large: 12px,
+    full: 25%,
+  );
+
+  // NOTE: parent and img mismatch due to legacy reasons
+  $default-avatar-size: 25px;
+  $default-image-size: 100%;
+  $default-indicator-size: 8px;
+
+  @include square-size($default-avatar-size);
   position: relative;
-  width: 25px;
-  height: 25px;
 
   &:hover {
     .UserAvatar__nametag--hover {
@@ -19,25 +36,24 @@
   }
 
   &__image {
-    height: 100%;
-    width: 100%;
+    @include square-size($default-image-size);
     border-radius: 50%;
     vertical-align: unset;
   }
 
   &__status-indicator {
     position: absolute;
-    bottom: -1px;
-    right: -1px;
+    bottom: 0;
+    right: 0;
     border-radius: 50%;
-    height: 8px;
-    width: 8px;
     z-index: z(user-avatar-status-indicator);
     display: block;
+    @include square-size($default-indicator-size);
 
-    &--large {
-      height: 12px;
-      width: 12px;
+    @each $modifier, $size in $indicator-sizes-map {
+      &--#{$modifier} {
+        @include square-size($size);
+      }
     }
   }
 
@@ -49,19 +65,11 @@
     }
   }
 
-  &--small {
-    width: 25px;
-    height: 25px;
-  }
-
-  &--medium {
-    height: 40px;
-    width: 40px;
-  }
-
-  &--large {
-    height: 54px;
-    width: 54px;
+  @each $modifier, $size in $avatar-sizes-map {
+    &--#{$modifier},
+    &--#{$modifier} img {
+      @include square-size($size);
+    }
   }
 
   &__nametag {
@@ -74,12 +82,11 @@
 
     text-align: center;
 
-    margin: 0 auto;
+    margin: 0 -50% 0 auto;
     padding: 0 $spacing--xs;
 
     bottom: 10%;
     left: 50%;
-    margin-right: -50%;
 
     border-radius: $border-radius--md;
 

@@ -14,15 +14,16 @@ import { useVenueId } from "hooks/useVenueId";
 
 import "./UserAvatar.scss";
 
+export type UserAvatarSize = "small" | "medium" | "large" | "full";
+
 export interface UserAvatarProps {
   user?: WithId<User>;
   containerClassName?: string;
   imageClassName?: string;
   showNametag?: UsernameVisibility;
   showStatus?: boolean;
   onClick?: () => void;
-  large?: boolean;
-  medium?: boolean;
+  size?: UserAvatarSize;
 }
 
 // @debt the UserProfilePicture component serves a very similar purpose to this, we should unify them as much as possible
@@ -33,8 +34,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
   showNametag,
   onClick,
   showStatus,
-  large,
-  medium,
+  size,
 }) => {
   const venueId = useVenueId();
 
@@ -56,8 +56,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
 
   const containerClasses = classNames("UserAvatar", containerClassName, {
     "UserAvatar--clickable": onClick !== undefined,
-    "UserAvatar--large": large,
-    "UserAvatar--medium": medium,
+    [`UserAvatar--${size}`]: size,
   });
 
   // const isOnline = useMemo(
@@ -77,7 +76,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
   const statusIndicatorClasses = classNames("UserAvatar__status-indicator", {
     "UserAvatar__status-indicator--online": isOnline,
     [`UserAvatar__status-indicator--${status}`]: isOnline && status,
-    "UserAvatar__status-indicator--large": large,
+    [`UserAvatar__status-indicator--${size}`]: size,
   });
 
   const statusIndicatorStyles = useMemo(

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from "react";
 import { FieldError, useForm } from "react-hook-form";
 import "firebase/functions";
 import firebase from "firebase/app";
+import { ACCEPTED_IMAGE_TYPES } from "settings";
 
 interface ImageInputProps {
   collectionPath: string;
@@ -75,6 +76,8 @@ export const ImageCollectionInput: React.FC<ImageInputProps> = (props) => {
     []
   );
 
+  const hasImageCollections = !!imageCollection.length;
+
   // this keeps the component state synchronised with the parent form state
   useEffect(() => {
     if (selectedCollectionImageUrl) {
@@ -108,7 +111,7 @@ export const ImageCollectionInput: React.FC<ImageInputProps> = (props) => {
           disabled={disabled}
           type="file"
           onChange={handleFileChange}
-          accept="image/png,image/x-png,image/gif,image/jpeg"
+          accept={ACCEPTED_IMAGE_TYPES}
           className="default-input"
           ref={register}
         />
@@ -131,9 +134,11 @@ export const ImageCollectionInput: React.FC<ImageInputProps> = (props) => {
         value={imageUrlForPreview}
       />
       {error?.message && <span className="input-error">{error.message}</span>}
-      <div style={{ marginTop: 10, fontSize: "16px" }}>
-        {`Or choose one of our popular ${imageType}`}
-      </div>
+      {hasImageCollections && (
+        <div style={{ marginTop: 10, fontSize: "16px" }}>
+          {`Or choose one of our popular ${imageType}`}
+        </div>
+      )}
       <div
         style={{
           display: "flex",

@@ -314,7 +314,7 @@ export const NavBar: React.FC<NavBarPropsType> = ({ hasBackButton = true }) => {
                   overlay={ProfilePopover}
                   rootClose={true}
                 >
-                  <UserAvatar user={userWithId} showStatus medium />
+                  <UserAvatar user={userWithId} showStatus size="medium" />
                 </OverlayTrigger>
               </div>
             )}