Merge pull request #194 from l3vels/fix/ui-bugs

Fix/UI bugs
l3vels · Oct 2, 2023 · 8da1607 · 8da1607
2 parents 871c00c + 0cd37f6
commit 8da1607
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 26 deletions.
diff --git a/apps/ui/.env.develop b/apps/ui/.env.develop
@@ -10,6 +10,8 @@ REACT_APP_DISCORD_LINK=https://discord.gg/FcVZKcaRCV
 REACT_APP_GITHUB_LINK=https://github.com/l3vels/L3AGI
 REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 
+REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md
 REACT_APP_BASICS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/basic.md

diff --git a/apps/ui/.env.local b/apps/ui/.env.local
@@ -15,6 +15,8 @@ REACT_APP_DISCORD_LINK=https://discord.gg/FcVZKcaRCV
 REACT_APP_GITHUB_LINK=https://github.com/l3vels/L3AGI
 REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 
+REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md
 REACT_APP_BASICS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/basic.md

diff --git a/apps/ui/.env.production b/apps/ui/.env.production
@@ -10,6 +10,8 @@ REACT_APP_DISCORD_LINK=https://discord.gg/FcVZKcaRCV
 REACT_APP_GITHUB_LINK=https://github.com/l3vels/L3AGI
 REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 
+REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md
 REACT_APP_BASICS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/basic.md

diff --git a/apps/ui/src/components/ChatCards/TeamChatCard.tsx b/apps/ui/src/components/ChatCards/TeamChatCard.tsx
@@ -31,12 +31,9 @@ const TeamChatCard = ({
       <StyledTeamAgents>
         {agents?.map((agent: any, index: number) => {
           return (
-            <AvatarGenerator
-              key={index}
-              name={agent?.agent?.name}
-              avatar={agent?.agent?.avatar}
-              size={20}
-            />
+            <StyledAgent key={index}>
+              <AvatarGenerator name={agent?.agent?.name} avatar={agent?.agent?.avatar} size={20} />
+            </StyledAgent>
           )
         })}
       </StyledTeamAgents>
@@ -120,3 +117,6 @@ export const StyledTeamAgents = styled.div`
   /* height: 100%; */
   display: flex;
 `
+const StyledAgent = styled.div`
+  margin-right: -8px;
+`
diff --git a/apps/ui/src/pages/Agents/AgentCard/AgentCard.tsx b/apps/ui/src/pages/Agents/AgentCard/AgentCard.tsx
@@ -49,37 +49,47 @@ const AgentCard = ({
   avatar,
 }: AgentCardProps) => {
   let shortDescription = description
-  if (description.length > 75) {
-    shortDescription = `${description.slice(0, 75)}...`
+  if (description.length > 130) {
+    shortDescription = `${description.slice(0, 130)}...`
   }
 
   let shortHeaderTag = headerTag
   if (headerTag && headerTag?.length > 40) {
     shortHeaderTag = `${headerTag.slice(0, 40)}...`
   }
 
+  let shortTitle = name
+  if (name && name?.length > 20) {
+    shortTitle = `${name.slice(0, 20)}...`
+  }
+
   return (
     <StyledAgentCard>
       <StyledCardHeader>
-        <div>
+        <StyledAvatarWrapper>
+          <AvatarGenerator name={name} size={50} avatar={avatar} />
+        </StyledAvatarWrapper>
+
+        <StyledTitleWrapper>
+          <TypographyPrimary
+            value={shortTitle}
+            type={Typography.types.P}
+            size={Typography.sizes.lg}
+          />
+          <div>{headerTag && <Tags label={shortHeaderTag} readOnly size='small' outlined />}</div>
+        </StyledTitleWrapper>
+        {/* <div>
           {headerText && (
             <TypographySecondary
               value={headerText}
               type={Typography.types.P}
               size={Typography.sizes.sm}
             />
           )}
-        </div>
-
-        <div>{headerTag && <Tags label={shortHeaderTag} readOnly size='small' outlined />}</div>
+        </div> */}
       </StyledCardHeader>
       <StyledCardBody>
-        <StyledAvatarWrapper>
-          <AvatarGenerator name={name} size={50} avatar={avatar} />
-        </StyledAvatarWrapper>
         <StyledBodyTextWrapper>
-          <TypographyPrimary value={name} type={Typography.types.P} size={Typography.sizes.lg} />
-
           <TypographySecondary
             value={shortDescription}
             type={Typography.types.P}
@@ -162,8 +172,8 @@ export default AgentCard
 
 export const StyledAgentCard = styled.div`
   position: relative;
-  width: 335px;
-  min-width: 335px;
+  width: 345px;
+  min-width: 345px;
   height: 185px;
   min-height: 185px;
 
@@ -189,12 +199,15 @@ export const StyledAgentCard = styled.div`
 const StyledCardHeader = styled.div`
   width: 100%;
 
+  padding: 20px 0;
+
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  /* justify-content: space-between; */
 
-  margin-bottom: auto;
-  padding-bottom: 5px;
+  margin-bottom: 5px;
+  /* padding-bottom: 5px; */
   min-height: 20px;
   /* margin-bottom: 10px; */
 `
@@ -263,3 +276,7 @@ const StyledEyeOpenIcon = styled(EyeOpen)`
     stroke: ${({ theme }) => theme.body.iconColor};
   }
 `
+const StyledTitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
diff --git a/apps/ui/src/pages/Home/Home.tsx b/apps/ui/src/pages/Home/Home.tsx
@@ -61,6 +61,16 @@ const Home = () => {
               />
             </StyledHeadingWrapper>
 
+            <StyledIframe
+              width='560'
+              height='315'
+              src={`https://www.youtube.com/embed/${import.meta.env.REACT_APP_YOUTUBE_VIDEO_ID}`}
+              title='YouTube video player'
+              frameBorder='0'
+              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+              allowFullScreen
+            ></StyledIframe>
+
             <Discover />
           </>
         )}
@@ -102,3 +112,7 @@ const StyledHeadingWrapper = styled.div`
 
   padding: 16px 10px;
 `
+const StyledIframe = styled.iframe`
+  border-radius: 10px;
+  margin: auto;
+`
diff --git a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard.tsx b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard.tsx
@@ -177,8 +177,8 @@ export default TeamOfAgentCard
 
 const StyledCard = styled.div`
   position: relative;
-  width: 320px;
-  min-width: 320px;
+  width: 345px;
+  min-width: 345px;
   height: 370px;
   min-height: 370px;
 

diff --git a/apps/ui/src/pages/Toolkit/components/ToolCard.tsx b/apps/ui/src/pages/Toolkit/components/ToolCard.tsx
@@ -62,8 +62,8 @@ const StyledRoot = styled.div<{ bgImg: string; isDisabled: boolean; isReadOnly:
   justify-content: flex-start;
   padding: 24px 16px 8px;
   gap: 8px;
-  width: 250px;
-  min-width: 250px;
+  width: 260px;
+  min-width: 260px;
   height: 158px;
   min-height: 158px;
   background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.4) 100%);