Register on potlock

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/Select.jsx

@@ -0,0 +1,200 @@
+const label = props.label ?? "Label";
+const noLabel = props.noLabel ?? false;
+const placeholder = props.placeholder ?? "Select an option";
+const value = props.value ?? "";
+const options = props.options ?? [];
+const onChange = props.onChange ?? (() => {});
+const validate = props.validate ?? (() => {});
+const error = props.error ?? "";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0px;
+  gap: 0.45em;
+  width: 100%;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  word-wrap: break-word;
+  color: #2e2e2e;
+`;
+
+const Error = styled.span`
+  display: inline-block;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75em;
+  line-height: 1.25em;
+  color: #ff4d4f;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease-in-out;
+
+  &.show {
+    height: 1.25em;
+  }
+`;
+
+const Input = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5em 0.75em;
+  gap: 10px;
+  background: #ffffff;
+  border: 1px solid #d0d5dd;
+  // box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  boxshadow: 0px -2px 0px rgba(93, 93, 93, 0.24) inset;
+  border-radius: 4px;
+  color: #101828;
+  width: 100%;
+`;
+
+const Placeholder = styled.span`
+  color: #a0a3a8;
+`;
+
+const scaleOut = styled.keyframes`
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0;
+  gap: 0.5em;
+  width: 100%;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  background: black;
+  color: white;
+  z-index: 3 !important;
+
+  /* &[data-state="open"] { */
+  /*   animation: ${scaleOut} 0.2s ease-in-out; */
+  /* } */
+  /**/
+  /* &[data-state="closed"] { */
+  /*   animation: ${scaleOut} 0.2s ease-in-out reverse; */
+  /* } */
+`;
+
+const Viewport = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0;
+  width: 100%;
+`;
+
+const Item = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5em 0.75em;
+  gap: 0.5em;
+  width: 100%;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  transition: background 0.2s ease-in-out;
+
+  &:nth-child(n + 1) {
+    border-top: 1px solid #d0d5dd;
+  }
+
+  &:hover {
+    background: rgb(35, 36, 43);
+    boder: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+return (
+  <Container style={props.containerStyles || {}}>
+    {noLabel ? <></> : <Label>{label}</Label>}
+    <Select.Root
+      value={value?.value}
+      onValueChange={(value) =>
+        onChange(options.find((option) => option.value === value))
+      }
+    >
+      <Select.Trigger asChild={true}>
+        <Input style={props.inputStyles || {}}>
+          {props.iconLeft && props.iconLeft}
+          <Select.Value
+            aria-label={value.value}
+            placeholder={<Placeholder>{placeholder}</Placeholder>}
+          />
+
+          <Select.Icon>
+            <svg
+              width="12"
+              height="8"
+              viewBox="0 0 12 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.59 0.295044L6 4.87504L1.41 0.295044L0 1.70504L6 7.70504L12 1.70504L10.59 0.295044Z"
+                fill="white"
+              />
+            </svg>
+          </Select.Icon>
+        </Input>
+      </Select.Trigger>
+
+      <Select.Content asChild={true}>
+        <Content>
+          <Select.Viewport asChild={true}>
+            <Viewport>
+              {options.map(({ text, value }) => (
+                <Select.Item value={value} asChild={true}>
+                  <Item>
+                    <Select.ItemText>{text}</Select.ItemText>
+                    <Select.ItemIndicator>
+                      <svg
+                        width="15"
+                        height="15"
+                        viewBox="0 0 15 15"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                          fill="currentColor"
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </Select.ItemIndicator>
+                  </Item>
+                </Select.Item>
+              ))}
+            </Viewport>
+          </Select.Viewport>
+        </Content>
+      </Select.Content>
+    </Select.Root>
+  </Container>
+);