Merge pull request benawad#2824 from firecraftgaming/patchbotui1

fix(kibbeh): fixed margin issue and avatar default not exist
Mahmoud-Skafi · May 18, 2021 · adb1581 · adb1581
2 parents 951cca8 + 534a7b1
commit adb1581
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/kibbeh/src/modules/developer/BotCard.tsx b/kibbeh/src/modules/developer/BotCard.tsx
@@ -19,7 +19,7 @@ export const BotCard: React.FC<BotCardProps> = ({ bot }) => {
     onClick={() => push(`/developer/bots/edit/[username]`, `/developer/bots/edit/${bot.username}`)}
     >
         <div>
-            <SingleUser isOnline={true} src={bot.avatarUrl}></SingleUser>
+            <SingleUser isOnline={true} src={bot.avatarUrl} username={bot.username}></SingleUser>
         </div>
         <div className="font-bold text-base">
             {bot.displayName}

diff --git a/kibbeh/src/modules/developer/BotIcon.tsx b/kibbeh/src/modules/developer/BotIcon.tsx
@@ -1,23 +1,31 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface BotIconProps {
-  alt?: string;
+  username?: string;
   src: string;
   onClick: () => any;
 }
 
-export const BotIcon: React.FC<BotIconProps> = ({ alt, src, onClick }) => {
+export const BotIcon: React.FC<BotIconProps> = ({ username, src, onClick }) => {
+  const [isError, setError] = useState(false);
   return (
     <div
       className="mb-2 grid"
       style={{ width: 120, height: 120 }}
       data-testid="single-user-avatar"
     >
       <img
-        alt={alt}
+        alt={`${username ?? ''}-s-avatar`}
         className={"rounded-full w-full h-full object-cover relative"}
         style={{ gridColumn: 1, gridRow: 1 }}
-        src={src}
+        onError={() => setError(true)}
+        src={
+          isError
+            ? `https://ui-avatars.com/api/${
+                username ? `&name=${username}` : "&name"
+              }&rounded=true&background=B23439&bold=true&color=FFFFFF`
+            : src
+        }
       />
     </div>
   );

diff --git a/kibbeh/src/modules/developer/BotInfo.tsx b/kibbeh/src/modules/developer/BotInfo.tsx
@@ -14,7 +14,7 @@ export const BotInfo: React.FC<BotInfoProps> = ({ bot, onClick }) => {
       style={{ width: 190, height: 200 }}
     >
       <BotIcon
-        alt={`${bot.username}-s-avatar`}
+        username={bot.username}
         src={bot.avatarUrl}
         onClick={onClick}
       />

diff --git a/kibbeh/src/modules/developer/YourBots.tsx b/kibbeh/src/modules/developer/YourBots.tsx
@@ -26,7 +26,7 @@ export const YourBots: React.FC<unknown> = ({}) => {
     >
       <div className="flex flex-row w-full justify-between">
         <div className="flex">
-          {t("pages.botEdit.yourBots")} ({bots.length})
+          {t('pages.botEdit.yourBots')} ({bots.length})
         </div>
         {bots.length < 5 ? (
           <button
@@ -48,8 +48,8 @@ export const YourBots: React.FC<unknown> = ({}) => {
         )}
       </div>
       <div
-        className="inline-block w-full bg-primary-300  my-3"
-        style={{ height: 1 }}
+        className="inline-block w-full bg-primary-300"
+        style={{ height: 1, marginTop: '0.75rem', marginBottom: '0.75rem' }}
       ></div>
       <div
         className="flex flex-wrap justify-start"