fix CI issue

components/AppLayout/Widgets/Avatar.js

@@ -86,18 +86,18 @@ const StatusBadge = withStyles(theme => ({
   );
 });
 
-const BackgroundBadge = withStyles(theme => ({
+const BackgroundBadge = withStyles(() => ({
   container: {
     position: 'relative',
   },
   badge: {
     position: 'absolute',
-    width: ({ size }) + 20,
-    height: ({ size }) + 20,
+    width: ({ size }) => size + 20,
+    height: ({ size }) => size + 20,
     backgroundColor: 'green',
-    background: URL({ majorBadgeBorderUrl })
+    background: ({ user }) => `url(${user?.majorBadgeBorderUrl})`,
   },
-}))(({ level, classes, children, props }) => (
+}))(({ classes, children, props }) => (
   <div className={classes.container} {...props}>
     {children}
   </div>
@@ -214,7 +214,7 @@ function Avatar({
   if (hasLink) {
     avatar = <ProfileLink user={user}>{avatar}</ProfileLink>;
   }
-  avatar = <BackgroundBadge>{avatar}</BackgroundBadge>
+  avatar = <BackgroundBadge>{avatar}</BackgroundBadge>;
   return avatar;
 }
 

components/ProfilePage/UserPageHeader.js

@@ -20,6 +20,7 @@ import Stats from './Stats';
 import EditIcon from '@material-ui/icons/Edit';
 import EditProfileDialog from './EditProfileDialog';
 import EditAvatarDialog from './EditAvatarDialog';
+import ShowAwardedBadgeDialog from './showBadgeDialog';
 
 import cx from 'clsx';
 
@@ -175,12 +176,12 @@ const useStyles = makeStyles(theme => ({
   },
   majorBadgeIcon: {
     position: 'relative',
-    right: '10px', 
+    right: '10px',
     height: '100%',
   },
   majorBadgeName: {
     position: 'relative',
-    right: '10px', 
+    right: '10px',
     height: '100%',
     color: 'white',
   },
@@ -197,6 +198,10 @@ function UserPageHeader({ user, isSelf, stats }) {
   const classes = useStyles();
   const [isEditDialogOpen, setEditDialogOpen] = useState(false);
   const [isEditAvatarDialogOpen, setEditAvatarDialogOpen] = useState(false);
+  const [
+    isShowAwardedBadgeDialogOpen,
+    setShowAwardedBadgeDialogOpen,
+  ] = useState(false);
 
   const editButtonElem = isSelf && (
     <Button
@@ -244,17 +249,13 @@ function UserPageHeader({ user, isSelf, stats }) {
           <span className={classes.level}>Lv. {user?.level || 0}</span>
           {LEVEL_NAMES[(user?.level)] || ''}
         </Ribbon>
-        <img className={classes.majorBadgeIcon} src={user?.majorBadgeImageUrl}></img>
+        <img
+          className={classes.majorBadgeIcon}
+          src={user?.majorBadgeImageUrl}
+        ></img>
         <span
           className={classes.majorBadgeName}
-          onClick={() => {
-            showDialog({
-              dialog: ShowAwardedBadgeDialog,
-              dialogProps: {
-                user={user}
-              },
-            });
-          }}
+          onClick={() => setShowAwardedBadgeDialogOpen(true)}
         >
           {user?.majorBadgeName}
         </span>
@@ -322,6 +323,15 @@ function UserPageHeader({ user, isSelf, stats }) {
           />
         </ThemeProvider>
       )}
+
+      {isShowAwardedBadgeDialogOpen && (
+        <ThemeProvider theme={lightTheme}>
+          <ShowAwardedBadgeDialog
+            user={user}
+            onClose={() => setShowAwardedBadgeDialogOpen(false)}
+          />
+        </ThemeProvider>
+      )}
     </header>
   );
 }

components/ProfilePage/showBadgeDialog.js

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { t } from 'ttag';
 import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
@@ -45,13 +44,10 @@ function ShowAwardedBadgeDialog({ userId, onClose = () => {} }) {
       variables: { id: userId },
     }
   );
-  const { data: badgeData, loading: badgeLoading } = useQuery(
-    showBadgeDetail,
-    {
-      variables: { id: userData?.GetUser?.badges[0]?.id },
-      skip: userLoading,
-    }
-  );
+  const { data: badgeData, loading: badgeLoading } = useQuery(showBadgeDetail, {
+    variables: { id: userData?.GetUser?.badges[0]?.id },
+    skip: userLoading,
+  });
 
   if (userLoading || badgeLoading) {
     return <div></div>;
@@ -62,7 +58,9 @@ function ShowAwardedBadgeDialog({ userId, onClose = () => {} }) {
       <DialogTitle>{badgeData?.Badge?.name}</DialogTitle>
       <DialogContent>
         <div style={{ display: 'flex' }}>
-          <div style={{ width: '60%', padding: 20 }}>{badgeData?.Badge?.description}</div>
+          <div style={{ width: '60%', padding: 20 }}>
+            {badgeData?.Badge?.description}
+          </div>
           <img
             src={badgeData?.Badge?.icon}
             alt={badgeData?.Badge?.name}
@@ -76,3 +74,5 @@ function ShowAwardedBadgeDialog({ userId, onClose = () => {} }) {
     </Dialog>
   );
 }
+
+export default ShowAwardedBadgeDialog;

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "16"