Add mutliple webserver for mainnet and testnet in playwright config, proposal tests

apps/new/widget/components/Footer.jsx

@@ -74,76 +74,6 @@ const LeftMenu = styled.div`
  align-items: center;
  }
 `;
-const LearnMenu = styled.div`
- width: 185px;
- display: flex;
- flex-direction: column;
- gap: 16px;
- h2 {
- align-self: stretch;
- color: #fff;
- font-family: Poppins;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%; /* 24px */
- margin: 0;
- }
- a {
- padding-top: 8px 0px;
- color: var(--Color-Neutral-neutral, #666);
- font-family: Poppins;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%; /* 21px */
- text-decoration: none;
- }
- flex-shrink: 0;
- @media screen and (max-width: 768px) {
- align-items: center;
- justify-content: flex;
- h2 {
- align-self: center;
- justify-content: flex;
- }
- }
-`;
-const BuildMenu = styled.div`
- width: 185px;
- display: flex;
- flex-direction: column;
- flex-shrink: 0;
- gap: 16px;
- h2 {
- align-self: stretch;
- color: #fff;
- font-family: Poppins;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%; /* 24px */
- margin: 0;
- }
- a {
- padding-top: 8px 0px;
- text-decoration: none;
- color: var(--Color-Neutral-neutral, #666);
- font-family: Poppins;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%; /* 21px */
- }
- @media screen and (max-width: 768px) {
- align-items: center;
- justify-content: flex;
- h2 {
- align-self: center;
- justify-content: flex;
- }
- }
-`;
 
 const Credits = styled.div`
  display: flex;
@@ -161,12 +91,6 @@ const Credits = styled.div`
  }
 `;
 
-const Menu = styled.div`
- @media screen and (max-width: 500px) {
- flex-direction: column;
- }
-`;
-
 const Footer = () => {
  return (
  <Container>
@@ -182,6 +106,7 @@ const Footer = () => {
  borderRadius: "30%",
  }}
  target="_blank"
+ data-testid="twitter"
  href="https://x.com/NearBuilders"
  >
  <svg
@@ -202,6 +127,7 @@ const Footer = () => {
  style={{
  borderRadius: "30%",
  }}
+ data-testid="telegram"
  href="https://nearbuilders.com/tg-builders"
  >
  <svg
@@ -228,6 +154,7 @@ const Footer = () => {
  borderRadius: "30%",
  }}
  href="https://github.com/NEARBuilders"
+ data-testid="github"
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -254,27 +181,9 @@ const Footer = () => {
  </Button>
  </SocialIcons>
  </LeftMenu>
- {/* <Menu className="d-flex gap-5">
- <LearnMenu>
- <h2>Learn</h2>
-
- <a href="#read">Read</a>
- <a href="#watch">Watch</a>
- <a href="#tools">Tools</a>
- <a href="#components">Components</a>
- </LearnMenu>
- <BuildMenu>
- <h2>Build</h2>
- <a href="#guide">Guide</a>
- <a href="#project">Project</a>
- <a href="#activity">See Activity</a>
- <a href="#feedback">Request Feedback</a>
- <a href="#program">Founding Program</a>
- </BuildMenu>
- </Menu> */}
  </Links>
  <Credits>
- <p>© {new Date().getFullYear} BuildDAO. All rights reserved.</p>
+ <p>© {new Date().getFullYear} Build DAO. All rights reserved.</p>
  </Credits>
  </Container>
  );

apps/new/widget/components/Navbar.jsx

@@ -113,11 +113,13 @@ const NavLinks = styled.div`
 
  span {
  color: var(--text-white, #fff);
+ font-size: 14px;
+ font-family: Poppins, sans-serif;
+ font-weight: 600;
  }
 
  .active {
  color: var(--eca-227, #eca227);
- font-weight: 700;
  }
 
  @media screen and (max-width: 960px) {

apps/new/widget/components/project/Card.jsx

@@ -35,6 +35,7 @@ const StyledCard = styled.div`
  display: flex;
  align-items: flex-start;
  flex-direction: column;
+ gap: 4px;
 
  h4 {
  color: #fff;
@@ -88,9 +89,10 @@ const Tag = styled.div`
  justify-content: center;
  align-items: center;
  gap: 4px;
- border-radius: 6px;
+ border-radius: 50rem;
  border: 1px solid #666;
  background: rgba(5, 41, 77, 0.03);
+ min-width: fit-content;
 
  color: #fff;
  font-family: Poppins;
@@ -126,23 +128,24 @@ const EditButton = ({ item }) => {
  );
 };
 
-const Tags = ({ tags, location }) => {
+const Tags = ({ tags }) => {
+ const tagsLength = tags?.length;
+ const firstThreeLinesOfTags = tagsLength > 5 ? tags.slice(0, 5) : tags;
+ const remainingTags = tagsLength > 5 ? tags.slice(5) : [];
  return (
- <div
- className={`d-flex align-items-center ${variant === "grid" ? "flex-wrap" : ""} gap-2`}
- >
- {location && (
- <Tag>
- <i className="bi bi-globe"></i> {location}
- </Tag>
- )}
- {tags &&
- tags.map((tag) => (
+ <>
+ {firstThreeLinesOfTags &&
+ firstThreeLinesOfTags.map((tag) => (
  <Tag>
  <span className="fw-bold">{tag}</span>
  </Tag>
  ))}
- </div>
+ {remainingTags.length > 0 && (
+ <Tag>
+ <span className="fw-bold">+{remainingTags.length}</span>
+ </Tag>
+ )}
+ </>
  );
 };
 
@@ -194,7 +197,6 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
  projectID,
  profileImage,
  backgroundImage,
- location,
  } = data;
 
  const item = {
@@ -251,9 +253,11 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
  />
  <p>{description}</p>
  </div>
- <div className="d-flex justify-content-between align-items-center mt-auto">
- <Tags tags={tags} projectAccountId={projectAccountId} />
- <ProfileImages accountIds={collaborators} />
+ <div className="d-flex gap-2 flex-wrap align-items-center mt-auto">
+ <Tags tags={tags} />
+ <span className="ms-auto">
+ <ProfileImages accountIds={collaborators} />
+ </span>
  </div>
  </div>
  </>
@@ -273,8 +277,11 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
  projectAccountId={projectAccountId}
  />
  </div>
- <div className="d-flex align-items-center gap-3">
- <Tags tags={tags} location={location} />
+ <div
+ style={{ minWidth: "fit-content" }}
+ className="d-flex flex-wrap align-items-center gap-2"
+ >
+ <Tags tags={tags} />
  <ProfileImages accountIds={collaborators} />
  <div className="d-flex gap-2 align-items-center">
  {showEditProjectAction && <EditButton item={item} />}

apps/new/widget/page/home/Hero.jsx

@@ -49,7 +49,7 @@ const HeadingSection = styled.div`
  #eca227 1.24%,
  #fc8119 55.76%,
  #9747ff 108.89%
- );
+ ) !important;
  }
  }
 
@@ -130,11 +130,11 @@ const EndCard = styled.div`
  z-index: 2;
  overflow: clip;
  position: relative;
+ padding: 24px;
  .card-content {
- padding: 24px;
  display: flex;
  flex-direction: column;
- gap: 24px;
+ gap: 8px;
  position: relative;
  @keyframes floating {
  0%,
@@ -176,15 +176,18 @@ const EndCard = styled.div`
  font-family: Poppins, sans-serif;
  font-size: 16px;
  margin: 0;
+ font-weight: 400;
+ line-height: 140%;
  }
 
  .heading {
  color: #000;
  font-family: Poppins, sans-serif;
- font-size: 24px;
+ font-size: 32px;
  font-weight: 500;
- line-height: 130%; /* 31.2px */
- letter-spacing: -0.48px;
+ line-height: 120%;
+ letter-spacing: -1.28px;
+ margin: 0;
  }
 
  @media screen and (max-width: 1024px) {
@@ -278,19 +281,22 @@ const Card = styled.div`
  background: #1e1e1e;
 
  .subheading {
- color: #666;
+ color: #a0a0a0;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  margin: 0;
+ font-weight: 400;
+ line-height: 140%;
  }
 
  .heading {
  color: #fff;
  font-family: Poppins, sans-serif;
- font-size: 24px;
+ font-size: 32px;
  font-weight: 500;
- line-height: 130%; /* 31.2px */
- letter-spacing: -0.48px;
+ line-height: 120%;
+ letter-spacing: -1.28px;
+ margin: 0;
  }
 
  .title {
@@ -397,7 +403,6 @@ const GrowContainer = styled.div`
  flex-shrink: 0;
  flex-direction: column;
  position: relative;
- padding: 24px;
  @media screen and (max-width: 768px) {
  padding-bottom: 200px;
  }
@@ -538,7 +543,7 @@ const ContributeImage2 = styled.img`
  z-index: 0;
  transform: scale(0.35);
  right: 0;
- top: -180px;
+ top: -170px;
  animation:
  slideInTranslate2 2s forwards,
  scaleIn2 1s forwards;
@@ -614,14 +619,19 @@ const ExploreContainer = styled.div`
  flex-direction: column;
  gap: 2rem;
  border-radius: 24px;
+ .explore-main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
 `;
 const ContentCenter = styled.div``;
 
 const GrowImage1 = styled.img`
  position: absolute;
  z-index: 1;
  left: 0;
- bottom: -60px;
+ bottom: -50px;
  width: 100%;
  object-fit: cover;
  transform: scale(0.7);
@@ -790,7 +800,10 @@ const Hero = () => {
  <p className="subheading">
  Learn with our Social Graph of Build Commons.
  </p>
- <Widget src="${config_account}/widget/page.home.hero.SocialGraph" />
+ <div className="explore-main">
+ {" "}
+ <Widget src="${config_account}/widget/page.home.hero.SocialGraph" />
+ </div>
  </ExploreContainer>
  </Card>
  <CenterCard>