Merge branch 'staging' into update-eslint-plugin-promise

sparkletown · Jul 22, 2021 · 755bcb6 · 755bcb6
2 parents 68f59e4 + b066aab
commit 755bcb6
Show file tree

Hide file tree

Showing 43 changed files with 337 additions and 363 deletions.
diff --git a/firestore.rules b/firestore.rules
@@ -18,7 +18,7 @@ service cloud.firestore {
       allow write: if request.auth.uid != null;
     }
     match /users/{userId} {
-      allow read: if true;
+      allow read: if request.auth.uid != null;
       allow write: if request.auth.uid == userId;
 
       match /visits/{venueId} {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,15 +8,15 @@
     "@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/mixpanel-browser": "^2.35.4",
     "@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",

diff --git a/public/index.html b/public/index.html
@@ -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>
diff --git a/reporting/package-lock.json b/reporting/package-lock.json
diff --git a/reporting/package.json b/reporting/package.json
@@ -11,6 +11,6 @@
   },
   "private": true,
   "devDependencies": {
-    "@types/puppeteer": "^5.4.3"
+    "@types/puppeteer": "^5.4.4"
   }
 }
diff --git a/src/api/admin.ts b/src/api/admin.ts
@@ -41,13 +41,11 @@ export interface AdvancedVenueInput {
 type VenueImageFileKeys =
   | "bannerImageFile"
   | "logoImageFile"
-  | "mapIconImageFile"
   | "mapBackgroundImageFile";
 
 type VenueImageUrlKeys =
   | "bannerImageUrl"
   | "logoImageUrl"
-  | "mapIconImageUrl"
   | "mapBackgroundImageUrl";
 
 type ImageFileKeys =
@@ -80,7 +78,6 @@ export type VenueInput = AdvancedVenueInput &
     name: string;
     bannerImageFile?: FileList;
     logoImageFile?: FileList;
-    mapIconImageFile?: FileList;
     mapBackgroundImageFile?: FileList;
     subtitle: string;
     description: string;
@@ -145,8 +142,6 @@ type FirestoreRoomInput_v2 = Omit<RoomInput_v2, RoomImageFileKeys> &
   };
 
 export type PlacementInput = {
-  mapIconImageFile?: FileList;
-  mapIconImageUrl?: string;
   addressText?: string;
   notes?: string;
   placement?: Omit<VenuePlacement, "state">;
@@ -185,10 +180,6 @@ const createFirestoreVenueInput = async (input: VenueInput, user: UserInfo) => {
       fileKey: "bannerImageFile",
       urlKey: "bannerImageUrl",
     },
-    {
-      fileKey: "mapIconImageFile",
-      urlKey: "mapIconImageUrl",
-    },
     {
       fileKey: "mapBackgroundImageFile",
       urlKey: "mapBackgroundImageUrl",

diff --git a/src/components/atoms/UserAvatar/UserAvatar.scss b/src/components/atoms/UserAvatar/UserAvatar.scss
@@ -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;
 

diff --git a/src/components/atoms/UserAvatar/UserAvatar.tsx b/src/components/atoms/UserAvatar/UserAvatar.tsx
@@ -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(
@@ -76,7 +75,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(

diff --git a/src/components/molecules/ChatMessageBox/ChatMessageBox.scss b/src/components/molecules/ChatMessageBox/ChatMessageBox.scss
@@ -12,7 +12,8 @@
   }
 
   &__input {
-    width: 100%;
+    text-align: left;
+    padding-left: $spacing--lg;
   }
 
   &__submit-button {

diff --git a/src/components/molecules/ChatMessageBox/ChatMessageBox.tsx b/src/components/molecules/ChatMessageBox/ChatMessageBox.tsx
@@ -111,7 +111,7 @@ export const ChatMessageBox: React.FC<ChatMessageBoxProps> = ({
         onSubmit={hasChosenThread ? sendReplyToThread : sendMessageToChat}
       >
         <InputField
-          containerClassName="Chatbox__input"
+          inputClassName="Chatbox__input"
           ref={register({ required: true })}
           name="message"
           placeholder={`Write your ${placeholderValue}...`}

diff --git a/src/components/molecules/NavBar/NavBar.tsx b/src/components/molecules/NavBar/NavBar.tsx
@@ -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>
             )}

diff --git a/src/components/organisms/AppRouter/AdminSubrouter.tsx b/src/components/organisms/AppRouter/AdminSubrouter.tsx
@@ -19,31 +19,31 @@ export const AdminSubrouter: React.FC = () => {
       {/* Admin V1 */}
 
       <Route path="/admin/venue/rooms/:venueId">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <RoomsForm />
         </Provided>
       </Route>
 
       <Route path="/admin/venue/creation">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <VenueWizard />
         </Provided>
       </Route>
 
       <Route path="/admin/venue/edit/:venueId">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <VenueWizard />
         </Provided>
       </Route>
 
       <Route path="/admin/:venueId">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <Admin />
         </Provided>
       </Route>
 
       <Route path="/admin">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <Admin />
         </Provided>
       </Route>
@@ -57,19 +57,19 @@ export const AdminSubrouter: React.FC = () => {
       </Route>
 
       <Route path="/admin-ng/advanced-settings/:venueId?">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <AdminAdvancedSettings />
         </Provided>
       </Route>
 
       <Route path="/admin-ng/create/venue">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <VenueWizardV2 />
         </Provided>
       </Route>
 
       <Route path="/admin-ng/edit/:venueId">
-        <Provided withWorldUsers withRelatedVenues>
+        <Provided withWorldUsers>
           <VenueWizardV2 />
         </Provided>
       </Route>