From ddb4bb22e81016f21f8888ffc6e49479db0feace Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Wed, 3 Jan 2024 21:53:34 +0500
Subject: [PATCH 01/34] Create button component

---
 apps/builddao/widget/components/button.jsx  | 63 +++++++++++++++++++++
 apps/builddao/widget/components/library.jsx | 33 +++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 apps/builddao/widget/components/button.jsx
 create mode 100644 apps/builddao/widget/components/library.jsx

diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
new file mode 100644
index 00000000..689bbbf3
--- /dev/null
+++ b/apps/builddao/widget/components/button.jsx
@@ -0,0 +1,63 @@
+const StyledButton = styled.button`
+  all: unset;
+  display: inline-flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+  font: 500 14px / normal;
+
+  ${(props) =>
+    props.type === "icon" &&
+    `
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  `}
+
+  /* Colors based on variant prop */
+  background: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#FFAF51";
+      case "outline":
+        return "#0b0c14";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#000";
+      case "outline":
+        return "#fff";
+      default:
+        return "#CDD0D5";
+    }
+  }};
+
+  border: ${(props) =>
+    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+`;
+
+function Button({ id, children, variant, type, className, style }) {
+  return (
+    <StyledButton
+      id={id}
+      className={className}
+      variant={variant}
+      type={type}
+      style={style}
+    >
+      {children}
+    </StyledButton>
+  );
+}
+
+return { Button };
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
new file mode 100644
index 00000000..ec4244a3
--- /dev/null
+++ b/apps/builddao/widget/components/library.jsx
@@ -0,0 +1,33 @@
+const { Button } = VM.require("buildhub.near/widget/components.button");
+
+return (
+  <div className="d-flex flex-column gap-3">
+    <div className="d-flex align-items-center gap-3">
+      <Button>Normal</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline">Outline</Button>
+    </div>
+    <div className="d-flex align-items-center gap-3">
+      <Button>
+        Normal <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="primary">
+        Primary <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="outline">
+        Outline <i className="bi bi-arrow-right"></i>
+      </Button>
+    </div>
+    <div className="d-flex align-items-center gap-3">
+      <Button type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="primary" type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="outline" type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+    </div>
+  </div>
+);

From b746d005aa37a4ad1a404033220bd449af4d7466 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Wed, 3 Jan 2024 23:01:24 +0500
Subject: [PATCH 02/34] Add Pagination and Progress State component

---
 apps/builddao/widget/components/library.jsx   | 80 ++++++++++------
 .../widget/components/pagination-widget.jsx   | 95 +++++++++++++++++++
 .../builddao/widget/components/pagination.jsx | 20 ++++
 .../widget/components/progress-state.jsx      | 55 +++++++++++
 4 files changed, 223 insertions(+), 27 deletions(-)
 create mode 100644 apps/builddao/widget/components/pagination-widget.jsx
 create mode 100644 apps/builddao/widget/components/pagination.jsx
 create mode 100644 apps/builddao/widget/components/progress-state.jsx

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index ec4244a3..4d43e5b7 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -1,33 +1,59 @@
 const { Button } = VM.require("buildhub.near/widget/components.button");
+const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
+const { ProgressState } = VM.require(
+  "buildhub.near/widget/components.progress-state"
+);
+
+const Heading = styled.h2`
+  color: white;
+`;
 
 return (
-  <div className="d-flex flex-column gap-3">
-    <div className="d-flex align-items-center gap-3">
-      <Button>Normal</Button>
-      <Button variant="primary">Primary</Button>
-      <Button variant="outline">Outline</Button>
-    </div>
-    <div className="d-flex align-items-center gap-3">
-      <Button>
-        Normal <i className="bi bi-arrow-right"></i>
-      </Button>
-      <Button variant="primary">
-        Primary <i className="bi bi-arrow-right"></i>
-      </Button>
-      <Button variant="outline">
-        Outline <i className="bi bi-arrow-right"></i>
-      </Button>
-    </div>
-    <div className="d-flex align-items-center gap-3">
-      <Button type="icon">
-        <i className="bi bi-arrow-right"></i>
-      </Button>
-      <Button variant="primary" type="icon">
-        <i className="bi bi-arrow-right"></i>
-      </Button>
-      <Button variant="outline" type="icon">
-        <i className="bi bi-arrow-right"></i>
-      </Button>
+  <div className="container-xl">
+    <div className="d-flex flex-column gap-3">
+      <Heading>Buttons</Heading>
+      <div className="d-flex align-items-center gap-3">
+        <Button>Normal</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="outline">Outline</Button>
+      </div>
+      <div className="d-flex align-items-center gap-3">
+        <Button>
+          Normal <i className="bi bi-arrow-right"></i>
+        </Button>
+        <Button variant="primary">
+          Primary <i className="bi bi-arrow-right"></i>
+        </Button>
+        <Button variant="outline">
+          Outline <i className="bi bi-arrow-right"></i>
+        </Button>
+      </div>
+      <div className="d-flex align-items-center gap-3">
+        <Button type="icon">
+          <i className="bi bi-arrow-right"></i>
+        </Button>
+        <Button variant="primary" type="icon">
+          <i className="bi bi-arrow-right"></i>
+        </Button>
+        <Button variant="outline" type="icon">
+          <i className="bi bi-arrow-right"></i>
+        </Button>
+      </div>
+      <div className="d-flex flex-column gap-3">
+        <Heading>Pagination</Heading>
+        <Pagination totalPages={4} selectedPage={1} />
+      </div>
+      <div className="d-flex flex-column gap-3">
+        <Heading>Progress State</Heading>
+        <div className="d-flex align-items-center gap-3">
+          <ProgressState status="default">1</ProgressState>
+          <ProgressState status="focused">1</ProgressState>
+          <ProgressState status="error">
+            <i className="bi bi-x"></i>
+          </ProgressState>
+          <ProgressState status="completed">1</ProgressState>
+        </div>
+      </div>
     </div>
   </div>
 );
diff --git a/apps/builddao/widget/components/pagination-widget.jsx b/apps/builddao/widget/components/pagination-widget.jsx
new file mode 100644
index 00000000..56544bce
--- /dev/null
+++ b/apps/builddao/widget/components/pagination-widget.jsx
@@ -0,0 +1,95 @@
+const totalPages = props.totalPages ?? 12; // Assume you have 12 pages
+const maxVisiblePages = props.maxVisiblePages ?? 4;
+const onPageClick = props.onPageClick
+  ? props.onPageClick
+  : () => console.log("clicked");
+const pagesToShow = Math.min(totalPages, maxVisiblePages);
+const [selectedPage, setSelectedPage] = useState(props.selectedPage ?? 11);
+const totalPageSets = Math.ceil(totalPages / maxVisiblePages);
+const [currentPageSet, setCurrentPageSet] = useState(totalPageSets);
+
+const Pagination = styled.div`
+  display: flex;
+  gap: 12px;
+
+  div {
+    display: flex;
+    height: 40px;
+    min-width: 40px;
+    padding: 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    color: var(--White-100, #fff);
+    transition: all 300ms;
+    cursor: pointer;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &.selected,
+    &:hover {
+      background-color: #23242b;
+    }
+
+    &.arrow {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+  }
+`;
+
+const handlePageClick = (pageNumber) => {
+  onPageClick(pageNumber);
+};
+
+const handleArrowClick = (direction) => {
+  if (direction === "left") {
+    setCurrentPageSet(Math.max(currentPageSet - 1, 1));
+  } else {
+    setCurrentPageSet(
+      Math.min(currentPageSet + 1, Math.ceil(totalPages / maxVisiblePages))
+    );
+  }
+};
+
+const getPageNumber = (index) =>
+  (currentPageSet - 1) * maxVisiblePages + index + 1;
+
+return (
+  <Pagination>
+    <div
+      className={`arrow ${currentPageSet === 1 && "disabled"}`}
+      onClick={() => handleArrowClick("left")}
+    >
+      <i className="bi bi-arrow-left"></i>
+    </div>
+    {Array.from({ length: pagesToShow }).map((_, index) => {
+      const pageNumber = getPageNumber(index);
+      return (
+        <div
+          key={pageNumber}
+          className={pageNumber === selectedPage && "selected"}
+          onClick={() => handlePageClick(pageNumber)}
+        >
+          {pageNumber}
+        </div>
+      );
+    })}
+    <div
+      className={`arrow ${
+        currentPageSet === Math.ceil(totalPages / maxVisiblePages) && "disabled"
+      }`}
+      onClick={() => handleArrowClick("right")}
+    >
+      <i className="bi bi-arrow-right"></i>
+    </div>
+  </Pagination>
+);
diff --git a/apps/builddao/widget/components/pagination.jsx b/apps/builddao/widget/components/pagination.jsx
new file mode 100644
index 00000000..f371a359
--- /dev/null
+++ b/apps/builddao/widget/components/pagination.jsx
@@ -0,0 +1,20 @@
+function Pagination({
+  totalPages,
+  maxVisiblePages,
+  onPageClick,
+  selectedPage,
+}) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.pagination-widget"
+      props={{
+        totalPages,
+        maxVisiblePages,
+        onPageClick,
+        selectedPage,
+      }}
+    />
+  );
+}
+
+return { Pagination };
diff --git a/apps/builddao/widget/components/progress-state.jsx b/apps/builddao/widget/components/progress-state.jsx
new file mode 100644
index 00000000..dfa4e6c2
--- /dev/null
+++ b/apps/builddao/widget/components/progress-state.jsx
@@ -0,0 +1,55 @@
+const Progress = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 50%;
+  border: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "1px solid var(--Yellow, #FFAF51)";
+      case "error":
+        return "1px solid var(--System-Red, #FD2A5C)";
+      case "completed":
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+      default:
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+    }
+  }};
+
+  background: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "rgba(255, 189, 52, 0.15)";
+      case "error":
+        return "rgba(253, 42, 92, 0.15)";
+      case "completed":
+        return "#FFAF51";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#fff";
+      case "error":
+        return "#FD2A5C";
+      case "completed":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  }};
+`;
+
+function ProgressState({ children, status }) {
+  return <Progress status={status}>{children}</Progress>;
+}
+
+return { ProgressState };

From d516f6a48bef53d1807a0a763330dafc8adf313f Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Wed, 3 Jan 2024 23:24:43 +0500
Subject: [PATCH 03/34] Add progress state and step components

---
 apps/builddao/widget/components/library.jsx   | 13 +++--
 .../widget/components/progress-state.jsx      | 16 ++++--
 apps/builddao/widget/components/step.jsx      | 53 +++++++++++++++++++
 3 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 apps/builddao/widget/components/step.jsx

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 4d43e5b7..e486f173 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -3,6 +3,7 @@ const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
 const { ProgressState } = VM.require(
   "buildhub.near/widget/components.progress-state"
 );
+const { Step } = VM.require("buildhub.near/widget/components.step");
 
 const Heading = styled.h2`
   color: white;
@@ -48,12 +49,18 @@ return (
         <div className="d-flex align-items-center gap-3">
           <ProgressState status="default">1</ProgressState>
           <ProgressState status="focused">1</ProgressState>
-          <ProgressState status="error">
-            <i className="bi bi-x"></i>
-          </ProgressState>
+          <ProgressState status="error">1</ProgressState>
           <ProgressState status="completed">1</ProgressState>
         </div>
       </div>
+      <div className="d-flex flex-column gap-3">
+        <Heading>Step</Heading>
+        <div className="d-flex flex-column gap-3">
+          <Step totalSteps={5} currentStep={1} />
+          <Step totalSteps={4} currentStep={2} />
+          <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
+        </div>
+      </div>
     </div>
   </div>
 );
diff --git a/apps/builddao/widget/components/progress-state.jsx b/apps/builddao/widget/components/progress-state.jsx
index dfa4e6c2..91d83948 100644
--- a/apps/builddao/widget/components/progress-state.jsx
+++ b/apps/builddao/widget/components/progress-state.jsx
@@ -24,9 +24,9 @@ const Progress = styled.div`
   background: ${(props) => {
     switch (props.status) {
       case "focused":
-        return "rgba(255, 189, 52, 0.15)";
+        return "#2f2619";
       case "error":
-        return "rgba(253, 42, 92, 0.15)";
+        return "#2f101f";
       case "completed":
         return "#FFAF51";
       default:
@@ -49,7 +49,17 @@ const Progress = styled.div`
 `;
 
 function ProgressState({ children, status }) {
-  return <Progress status={status}>{children}</Progress>;
+  return (
+    <Progress status={status}>
+      {status === "completed" ? (
+        <i className="bi bi-check"></i>
+      ) : status === "error" ? (
+        <i className="bi bi-x"></i>
+      ) : (
+        children
+      )}
+    </Progress>
+  );
 }
 
 return { ProgressState };
diff --git a/apps/builddao/widget/components/step.jsx b/apps/builddao/widget/components/step.jsx
new file mode 100644
index 00000000..d9cb48ba
--- /dev/null
+++ b/apps/builddao/widget/components/step.jsx
@@ -0,0 +1,53 @@
+const { ProgressState } = VM.require(
+  "buildhub.near/widget/components.progress-state"
+);
+
+function Step(props) {
+  const totalSteps = props.totalSteps ?? 5;
+  const currentStep = props.currentStep ?? 3;
+  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
+
+  const Container = styled.div`
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: #000; /* Change color as needed */
+      background-image: repeating-linear-gradient(
+        90deg,
+        #3c3d43,
+        #3c3d43 2px,
+        transparent 2px,
+        transparent 4px
+      );
+      transform: translateY(-50%);
+      z-index: -1;
+    }
+  `;
+
+  return (
+    <Container className="d-flex align-items-center justify-content-between col-3">
+      {Array.from({ length: totalSteps }).map((_, i) => (
+        <ProgressState
+          className="z-1"
+          status={
+            i + 1 === currentStep
+              ? currentStatus
+              : currentStep > i + 1
+              ? "completed"
+              : "default"
+          }
+        >
+          {i + 1}
+        </ProgressState>
+      ))}
+    </Container>
+  );
+}
+
+return { Step };

From b9737b578377a46e1faaa8de9262b7648fc53d39 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 4 Jan 2024 00:16:47 +0500
Subject: [PATCH 04/34] Add Input Field and Password Field

---
 .../widget/components/input-field-widget.jsx  | 84 +++++++++++++++++++
 .../widget/components/input-field.jsx         | 17 ++++
 apps/builddao/widget/components/library.jsx   | 26 ++++++
 .../widget/components/password-field.jsx      | 17 ++++
 apps/builddao/widget/components/step.jsx      |  5 +-
 5 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 apps/builddao/widget/components/input-field-widget.jsx
 create mode 100644 apps/builddao/widget/components/input-field.jsx
 create mode 100644 apps/builddao/widget/components/password-field.jsx

diff --git a/apps/builddao/widget/components/input-field-widget.jsx b/apps/builddao/widget/components/input-field-widget.jsx
new file mode 100644
index 00000000..79e93fdf
--- /dev/null
+++ b/apps/builddao/widget/components/input-field-widget.jsx
@@ -0,0 +1,84 @@
+const value = props.value;
+const onChange = props.onChange;
+const label = props.label;
+const type = props.type;
+const placeholder = props.placeholder;
+const maxWidth = props.maxWidth ?? "390px";
+const [showPassword, setShowPassword] = useState(false);
+
+const Container = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+  display: flex;
+  max-width: ${maxWidth};
+  width: 100%;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  flex: 1 0 0;
+
+  color: var(--White-50, #cdd0d5);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+return (
+  <Container>
+    <Label htmlFor={label}>{label}</Label>
+    <div
+      className="position-relative d-flex w-100"
+      style={{ maxWidth: maxWidth }}
+    >
+      <Input
+        name={label}
+        id={label}
+        value={value}
+        onChange={onChange}
+        type={!showPassword ? type : "text"}
+        placeholder={placeholder}
+      />
+      {type === "password" && (
+        <span
+          className="position-absolute"
+          style={{
+            right: "0.5rem",
+            top: "30%",
+            transform: "translateX(-50%)",
+            color: "#fff",
+          }}
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? (
+            <i className="bi bi-eye"></i>
+          ) : (
+            <i className="bi bi-eye-slash"></i>
+          )}
+        </span>
+      )}
+    </div>
+  </Container>
+);
diff --git a/apps/builddao/widget/components/input-field.jsx b/apps/builddao/widget/components/input-field.jsx
new file mode 100644
index 00000000..cf66c323
--- /dev/null
+++ b/apps/builddao/widget/components/input-field.jsx
@@ -0,0 +1,17 @@
+function InputField({ value, onChange, label, type, placeholder, maxWidth }) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.input-field-widget"
+      props={{
+        value,
+        onChange,
+        label,
+        type,
+        placeholder,
+        maxWidth,
+      }}
+    />
+  );
+}
+
+return { InputField };
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index e486f173..26e12c46 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -4,11 +4,20 @@ const { ProgressState } = VM.require(
   "buildhub.near/widget/components.progress-state"
 );
 const { Step } = VM.require("buildhub.near/widget/components.step");
+const { InputField } = VM.require(
+  "buildhub.near/widget/components.input-field"
+);
+const { PasswordField } = VM.require(
+  "buildhub.near/widget/components.password-field"
+);
 
 const Heading = styled.h2`
   color: white;
 `;
 
+const [value, setValue] = useState("");
+const [password, setPassword] = useState("");
+
 return (
   <div className="container-xl">
     <div className="d-flex flex-column gap-3">
@@ -61,6 +70,23 @@ return (
           <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
         </div>
       </div>
+      <div className="d-flex flex-column gap-3">
+        <Heading>Input Field</Heading>
+        <div className="d-flex flex-column gap-3">
+          <InputField
+            label={"Label"}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={"Placeholder"}
+          />
+          <PasswordField
+            label={"Password"}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder={"Password"}
+          />
+        </div>
+      </div>
     </div>
   </div>
 );
diff --git a/apps/builddao/widget/components/password-field.jsx b/apps/builddao/widget/components/password-field.jsx
new file mode 100644
index 00000000..e966074a
--- /dev/null
+++ b/apps/builddao/widget/components/password-field.jsx
@@ -0,0 +1,17 @@
+function PasswordField({ value, onChange, label, placeholder, maxWidth }) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.input-field-widget"
+      props={{
+        value,
+        onChange,
+        label,
+        type: "password",
+        placeholder,
+        maxWidth,
+      }}
+    />
+  );
+}
+
+return { PasswordField };
diff --git a/apps/builddao/widget/components/step.jsx b/apps/builddao/widget/components/step.jsx
index d9cb48ba..5b273810 100644
--- a/apps/builddao/widget/components/step.jsx
+++ b/apps/builddao/widget/components/step.jsx
@@ -31,7 +31,10 @@ function Step(props) {
   `;
 
   return (
-    <Container className="d-flex align-items-center justify-content-between col-3">
+    <Container
+      className="d-flex align-items-center justify-content-between"
+      style={{ maxWidth: "360px" }}
+    >
       {Array.from({ length: totalSteps }).map((_, i) => (
         <ProgressState
           className="z-1"

From 7ab4a5d2b6e44152c272154dd76423e89fec2139 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 4 Jan 2024 00:45:25 +0500
Subject: [PATCH 05/34] Add checkbox

---
 apps/builddao/widget/components/checkbox.jsx | 34 ++++++++++++++++++++
 apps/builddao/widget/components/library.jsx  |  7 ++++
 2 files changed, 41 insertions(+)
 create mode 100644 apps/builddao/widget/components/checkbox.jsx

diff --git a/apps/builddao/widget/components/checkbox.jsx b/apps/builddao/widget/components/checkbox.jsx
new file mode 100644
index 00000000..fd2569d2
--- /dev/null
+++ b/apps/builddao/widget/components/checkbox.jsx
@@ -0,0 +1,34 @@
+const Input = styled.input`
+  display: none;
+`;
+
+const Label = styled.label`
+  display: inline-flex;
+  padding: 12px;
+  align-items: center;
+  gap: 8px;
+
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function Checkbox({ value, onChange, label }) {
+  return (
+    <div>
+      <Label>
+        <Input type="checkbox" checked={value} onChange={onChange} />
+        {value ? (
+          <i className="bi bi-check-square"></i>
+        ) : (
+          <i className="bi bi-square"></i>
+        )}
+        {label}
+      </Label>
+    </div>
+  );
+}
+
+return { Checkbox };
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 26e12c46..84ced475 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -10,6 +10,7 @@ const { InputField } = VM.require(
 const { PasswordField } = VM.require(
   "buildhub.near/widget/components.password-field"
 );
+const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
 
 const Heading = styled.h2`
   color: white;
@@ -17,6 +18,7 @@ const Heading = styled.h2`
 
 const [value, setValue] = useState("");
 const [password, setPassword] = useState("");
+const [checked, setChecked] = useState(false);
 
 return (
   <div className="container-xl">
@@ -85,6 +87,11 @@ return (
             onChange={(e) => setPassword(e.target.value)}
             placeholder={"Password"}
           />
+          <Checkbox
+            value={checked}
+            onChange={() => setChecked(!checked)}
+            label="Checkbox"
+          />
         </div>
       </div>
     </div>

From 47d12e613c4d8d7f8c8344d910b9fddbb4f05471 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 4 Jan 2024 00:54:38 +0500
Subject: [PATCH 06/34] Add Textbox

---
 apps/builddao/widget/components/library.jsx  |  2 +
 apps/builddao/widget/components/text-box.jsx | 43 ++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 apps/builddao/widget/components/text-box.jsx

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 84ced475..2eba8db8 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -11,6 +11,7 @@ const { PasswordField } = VM.require(
   "buildhub.near/widget/components.password-field"
 );
 const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
+const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
 
 const Heading = styled.h2`
   color: white;
@@ -92,6 +93,7 @@ return (
             onChange={() => setChecked(!checked)}
             label="Checkbox"
           />
+          <TextBox label={"Label"} placeholder={"Placeholder"} />
         </div>
       </div>
     </div>
diff --git a/apps/builddao/widget/components/text-box.jsx b/apps/builddao/widget/components/text-box.jsx
new file mode 100644
index 00000000..b9df3117
--- /dev/null
+++ b/apps/builddao/widget/components/text-box.jsx
@@ -0,0 +1,43 @@
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const TextArea = styled.textarea`
+  display: flex;
+  min-height: 100px;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  color: var(--White-50, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function TextBox({ label, value, onChange, placeholder, maxWidth }) {
+  return (
+    <div
+      className="d-flex flex-column gap-1 w-100"
+      style={{ maxWidth: maxWidth ? maxWidth : "500px" }}
+    >
+      <Label>{label}</Label>
+      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
+    </div>
+  );
+}
+return { TextBox };

From ad6b8fe776a122beefeda7651dc75b3f4b9a0452 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 4 Jan 2024 03:08:12 +0500
Subject: [PATCH 07/34] Add Text Box and Text Editor

---
 apps/builddao/widget/components/library.jsx   |  17 +-
 apps/builddao/widget/components/text-box.jsx  |   2 +-
 .../widget/components/text-editor.jsx         | 150 ++++++++++++++++++
 3 files changed, 167 insertions(+), 2 deletions(-)
 create mode 100644 apps/builddao/widget/components/text-editor.jsx

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 2eba8db8..6b8c8cd9 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -12,6 +12,9 @@ const { PasswordField } = VM.require(
 );
 const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
 const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
+const { TextEditor } = VM.require(
+  "buildhub.near/widget/components.text-editor"
+);
 
 const Heading = styled.h2`
   color: white;
@@ -20,6 +23,9 @@ const Heading = styled.h2`
 const [value, setValue] = useState("");
 const [password, setPassword] = useState("");
 const [checked, setChecked] = useState(false);
+const [textBox, setTextBox] = useState("");
+const [textEditor, setTextEditor] = useState("");
+const [showPassword, setShowPassword] = useState(false);
 
 return (
   <div className="container-xl">
@@ -93,7 +99,16 @@ return (
             onChange={() => setChecked(!checked)}
             label="Checkbox"
           />
-          <TextBox label={"Label"} placeholder={"Placeholder"} />
+          <TextBox
+            label={"Label"}
+            placeholder={"Placeholder"}
+            value={textBox}
+            onChange={(e) => setTextBox(e.target.value)}
+          />
+          <TextEditor
+            value={textEditor}
+            onChange={(e) => setTextEditor(e.target.value)}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/builddao/widget/components/text-box.jsx b/apps/builddao/widget/components/text-box.jsx
index b9df3117..9774caf0 100644
--- a/apps/builddao/widget/components/text-box.jsx
+++ b/apps/builddao/widget/components/text-box.jsx
@@ -33,7 +33,7 @@ function TextBox({ label, value, onChange, placeholder, maxWidth }) {
   return (
     <div
       className="d-flex flex-column gap-1 w-100"
-      style={{ maxWidth: maxWidth ? maxWidth : "500px" }}
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
     >
       <Label>{label}</Label>
       <TextArea placeholder={placeholder} value={value} onChange={onChange} />
diff --git a/apps/builddao/widget/components/text-editor.jsx b/apps/builddao/widget/components/text-editor.jsx
new file mode 100644
index 00000000..ae539b86
--- /dev/null
+++ b/apps/builddao/widget/components/text-editor.jsx
@@ -0,0 +1,150 @@
+const content = "asdasdasdasd";
+
+const TextareaWrapper = styled.div`
+  display: grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  align-items: stretch;
+
+  textarea {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+  }
+
+  textarea::placeholder {
+    padding-top: 4px;
+    font-size: 20px;
+  }
+
+  textarea:focus::placeholder {
+    font-size: inherit;
+    padding-top: 0px;
+  }
+
+  &::after,
+  textarea,
+  iframe {
+    width: 100%;
+    min-width: 1em;
+    height: unset;
+    min-height: 3em;
+    font: inherit;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: 0px solid #eee;
+    grid-area: 1 / 1;
+    overflow: hidden;
+    outline: none;
+  }
+
+  iframe {
+    padding: 0;
+  }
+
+  textarea:focus,
+  textarea:not(:empty) {
+    border-bottom: 1px solid #eee;
+    min-height: 5em;
+  }
+
+  &::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  &.markdown-editor::after {
+    padding-top: 66px;
+    font-family: monospace;
+    font-size: 14px;
+  }
+`;
+
+const MarkdownEditor = `
+  html {
+    background: #0b0c14;
+  }
+  
+  * {
+    border: none !important;
+  }
+
+  .rc-md-editor {
+    background: #3c3d43;
+    border-top: 1px solid #3c3d43 !important; 
+    border-radius: 8px;
+  }
+
+  .editor-container {
+    background: #3c3d43;
+  }
+  
+  .drop-wrap {
+    top: -110px !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .header-list {
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
+    background: #0b0c14 !important;
+    color: #fff !important;
+
+    font-family: sans-serif !important;
+    font-size: 1rem;
+
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-navigation {
+    background: #0b0c14 !important;
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
+  
+    i {
+      color: #cdd0d5;
+    }
+  }
+
+  .editor-container {
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-editor .editor-container .sec-md .input {
+    overflow-y: auto;
+    padding: 8px !important;
+    line-height: normal;
+    border-radius: 0 0 8px 8px;
+  }
+`;
+
+function TextEditor({ value, onChange, maxWidth }) {
+  return (
+    <TextareaWrapper
+      className="markdown-editor"
+      data-value={value || ""}
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Widget
+        src="mob.near/widget/MarkdownEditorIframe"
+        props={{
+          initialText: value,
+          embedCss: MarkdownEditor,
+          onChange,
+        }}
+      />
+    </TextareaWrapper>
+  );
+}
+
+return { TextEditor };

From eb1d3d0b6ab619054a8de61978c954e3ae39fa98 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 4 Jan 2024 03:26:50 +0500
Subject: [PATCH 08/34] Add upload field

---
 apps/builddao/widget/components/button.jsx    |  3 +-
 apps/builddao/widget/components/library.jsx   | 10 +++
 .../widget/components/upload-field.jsx        | 63 +++++++++++++++++++
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 apps/builddao/widget/components/upload-field.jsx

diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
index 689bbbf3..194bf9f0 100644
--- a/apps/builddao/widget/components/button.jsx
+++ b/apps/builddao/widget/components/button.jsx
@@ -46,7 +46,7 @@ const StyledButton = styled.button`
     props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
 `;
 
-function Button({ id, children, variant, type, className, style }) {
+function Button({ id, children, variant, type, onClick, className, style }) {
   return (
     <StyledButton
       id={id}
@@ -54,6 +54,7 @@ function Button({ id, children, variant, type, className, style }) {
       variant={variant}
       type={type}
       style={style}
+      onClick={onClick}
     >
       {children}
     </StyledButton>
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 6b8c8cd9..08ae5526 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -15,6 +15,9 @@ const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
 const { TextEditor } = VM.require(
   "buildhub.near/widget/components.text-editor"
 );
+const { UploadField } = VM.require(
+  "buildhub.near/widget/components.upload-field"
+);
 
 const Heading = styled.h2`
   color: white;
@@ -111,6 +114,13 @@ return (
           />
         </div>
       </div>
+      <div className="d-flex flex-column gap-3">
+        <Heading>Upload Field</Heading>
+        <div className="d-flex flex-column gap-3">
+          <UploadField />
+          <UploadField background />
+        </div>
+      </div>
     </div>
   </div>
 );
diff --git a/apps/builddao/widget/components/upload-field.jsx b/apps/builddao/widget/components/upload-field.jsx
new file mode 100644
index 00000000..ff527de7
--- /dev/null
+++ b/apps/builddao/widget/components/upload-field.jsx
@@ -0,0 +1,63 @@
+const { Button } = VM.require("buildhub.near/widget/components.button");
+
+const Container = styled.div`
+  display: flex;
+  max-width: 390px;
+  min-height: 200px;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  border-radius: 16px;
+  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
+
+  p {
+    color: var(--White-100, #fff);
+    text-align: center;
+
+    /* Body/Medium-16px */
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.secondary {
+    color: var(--White-50, #cdd0d5);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+  }
+
+  i {
+    color: white;
+    font-size: 2rem;
+  }
+`;
+
+function UploadField({ background }) {
+  return (
+    <Container background={background}>
+      <i class="bi bi-cloud-upload"></i>
+      <div className="d-flex flex-column gap-2">
+        <p>Choose a file or drag & drop it here.</p>
+        <p className="secondary">
+          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
+        </p>
+      </div>
+      <Button variant="outline" style={{ background: background && "#23242b" }}>
+        Browse Files
+      </Button>
+    </Container>
+  );
+}
+
+return { UploadField };

From f5c3bfc5cc3fc8b17e4afe4b3305839436ebff62 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 03:35:45 +0500
Subject: [PATCH 09/34] Add User and Avatar components, fix issues with
 performance

---
 apps/builddao/widget/components/avatar.jsx    |  28 +++++
 apps/builddao/widget/components/button.jsx    |   1 +
 apps/builddao/widget/components/checkbox.jsx  |   2 +-
 .../widget/components/input-field-widget.jsx  |  84 -------------
 .../widget/components/input-field.jsx         |  72 +++++++++--
 apps/builddao/widget/components/library.jsx   | 118 +++++++++---------
 .../widget/components/pagination-widget.jsx   |   8 +-
 .../widget/components/password-field.jsx      |  17 ---
 .../widget/components/progress-state.jsx      |   5 +-
 apps/builddao/widget/components/step.jsx      |   1 +
 apps/builddao/widget/components/user.jsx      |  44 +++++++
 11 files changed, 202 insertions(+), 178 deletions(-)
 create mode 100644 apps/builddao/widget/components/avatar.jsx
 delete mode 100644 apps/builddao/widget/components/input-field-widget.jsx
 delete mode 100644 apps/builddao/widget/components/password-field.jsx
 create mode 100644 apps/builddao/widget/components/user.jsx

diff --git a/apps/builddao/widget/components/avatar.jsx b/apps/builddao/widget/components/avatar.jsx
new file mode 100644
index 00000000..babcbddb
--- /dev/null
+++ b/apps/builddao/widget/components/avatar.jsx
@@ -0,0 +1,28 @@
+const ImageWrapper = styled.div`
+  img {
+    width: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    height: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    flex-shrink: 0 !important;
+    border-radius: 100px !important;
+    background: lightgray 50% / cover no-repeat !important;
+  }
+
+  .profile-image {
+    width: auto !important;
+    height: auto !important;
+  }
+`;
+
+function Avatar(props) {
+  const accountId = props.accountId ?? context.accountId;
+
+  return (
+    <ImageWrapper variant={props.variant}>
+      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
+    </ImageWrapper>
+  );
+}
+
+return { Avatar };
diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
index 194bf9f0..095779ea 100644
--- a/apps/builddao/widget/components/button.jsx
+++ b/apps/builddao/widget/components/button.jsx
@@ -50,6 +50,7 @@ function Button({ id, children, variant, type, onClick, className, style }) {
   return (
     <StyledButton
       id={id}
+      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
       className={className}
       variant={variant}
       type={type}
diff --git a/apps/builddao/widget/components/checkbox.jsx b/apps/builddao/widget/components/checkbox.jsx
index fd2569d2..92d86b1c 100644
--- a/apps/builddao/widget/components/checkbox.jsx
+++ b/apps/builddao/widget/components/checkbox.jsx
@@ -17,7 +17,7 @@ const Label = styled.label`
 
 function Checkbox({ value, onChange, label }) {
   return (
-    <div>
+    <div key={`Checkbox-${label ?? "No-label"}`}>
       <Label>
         <Input type="checkbox" checked={value} onChange={onChange} />
         {value ? (
diff --git a/apps/builddao/widget/components/input-field-widget.jsx b/apps/builddao/widget/components/input-field-widget.jsx
deleted file mode 100644
index 79e93fdf..00000000
--- a/apps/builddao/widget/components/input-field-widget.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-const value = props.value;
-const onChange = props.onChange;
-const label = props.label;
-const type = props.type;
-const placeholder = props.placeholder;
-const maxWidth = props.maxWidth ?? "390px";
-const [showPassword, setShowPassword] = useState(false);
-
-const Container = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-`;
-
-const Label = styled.label`
-  color: var(--White-100, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const Input = styled.input`
-  display: flex;
-  max-width: ${maxWidth};
-  width: 100%;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  flex: 1 0 0;
-
-  color: var(--White-50, #cdd0d5);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-return (
-  <Container>
-    <Label htmlFor={label}>{label}</Label>
-    <div
-      className="position-relative d-flex w-100"
-      style={{ maxWidth: maxWidth }}
-    >
-      <Input
-        name={label}
-        id={label}
-        value={value}
-        onChange={onChange}
-        type={!showPassword ? type : "text"}
-        placeholder={placeholder}
-      />
-      {type === "password" && (
-        <span
-          className="position-absolute"
-          style={{
-            right: "0.5rem",
-            top: "30%",
-            transform: "translateX(-50%)",
-            color: "#fff",
-          }}
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          {showPassword ? (
-            <i className="bi bi-eye"></i>
-          ) : (
-            <i className="bi bi-eye-slash"></i>
-          )}
-        </span>
-      )}
-    </div>
-  </Container>
-);
diff --git a/apps/builddao/widget/components/input-field.jsx b/apps/builddao/widget/components/input-field.jsx
index cf66c323..5a16751c 100644
--- a/apps/builddao/widget/components/input-field.jsx
+++ b/apps/builddao/widget/components/input-field.jsx
@@ -1,16 +1,64 @@
-function InputField({ value, onChange, label, type, placeholder, maxWidth }) {
+const Container = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+  display: flex;
+  max-width: ${(props) => maxWidth ?? "390px"};
+  width: 100%;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  flex: 1 0 0;
+
+  color: var(--White-50, #cdd0d5);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function InputField({
+  type,
+  label,
+  key,
+  placeholder,
+  value,
+  onChange,
+  maxWidth,
+}) {
   return (
-    <Widget
-      src="buildhub.near/widget/components.input-field-widget"
-      props={{
-        value,
-        onChange,
-        label,
-        type,
-        placeholder,
-        maxWidth,
-      }}
-    />
+    <Container>
+      {label && <Label>{label}</Label>}
+      <Input
+        key={key}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type ?? "text"}
+        maxWidth={maxWidth}
+      />
+    </Container>
   );
 }
 
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 08ae5526..751e9f33 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -7,29 +7,24 @@ const { Step } = VM.require("buildhub.near/widget/components.step");
 const { InputField } = VM.require(
   "buildhub.near/widget/components.input-field"
 );
-const { PasswordField } = VM.require(
-  "buildhub.near/widget/components.password-field"
-);
 const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
 const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
 const { TextEditor } = VM.require(
   "buildhub.near/widget/components.text-editor"
 );
+
 const { UploadField } = VM.require(
   "buildhub.near/widget/components.upload-field"
 );
+const { User } = VM.require("buildhub.near/widget/components.user");
+const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+
+const [checked, setChecked] = useState(false);
 
 const Heading = styled.h2`
   color: white;
 `;
 
-const [value, setValue] = useState("");
-const [password, setPassword] = useState("");
-const [checked, setChecked] = useState(false);
-const [textBox, setTextBox] = useState("");
-const [textEditor, setTextEditor] = useState("");
-const [showPassword, setShowPassword] = useState(false);
-
 return (
   <div className="container-xl">
     <div className="d-flex flex-column gap-3">
@@ -61,65 +56,68 @@ return (
           <i className="bi bi-arrow-right"></i>
         </Button>
       </div>
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>Pagination</Heading>
+      <Pagination totalPages={4} selectedPage={1} />
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>Progress State</Heading>
+      <div className="d-flex align-items-center gap-3">
+        <ProgressState status="default">1</ProgressState>
+        <ProgressState status="focused">1</ProgressState>
+        <ProgressState status="error">1</ProgressState>
+        <ProgressState status="completed">1</ProgressState>
+      </div>
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>Step</Heading>
       <div className="d-flex flex-column gap-3">
-        <Heading>Pagination</Heading>
-        <Pagination totalPages={4} selectedPage={1} />
+        <Step totalSteps={5} currentStep={1} />
+        <Step totalSteps={4} currentStep={2} />
+        <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
       </div>
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>Input Field</Heading>
       <div className="d-flex flex-column gap-3">
-        <Heading>Progress State</Heading>
-        <div className="d-flex align-items-center gap-3">
-          <ProgressState status="default">1</ProgressState>
-          <ProgressState status="focused">1</ProgressState>
-          <ProgressState status="error">1</ProgressState>
-          <ProgressState status="completed">1</ProgressState>
-        </div>
+        <InputField
+          key={"Input-Label"}
+          label={"Label"}
+          placeholder={"Placeholder"}
+        />
+        <InputField
+          key={"Input-Password"}
+          label={"Password"}
+          placeholder={"Password"}
+          type={"password"}
+        />
+        <Checkbox
+          label="Checkbox"
+          value={checked}
+          onChange={(e) => setChecked(!checked)}
+        />
+        <TextBox label={"Label"} placeholder={"Placeholder"} />
+        <TextEditor />
       </div>
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>Upload Field</Heading>
       <div className="d-flex flex-column gap-3">
-        <Heading>Step</Heading>
-        <div className="d-flex flex-column gap-3">
-          <Step totalSteps={5} currentStep={1} />
-          <Step totalSteps={4} currentStep={2} />
-          <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
-        </div>
+        <UploadField />
+        <UploadField background />
       </div>
+    </div>
+    <div className="d-flex flex-column gap-3">
+      <Heading>User</Heading>
       <div className="d-flex flex-column gap-3">
-        <Heading>Input Field</Heading>
-        <div className="d-flex flex-column gap-3">
-          <InputField
-            label={"Label"}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder={"Placeholder"}
-          />
-          <PasswordField
-            label={"Password"}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder={"Password"}
-          />
-          <Checkbox
-            value={checked}
-            onChange={() => setChecked(!checked)}
-            label="Checkbox"
-          />
-          <TextBox
-            label={"Label"}
-            placeholder={"Placeholder"}
-            value={textBox}
-            onChange={(e) => setTextBox(e.target.value)}
-          />
-          <TextEditor
-            value={textEditor}
-            onChange={(e) => setTextEditor(e.target.value)}
-          />
-        </div>
+        <User accountId={"itexpert120-contra.near"} timeAgo={"1m"} />
+        <User accountId={"theori.near"} variant="mobile" timeAgo={"2s"} />
       </div>
+      <Heading>Avatar</Heading>
       <div className="d-flex flex-column gap-3">
-        <Heading>Upload Field</Heading>
-        <div className="d-flex flex-column gap-3">
-          <UploadField />
-          <UploadField background />
-        </div>
+        <Avatar />
+        <Avatar variant={"mobile"} accountId={"theori.near"} />
       </div>
     </div>
   </div>
diff --git a/apps/builddao/widget/components/pagination-widget.jsx b/apps/builddao/widget/components/pagination-widget.jsx
index 56544bce..4196eb2a 100644
--- a/apps/builddao/widget/components/pagination-widget.jsx
+++ b/apps/builddao/widget/components/pagination-widget.jsx
@@ -66,7 +66,7 @@ const getPageNumber = (index) =>
 return (
   <Pagination>
     <div
-      className={`arrow ${currentPageSet === 1 && "disabled"}`}
+      className={`arrow ${currentPageSet === 1 ? "disabled" : undefined}`}
       onClick={() => handleArrowClick("left")}
     >
       <i className="bi bi-arrow-left"></i>
@@ -76,7 +76,7 @@ return (
       return (
         <div
           key={pageNumber}
-          className={pageNumber === selectedPage && "selected"}
+          className={pageNumber === selectedPage ? "selected" : undefined}
           onClick={() => handlePageClick(pageNumber)}
         >
           {pageNumber}
@@ -85,7 +85,9 @@ return (
     })}
     <div
       className={`arrow ${
-        currentPageSet === Math.ceil(totalPages / maxVisiblePages) && "disabled"
+        currentPageSet === Math.ceil(totalPages / maxVisiblePages)
+          ? "disabled"
+          : undefined
       }`}
       onClick={() => handleArrowClick("right")}
     >
diff --git a/apps/builddao/widget/components/password-field.jsx b/apps/builddao/widget/components/password-field.jsx
deleted file mode 100644
index e966074a..00000000
--- a/apps/builddao/widget/components/password-field.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-function PasswordField({ value, onChange, label, placeholder, maxWidth }) {
-  return (
-    <Widget
-      src="buildhub.near/widget/components.input-field-widget"
-      props={{
-        value,
-        onChange,
-        label,
-        type: "password",
-        placeholder,
-        maxWidth,
-      }}
-    />
-  );
-}
-
-return { PasswordField };
diff --git a/apps/builddao/widget/components/progress-state.jsx b/apps/builddao/widget/components/progress-state.jsx
index 91d83948..f640d58e 100644
--- a/apps/builddao/widget/components/progress-state.jsx
+++ b/apps/builddao/widget/components/progress-state.jsx
@@ -50,7 +50,10 @@ const Progress = styled.div`
 
 function ProgressState({ children, status }) {
   return (
-    <Progress status={status}>
+    <Progress
+      status={status}
+      key={`ProgressState-${status ?? "default"}-${children}`}
+    >
       {status === "completed" ? (
         <i className="bi bi-check"></i>
       ) : status === "error" ? (
diff --git a/apps/builddao/widget/components/step.jsx b/apps/builddao/widget/components/step.jsx
index 5b273810..d67daaf8 100644
--- a/apps/builddao/widget/components/step.jsx
+++ b/apps/builddao/widget/components/step.jsx
@@ -34,6 +34,7 @@ function Step(props) {
     <Container
       className="d-flex align-items-center justify-content-between"
       style={{ maxWidth: "360px" }}
+      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
     >
       {Array.from({ length: totalSteps }).map((_, i) => (
         <ProgressState
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/user.jsx
new file mode 100644
index 00000000..3f27c06c
--- /dev/null
+++ b/apps/builddao/widget/components/user.jsx
@@ -0,0 +1,44 @@
+const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+
+const Wrapper = styled.div`
+  p {
+    color: #fff;
+    color: var(--White-100, #fff);
+
+    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.username {
+    color: var(--White-50, #cdd0d5);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+  }
+
+  p.time {
+    color: var(--White-100, #fff);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+  }
+`;
+
+function User(props) {
+  const accountId = props.accountId ?? context.accountId;
+  const { name: profileName } =
+    props.profile ?? Social.getr(`${accountId}/profile`);
+  const timeAgo = props.timeAgo;
+
+  return (
+    <div className="d-flex gap-1">
+      <Avatar variant={props.variant} accountId={accountId} />
+      <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+        <p>{profileName || "No-Name Profile"}</p>
+        <p className="username">{accountId}</p>
+        {timeAgo && <p className="time">{timeAgo}</p>}
+      </Wrapper>
+    </div>
+  );
+}
+
+return { User };

From 6cca585a1bf76e6b20814802660552632ed74cd9 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 03:53:00 +0500
Subject: [PATCH 10/34] Better seperation between components in library

---
 apps/builddao/widget/components/library.jsx | 34 ++++++++++++---------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 751e9f33..d605a9bb 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -27,7 +27,7 @@ const Heading = styled.h2`
 
 return (
   <div className="container-xl">
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Buttons</Heading>
       <div className="d-flex align-items-center gap-3">
         <Button>Normal</Button>
@@ -57,30 +57,30 @@ return (
         </Button>
       </div>
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Pagination</Heading>
       <Pagination totalPages={4} selectedPage={1} />
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Progress State</Heading>
-      <div className="d-flex align-items-center gap-3">
+      <div className="d-flex align-items-center gap-3 mb-3">
         <ProgressState status="default">1</ProgressState>
         <ProgressState status="focused">1</ProgressState>
         <ProgressState status="error">1</ProgressState>
         <ProgressState status="completed">1</ProgressState>
       </div>
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Step</Heading>
-      <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3 mb-3">
         <Step totalSteps={5} currentStep={1} />
         <Step totalSteps={4} currentStep={2} />
         <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
       </div>
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Input Field</Heading>
-      <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3 mb-3">
         <InputField
           key={"Input-Label"}
           label={"Label"}
@@ -101,23 +101,27 @@ return (
         <TextEditor />
       </div>
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Upload Field</Heading>
-      <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3 mb-3">
         <UploadField />
         <UploadField background />
       </div>
     </div>
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 mb-3">
       <Heading>User</Heading>
-      <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3 mb-3">
         <User accountId={"itexpert120-contra.near"} timeAgo={"1m"} />
-        <User accountId={"theori.near"} variant="mobile" timeAgo={"2s"} />
+        <User
+          accountId={"build.sputnik-dao.near"}
+          variant="mobile"
+          timeAgo={"2s"}
+        />
       </div>
       <Heading>Avatar</Heading>
-      <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3 mb-3">
         <Avatar />
-        <Avatar variant={"mobile"} accountId={"theori.near"} />
+        <Avatar variant={"mobile"} accountId={"build.sputnik-dao.near"} />
       </div>
     </div>
   </div>

From f5f5e05c9c463466793232724162840be86cd6ed Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 04:29:01 +0500
Subject: [PATCH 11/34] Add Post component, hover to buttons, and improve user
 component

---
 apps/builddao/widget/components/button.jsx  |  15 +
 apps/builddao/widget/components/library.jsx |   9 +-
 apps/builddao/widget/components/post.jsx    | 371 ++++++++++++++++++++
 apps/builddao/widget/components/user.jsx    |  67 +++-
 4 files changed, 451 insertions(+), 11 deletions(-)
 create mode 100644 apps/builddao/widget/components/post.jsx

diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
index 095779ea..dd09dcd2 100644
--- a/apps/builddao/widget/components/button.jsx
+++ b/apps/builddao/widget/components/button.jsx
@@ -7,6 +7,7 @@ const StyledButton = styled.button`
   gap: 4px;
   border-radius: 8px;
   font: 500 14px / normal;
+  transition: all 300ms;
 
   ${(props) =>
     props.type === "icon" &&
@@ -44,6 +45,20 @@ const StyledButton = styled.button`
 
   border: ${(props) =>
     props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+  /* Hover states */
+  &:hover {
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return "#e49b48";
+        case "outline":
+          return "rgba(255, 255, 255, 0.20)";
+        default:
+          return "#17181c";
+      }
+    }};
+  }
 `;
 
 function Button({ id, children, variant, type, onClick, className, style }) {
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index d605a9bb..61d88ca4 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -111,11 +111,16 @@ return (
     <div className="d-flex flex-column gap-3 mb-3">
       <Heading>User</Heading>
       <div className="d-flex flex-column gap-3 mb-3">
-        <User accountId={"itexpert120-contra.near"} timeAgo={"1m"} />
+        <User
+          accountId={"itexpert120-contra.near"}
+          isPremium={true}
+          blockHeight={"now"}
+        />
         <User
           accountId={"build.sputnik-dao.near"}
           variant="mobile"
-          timeAgo={"2s"}
+          blockHeight={"now"}
+          pinned={true}
         />
       </div>
       <Heading>Avatar</Heading>
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
new file mode 100644
index 00000000..b88e8bcc
--- /dev/null
+++ b/apps/builddao/widget/components/post.jsx
@@ -0,0 +1,371 @@
+const accountId = props.accountId;
+if (!accountId) {
+  return "No accountId";
+}
+const blockHeight =
+  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+  props.content ??
+  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+
+const notifyAccountId = accountId;
+const item = {
+  type: "social",
+  path: `${accountId}/post/main`,
+  blockHeight,
+};
+
+const link =
+  props.link ??
+  props.fullPostLink ??
+  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const StyledPost = styled.div`
+  margin-bottom: 1rem;
+  .post {
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    color: #b6b6b8;
+    padding: 24px !important;
+    background-color: #0b0c14;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #171929 !important;
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgb(23, 25, 41, 0),
+          rgb(23, 25, 41, 1) 25%
+        ) !important;
+      }
+    }
+
+    .post-header {
+      span,
+      .text-muted {
+        color: #fff !important;
+      }
+    }
+
+    .buttons {
+      border-top: 1px solid #3c3d43;
+      padding: 0.5rem;
+    }
+
+    .expand-post {
+      background-image: linear-gradient(
+        to bottom,
+        rgb(11, 12, 20, 0),
+        rgb(11, 12, 20, 1) 25%
+      ) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: #0b0c14 !important;
+    color: #fff !important;
+
+    li.dropdown-item {
+      color: #fff !important;
+      &:hover {
+        a {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: #fff !important;
+
+      &:hover {
+        color: #0b0c14 !important;
+
+        span {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+  }
+
+  textarea {
+    color: #b6b6b8 !important;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin: 0 -12px;
+  line-height: normal;
+
+  .post {
+    position: relative;
+    padding: 12px;
+    padding-bottom: 4px;
+    display: flex;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 16px !important;
+    }
+    @media (max-width: 767px) {
+      font-size: 15px !important;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 15px !important;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    b {
+      font-weight: 500 !important;
+    }
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0.5rem;
+      white-space: inherit;
+    }
+    p {
+      margin-bottom: 0.5rem;
+    }
+    hr {
+      display: none;
+    }
+    img {
+      border-radius: var(--bs-border-radius-lg);
+      max-height: 40em;
+    }
+    th {
+      min-width: 5em;
+    }
+
+    .table > :not(caption) > * > * {
+      padding: 0.3rem;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(247.35, 247.35, 247.35, 1) 25%
+        );
+      }
+    }
+
+    .post-header {
+      margin: 4px 0;
+    }
+  }
+
+  .post:not(:last-child):before {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 56px;
+    bottom: 0;
+    width: 2px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .post:not(:first-child):after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 0;
+    width: 2px;
+    height: 8px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .left {
+    margin-right: 12px;
+    min-width: 40px;
+    width: 40px;
+    overflow: hidden;
+  }
+  .right {
+    margin-top: -4px;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .buttons-placeholder {
+    padding-bottom: 10px;
+  }
+
+  .buttons {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    column-gap: 4px;
+    color: #888;
+  }
+
+  .reposted {
+    padding-top: 30px;
+  }
+`;
+
+const contentWidget = (
+  <Widget
+    key="content"
+    loading={
+      <div
+        className="overflow-hidden w-100 placeholder-glow"
+        style={{ minHeight: "100px" }}
+      />
+    }
+    src="mob.near/widget/MainPage.N.Post.Content"
+    props={{
+      content,
+      raw,
+      truncateContent: props.truncateContent,
+      noEmbed: props.noEmbed,
+    }}
+  />
+);
+
+return (
+  <StyledPost>
+    <Wrapper
+      className="w-100 mx-auto"
+      style={
+        props.hideComments || props.noBorder
+          ? undefined
+          : {
+              borderBottom: "1px solid #eee",
+            }
+      }
+    >
+      <div className={`post ${props.reposted ? "reposted" : ""}`}>
+        <div className="right d-flex flex-column gap-3">
+          <Widget
+            loading={<div className="post-header" />}
+            src="/*__@appAccount__*//widget/Post.Header"
+            props={{
+              accountId,
+              blockHeight,
+              pinned,
+              hideMenu,
+              link,
+              postType: "post",
+              flagItem: item,
+            }}
+          />
+          {fullPostLink ? (
+            <a
+              key="full-post-link"
+              target="_blank"
+              href={fullPostLink}
+              className="text-decoration-none link-dark"
+            >
+              {contentWidget}
+            </a>
+          ) : (
+            contentWidget
+          )}
+          {props.customButtons ? (
+            props.customButtons
+          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+            <div className="buttons d-flex justify-content-between">
+              <Widget
+                loading=""
+                src="mob.near/widget/N.CommentButton"
+                props={{
+                  disabled: permissions.disableComment,
+                  onClick: () => State.update({ showReply: !state.showReply }),
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/N.RepostButton"
+                props={{
+                  disable: permissions.disableRepost,
+                  notifyAccountId,
+                  item,
+                  // indexKey,
+                  // groupId,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/N.LikeButton"
+                props={{
+                  notifyAccountId,
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/MainPage.N.Post.ShareButton"
+                props={{ accountId, blockHeight, postType: "post", groupId }}
+              />
+            </div>
+          ) : (
+            <div className="buttons-placeholder" />
+          )}
+        </div>
+      </div>
+      {state.showReply && (
+        <div className="border-top">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Comment.Compose"
+            props={{
+              notifyAccountId,
+              item,
+              onComment: () => State.update({ showReply: false }),
+            }}
+          />
+        </div>
+      )}
+      {props.customComments
+        ? props.customComments
+        : !props.hideComments && (
+            <div className="ms-5 my-3">
+              <Widget
+                key="comments"
+                loading={false}
+                src="mob.near/widget/MainPage.N.Comment.Feed"
+                props={{
+                  item,
+                  highlightComment: props.highlightComment,
+                  limit: props.commentsLimit,
+                  subscribe,
+                  raw,
+                  accounts: props.commentAccounts,
+                  groupId,
+                  permissions,
+                }}
+              />
+            </div>
+          )}
+    </Wrapper>
+  </StyledPost>
+);
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/user.jsx
index 3f27c06c..826c13ee 100644
--- a/apps/builddao/widget/components/user.jsx
+++ b/apps/builddao/widget/components/user.jsx
@@ -27,17 +27,66 @@ function User(props) {
   const accountId = props.accountId ?? context.accountId;
   const { name: profileName } =
     props.profile ?? Social.getr(`${accountId}/profile`);
-  const timeAgo = props.timeAgo;
+  const blockHeight = props.blockHeight;
+  const pinned = !!props.pinned;
+  const postType = props.postType ?? "post";
+  const link = props.link;
+  const isPremium = !!props.isPremium;
+
+  const Overlay = (props) => (
+    <a
+      className="link-dark text-truncate d-inline-flex mw-100"
+      href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+    >
+      <Widget
+        src="mob.near/widget/Profile.N.OverlayTrigger"
+        loading={props.children}
+        props={{
+          accountId,
+          children: props.children,
+        }}
+      />
+    </a>
+  );
 
   return (
-    <div className="d-flex gap-1">
-      <Avatar variant={props.variant} accountId={accountId} />
-      <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-        <p>{profileName || "No-Name Profile"}</p>
-        <p className="username">{accountId}</p>
-        {timeAgo && <p className="time">{timeAgo}</p>}
-      </Wrapper>
-    </div>
+    <Overlay>
+      <div className="d-flex gap-1">
+        <Avatar variant={props.variant} accountId={accountId} />
+        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+          <div className="d-flex align-items-center gap-1">
+            <p>{profileName || "No-Name Profile"}</p>
+
+            <div className="flex-shrink-0">
+              <Widget
+                loading={""}
+                src="mob.near/widget/Checkmark"
+                props={{ isPremium, accountId }}
+              />
+            </div>
+          </div>
+          <p className="username">{accountId}</p>
+          <p className="time">
+            {blockHeight === "now" ? (
+              "now"
+            ) : (
+              <a className="text-white" href={link}>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/TimeAgo"
+                  props={{ blockHeight }}
+                />
+              </a>
+            )}
+          </p>
+        </Wrapper>
+        {pinned && (
+          <span title="Pinned" className="ms-2">
+            <i className="bi bi-pin-angle" />
+          </span>
+        )}
+      </div>
+    </Overlay>
   );
 }
 

From 618e2ad54edebf2019039df086bc1c5c824f1422 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 05:09:25 +0500
Subject: [PATCH 12/34] Post component

---
 apps/builddao/widget/components/avatar.jsx  |  11 +
 apps/builddao/widget/components/library.jsx |  22 +-
 apps/builddao/widget/components/post.jsx    | 331 ++++++++++----------
 apps/builddao/widget/components/user.jsx    | 160 ++++++++--
 4 files changed, 326 insertions(+), 198 deletions(-)

diff --git a/apps/builddao/widget/components/avatar.jsx b/apps/builddao/widget/components/avatar.jsx
index babcbddb..01614d43 100644
--- a/apps/builddao/widget/components/avatar.jsx
+++ b/apps/builddao/widget/components/avatar.jsx
@@ -13,6 +13,17 @@ const ImageWrapper = styled.div`
     width: auto !important;
     height: auto !important;
   }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      img {
+        width: 40px !important;
+        height: 40px !important;
+      }
+    `}
+  }
 `;
 
 function Avatar(props) {
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 61d88ca4..0c2a4241 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -18,6 +18,7 @@ const { UploadField } = VM.require(
 );
 const { User } = VM.require("buildhub.near/widget/components.user");
 const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+const { Post } = VM.require("buildhub.near/widget/components.post");
 
 const [checked, setChecked] = useState(false);
 
@@ -113,8 +114,10 @@ return (
       <div className="d-flex flex-column gap-3 mb-3">
         <User
           accountId={"itexpert120-contra.near"}
+          variant={"desktop"}
           isPremium={true}
-          blockHeight={"now"}
+          blockHeight={1231231231}
+          hideMenu={true}
         />
         <User
           accountId={"build.sputnik-dao.near"}
@@ -125,9 +128,24 @@ return (
       </div>
       <Heading>Avatar</Heading>
       <div className="d-flex flex-column gap-3 mb-3">
-        <Avatar />
+        <Avatar variant={"desktop"} />
         <Avatar variant={"mobile"} accountId={"build.sputnik-dao.near"} />
       </div>
     </div>
+    <div className="d-flex flex-column gap-3 mb-3">
+      <Heading>Post</Heading>
+      <div className="d-flex flex-column gap-3">
+        <Post
+          accountId={"pichtran.near"}
+          blockHeight={109572965}
+          noBorder={true}
+        />
+        <Post
+          accountId={"itexpert120-contra.near"}
+          blockHeight={109609914}
+          noBorder={true}
+        />
+      </div>
+    </div>
   </div>
 );
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
index b88e8bcc..6f9a3fbe 100644
--- a/apps/builddao/widget/components/post.jsx
+++ b/apps/builddao/widget/components/post.jsx
@@ -1,33 +1,4 @@
-const accountId = props.accountId;
-if (!accountId) {
-  return "No accountId";
-}
-const blockHeight =
-  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
-const hideButtons = !!props.hideButtons;
-const content =
-  props.content ??
-  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
-const subscribe = !!props.subscribe;
-const raw = !!props.raw;
-const groupId = props.groupId ?? content.groupId;
-const indexKey = props.indexKey;
-const permissions = props.permissions;
-const fullPostLink = props.fullPostLink;
-
-const notifyAccountId = accountId;
-const item = {
-  type: "social",
-  path: `${accountId}/post/main`,
-  blockHeight,
-};
-
-const link =
-  props.link ??
-  props.fullPostLink ??
-  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+const { User } = VM.require("buildhub.near/widget/components.user");
 
 const StyledPost = styled.div`
   margin-bottom: 1rem;
@@ -232,140 +203,172 @@ const Wrapper = styled.div`
   }
 `;
 
-const contentWidget = (
-  <Widget
-    key="content"
-    loading={
-      <div
-        className="overflow-hidden w-100 placeholder-glow"
-        style={{ minHeight: "100px" }}
-      />
-    }
-    src="mob.near/widget/MainPage.N.Post.Content"
-    props={{
-      content,
-      raw,
-      truncateContent: props.truncateContent,
-      noEmbed: props.noEmbed,
-    }}
-  />
-);
+function Post(props) {
+  const accountId = props.accountId;
+  if (!accountId) {
+    return "No accountId";
+  }
+  const blockHeight =
+    props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+  const pinned = !!props.pinned;
+  const hideMenu = !!props.hideMenu;
+  const hideButtons = !!props.hideButtons;
+  const content =
+    props.content ??
+    JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+  const subscribe = !!props.subscribe;
+  const raw = !!props.raw;
+  const groupId = props.groupId ?? content.groupId;
+  const indexKey = props.indexKey;
+  const permissions = props.permissions;
+  const fullPostLink = props.fullPostLink;
+
+  const notifyAccountId = accountId;
+  const item = {
+    type: "social",
+    path: `${accountId}/post/main`,
+    blockHeight,
+  };
 
-return (
-  <StyledPost>
-    <Wrapper
-      className="w-100 mx-auto"
-      style={
-        props.hideComments || props.noBorder
-          ? undefined
-          : {
-              borderBottom: "1px solid #eee",
-            }
+  const link =
+    props.link ??
+    props.fullPostLink ??
+    `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+  const contentWidget = (
+    <Widget
+      key="content"
+      loading={
+        <div
+          className="overflow-hidden w-100 placeholder-glow"
+          style={{ minHeight: "100px" }}
+        />
       }
-    >
-      <div className={`post ${props.reposted ? "reposted" : ""}`}>
-        <div className="right d-flex flex-column gap-3">
-          <Widget
-            loading={<div className="post-header" />}
-            src="/*__@appAccount__*//widget/Post.Header"
-            props={{
-              accountId,
-              blockHeight,
-              pinned,
-              hideMenu,
-              link,
-              postType: "post",
-              flagItem: item,
-            }}
-          />
-          {fullPostLink ? (
-            <a
-              key="full-post-link"
-              target="_blank"
-              href={fullPostLink}
-              className="text-decoration-none link-dark"
-            >
-              {contentWidget}
-            </a>
-          ) : (
-            contentWidget
-          )}
-          {props.customButtons ? (
-            props.customButtons
-          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
-            <div className="buttons d-flex justify-content-between">
-              <Widget
-                loading=""
-                src="mob.near/widget/N.CommentButton"
-                props={{
-                  disabled: permissions.disableComment,
-                  onClick: () => State.update({ showReply: !state.showReply }),
-                }}
-              />
-              <Widget
-                loading=""
-                src="mob.near/widget/N.RepostButton"
-                props={{
-                  disable: permissions.disableRepost,
-                  notifyAccountId,
-                  item,
-                  // indexKey,
-                  // groupId,
-                }}
-              />
-              <Widget
-                loading=""
-                src="mob.near/widget/N.LikeButton"
-                props={{
-                  notifyAccountId,
-                  item,
-                }}
-              />
-              <Widget
-                loading=""
-                src="mob.near/widget/MainPage.N.Post.ShareButton"
-                props={{ accountId, blockHeight, postType: "post", groupId }}
-              />
-            </div>
-          ) : (
-            <div className="buttons-placeholder" />
-          )}
-        </div>
-      </div>
-      {state.showReply && (
-        <div className="border-top">
-          <Widget
-            loading=""
-            src="mob.near/widget/MainPage.N.Comment.Compose"
-            props={{
-              notifyAccountId,
-              item,
-              onComment: () => State.update({ showReply: false }),
-            }}
-          />
+      src="mob.near/widget/MainPage.N.Post.Content"
+      props={{
+        content,
+        raw,
+        truncateContent: props.truncateContent,
+        noEmbed: props.noEmbed,
+      }}
+    />
+  );
+
+  return (
+    <StyledPost>
+      <Wrapper
+        className="w-100 mx-auto"
+        style={
+          props.hideComments || props.noBorder
+            ? undefined
+            : {
+                borderBottom: "1px solid #eee",
+              }
+        }
+      >
+        <div className={`post ${props.reposted ? "reposted" : ""}`}>
+          <div className="right d-flex flex-column gap-3">
+            <User
+              accountId={accountId}
+              blockHeight={blockHeight}
+              pinned={pinned}
+              hideMenu={hideMenu}
+              link={link}
+              postType={"post"}
+              flagItem={item}
+            />
+            {fullPostLink ? (
+              <a
+                key="full-post-link"
+                target="_blank"
+                href={fullPostLink}
+                className="text-decoration-none link-dark"
+              >
+                {contentWidget}
+              </a>
+            ) : (
+              contentWidget
+            )}
+            {props.customButtons ? (
+              props.customButtons
+            ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+              <div className="buttons d-flex justify-content-between">
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.CommentButton"
+                  props={{
+                    disabled: permissions.disableComment,
+                    onClick: () =>
+                      State.update({ showReply: !state.showReply }),
+                  }}
+                />
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.RepostButton"
+                  props={{
+                    disable: permissions.disableRepost,
+                    notifyAccountId,
+                    item,
+                    // indexKey,
+                    // groupId,
+                  }}
+                />
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.LikeButton"
+                  props={{
+                    notifyAccountId,
+                    item,
+                  }}
+                />
+                <Widget
+                  loading=""
+                  src="mob.near/widget/MainPage.N.Post.ShareButton"
+                  props={{ accountId, blockHeight, postType: "post", groupId }}
+                />
+              </div>
+            ) : (
+              <div className="buttons-placeholder" />
+            )}
+          </div>
         </div>
-      )}
-      {props.customComments
-        ? props.customComments
-        : !props.hideComments && (
-            <div className="ms-5 my-3">
-              <Widget
-                key="comments"
-                loading={false}
-                src="mob.near/widget/MainPage.N.Comment.Feed"
-                props={{
-                  item,
-                  highlightComment: props.highlightComment,
-                  limit: props.commentsLimit,
-                  subscribe,
-                  raw,
-                  accounts: props.commentAccounts,
-                  groupId,
-                  permissions,
-                }}
-              />
-            </div>
-          )}
-    </Wrapper>
-  </StyledPost>
-);
+        {state.showReply && (
+          <div className="border-top">
+            <Widget
+              loading=""
+              src="mob.near/widget/MainPage.N.Comment.Compose"
+              props={{
+                notifyAccountId,
+                item,
+                onComment: () => State.update({ showReply: false }),
+              }}
+            />
+          </div>
+        )}
+        {props.customComments
+          ? props.customComments
+          : !props.hideComments && (
+              <div className="ms-5 my-3">
+                <Widget
+                  key="comments"
+                  loading={false}
+                  src="mob.near/widget/MainPage.N.Comment.Feed"
+                  props={{
+                    item,
+                    highlightComment: props.highlightComment,
+                    limit: props.commentsLimit,
+                    subscribe,
+                    raw,
+                    accounts: props.commentAccounts,
+                    groupId,
+                    permissions,
+                  }}
+                />
+              </div>
+            )}
+      </Wrapper>
+    </StyledPost>
+  );
+}
+
+return { Post };
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/user.jsx
index 826c13ee..aa7e3fbb 100644
--- a/apps/builddao/widget/components/user.jsx
+++ b/apps/builddao/widget/components/user.jsx
@@ -1,6 +1,45 @@
 const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
 
+const Button = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: #6c757d;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: DeepSkyBlue;
+
+    .icon:before {
+      background: rgba(0, 191, 255, 0.1);
+    }
+  }
+`;
+
 const Wrapper = styled.div`
+  color: #fff;
+
   p {
     color: #fff;
     color: var(--White-100, #fff);
@@ -15,11 +54,31 @@ const Wrapper = styled.div`
   p.username {
     color: var(--White-50, #cdd0d5);
     font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
   }
 
   p.time {
     color: var(--White-100, #fff);
     font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      p {
+        font-size: 13px !important;
+      }
+
+      p.username {
+        font-size: 10px !important;
+      }
+
+      p.time {
+        font-size: 10px !important;
+      }
+    `}
   }
 `;
 
@@ -30,8 +89,10 @@ function User(props) {
   const blockHeight = props.blockHeight;
   const pinned = !!props.pinned;
   const postType = props.postType ?? "post";
+  const flagItem = props.flagItem;
   const link = props.link;
   const isPremium = !!props.isPremium;
+  const hideMenu = !!props.hideMenu;
 
   const Overlay = (props) => (
     <a
@@ -50,43 +111,78 @@ function User(props) {
   );
 
   return (
-    <Overlay>
-      <div className="d-flex gap-1">
-        <Avatar variant={props.variant} accountId={accountId} />
-        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-          <div className="d-flex align-items-center gap-1">
-            <p>{profileName || "No-Name Profile"}</p>
-
-            <div className="flex-shrink-0">
+    <div className="d-flex align-items-center">
+      <Overlay>
+        <div className="d-flex gap-1">
+          <Avatar variant={props.variant} accountId={accountId} />
+          <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+            <div className="d-flex align-items-center g-1">
+              <p className="m-0">{profileName || "No-Name Profile"}</p>
+              <div className="flex-shrink-0">
+                <Widget
+                  loading={""}
+                  src="mob.near/widget/Checkmark"
+                  props={{ isPremium, accountId }}
+                />
+              </div>
+            </div>
+            <p className="username">{accountId}</p>
+            <p className="time">
+              {blockHeight === "now" ? (
+                "now"
+              ) : (
+                <a className="text-white" href={link}>
+                  <Widget
+                    loading=""
+                    src="mob.near/widget/TimeAgo"
+                    props={{ blockHeight }}
+                  />
+                </a>
+              )}
+            </p>
+          </Wrapper>
+          {pinned && (
+            <span title="Pinned" className="ms-2">
+              <i className="bi bi-pin-angle" />
+            </span>
+          )}
+        </div>
+      </Overlay>
+      {!pinned && !hideMenu && blockHeight !== "now" && (
+        <span className="ms-auto flex-shrink-0">
+          <Button data-bs-toggle="dropdown" aria-expanded="false">
+            <i className="bi bi-three-dots-vertical"></i>
+          </Button>
+          <ul className="dropdown-menu">
+            <li className="dropdown-item">
+              <a
+                className="link-dark text-decoration-none"
+                href={`${link}&raw=true`}
+              >
+                <i className="bi bi-filetype-raw" /> View raw markdown source
+              </a>
+            </li>
+            <li>
               <Widget
-                loading={""}
-                src="mob.near/widget/Checkmark"
-                props={{ isPremium, accountId }}
+                src="mob.near/widget/MainPage.Common.HideAccount"
+                props={{ accountId }}
               />
-            </div>
-          </div>
-          <p className="username">{accountId}</p>
-          <p className="time">
-            {blockHeight === "now" ? (
-              "now"
-            ) : (
-              <a className="text-white" href={link}>
+            </li>
+            {flagItem && (
+              <li>
                 <Widget
-                  loading=""
-                  src="mob.near/widget/TimeAgo"
-                  props={{ blockHeight }}
+                  src="mob.near/widget/MainPage.Common.FlagContent"
+                  props={{
+                    item: flagItem,
+                    label: `Flag ${postType} for moderation`,
+                  }}
                 />
-              </a>
+              </li>
             )}
-          </p>
-        </Wrapper>
-        {pinned && (
-          <span title="Pinned" className="ms-2">
-            <i className="bi bi-pin-angle" />
-          </span>
-        )}
-      </div>
-    </Overlay>
+          </ul>
+        </span>
+      )}
+    </div>
   );
 }
 

From 50a5dc2ca32a8268d1c890e07876e325fca756d9 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 22:28:59 +0500
Subject: [PATCH 13/34] Change post bg color

---
 apps/builddao/widget/components/post.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
index 6f9a3fbe..31df1b99 100644
--- a/apps/builddao/widget/components/post.jsx
+++ b/apps/builddao/widget/components/post.jsx
@@ -7,7 +7,7 @@ const StyledPost = styled.div`
     border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
     color: #b6b6b8;
     padding: 24px !important;
-    background-color: #0b0c14;
+    background-color: #23242b;
     transition: all 300ms;
 
     &:hover {

From 5549f949d9c3c779e97e742f4e68c2d73e4d5c29 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 23:03:29 +0500
Subject: [PATCH 14/34] Add bookmark button to posts

---
 apps/builddao/widget/components/library.jsx   |   6 +-
 apps/builddao/widget/components/post.jsx      |  92 +++++++---
 .../components/post/bookmark-button.jsx       | 173 ++++++++++++++++++
 3 files changed, 240 insertions(+), 31 deletions(-)
 create mode 100644 apps/builddao/widget/components/post/bookmark-button.jsx

diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 0c2a4241..a19046be 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -135,11 +135,7 @@ return (
     <div className="d-flex flex-column gap-3 mb-3">
       <Heading>Post</Heading>
       <div className="d-flex flex-column gap-3">
-        <Post
-          accountId={"pichtran.near"}
-          blockHeight={109572965}
-          noBorder={true}
-        />
+        <Post accountId={"efiz.near"} blockHeight={109505036} noBorder={true} />
         <Post
           accountId={"itexpert120-contra.near"}
           blockHeight={109609914}
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
index 31df1b99..45c87960 100644
--- a/apps/builddao/widget/components/post.jsx
+++ b/apps/builddao/widget/components/post.jsx
@@ -11,12 +11,12 @@ const StyledPost = styled.div`
     transition: all 300ms;
 
     &:hover {
-      background-color: #171929 !important;
+      background-color: #1c1f33 !important;
       .expand-post {
         background-image: linear-gradient(
           to bottom,
-          rgb(23, 25, 41, 0),
-          rgb(23, 25, 41, 1) 25%
+          rgba(28, 31, 51, 0),
+          rgba(28, 31, 51, 1) 25%
         ) !important;
       }
     }
@@ -36,8 +36,8 @@ const StyledPost = styled.div`
     .expand-post {
       background-image: linear-gradient(
         to bottom,
-        rgb(11, 12, 20, 0),
-        rgb(11, 12, 20, 1) 25%
+        rgba(35, 36, 43, 0),
+        rgba(35, 36, 43, 1) 25%
       ) !important;
     }
   }
@@ -203,6 +203,21 @@ const Wrapper = styled.div`
   }
 `;
 
+const RepostWidgetDesktop = styled.div`
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const RepostWidgetMobile = styled.div`
+  display: none;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+
 function Post(props) {
   const accountId = props.accountId;
   if (!accountId) {
@@ -236,22 +251,38 @@ function Post(props) {
     `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
 
   const contentWidget = (
-    <Widget
-      key="content"
-      loading={
-        <div
-          className="overflow-hidden w-100 placeholder-glow"
-          style={{ minHeight: "100px" }}
+    <>
+      <Widget
+        key="content"
+        loading={
+          <div
+            className="overflow-hidden w-100 placeholder-glow"
+            style={{ minHeight: "100px" }}
+          />
+        }
+        src="mob.near/widget/MainPage.N.Post.Content"
+        props={{
+          content,
+          raw,
+          truncateContent: props.truncateContent,
+          noEmbed: props.noEmbed,
+        }}
+      />
+      <RepostWidgetMobile>
+        <Widget
+          loading=""
+          src="mob.near/widget/N.RepostButton"
+          props={{
+            disable: permissions.disableRepost,
+            notifyAccountId,
+            item,
+            // indexKey,
+            // groupId,
+          }}
         />
-      }
-      src="mob.near/widget/MainPage.N.Post.Content"
-      props={{
-        content,
-        raw,
-        truncateContent: props.truncateContent,
-        noEmbed: props.noEmbed,
-      }}
-    />
+        <span>Repost Feed</span>
+      </RepostWidgetMobile>
+    </>
   );
 
   return (
@@ -302,22 +333,31 @@ function Post(props) {
                       State.update({ showReply: !state.showReply }),
                   }}
                 />
+                <RepostWidgetDesktop>
+                  <Widget
+                    loading=""
+                    src="mob.near/widget/N.RepostButton"
+                    props={{
+                      disable: permissions.disableRepost,
+                      notifyAccountId,
+                      item,
+                      // indexKey,
+                      // groupId,
+                    }}
+                  />
+                </RepostWidgetDesktop>
                 <Widget
                   loading=""
-                  src="mob.near/widget/N.RepostButton"
+                  src="mob.near/widget/N.LikeButton"
                   props={{
-                    disable: permissions.disableRepost,
                     notifyAccountId,
                     item,
-                    // indexKey,
-                    // groupId,
                   }}
                 />
                 <Widget
                   loading=""
-                  src="mob.near/widget/N.LikeButton"
+                  src="buildhub.near/widget/components.post.bookmark-button"
                   props={{
-                    notifyAccountId,
                     item,
                   }}
                 />
diff --git a/apps/builddao/widget/components/post/bookmark-button.jsx b/apps/builddao/widget/components/post/bookmark-button.jsx
new file mode 100644
index 00000000..693f3e3c
--- /dev/null
+++ b/apps/builddao/widget/components/post/bookmark-button.jsx
@@ -0,0 +1,173 @@
+const item = props.item;
+
+if (!item) {
+  return "";
+}
+
+useEffect(() => {
+  State.update({ hasBookmark: null });
+}, [item]);
+
+const bookmarks = Social.index("bookmark", item);
+
+const dataLoading = bookmarks === null;
+
+const bookmarksByUsers = {};
+
+(bookmarks || []).forEach((bookmark) => {
+  if (bookmark.value.type === "bookmark") {
+    bookmarksByUsers[bookmark.accountId] = bookmark;
+  } else if (bookmark.value.type === "unbookmark") {
+    delete bookmarksByUsers[bookmark.accountId];
+  }
+});
+if (state.hasBookmark === true) {
+  bookmarksByUsers[context.accountId] = {
+    accountId: context.accountId,
+  };
+} else if (state.hasBookmark === false) {
+  delete bookmarksByUsers[context.accountId];
+}
+
+const accountsWithBookmarks = Object.keys(bookmarksByUsers);
+const likeCount = accountsWithBookmarks.length;
+const hasBookmark = context.accountId && !!bookmarksByUsers[context.accountId];
+
+const bookmarkSvg = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.16671 1.66667H15.8334C16.2936 1.66667 16.6667 2.03977 16.6667 2.50001V18.4528C16.6667 18.6828 16.4801 18.8695 16.25 18.8695C16.1718 18.8695 16.095 18.8473 16.0287 18.8058L10 15.0261L3.97137 18.8058C3.7764 18.928 3.51926 18.8691 3.39702 18.6741C3.35543 18.6078 3.33337 18.5311 3.33337 18.4528V2.50001C3.33337 2.03977 3.70647 1.66667 4.16671 1.66667ZM15 3.33334H5.00004V16.1937L10 13.0589L15 16.1937V3.33334Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const bookmarkFillSvg = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="#FFAF51"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.16671 1.66675H15.8334C16.2936 1.66675 16.6667 2.03985 16.6667 2.50008V18.4528C16.6667 18.6829 16.4801 18.8696 16.25 18.8696C16.1718 18.8696 16.095 18.8474 16.0287 18.8058L10 15.0262L3.97137 18.8058C3.7764 18.9281 3.51926 18.8692 3.39702 18.6742C3.35543 18.6078 3.33337 18.5312 3.33337 18.4528V2.50008C3.33337 2.03985 3.70647 1.66675 4.16671 1.66675ZM15 3.33341H5.00004V16.1937L10 13.059L15 16.1937V3.33341Z"
+      fill="#FFAF51"
+    />
+  </svg>
+);
+
+const BookmarkButton = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: inherit;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  .count {
+    margin-left: 8px;
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: #ffaf51;
+
+    .icon:before {
+      background: rgba(255, 175, 81, 0.1);
+    }
+  }
+  .bookmarked {
+    color: #ffaf51;
+  }
+
+  .loading {
+    @keyframes scaleAnimation {
+      0%,
+      100% {
+        transform: scale(1) rotate(0deg);
+      }
+      25% {
+        transform: scale(1.2) rotate(-15deg);
+      }
+      50% {
+        transform: scale(1) rotate(0deg);
+      }
+      75% {
+        transform: scale(1.2) rotate(15deg);
+      }
+    }
+
+    transform-origin: center;
+    animation: scaleAnimation 1s ease-in-out infinite;
+  }
+`;
+
+const likeClick = () => {
+  if (state.loading || dataLoading || !context.accountId) {
+    return;
+  }
+  State.update({
+    loading: true,
+  });
+  const data = {
+    index: {
+      bookmark: JSON.stringify({
+        key: item,
+        value: {
+          type: hasBookmark ? "unbookmark" : "bookmark",
+        },
+      }),
+    },
+  };
+
+  Social.set(data, {
+    onCommit: () => State.update({ loading: false, hasBookmark: !hasBookmark }),
+    onCancel: () => State.update({ loading: false }),
+  });
+};
+
+const title = hasBookmark ? "Unbookmark" : "Bookmark";
+
+return (
+  <div className="d-inline-flex align-items-center">
+    <BookmarkButton
+      disabled={state.loading || dataLoading || !context.accountId}
+      title={title}
+      onClick={likeClick}
+    >
+      <span
+        className={`icon ${state.loading ? "loading " : ""}${
+          hasBookmark ? "bookmarked" : ""
+        }`}
+      >
+        {hasBookmark ? bookmarkFillSvg : bookmarkSvg}
+      </span>
+    </BookmarkButton>
+  </div>
+);

From 0c716db2c09db70101b5c454e79db82ef8d4eec4 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 23:05:09 +0500
Subject: [PATCH 15/34] Fix no gap between login prompt and posts

---
 apps/builddao/widget/components/login-now.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/builddao/widget/components/login-now.jsx b/apps/builddao/widget/components/login-now.jsx
index 679b3377..cd5c619e 100644
--- a/apps/builddao/widget/components/login-now.jsx
+++ b/apps/builddao/widget/components/login-now.jsx
@@ -1,5 +1,3 @@
-console.log(props);
-
 const Container = styled.div`
   background-color: #23242b;
   color: #ffffff;
@@ -12,6 +10,8 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
 
+  margin-bottom: 1rem;
+
   button {
     all: unset;
     cursor: pointer;

From e3f89c919dfea9c50913deaca35ebe74e4a9e8dc Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Fri, 5 Jan 2024 23:37:26 +0500
Subject: [PATCH 16/34] Improvements

---
 .../widget/components/text-editor.jsx         |  2 --
 apps/builddao/widget/section/footer.jsx       | 22 +++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/builddao/widget/components/text-editor.jsx b/apps/builddao/widget/components/text-editor.jsx
index ae539b86..ca0ad013 100644
--- a/apps/builddao/widget/components/text-editor.jsx
+++ b/apps/builddao/widget/components/text-editor.jsx
@@ -1,5 +1,3 @@
-const content = "asdasdasdasd";
-
 const TextareaWrapper = styled.div`
   display: grid;
   vertical-align: top;
diff --git a/apps/builddao/widget/section/footer.jsx b/apps/builddao/widget/section/footer.jsx
index ca06163a..516489c4 100644
--- a/apps/builddao/widget/section/footer.jsx
+++ b/apps/builddao/widget/section/footer.jsx
@@ -53,18 +53,18 @@ const TelegramIcon = (
   >
     <g
       fill="#ffffff"
-      fill-rule="nonzero"
+      fillRule="nonzero"
       stroke="none"
-      stroke-width="1"
-      stroke-linecap="butt"
-      stroke-linejoin="miter"
-      stroke-miterlimit="10"
-      stroke-dasharray=""
-      stroke-dashoffset="0"
-      font-family="none"
-      font-weight="none"
-      font-size="none"
-      text-anchor="none"
+      strokeWidth="1"
+      strokeLinecap="butt"
+      strokeLinejoin="miter"
+      strokeMiterlimit="10"
+      strokeDasharray=""
+      strokeDashoffset="0"
+      fontFamily="none"
+      fontWeight="none"
+      fontSize="none"
+      textAnchor="none"
       style={{ "mix-blend-mode": "normal" }}
     >
       <g transform="scale(5.12,5.12)">

From 5d23c8e7c23a2cbfbe0239d794830a6818bfcfaf Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Sat, 6 Jan 2024 00:23:24 +0500
Subject: [PATCH 17/34] Replace Widgets with library components and some fixes

---
 apps/builddao/widget/Aside.jsx                |  83 +---
 apps/builddao/widget/Compose.jsx              | 123 +-----
 apps/builddao/widget/Feed.jsx                 |   3 +
 apps/builddao/widget/components/button.jsx    |   2 +-
 .../widget/components/post-widget.jsx         | 408 +++++++++++++++++
 apps/builddao/widget/components/post.jsx      | 412 +-----------------
 .../widget/components/user-widget.jsx         | 184 ++++++++
 apps/builddao/widget/components/user.jsx      | 187 +-------
 apps/builddao/widget/resources-aside.jsx      |  63 +--
 9 files changed, 653 insertions(+), 812 deletions(-)
 create mode 100644 apps/builddao/widget/components/post-widget.jsx
 create mode 100644 apps/builddao/widget/components/user-widget.jsx

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index 94fcfb53..cb1c87eb 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -1,3 +1,5 @@
+const { Button } = VM.require("buildhub.near/widget/components.button");
+
 const Container = styled.div`
   border-radius: 16px;
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
@@ -18,67 +20,20 @@ const Container = styled.div`
   }
 `;
 
-const TabButton = styled.button`
-  all: unset;
-  display: flex;
-  flex-shrink: 0;
-  padding: 8px 12px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-
-  @media screen and (max-width: 768px) {
-    align-self: auto;
-  }
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-
-  color: var(--white-50, rgba(255, 255, 255, 0.7));
-
-  /* Body/14px */
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 23.8px */
-
-  transition: all 300ms;
-
-  &:hover,
-  &:active,
-  &.active {
-    border-radius: 8px;
-    background: var(--Yellow, #ffaf51) !important;
-
-    color: var(--black-100, #000) !important;
-    cursor: pointer;
-
-    /* Body/14px */
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 170%; /* 23.8px */
-
-    svg {
-      filter: invert(1);
-    }
-  }
-`;
-
-const Aside = (props) => {
-  return (
-    <Container>
-      {Object.keys(props.routes || {}).map((route) => (
-        <TabButton
-          className={props.active === route && "active"}
-          onClick={() => props.setActiveRoute(route)}
-        >
-          <i className={`bi ${props.routes[route].icon}`}></i>
-          {props.routes[route].label}
-        </TabButton>
-      ))}
-    </Container>
-  );
-};
-
-return { Aside };
+return (
+  <Container>
+    {Object.keys(props.feeds || {}).map((feed) => (
+      <Button
+        variant={props.currentFeed === feed ? "primary" : "outline"}
+        onClick={() => props.setCurrentFeed(feed)}
+        className={
+          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+        }
+        style={{ fontSize: "14px" }}
+      >
+        <i className={`bi ${props.feedsDict[feed].icon}`}></i>
+        {props.feedsDict[feed].label}
+      </Button>
+    ))}
+  </Container>
+);
diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 8fb6d1a8..228347f9 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -1,3 +1,5 @@
+const { User, Button } = VM.require("buildhub.near/widget/components");
+
 const draftKey = props.feed.name || "draft";
 const draft = Storage.privateGet(draftKey);
 
@@ -236,13 +238,18 @@ const TextareaWrapper = styled.div`
 `;
 
 const MarkdownEditor = `
+  html {
+    background: #23242b;
+  }
+
   * {
     border: none !important;
   }
 
   .rc-md-editor {
     background: #4f5055;
-    border-top: 1px solid #4f5055 !important; 
+    border-top: 1px solid #4f5055 !important;
+    border-radius: 8px;
   }
 
   .editor-container {
@@ -268,6 +275,7 @@ const MarkdownEditor = `
 
     border: 1px solid #4f5055 !important;
     border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
   }
 
   .rc-md-navigation {
@@ -275,63 +283,22 @@ const MarkdownEditor = `
     border: 1px solid #4f5055 !important;
     border-top: 0 !important;
     border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
   
     i {
       color: #cdd0d5;
     }
   }
 
+  .editor-container {
+    border-radius: 0 0 8px 8px;
+  }
+
   .rc-md-editor .editor-container .sec-md .input {
     overflow-y: auto;
     padding: 8px !important;
     line-height: normal;
-  }
-`;
-
-const Button = styled.button`
-  all: unset;
-  display: flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 8px;
-  background: var(--Yellow, #ffaf51);
-
-  color: var(--black-100, #000);
-
-  /* Other/Button_text */
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-const SecondaryButton = styled.button`
-  all: unset;
-  display: flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 8px;
-  border: 1px solid var(--white-100, #fff);
-  background: transparent;
-  color: var(--white-100, #fff);
-
-  /* Other/Button_text */
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-
-  transition: all 300ms;
-
-  &:hover {
-    background: #fff;
-    color: #000;
+    border-radius: 0 0 8px 8px;
   }
 `;
 
@@ -374,23 +341,7 @@ const LabelSelect = styled.div`
 return (
   <PostCreator>
     <div className="d-flex gap-3">
-      <Widget
-        src="mob.near/widget/ProfileImage"
-        props={{
-          accountId: context.accountId,
-          tooltip: false,
-          link: true,
-          style: imgWrapperStyle,
-          imageClassName: "rounded-circle w-100 h-100",
-        }}
-      />
-      <div
-        className="d-flex flex-column"
-        style={{ color: "white", fontSize: 16 }}
-      >
-        <p className="fw-bold m-0">{name}</p>
-        <p className="m-0">@{context.accountId}</p>
-      </div>
+      <User accountId={context.accountId} blockHeight={"now"} />
     </div>
 
     <div style={{ border: "none" }}>
@@ -422,44 +373,9 @@ return (
       )}
     </div>
 
-    {/* {view === "editor" && (
-      <div style={{ color: "white" }}>
-        <div
-          className="d-flex justify-content-between align-items-center"
-          onClick={() => setHideAdvanced(!hideAdvanced)}
-          style={{ cursor: "pointer" }}
-        >
-          <h6 className="fw-bold">Advanced</h6>
-          <i className={`bi bi-chevron-${hideAdvanced ? "up" : "down"}`}></i>
-        </div>
-
-        <LabelSelect
-          className={`d-${hideAdvanced ? "none" : "flex"} flex-column mt-3`}
-        >
-          <Widget
-            src="discover.near/widget/Inputs.MultiSelect"
-            props={{
-              label: "Labels",
-              placeholder: "Near.social, Widget, NEP, Standard, Protocol, Tool",
-              options: [
-                "Near.social",
-                "Widget",
-                "NEP",
-                "Standard",
-                "Protocol",
-                "Tool",
-              ],
-              labelKey: "labels",
-              value: labels,
-              onChange: setLabels,
-            }}
-          />
-        </LabelSelect>
-      </div>
-    )} */}
-
     <div className="d-flex gap-3 align-self-end">
-      <SecondaryButton
+      <Button
+        variant="outline"
         onClick={() => setView(view === "editor" ? "preview" : "editor")}
       >
         {view === "editor" ? (
@@ -471,8 +387,9 @@ return (
             Edit <i className="bi bi-pencil-square"></i>
           </>
         )}
-      </SecondaryButton>
+      </Button>
       <Button
+        variant="primary"
         onClick={() =>
           postToCustomFeed({ feed: props.feed, text: postContent, labels })
         }
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 2dbd104c..78ebfdff 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -8,6 +8,9 @@ const { type, hashtag } = props;
 type = hashtag;
 hashtag = type;
 
+const { Post } = VM.require("buildhub.near/widget/components.post");
+Post = Post || (() => <></>);
+
 const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
index dd09dcd2..ea95507a 100644
--- a/apps/builddao/widget/components/button.jsx
+++ b/apps/builddao/widget/components/button.jsx
@@ -26,7 +26,7 @@ const StyledButton = styled.button`
       case "primary":
         return "#FFAF51";
       case "outline":
-        return "#0b0c14";
+        return "transparent";
       default:
         return "#23242B";
     }
diff --git a/apps/builddao/widget/components/post-widget.jsx b/apps/builddao/widget/components/post-widget.jsx
new file mode 100644
index 00000000..b8bcf363
--- /dev/null
+++ b/apps/builddao/widget/components/post-widget.jsx
@@ -0,0 +1,408 @@
+const { User } = VM.require("buildhub.near/widget/components.user");
+
+const StyledPost = styled.div`
+  margin-bottom: 1rem;
+  .post {
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    color: #b6b6b8;
+    padding: 24px !important;
+    background-color: #23242b;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #1c1f33 !important;
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(28, 31, 51, 0),
+          rgba(28, 31, 51, 1) 25%
+        ) !important;
+      }
+    }
+
+    .post-header {
+      span,
+      .text-muted {
+        color: #fff !important;
+      }
+    }
+
+    .buttons {
+      border-top: 1px solid #3c3d43;
+      padding: 0.5rem;
+    }
+
+    .expand-post {
+      background-image: linear-gradient(
+        to bottom,
+        rgba(35, 36, 43, 0),
+        rgba(35, 36, 43, 1) 25%
+      ) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: #0b0c14 !important;
+    color: #fff !important;
+
+    li.dropdown-item {
+      color: #fff !important;
+      &:hover {
+        a {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: #fff !important;
+
+      &:hover {
+        color: #0b0c14 !important;
+
+        span {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+  }
+
+  textarea {
+    color: #b6b6b8 !important;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin: 0 -12px;
+  line-height: normal;
+
+  .post {
+    position: relative;
+    padding: 12px;
+    padding-bottom: 4px;
+    display: flex;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 16px !important;
+    }
+    @media (max-width: 767px) {
+      font-size: 15px !important;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 15px !important;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    b {
+      font-weight: 500 !important;
+    }
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0.5rem;
+      white-space: inherit;
+    }
+    p {
+      margin-bottom: 0.5rem;
+    }
+    hr {
+      display: none;
+    }
+    img {
+      border-radius: var(--bs-border-radius-lg);
+      max-height: 40em;
+    }
+    th {
+      min-width: 5em;
+    }
+
+    .table > :not(caption) > * > * {
+      padding: 0.3rem;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(247.35, 247.35, 247.35, 1) 25%
+        );
+      }
+    }
+
+    .post-header {
+      margin: 4px 0;
+    }
+  }
+
+  .post:not(:last-child):before {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 56px;
+    bottom: 0;
+    width: 2px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .post:not(:first-child):after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 0;
+    width: 2px;
+    height: 8px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .left {
+    margin-right: 12px;
+    min-width: 40px;
+    width: 40px;
+    overflow: hidden;
+  }
+  .right {
+    margin-top: -4px;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .buttons-placeholder {
+    padding-bottom: 10px;
+  }
+
+  .buttons {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    column-gap: 4px;
+    color: #888;
+  }
+
+  .reposted {
+    padding-top: 30px;
+  }
+`;
+
+const RepostWidgetDesktop = styled.div`
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const RepostWidgetMobile = styled.div`
+  display: none;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+const accountId = props.accountId;
+if (!accountId) {
+  return "No accountId";
+}
+const blockHeight =
+  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+  props.content ??
+  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+
+const notifyAccountId = accountId;
+const item = {
+  type: "social",
+  path: `${accountId}/post/main`,
+  blockHeight,
+};
+
+const link =
+  props.link ??
+  props.fullPostLink ??
+  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const contentWidget = (
+  <>
+    <Widget
+      key="content"
+      loading={
+        <div
+          className="overflow-hidden w-100 placeholder-glow"
+          style={{ minHeight: "100px" }}
+        />
+      }
+      src="mob.near/widget/MainPage.N.Post.Content"
+      props={{
+        content,
+        raw,
+        truncateContent: props.truncateContent,
+        noEmbed: props.noEmbed,
+      }}
+    />
+    <RepostWidgetMobile>
+      <Widget
+        loading=""
+        src="mob.near/widget/N.RepostButton"
+        props={{
+          disable: permissions.disableRepost,
+          notifyAccountId,
+          item,
+          // indexKey,
+          // groupId,
+        }}
+      />
+      <span>Repost Feed</span>
+    </RepostWidgetMobile>
+  </>
+);
+
+return (
+  <StyledPost>
+    <Wrapper
+      className="w-100 mx-auto"
+      style={
+        props.hideComments || props.noBorder
+          ? undefined
+          : {
+              borderBottom: "1px solid #eee",
+            }
+      }
+    >
+      <div className={`post ${props.reposted ? "reposted" : ""}`}>
+        <div className="right d-flex flex-column gap-3">
+          <User
+            accountId={accountId}
+            blockHeight={blockHeight}
+            pinned={pinned}
+            hideMenu={hideMenu}
+            link={link}
+            postType={"post"}
+            flagItem={item}
+          />
+          {fullPostLink ? (
+            <a
+              key="full-post-link"
+              target="_blank"
+              href={fullPostLink}
+              className="text-decoration-none link-dark"
+            >
+              {contentWidget}
+            </a>
+          ) : (
+            contentWidget
+          )}
+          {props.customButtons ? (
+            props.customButtons
+          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+            <div className="buttons d-flex justify-content-between">
+              <Widget
+                loading=""
+                src="mob.near/widget/N.CommentButton"
+                props={{
+                  disabled: permissions.disableComment,
+                  onClick: () => State.update({ showReply: !state.showReply }),
+                }}
+              />
+              <RepostWidgetDesktop>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.RepostButton"
+                  props={{
+                    disable: permissions.disableRepost,
+                    notifyAccountId,
+                    item,
+                    // indexKey,
+                    // groupId,
+                  }}
+                />
+              </RepostWidgetDesktop>
+              <Widget
+                loading=""
+                src="mob.near/widget/N.LikeButton"
+                props={{
+                  notifyAccountId,
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="buildhub.near/widget/components.post.bookmark-button"
+                props={{
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/MainPage.N.Post.ShareButton"
+                props={{ accountId, blockHeight, postType: "post", groupId }}
+              />
+            </div>
+          ) : (
+            <div className="buttons-placeholder" />
+          )}
+        </div>
+      </div>
+      {state.showReply && (
+        <div className="border-top">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Comment.Compose"
+            props={{
+              notifyAccountId,
+              item,
+              onComment: () => State.update({ showReply: false }),
+            }}
+          />
+        </div>
+      )}
+      {props.customComments
+        ? props.customComments
+        : !props.hideComments && (
+            <div className="ms-5 my-3">
+              <Widget
+                key="comments"
+                loading={false}
+                src="mob.near/widget/MainPage.N.Comment.Feed"
+                props={{
+                  item,
+                  highlightComment: props.highlightComment,
+                  limit: props.commentsLimit,
+                  subscribe,
+                  raw,
+                  accounts: props.commentAccounts,
+                  groupId,
+                  permissions,
+                }}
+              />
+            </div>
+          )}
+    </Wrapper>
+  </StyledPost>
+);
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
index 45c87960..900325da 100644
--- a/apps/builddao/widget/components/post.jsx
+++ b/apps/builddao/widget/components/post.jsx
@@ -1,413 +1,9 @@
-const { User } = VM.require("buildhub.near/widget/components.user");
-
-const StyledPost = styled.div`
-  margin-bottom: 1rem;
-  .post {
-    border-radius: 16px;
-    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-    color: #b6b6b8;
-    padding: 24px !important;
-    background-color: #23242b;
-    transition: all 300ms;
-
-    &:hover {
-      background-color: #1c1f33 !important;
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(28, 31, 51, 0),
-          rgba(28, 31, 51, 1) 25%
-        ) !important;
-      }
-    }
-
-    .post-header {
-      span,
-      .text-muted {
-        color: #fff !important;
-      }
-    }
-
-    .buttons {
-      border-top: 1px solid #3c3d43;
-      padding: 0.5rem;
-    }
-
-    .expand-post {
-      background-image: linear-gradient(
-        to bottom,
-        rgba(35, 36, 43, 0),
-        rgba(35, 36, 43, 1) 25%
-      ) !important;
-    }
-  }
-
-  .dropdown-menu {
-    background-color: #0b0c14 !important;
-    color: #fff !important;
-
-    li.dropdown-item {
-      color: #fff !important;
-      &:hover {
-        a {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-
-    .link-dark,
-    .dropdown-item {
-      color: #fff !important;
-
-      &:hover {
-        color: #0b0c14 !important;
-
-        span {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-  }
-
-  textarea {
-    color: #b6b6b8 !important;
-  }
-`;
-
-const Wrapper = styled.div`
-  margin: 0 -12px;
-  line-height: normal;
-
-  .post {
-    position: relative;
-    padding: 12px;
-    padding-bottom: 4px;
-    display: flex;
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 16px !important;
-    }
-    @media (max-width: 767px) {
-      font-size: 15px !important;
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-size: 15px !important;
-      }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    strong,
-    b {
-      font-weight: 500 !important;
-    }
-    ol,
-    ul,
-    dl {
-      margin-bottom: 0.5rem;
-      white-space: inherit;
-    }
-    p {
-      margin-bottom: 0.5rem;
-    }
-    hr {
-      display: none;
-    }
-    img {
-      border-radius: var(--bs-border-radius-lg);
-      max-height: 40em;
-    }
-    th {
-      min-width: 5em;
-    }
-
-    .table > :not(caption) > * > * {
-      padding: 0.3rem;
-    }
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.03);
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0),
-          rgba(247.35, 247.35, 247.35, 1) 25%
-        );
-      }
-    }
-
-    .post-header {
-      margin: 4px 0;
-    }
-  }
-
-  .post:not(:last-child):before {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 56px;
-    bottom: 0;
-    width: 2px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .post:not(:first-child):after {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 0;
-    width: 2px;
-    height: 8px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .left {
-    margin-right: 12px;
-    min-width: 40px;
-    width: 40px;
-    overflow: hidden;
-  }
-  .right {
-    margin-top: -4px;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .buttons-placeholder {
-    padding-bottom: 10px;
-  }
-
-  .buttons {
-    margin-top: 10px;
-    margin-bottom: 6px;
-    column-gap: 4px;
-    color: #888;
-  }
-
-  .reposted {
-    padding-top: 30px;
-  }
-`;
-
-const RepostWidgetDesktop = styled.div`
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const RepostWidgetMobile = styled.div`
-  display: none;
-  @media screen and (max-width: 768px) {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-`;
-
 function Post(props) {
-  const accountId = props.accountId;
-  if (!accountId) {
-    return "No accountId";
-  }
-  const blockHeight =
-    props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
-  const pinned = !!props.pinned;
-  const hideMenu = !!props.hideMenu;
-  const hideButtons = !!props.hideButtons;
-  const content =
-    props.content ??
-    JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
-  const subscribe = !!props.subscribe;
-  const raw = !!props.raw;
-  const groupId = props.groupId ?? content.groupId;
-  const indexKey = props.indexKey;
-  const permissions = props.permissions;
-  const fullPostLink = props.fullPostLink;
-
-  const notifyAccountId = accountId;
-  const item = {
-    type: "social",
-    path: `${accountId}/post/main`,
-    blockHeight,
-  };
-
-  const link =
-    props.link ??
-    props.fullPostLink ??
-    `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
-
-  const contentWidget = (
-    <>
-      <Widget
-        key="content"
-        loading={
-          <div
-            className="overflow-hidden w-100 placeholder-glow"
-            style={{ minHeight: "100px" }}
-          />
-        }
-        src="mob.near/widget/MainPage.N.Post.Content"
-        props={{
-          content,
-          raw,
-          truncateContent: props.truncateContent,
-          noEmbed: props.noEmbed,
-        }}
-      />
-      <RepostWidgetMobile>
-        <Widget
-          loading=""
-          src="mob.near/widget/N.RepostButton"
-          props={{
-            disable: permissions.disableRepost,
-            notifyAccountId,
-            item,
-            // indexKey,
-            // groupId,
-          }}
-        />
-        <span>Repost Feed</span>
-      </RepostWidgetMobile>
-    </>
-  );
-
   return (
-    <StyledPost>
-      <Wrapper
-        className="w-100 mx-auto"
-        style={
-          props.hideComments || props.noBorder
-            ? undefined
-            : {
-                borderBottom: "1px solid #eee",
-              }
-        }
-      >
-        <div className={`post ${props.reposted ? "reposted" : ""}`}>
-          <div className="right d-flex flex-column gap-3">
-            <User
-              accountId={accountId}
-              blockHeight={blockHeight}
-              pinned={pinned}
-              hideMenu={hideMenu}
-              link={link}
-              postType={"post"}
-              flagItem={item}
-            />
-            {fullPostLink ? (
-              <a
-                key="full-post-link"
-                target="_blank"
-                href={fullPostLink}
-                className="text-decoration-none link-dark"
-              >
-                {contentWidget}
-              </a>
-            ) : (
-              contentWidget
-            )}
-            {props.customButtons ? (
-              props.customButtons
-            ) : !pinned && !hideButtons && blockHeight !== "now" ? (
-              <div className="buttons d-flex justify-content-between">
-                <Widget
-                  loading=""
-                  src="mob.near/widget/N.CommentButton"
-                  props={{
-                    disabled: permissions.disableComment,
-                    onClick: () =>
-                      State.update({ showReply: !state.showReply }),
-                  }}
-                />
-                <RepostWidgetDesktop>
-                  <Widget
-                    loading=""
-                    src="mob.near/widget/N.RepostButton"
-                    props={{
-                      disable: permissions.disableRepost,
-                      notifyAccountId,
-                      item,
-                      // indexKey,
-                      // groupId,
-                    }}
-                  />
-                </RepostWidgetDesktop>
-                <Widget
-                  loading=""
-                  src="mob.near/widget/N.LikeButton"
-                  props={{
-                    notifyAccountId,
-                    item,
-                  }}
-                />
-                <Widget
-                  loading=""
-                  src="buildhub.near/widget/components.post.bookmark-button"
-                  props={{
-                    item,
-                  }}
-                />
-                <Widget
-                  loading=""
-                  src="mob.near/widget/MainPage.N.Post.ShareButton"
-                  props={{ accountId, blockHeight, postType: "post", groupId }}
-                />
-              </div>
-            ) : (
-              <div className="buttons-placeholder" />
-            )}
-          </div>
-        </div>
-        {state.showReply && (
-          <div className="border-top">
-            <Widget
-              loading=""
-              src="mob.near/widget/MainPage.N.Comment.Compose"
-              props={{
-                notifyAccountId,
-                item,
-                onComment: () => State.update({ showReply: false }),
-              }}
-            />
-          </div>
-        )}
-        {props.customComments
-          ? props.customComments
-          : !props.hideComments && (
-              <div className="ms-5 my-3">
-                <Widget
-                  key="comments"
-                  loading={false}
-                  src="mob.near/widget/MainPage.N.Comment.Feed"
-                  props={{
-                    item,
-                    highlightComment: props.highlightComment,
-                    limit: props.commentsLimit,
-                    subscribe,
-                    raw,
-                    accounts: props.commentAccounts,
-                    groupId,
-                    permissions,
-                  }}
-                />
-              </div>
-            )}
-      </Wrapper>
-    </StyledPost>
+    <Widget
+      src={"buildhub.near/widget/components.post-widget"}
+      props={{ ...props }}
+    />
   );
 }
 
diff --git a/apps/builddao/widget/components/user-widget.jsx b/apps/builddao/widget/components/user-widget.jsx
new file mode 100644
index 00000000..b53b4117
--- /dev/null
+++ b/apps/builddao/widget/components/user-widget.jsx
@@ -0,0 +1,184 @@
+const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+
+const Button = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: #6c757d;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: DeepSkyBlue;
+
+    .icon:before {
+      background: rgba(0, 191, 255, 0.1);
+    }
+  }
+`;
+
+const Wrapper = styled.div`
+  color: #fff;
+
+  p {
+    color: #fff;
+    color: var(--White-100, #fff);
+
+    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.username {
+    color: var(--White-50, #cdd0d5);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  p.time {
+    color: var(--White-100, #fff);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      p {
+        font-size: 13px !important;
+      }
+
+      p.username {
+        font-size: 10px !important;
+      }
+
+      p.time {
+        font-size: 10px !important;
+      }
+    `}
+  }
+`;
+
+const accountId = props.accountId;
+const blockHeight = props.blockHeight;
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const name = Social.get(`${accountId}/profile/name`);
+
+const postType = props.postType ?? "post";
+const link = props.link;
+const isPremium = !!props.isPremium;
+
+const Overlay = (props) => (
+  <a
+    className="link-dark text-truncate d-inline-flex mw-100"
+    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+  >
+    <Widget
+      src="mob.near/widget/Profile.N.OverlayTrigger"
+      loading={props.children}
+      props={{
+        accountId,
+        children: props.children,
+      }}
+    />
+  </a>
+);
+
+return (
+  <div className="d-flex align-items-center">
+    <Overlay>
+      <div className="d-flex gap-1">
+        <Avatar variant={props.variant} accountId={accountId} />
+        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+          <div className="d-flex align-items-center g-1">
+            <p className="m-0">{name || "No-Name Profile"}</p>
+            <div className="flex-shrink-0">
+              <Widget
+                loading={""}
+                src="mob.near/widget/Checkmark"
+                props={{ isPremium, accountId }}
+              />
+            </div>
+          </div>
+          <p className="username">{accountId}</p>
+          <p className="time">
+            {blockHeight === "now" ? (
+              "now"
+            ) : (
+              <a className="text-white" href={link}>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/TimeAgo"
+                  props={{ blockHeight }}
+                />
+              </a>
+            )}
+          </p>
+        </Wrapper>
+        {pinned && (
+          <span title="Pinned" className="ms-2">
+            <i className="bi bi-pin-angle" />
+          </span>
+        )}
+      </div>
+    </Overlay>
+    {!pinned && !hideMenu && blockHeight !== "now" && (
+      <span className="ms-auto flex-shrink-0">
+        <Button data-bs-toggle="dropdown" aria-expanded="false">
+          <i className="bi bi-three-dots-vertical"></i>
+        </Button>
+        <ul className="dropdown-menu">
+          <li className="dropdown-item">
+            <a
+              className="link-dark text-decoration-none"
+              href={`${link}&raw=true`}
+            >
+              <i className="bi bi-filetype-raw" /> View raw markdown source
+            </a>
+          </li>
+          <li>
+            <Widget
+              src="mob.near/widget/MainPage.Common.HideAccount"
+              props={{ accountId }}
+            />
+          </li>
+          {flagItem && (
+            <li>
+              <Widget
+                src="mob.near/widget/MainPage.Common.FlagContent"
+                props={{
+                  item: flagItem,
+                  label: `Flag ${postType} for moderation`,
+                }}
+              />
+            </li>
+          )}
+        </ul>
+      </span>
+    )}
+  </div>
+);
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/user.jsx
index aa7e3fbb..4257f408 100644
--- a/apps/builddao/widget/components/user.jsx
+++ b/apps/builddao/widget/components/user.jsx
@@ -1,188 +1,9 @@
-const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
-
-const Button = styled.div`
-  line-height: 20px;
-  min-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: left;
-  background: inherit;
-  color: #6c757d;
-  font-size: 16px;
-  .icon {
-    position: relative;
-    &:before {
-      margin: -8px;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  &:not([disabled]):hover {
-    opacity: 1 !important;
-    color: DeepSkyBlue;
-
-    .icon:before {
-      background: rgba(0, 191, 255, 0.1);
-    }
-  }
-`;
-
-const Wrapper = styled.div`
-  color: #fff;
-
-  p {
-    color: #fff;
-    color: var(--White-100, #fff);
-
-    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.username {
-    color: var(--White-50, #cdd0d5);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  p.time {
-    color: var(--White-100, #fff);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      p {
-        font-size: 13px !important;
-      }
-
-      p.username {
-        font-size: 10px !important;
-      }
-
-      p.time {
-        font-size: 10px !important;
-      }
-    `}
-  }
-`;
-
 function User(props) {
-  const accountId = props.accountId ?? context.accountId;
-  const { name: profileName } =
-    props.profile ?? Social.getr(`${accountId}/profile`);
-  const blockHeight = props.blockHeight;
-  const pinned = !!props.pinned;
-  const postType = props.postType ?? "post";
-  const flagItem = props.flagItem;
-  const link = props.link;
-  const isPremium = !!props.isPremium;
-  const hideMenu = !!props.hideMenu;
-
-  const Overlay = (props) => (
-    <a
-      className="link-dark text-truncate d-inline-flex mw-100"
-      href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
-    >
-      <Widget
-        src="mob.near/widget/Profile.N.OverlayTrigger"
-        loading={props.children}
-        props={{
-          accountId,
-          children: props.children,
-        }}
-      />
-    </a>
-  );
-
   return (
-    <div className="d-flex align-items-center">
-      <Overlay>
-        <div className="d-flex gap-1">
-          <Avatar variant={props.variant} accountId={accountId} />
-          <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-            <div className="d-flex align-items-center g-1">
-              <p className="m-0">{profileName || "No-Name Profile"}</p>
-              <div className="flex-shrink-0">
-                <Widget
-                  loading={""}
-                  src="mob.near/widget/Checkmark"
-                  props={{ isPremium, accountId }}
-                />
-              </div>
-            </div>
-            <p className="username">{accountId}</p>
-            <p className="time">
-              {blockHeight === "now" ? (
-                "now"
-              ) : (
-                <a className="text-white" href={link}>
-                  <Widget
-                    loading=""
-                    src="mob.near/widget/TimeAgo"
-                    props={{ blockHeight }}
-                  />
-                </a>
-              )}
-            </p>
-          </Wrapper>
-          {pinned && (
-            <span title="Pinned" className="ms-2">
-              <i className="bi bi-pin-angle" />
-            </span>
-          )}
-        </div>
-      </Overlay>
-      {!pinned && !hideMenu && blockHeight !== "now" && (
-        <span className="ms-auto flex-shrink-0">
-          <Button data-bs-toggle="dropdown" aria-expanded="false">
-            <i className="bi bi-three-dots-vertical"></i>
-          </Button>
-          <ul className="dropdown-menu">
-            <li className="dropdown-item">
-              <a
-                className="link-dark text-decoration-none"
-                href={`${link}&raw=true`}
-              >
-                <i className="bi bi-filetype-raw" /> View raw markdown source
-              </a>
-            </li>
-            <li>
-              <Widget
-                src="mob.near/widget/MainPage.Common.HideAccount"
-                props={{ accountId }}
-              />
-            </li>
-            {flagItem && (
-              <li>
-                <Widget
-                  src="mob.near/widget/MainPage.Common.FlagContent"
-                  props={{
-                    item: flagItem,
-                    label: `Flag ${postType} for moderation`,
-                  }}
-                />
-              </li>
-            )}
-          </ul>
-        </span>
-      )}
-    </div>
+    <Widget
+      src="buildhub.near/widget/components.user-widget"
+      props={{ ...props }}
+    />
   );
 }
 
diff --git a/apps/builddao/widget/resources-aside.jsx b/apps/builddao/widget/resources-aside.jsx
index 46aa3159..45d2018a 100644
--- a/apps/builddao/widget/resources-aside.jsx
+++ b/apps/builddao/widget/resources-aside.jsx
@@ -1,3 +1,5 @@
+const { Button } = VM.require("buildhub.near/widget/components.button");
+
 const Container = styled.div`
   border-radius: 16px;
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
@@ -18,66 +20,21 @@ const Container = styled.div`
   }
 `;
 
-const TabButton = styled.button`
-  all: unset;
-  display: flex;
-  flex-shrink: 0;
-  padding: 8px 12px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-
-  @media screen and (max-width: 768px) {
-    align-self: auto;
-  }
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-
-  color: var(--white-50, rgba(255, 255, 255, 0.7));
-
-  /* Body/14px */
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 23.8px */
-
-  transition: all 300ms;
-
-  &:hover,
-  &:active,
-  &.active {
-    border-radius: 8px;
-    background: var(--Yellow, #ffaf51) !important;
-
-    color: var(--black-100, #000) !important;
-    cursor: pointer;
-
-    /* Body/14px */
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 170%; /* 23.8px */
-
-    svg {
-      filter: invert(1);
-    }
-  }
-`;
-
-console.log(props.currentResource);
-
 return (
   <Container>
     {props.resources.map((resource) => (
-      <TabButton
-        className={
-          props.currentResource === resource.name ? "active" : undefined
+      <Button
+        variant={
+          props.currentResource === resource.name ? "primary" : "outline"
         }
         onClick={() => props.setCurrentResource(resource)}
+        className={
+          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+        }
+        style={{ fontSize: "14px" }}
       >
         <i className={`bi ${resource.biIcon}`}></i> {resource.name}
-      </TabButton>
+      </Button>
     ))}
   </Container>
 );

From f93cda98d1fb822b60abd692fe15b4d9e55c1c87 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Sat, 6 Jan 2024 00:31:12 +0500
Subject: [PATCH 18/34] Fix font size in buttons in compose widget

---
 apps/builddao/widget/Compose.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 228347f9..6ec48414 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -377,6 +377,7 @@ return (
       <Button
         variant="outline"
         onClick={() => setView(view === "editor" ? "preview" : "editor")}
+        style={{ fontSize: 14 }}
       >
         {view === "editor" ? (
           <>
@@ -390,6 +391,7 @@ return (
       </Button>
       <Button
         variant="primary"
+        style={{ fontSize: 14 }}
         onClick={() =>
           postToCustomFeed({ feed: props.feed, text: postContent, labels })
         }

From 10c562f50bf2eb31ec14867e20c9abe2acbfbe9c Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Sat, 6 Jan 2024 02:52:40 +0500
Subject: [PATCH 19/34] Create better component library

---
 .../widget/components/input-field.jsx         |   2 +-
 apps/builddao/widget/components/library.jsx   | 698 ++++++++++++++++--
 2 files changed, 635 insertions(+), 65 deletions(-)

diff --git a/apps/builddao/widget/components/input-field.jsx b/apps/builddao/widget/components/input-field.jsx
index 5a16751c..117d15b6 100644
--- a/apps/builddao/widget/components/input-field.jsx
+++ b/apps/builddao/widget/components/input-field.jsx
@@ -17,7 +17,7 @@ const Label = styled.label`
 
 const Input = styled.input`
   display: flex;
-  max-width: ${(props) => maxWidth ?? "390px"};
+  max-width: ${(props) => props.maxWidth ?? "390px"};
   width: 100%;
   padding: 16px 12px;
   align-items: flex-start;
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index a19046be..0ffc59cf 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -1,9 +1,12 @@
+// Buttons/Navigation
 const { Button } = VM.require("buildhub.near/widget/components.button");
 const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
 const { ProgressState } = VM.require(
   "buildhub.near/widget/components.progress-state"
 );
 const { Step } = VM.require("buildhub.near/widget/components.step");
+
+// Inputs
 const { InputField } = VM.require(
   "buildhub.near/widget/components.input-field"
 );
@@ -12,30 +15,82 @@ const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
 const { TextEditor } = VM.require(
   "buildhub.near/widget/components.text-editor"
 );
-
 const { UploadField } = VM.require(
   "buildhub.near/widget/components.upload-field"
 );
+
+// Modals
+const { Post } = VM.require("buildhub.near/widget/components.post");
+
+// Avatars/Users
 const { User } = VM.require("buildhub.near/widget/components.user");
 const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
-const { Post } = VM.require("buildhub.near/widget/components.post");
 
+// states
 const [checked, setChecked] = useState(false);
 
-const Heading = styled.h2`
-  color: white;
-`;
+const ButtonPreview = (
+  <div>
+    <div className="d-flex align-items-center gap-3 mb-3">
+      <Button>Normal</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline">Outline</Button>
+    </div>
+    <div className="d-flex align-items-center gap-3 mb-3">
+      <Button>
+        Normal <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="primary">
+        Primary <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="outline">
+        Outline <i className="bi bi-arrow-right"></i>
+      </Button>
+    </div>
+    <div className="d-flex align-items-center gap-3 mb-3">
+      <Button type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="primary" type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+      <Button variant="outline" type="icon">
+        <i className="bi bi-arrow-right"></i>
+      </Button>
+    </div>
+  </div>
+);
 
-return (
-  <div className="container-xl">
-    <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Buttons</Heading>
-      <div className="d-flex align-items-center gap-3">
+const components = [
+  {
+    name: "Button",
+    category: "Buttons/Navigation",
+    widgetSrc: "buildhub.near/widget/components.button",
+    description:
+      "Button component with three different variants, and icon support.",
+    requiredProps: {
+      children: "Button Text",
+      onClick: "Callback function to handle button click",
+    },
+    optionalProps: {
+      id: "ID of the button",
+      variant: "Variant of the button (default, primary, outline)",
+      type: "Type of the button (normal, icon)",
+      className: "Additional classnames for button",
+      style: "Additional styles for button",
+    },
+    preview: ButtonPreview,
+    embedCode: `
+  const { Button } = VM.require("buildhub.near/widget/components.button");
+
+  return (
+    <div>
+      <div className="d-flex align-items-center gap-3 mb-3">
         <Button>Normal</Button>
         <Button variant="primary">Primary</Button>
         <Button variant="outline">Outline</Button>
       </div>
-      <div className="d-flex align-items-center gap-3">
+      <div className="d-flex align-items-center gap-3 mb-3">
         <Button>
           Normal <i className="bi bi-arrow-right"></i>
         </Button>
@@ -46,71 +101,352 @@ return (
           Outline <i className="bi bi-arrow-right"></i>
         </Button>
       </div>
-      <div className="d-flex align-items-center gap-3">
+      <div className="d-flex align-items-center gap-3 mb-3">
         <Button type="icon">
-          <i className="bi bi-arrow-right"></i>
+         <i className="bi bi-arrow-right"></i>
         </Button>
         <Button variant="primary" type="icon">
-          <i className="bi bi-arrow-right"></i>
+         <i className="bi bi-arrow-right"></i>
         </Button>
         <Button variant="outline" type="icon">
-          <i className="bi bi-arrow-right"></i>
+         <i className="bi bi-arrow-right"></i>
         </Button>
       </div>
     </div>
-    <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Pagination</Heading>
-      <Pagination totalPages={4} selectedPage={1} />
+  );`,
+  },
+  {
+    name: "Pagination",
+    category: "Buttons/Navigation",
+    widgetSrc: "buildhub.near/widget/components.pagination",
+    description: "Pagination component for page switching.",
+    requiredProps: {
+      totalPages: "Total pages",
+      selectedPage: "Selected page number",
+      onPageClick: "Callback function to handle button click",
+    },
+    optionalProps: {
+      maxVisiblePages: "Max visible pages at once (default: 4)",
+    },
+    preview: <Pagination totalPages={4} selectedPage={1} />,
+    embedCode: `
+  const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
+
+  return (
+    <Pagination totalPages={4} selectedPage={1} />
+  );`,
+  },
+  {
+    name: "Progress State",
+    category: "Buttons/Navigation",
+    widgetSrc: "buildhub.near/widget/components.progress-state",
+    description: "Progress state for step component.",
+    requiredProps: {
+      children: "Children to render",
+      status: "Status of the step (default, active, completed, error)",
+    },
+    preview: (
+      <>
+        <div className="d-flex align-items-center gap-3 mb-3">
+          <ProgressState status="default">1</ProgressState>
+          <ProgressState status="focused">1</ProgressState>
+          <ProgressState status="error">1</ProgressState>
+          <ProgressState status="completed">1</ProgressState>
+        </div>
+      </>
+    ),
+    embedCode: `
+  const { ProgressState } = VM.require("buildhub.near/widget/components.progress-state");
+
+  return (
+    <div className="d-flex align-items-center gap-3 mb-3">
+      <ProgressState status="default">1</ProgressState>
+      <ProgressState status="focused">1</ProgressState>
+      <ProgressState status="error">1</ProgressState>
+      <ProgressState status="completed">1</ProgressState>
     </div>
+  );`,
+  },
+  {
+    name: "Step",
+    category: "Buttons/Navigation",
+    widgetSrc: "buildhub.near/widget/components.step",
+    description: "Step component to show progress between steps.",
+    requiredProps: {
+      totalSteps: "Total number of steps",
+      currentStep: "Current step number",
+    },
+    optionalProps: {
+      currentStatus:
+        "Status of the current step (default, active, completed, error)",
+    },
+    preview: (
+      <>
+        <div className="d-flex flex-column gap-3 mb-3">
+          <Step totalSteps={5} currentStep={1} />
+          <Step totalSteps={4} currentStep={2} />
+          <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
+        </div>
+      </>
+    ),
+    embedCode: `
+  const { Step } = VM.require("buildhub.near/widget/components.step");
+
+  return (
     <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Progress State</Heading>
-      <div className="d-flex align-items-center gap-3 mb-3">
-        <ProgressState status="default">1</ProgressState>
-        <ProgressState status="focused">1</ProgressState>
-        <ProgressState status="error">1</ProgressState>
-        <ProgressState status="completed">1</ProgressState>
-      </div>
+      <Step totalSteps={5} currentStep={1} />
+      <Step totalSteps={4} currentStep={2} />
+      <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
     </div>
+  );`,
+  },
+  {
+    name: "Input Field",
+    category: "Fields",
+    widgetSrc: "buildhub.near/widget/components.input-field",
+    description: "Input field for text input",
+    requiredProps: {
+      value: "Current Value of input",
+      onChange: "Callback function to handle input change",
+    },
+    optionalProps: {
+      label: "Label for input",
+      type: "Type of input field",
+      key: "Key for input field",
+      placeholder: "Placeholder text",
+      maxWidth: "Max width for input field",
+    },
+    preview: (
+      <>
+        <div className="d-flex flex-column gap-3 mb-3">
+          <InputField
+            key={"Input-Label"}
+            label={"Label"}
+            placeholder={"Placeholder"}
+          />
+          <InputField
+            key={"Input-Password"}
+            label={"Password"}
+            placeholder={"Password"}
+            type={"password"}
+          />
+        </div>
+      </>
+    ),
+    embedCode: `
+  const { InputField } = VM.require("buildhub.near/widget/components.input-field");
+
+  const [value, setValue] = useState("");
+  const [password, setPassword] = useState("");
+
+  return (
     <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Step</Heading>
-      <div className="d-flex flex-column gap-3 mb-3">
-        <Step totalSteps={5} currentStep={1} />
-        <Step totalSteps={4} currentStep={2} />
-        <Step totalSteps={3} currentStep={3} currentStatus={"error"} />
-      </div>
+      <InputField
+      key={"Input-Label"}
+      label={"Label"}
+      placeholder={"Placeholder"}
+      value={value}
+      onChange={(e) => setValue(e. target.value)}
+      />
+      <InputField
+        key={"Input-Password"}
+        label={"Password"}
+        placeholder={"Password"}
+        type={"password"}
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
     </div>
+  );`,
+  },
+  {
+    name: "Checkbox",
+    category: "Fields",
+    widgetSrc: "buildhub.near/widget/components.checkbox",
+    description: "Checkbox input for toggles",
+    requiredProps: {
+      value: "Current Value of checkbox",
+      onChange: "Callback function to handle input change",
+    },
+    optionalProps: {
+      label: "Label for checkbox",
+    },
+    preview: (
+      <>
+        <div className="d-flex flex-column gap-3 mb-3">
+          <Checkbox
+            label="Checkbox"
+            value={checked}
+            onChange={(e) => setChecked(!checked)}
+          />
+        </div>
+      </>
+    ),
+    embedCode: `
+  const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
+
+  const [checked, setChecked] = useState(false);
+
+  return (
     <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Input Field</Heading>
-      <div className="d-flex flex-column gap-3 mb-3">
-        <InputField
-          key={"Input-Label"}
-          label={"Label"}
-          placeholder={"Placeholder"}
-        />
-        <InputField
-          key={"Input-Password"}
-          label={"Password"}
-          placeholder={"Password"}
-          type={"password"}
-        />
-        <Checkbox
-          label="Checkbox"
-          value={checked}
-          onChange={(e) => setChecked(!checked)}
-        />
+      <Checkbox
+        label="Checkbox"
+        value={checked}
+        onChange={(e) => setChecked(!checked)}
+      />
+    </div>
+  );`,
+  },
+  {
+    name: "Textbox",
+    category: "Fields",
+    widgetSrc: "buildhub.near/widget/components.text-box",
+    description: "Textbox for text input",
+    requiredProps: {
+      value: "Current Value of text box",
+      onChange: "Callback function to handle input change",
+    },
+    optionalProps: {
+      label: "Label for text box",
+    },
+    preview: (
+      <>
         <TextBox label={"Label"} placeholder={"Placeholder"} />
+      </>
+    ),
+    embedCode: `
+  const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
+
+  const [value, setValue] = useState("");
+
+  return (
+    <div>
+      <TextBox
+        label={"Label"}
+        value={value} 
+        onChange={(e) => setValue(e.target.value)} 
+        placeholder={"Placeholder"}
+      />
+    </div>
+  );`,
+  },
+  {
+    name: "Text Editor",
+    category: "Fields",
+    widgetSrc: "buildhub.near/widget/components.text-editor",
+    description: "Text editor for markdown input",
+    requiredProps: {
+      value: "Current Value of checkbox",
+      onChange: "Callback function to handle input change",
+    },
+    optionalProps: {
+      maxWidth: "Max width of text editor",
+    },
+    preview: (
+      <>
         <TextEditor />
-      </div>
+      </>
+    ),
+    embedCode: `
+  const { TextEditor } = VM.require("buildhub.near/widget/components.text-editor");
+
+  const [value, setValue] = useState("");
+
+  return (
+    <div>
+      <TextEditor
+        value={value} 
+        onChange={(e) => setValue(e.target.value)} 
+      />
     </div>
-    <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Upload Field</Heading>
+  );`,
+  },
+  {
+    name: "Upload Field",
+    category: "Fields",
+    widgetSrc: "buildhub.near/widget/components.upload-field",
+    description: "Component for file uploads",
+    optionalProps: {
+      background: "Background color of upload filed (default true)",
+    },
+    preview: (
       <div className="d-flex flex-column gap-3 mb-3">
         <UploadField />
         <UploadField background />
       </div>
+    ),
+    embedCode: `
+  const { UploadField } = VM.require("buildhub.near/widget/components.upload-field");
+
+  return (
+    <div className="d-flex flex-column gap-3 mb-3">
+      <UploadField />
+      <UploadField background />
     </div>
+  );`,
+  },
+  {
+    name: "Post",
+    category: "Modals",
+    widgetSrc: "buildhub.near/widget/components.post",
+    description: "Post preview component",
+    requiredProps: {
+      accountId: "AccountId of post creator",
+      blockHeight: "Block height of post",
+    },
+    optionalProps: {
+      hideBorder: "Hide bottom border",
+      pinned: "Toggle pinned post",
+      hideMenu: "Hide menu",
+      hideButtons: "Hide bottom buttons",
+      content: "Content to be shown",
+      subscribe: "",
+      raw: "Show raw MD",
+      groupId: "Group ID for post",
+      indexKey: "Index key for post",
+      permissions: "Permissions for post",
+      fullPostLink: "Link to full post",
+    },
+    preview: (
+      <div className="d-flex flex-column gap-3 mb-3">
+        <Post
+          accountId={"itexpert120-contra.near"}
+          blockHeight={109609914}
+          noBorder={true}
+        />
+      </div>
+    ),
+    embedCode: `
+  const { Post } = VM.require("buildhub.near/widget/components.post");
+
+  return (
     <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>User</Heading>
+      <Post
+        accountId={"itexpert120-contra.near"}
+        blockHeight={109609914}
+        noBorder={true}
+      />
+    </div>
+  );`,
+  },
+  {
+    name: "User",
+    category: "Avatars/Users",
+    widgetSrc: "buildhub.near/widget/components.user",
+    description: "User component for user profile",
+    requiredProps: {
+      accountId: "AccountId of post creator",
+      blockHeight: "Block height of post",
+    },
+    optionalProps: {
+      variant: "Variant of user component (desktop, mobile)",
+      pinned: "Toggle pinned post",
+      hideMenu: "Hide menu",
+      postType: "Post type",
+      link: "Post link",
+      isPremium: "Show badge for premium users",
+    },
+    preview: (
       <div className="d-flex flex-column gap-3 mb-3">
         <User
           accountId={"itexpert120-contra.near"}
@@ -126,22 +462,256 @@ return (
           pinned={true}
         />
       </div>
-      <Heading>Avatar</Heading>
+    ),
+    embedCode: `
+  const { User } = VM.require("buildhub.near/widget/components.user");
+
+  return (
+    <div className="d-flex flex-column gap-3 mb-3">
+      <User
+      accountId={"itexpert120-contra.near"}
+      variant={"desktop"}
+      isPremium={true}
+      blockHeight={1231231231}
+      hideMenu={true}
+      />
+      <User
+        accountId={"build.sputnik-dao.near"}
+        variant="mobile"
+        blockHeight={"now"}
+        pinned={true}
+      />
+    </div>
+  );`,
+  },
+  {
+    name: "Avatar",
+    category: "Avatars/Users",
+    widgetSrc: "buildhub.near/widget/components.avatar",
+    description: "Show user avatar",
+    requiredProps: {
+      accountId: "AccountId of post creator",
+    },
+    optionalProps: {
+      variant: "Variant of user component (desktop, mobile)",
+    },
+    preview: (
       <div className="d-flex flex-column gap-3 mb-3">
         <Avatar variant={"desktop"} />
         <Avatar variant={"mobile"} accountId={"build.sputnik-dao.near"} />
       </div>
-    </div>
+    ),
+    embedCode: `
+  const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+
+  return (
     <div className="d-flex flex-column gap-3 mb-3">
-      <Heading>Post</Heading>
-      <div className="d-flex flex-column gap-3">
-        <Post accountId={"efiz.near"} blockHeight={109505036} noBorder={true} />
-        <Post
-          accountId={"itexpert120-contra.near"}
-          blockHeight={109609914}
-          noBorder={true}
-        />
+      <Avatar variant={"desktop"} />
+      <Avatar variant={"mobile"} accountId={"build.sputnik-dao.near"} />
+    </div>
+  );`,
+  },
+];
+
+const renderProps = (props, optional) => {
+  return Object.entries(props || {}).map(([key, desc]) => {
+    return (
+      <tr key={key}>
+        <td>
+          <span className={`code prop-key${optional ? " optional" : ""}`}>
+            {key}
+          </span>
+        </td>
+        <td className="prop-desc">
+          <Markdown text={desc} />
+        </td>
+      </tr>
+    );
+  });
+};
+
+const renderComponent = (component, index) => {
+  const id = component.name.toLowerCase().replace(" ", "-");
+  return (
+    <div className="component">
+      <div className="anchor" id={id}>
+        <a href={`#${id}`}>
+          <h2>{component.name}</h2>
+        </a>
+        <p>{component.description}</p>
+        <h3>Preview</h3>
+        {component.preview}
+        <h3>Component</h3>
+        <div className="d-flex flex-row flex-wrap justify-content-between mb-3">
+          <div className="path font-monospace">
+            <Widget
+              src="mob.near/widget/CopyButton"
+              props={{
+                text: component.widgetSrc,
+                label: component.widgetSrc,
+              }}
+            />
+          </div>
+          <div className="source">
+            <a
+              href={`/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}
+              target="_blank"
+              className="btn btn-outline-primary border-0"
+            >
+              Source
+            </a>
+          </div>
+        </div>
+        <h3>Props</h3>
+        <table className="props table table-bordered mb-3">
+          <thead>
+            <tr>
+              <th>Key</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {renderProps(component.requiredProps)}
+            {renderProps(component.optionalProps, true)}
+          </tbody>
+        </table>
+        <h3>Example</h3>
+        <div className="embed-code">
+          <Markdown text={`\`\`\`jsx\n${component.embedCode}\n\`\`\``} />
+          <div className="embed-copy">
+            <Widget
+              src="mob.near/widget/CopyButton"
+              props={{
+                text: component.embedCode,
+                className: "btn btn-outline-light",
+              }}
+            />
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+  );
+};
+
+const Wrapper = styled.div`
+  h2,
+  h3,
+  label,
+  p {
+    color: white;
+  }
+
+  .component {
+    padding: 0.5em 12px;
+    padding-bottom: 0;
+    margin-bottom: 3em;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.03);
+    }
+
+    table,
+    th,
+    td {
+      background: #0b0c13;
+      color: #fff;
+    }
+
+    label {
+      font-size: 20px;
+    }
+
+    .code {
+      display: inline-flex;
+      line-height: normal;
+      border-radius: 0.3em;
+      padding: 0 4px;
+      border: 1px solid #ddd;
+      background: rgba(0, 0, 0, 0.03);
+      font-family: var(--bs-font-monospace);
+    }
+    .path {
+    }
+    .preview {
+      background-color: white;
+      padding: 12px;
+      border: 1px solid #eee;
+      border-radius: 12px;
+      pre {
+        margin-bottom: 0;
+      }
+    }
+    .props {
+      .prop-key {
+        background: #f7f7f7;
+        border: 1px solid #dddddd;
+        color: black;
+        border-radius: 8px;
+        padding: 2px 4px;
+        font-weight: 600;
+
+        &.optional {
+          font-weight: 400;
+        }
+      }
+      .prop-desc {
+        p {
+          margin-bottom: 0;
+          color: white;
+        }
+      }
+    }
+    .embed-code {
+      position: relative;
+
+      .embed-copy {
+        position: absolute;
+        top: 18px;
+        right: 10px;
+      }
+    }
+  }
+`;
+
+const renderMenuItem = (c, i) => {
+  const prev = i ? components[i - 1] : null;
+  const res = [];
+  if (!prev || prev.category !== c.category) {
+    res.push(
+      <h5 className="category my-3 mb-2 text-white" key={c.category}>
+        {c.category}
+      </h5>
+    );
+  }
+  const id = c.name.toLowerCase().replaceAll(" ", "-");
+  res.push(
+    <div className="menu-item" key={i}>
+      <a href={`#${id}`}>{c.name}</a>
+    </div>
+  );
+  return res;
+};
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+
+  .main {
+    grid-column: span 4 / span 4;
+  }
+
+  .aside {
+    grid-column: span 1 / span 1;
+  }
+`;
+
+return (
+  <Grid className="container-xl">
+    <div className="aside">
+      {components.map((component, index) => renderMenuItem(component, index))}
+    </div>
+    <Wrapper className="main">
+      {components.map((component, index) => renderComponent(component, index))}
+    </Wrapper>
+  </Grid>
 );

From 4803344857e8b526ef22e943bfe2a8d1916f0b5a Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sat, 6 Jan 2024 23:44:35 -0500
Subject: [PATCH 20/34] post page

---
 apps/builddao/widget/Post.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/builddao/widget/Post.jsx b/apps/builddao/widget/Post.jsx
index b88e8bcc..94901be7 100644
--- a/apps/builddao/widget/Post.jsx
+++ b/apps/builddao/widget/Post.jsx
@@ -16,6 +16,7 @@ const groupId = props.groupId ?? content.groupId;
 const indexKey = props.indexKey;
 const permissions = props.permissions;
 const fullPostLink = props.fullPostLink;
+const postPage = props.postPage ?? "mob.near/widget/MainPage.N.Post.Page";
 
 const notifyAccountId = accountId;
 const item = {
@@ -27,7 +28,7 @@ const item = {
 const link =
   props.link ??
   props.fullPostLink ??
-  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+  `/${postPage}?accountId=${accountId}&blockHeight=${blockHeight}`;
 
 const StyledPost = styled.div`
   margin-bottom: 1rem;

From dbdfda0e3781b782fa9c17cae2a50b45c7cecd88 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 00:17:33 -0500
Subject: [PATCH 21/34] condenses

---
 apps/builddao/widget/Aside.jsx                |   8 +-
 apps/builddao/widget/components.jsx           | 621 ++++++++++++++++++
 apps/builddao/widget/components/avatar.jsx    |  39 --
 apps/builddao/widget/components/button.jsx    |  80 ---
 apps/builddao/widget/components/checkbox.jsx  |  34 -
 .../widget/components/input-field.jsx         |  65 --
 apps/builddao/widget/components/library.jsx   |  91 ++-
 .../widget/components/pagination-widget.jsx   |  97 ---
 .../builddao/widget/components/pagination.jsx | 117 +++-
 .../widget/components/post-widget.jsx         | 408 ------------
 apps/builddao/widget/components/post.jsx      | 412 +++++++++++-
 .../widget/components/progress-state.jsx      |  68 --
 apps/builddao/widget/components/step.jsx      |  57 --
 apps/builddao/widget/components/text-box.jsx  |  43 --
 .../widget/components/text-editor.jsx         | 148 -----
 .../widget/components/upload-field.jsx        |  63 --
 .../widget/components/user-widget.jsx         | 184 ------
 apps/builddao/widget/components/user.jsx      | 188 +++++-
 18 files changed, 1349 insertions(+), 1374 deletions(-)
 create mode 100644 apps/builddao/widget/components.jsx
 delete mode 100644 apps/builddao/widget/components/avatar.jsx
 delete mode 100644 apps/builddao/widget/components/button.jsx
 delete mode 100644 apps/builddao/widget/components/checkbox.jsx
 delete mode 100644 apps/builddao/widget/components/input-field.jsx
 delete mode 100644 apps/builddao/widget/components/pagination-widget.jsx
 delete mode 100644 apps/builddao/widget/components/post-widget.jsx
 delete mode 100644 apps/builddao/widget/components/progress-state.jsx
 delete mode 100644 apps/builddao/widget/components/step.jsx
 delete mode 100644 apps/builddao/widget/components/text-box.jsx
 delete mode 100644 apps/builddao/widget/components/text-editor.jsx
 delete mode 100644 apps/builddao/widget/components/upload-field.jsx
 delete mode 100644 apps/builddao/widget/components/user-widget.jsx

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index cb1c87eb..17840813 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -1,6 +1,6 @@
-const { Button } = VM.require("buildhub.near/widget/components.button");
+const { Button } = VM.require("buildhub.near/widget/components");
 
-const Container = styled.div`
+const AsideContainer = styled.div`
   border-radius: 16px;
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
   background: var(--bg-1, #0b0c14);
@@ -21,7 +21,7 @@ const Container = styled.div`
 `;
 
 return (
-  <Container>
+  <AsideContainer>
     {Object.keys(props.feeds || {}).map((feed) => (
       <Button
         variant={props.currentFeed === feed ? "primary" : "outline"}
@@ -35,5 +35,5 @@ return (
         {props.feedsDict[feed].label}
       </Button>
     ))}
-  </Container>
+  </AsideContainer>
 );
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
new file mode 100644
index 00000000..bfae3dd4
--- /dev/null
+++ b/apps/builddao/widget/components.jsx
@@ -0,0 +1,621 @@
+const StyledButton = styled.button`
+  all: unset;
+  display: inline-flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+  font: 500 14px / normal;
+  transition: all 300ms;
+
+  ${(props) =>
+    props.type === "icon" &&
+    `
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  `}
+
+  /* Colors based on variant prop */
+  background: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#FFAF51";
+      case "outline":
+        return "transparent";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#000";
+      case "outline":
+        return "#fff";
+      default:
+        return "#CDD0D5";
+    }
+  }};
+
+  border: ${(props) =>
+    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+  /* Hover states */
+  &:hover {
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return "#e49b48";
+        case "outline":
+          return "rgba(255, 255, 255, 0.20)";
+        default:
+          return "#17181c";
+      }
+    }};
+  }
+`;
+
+function Button({ id, children, variant, type, onClick, className, style }) {
+  return (
+    <StyledButton
+      id={id}
+      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
+      className={className}
+      variant={variant}
+      type={type}
+      style={style}
+      onClick={onClick}
+    >
+      {children}
+    </StyledButton>
+  );
+}
+
+function Pagination({
+  totalPages,
+  maxVisiblePages,
+  onPageClick,
+  selectedPage,
+}) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.Pagination"
+      props={{
+        totalPages,
+        maxVisiblePages,
+        onPageClick,
+        selectedPage,
+      }}
+    />
+  );
+}
+
+function Post(props) {
+  return (
+    <Widget src={"buildhub.near/widget/components.Post"} props={{ ...props }} />
+  );
+}
+
+const Progress = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 50%;
+  border: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "1px solid var(--Yellow, #FFAF51)";
+      case "error":
+        return "1px solid var(--System-Red, #FD2A5C)";
+      case "completed":
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+      default:
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+    }
+  }};
+
+  background: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#2f2619";
+      case "error":
+        return "#2f101f";
+      case "completed":
+        return "#FFAF51";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#fff";
+      case "error":
+        return "#FD2A5C";
+      case "completed":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  }};
+`;
+
+function ProgressState({ children, status }) {
+  return (
+    <Progress
+      status={status}
+      key={`ProgressState-${status ?? "default"}-${children}`}
+    >
+      {status === "completed" ? (
+        <i className="bi bi-check"></i>
+      ) : status === "error" ? (
+        <i className="bi bi-x"></i>
+      ) : (
+        children
+      )}
+    </Progress>
+  );
+}
+
+function Step(props) {
+  const totalSteps = props.totalSteps ?? 5;
+  const currentStep = props.currentStep ?? 3;
+  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
+
+  const StepContainer = styled.div`
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: #000; /* Change color as needed */
+      background-image: repeating-linear-gradient(
+        90deg,
+        #3c3d43,
+        #3c3d43 2px,
+        transparent 2px,
+        transparent 4px
+      );
+      transform: translateY(-50%);
+      z-index: -1;
+    }
+  `;
+
+  return (
+    <StepContainer
+      className="d-flex align-items-center justify-content-between"
+      style={{ maxWidth: "360px" }}
+      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
+    >
+      {Array.from({ length: totalSteps }).map((_, i) => (
+        <ProgressState
+          className="z-1"
+          status={
+            i + 1 === currentStep
+              ? currentStatus
+              : currentStep > i + 1
+              ? "completed"
+              : "default"
+          }
+        >
+          {i + 1}
+        </ProgressState>
+      ))}
+    </StepContainer>
+  );
+}
+
+const InputContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+  display: flex;
+  max-width: ${(props) => props.maxWidth ?? "390px"};
+  width: 100%;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  flex: 1 0 0;
+
+  color: var(--White-50, #cdd0d5);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function InputField({
+  type,
+  label,
+  key,
+  placeholder,
+  value,
+  onChange,
+  maxWidth,
+}) {
+  return (
+    <InputContainer>
+      {label && <Label>{label}</Label>}
+      <Input
+        key={key}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type ?? "text"}
+        maxWidth={maxWidth}
+      />
+    </InputContainer>
+  );
+}
+
+const UploadContainer = styled.div`
+  display: flex;
+  max-width: 390px;
+  min-height: 200px;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  border-radius: 16px;
+  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
+
+  p {
+    color: var(--White-100, #fff);
+    text-align: center;
+
+    /* Body/Medium-16px */
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.secondary {
+    color: var(--White-50, #cdd0d5);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+  }
+
+  i {
+    color: white;
+    font-size: 2rem;
+  }
+`;
+
+function UploadField({ background }) {
+  return (
+    <UploadContainer background={background}>
+      <i class="bi bi-cloud-upload"></i>
+      <div className="d-flex flex-column gap-2">
+        <p>Choose a file or drag & drop it here.</p>
+        <p className="secondary">
+          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
+        </p>
+      </div>
+      <Button variant="outline" style={{ background: background && "#23242b" }}>
+        Browse Files
+      </Button>
+    </UploadContainer>
+  );
+}
+
+const TextArea = styled.textarea`
+  display: flex;
+  min-height: 100px;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  color: var(--White-50, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function TextBox({ label, value, onChange, placeholder, maxWidth }) {
+  return (
+    <div
+      className="d-flex flex-column gap-1 w-100"
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Label>{label}</Label>
+      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
+    </div>
+  );
+}
+
+const TextareaWrapper = styled.div`
+  display: grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  align-items: stretch;
+
+  textarea {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+  }
+
+  textarea::placeholder {
+    padding-top: 4px;
+    font-size: 20px;
+  }
+
+  textarea:focus::placeholder {
+    font-size: inherit;
+    padding-top: 0px;
+  }
+
+  &::after,
+  textarea,
+  iframe {
+    width: 100%;
+    min-width: 1em;
+    height: unset;
+    min-height: 3em;
+    font: inherit;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: 0px solid #eee;
+    grid-area: 1 / 1;
+    overflow: hidden;
+    outline: none;
+  }
+
+  iframe {
+    padding: 0;
+  }
+
+  textarea:focus,
+  textarea:not(:empty) {
+    border-bottom: 1px solid #eee;
+    min-height: 5em;
+  }
+
+  &::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  &.markdown-editor::after {
+    padding-top: 66px;
+    font-family: monospace;
+    font-size: 14px;
+  }
+`;
+
+const MarkdownEditor = `
+  html {
+    background: #0b0c14;
+  }
+  
+  * {
+    border: none !important;
+  }
+
+  .rc-md-editor {
+    background: #3c3d43;
+    border-top: 1px solid #3c3d43 !important; 
+    border-radius: 8px;
+  }
+
+  .editor-container {
+    background: #3c3d43;
+  }
+  
+  .drop-wrap {
+    top: -110px !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .header-list {
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
+    background: #0b0c14 !important;
+    color: #fff !important;
+
+    font-family: sans-serif !important;
+    font-size: 1rem;
+
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-navigation {
+    background: #0b0c14 !important;
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
+  
+    i {
+      color: #cdd0d5;
+    }
+  }
+
+  .editor-container {
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-editor .editor-container .sec-md .input {
+    overflow-y: auto;
+    padding: 8px !important;
+    line-height: normal;
+    border-radius: 0 0 8px 8px;
+  }
+`;
+
+function TextEditor({ value, onChange, maxWidth }) {
+  return (
+    <TextareaWrapper
+      className="markdown-editor"
+      data-value={value || ""}
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Widget
+        src="mob.near/widget/MarkdownEditorIframe"
+        props={{
+          initialText: value,
+          embedCss: MarkdownEditor,
+          onChange,
+        }}
+      />
+    </TextareaWrapper>
+  );
+}
+
+const CheckboxInput = styled.input`
+  display: none;
+`;
+
+const CheckboxLabel = styled.label`
+  display: inline-flex;
+  padding: 12px;
+  align-items: center;
+  gap: 8px;
+
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function Checkbox({ value, onChange, label }) {
+  return (
+    <div key={`Checkbox-${label ?? "No-label"}`}>
+      <CheckboxLabel>
+        <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
+        {value ? (
+          <i className="bi bi-check-square"></i>
+        ) : (
+          <i className="bi bi-square"></i>
+        )}
+        {label}
+      </CheckboxLabel>
+    </div>
+  );
+}
+
+const ImageWrapper = styled.div`
+  img {
+    width: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    height: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    flex-shrink: 0 !important;
+    border-radius: 100px !important;
+    background: lightgray 50% / cover no-repeat !important;
+  }
+
+  .profile-image {
+    width: auto !important;
+    height: auto !important;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      img {
+        width: 40px !important;
+        height: 40px !important;
+      }
+    `}
+  }
+`;
+
+function Avatar(props) {
+  const accountId = props.accountId ?? context.accountId;
+
+  return (
+    <ImageWrapper variant={props.variant}>
+      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
+    </ImageWrapper>
+  );
+}
+
+function User(props) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.User"
+      props={{ ...props }}
+    />
+  );
+}
+
+return {
+  Button,
+  Pagination,
+  Post,
+  ProgressState,
+  Step,
+  InputField,
+  UploadField,
+  TextBox,
+  TextEditor,
+  Checkbox,
+  Avatar,
+  User
+};
diff --git a/apps/builddao/widget/components/avatar.jsx b/apps/builddao/widget/components/avatar.jsx
deleted file mode 100644
index 01614d43..00000000
--- a/apps/builddao/widget/components/avatar.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-const ImageWrapper = styled.div`
-  img {
-    width: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    height: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    flex-shrink: 0 !important;
-    border-radius: 100px !important;
-    background: lightgray 50% / cover no-repeat !important;
-  }
-
-  .profile-image {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      img {
-        width: 40px !important;
-        height: 40px !important;
-      }
-    `}
-  }
-`;
-
-function Avatar(props) {
-  const accountId = props.accountId ?? context.accountId;
-
-  return (
-    <ImageWrapper variant={props.variant}>
-      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
-    </ImageWrapper>
-  );
-}
-
-return { Avatar };
diff --git a/apps/builddao/widget/components/button.jsx b/apps/builddao/widget/components/button.jsx
deleted file mode 100644
index ea95507a..00000000
--- a/apps/builddao/widget/components/button.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-const StyledButton = styled.button`
-  all: unset;
-  display: inline-flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  border-radius: 8px;
-  font: 500 14px / normal;
-  transition: all 300ms;
-
-  ${(props) =>
-    props.type === "icon" &&
-    `
-    display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 5px;
-    flex-shrink: 0;
-    border-radius: 50%;
-  `}
-
-  /* Colors based on variant prop */
-  background: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#FFAF51";
-      case "outline":
-        return "transparent";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#000";
-      case "outline":
-        return "#fff";
-      default:
-        return "#CDD0D5";
-    }
-  }};
-
-  border: ${(props) =>
-    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
-
-  /* Hover states */
-  &:hover {
-    background: ${(props) => {
-      switch (props.variant) {
-        case "primary":
-          return "#e49b48";
-        case "outline":
-          return "rgba(255, 255, 255, 0.20)";
-        default:
-          return "#17181c";
-      }
-    }};
-  }
-`;
-
-function Button({ id, children, variant, type, onClick, className, style }) {
-  return (
-    <StyledButton
-      id={id}
-      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
-      className={className}
-      variant={variant}
-      type={type}
-      style={style}
-      onClick={onClick}
-    >
-      {children}
-    </StyledButton>
-  );
-}
-
-return { Button };
diff --git a/apps/builddao/widget/components/checkbox.jsx b/apps/builddao/widget/components/checkbox.jsx
deleted file mode 100644
index 92d86b1c..00000000
--- a/apps/builddao/widget/components/checkbox.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-const Input = styled.input`
-  display: none;
-`;
-
-const Label = styled.label`
-  display: inline-flex;
-  padding: 12px;
-  align-items: center;
-  gap: 8px;
-
-  color: #fff;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function Checkbox({ value, onChange, label }) {
-  return (
-    <div key={`Checkbox-${label ?? "No-label"}`}>
-      <Label>
-        <Input type="checkbox" checked={value} onChange={onChange} />
-        {value ? (
-          <i className="bi bi-check-square"></i>
-        ) : (
-          <i className="bi bi-square"></i>
-        )}
-        {label}
-      </Label>
-    </div>
-  );
-}
-
-return { Checkbox };
diff --git a/apps/builddao/widget/components/input-field.jsx b/apps/builddao/widget/components/input-field.jsx
deleted file mode 100644
index 117d15b6..00000000
--- a/apps/builddao/widget/components/input-field.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-const Container = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-`;
-
-const Label = styled.label`
-  color: var(--White-100, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const Input = styled.input`
-  display: flex;
-  max-width: ${(props) => props.maxWidth ?? "390px"};
-  width: 100%;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  flex: 1 0 0;
-
-  color: var(--White-50, #cdd0d5);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function InputField({
-  type,
-  label,
-  key,
-  placeholder,
-  value,
-  onChange,
-  maxWidth,
-}) {
-  return (
-    <Container>
-      {label && <Label>{label}</Label>}
-      <Input
-        key={key}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        type={type ?? "text"}
-        maxWidth={maxWidth}
-      />
-    </Container>
-  );
-}
-
-return { InputField };
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 0ffc59cf..beb7dea2 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -1,30 +1,18 @@
 // Buttons/Navigation
-const { Button } = VM.require("buildhub.near/widget/components.button");
-const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
-const { ProgressState } = VM.require(
-  "buildhub.near/widget/components.progress-state"
-);
-const { Step } = VM.require("buildhub.near/widget/components.step");
-
-// Inputs
-const { InputField } = VM.require(
-  "buildhub.near/widget/components.input-field"
-);
-const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
-const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
-const { TextEditor } = VM.require(
-  "buildhub.near/widget/components.text-editor"
-);
-const { UploadField } = VM.require(
-  "buildhub.near/widget/components.upload-field"
-);
-
-// Modals
-const { Post } = VM.require("buildhub.near/widget/components.post");
-
-// Avatars/Users
-const { User } = VM.require("buildhub.near/widget/components.user");
-const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+const {
+  Button,
+  Pagination,
+  ProgressState,
+  Step,
+  Post,
+  InputField,
+  UploadField,
+  TextBox,
+  TextEditor,
+  User,
+  Avatar,
+  Checkbox
+} = VM.require("buildhub.near/widget/components");
 
 // states
 const [checked, setChecked] = useState(false);
@@ -65,7 +53,7 @@ const components = [
   {
     name: "Button",
     category: "Buttons/Navigation",
-    widgetSrc: "buildhub.near/widget/components.button",
+    widgetSrc: "buildhub.near/widget/components",
     description:
       "Button component with three different variants, and icon support.",
     requiredProps: {
@@ -81,7 +69,7 @@ const components = [
     },
     preview: ButtonPreview,
     embedCode: `
-  const { Button } = VM.require("buildhub.near/widget/components.button");
+  const { Button } = VM.require("buildhub.near/widget/components.
 
   return (
     <div>
@@ -118,7 +106,7 @@ const components = [
   {
     name: "Pagination",
     category: "Buttons/Navigation",
-    widgetSrc: "buildhub.near/widget/components.pagination",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Pagination component for page switching.",
     requiredProps: {
       totalPages: "Total pages",
@@ -130,7 +118,7 @@ const components = [
     },
     preview: <Pagination totalPages={4} selectedPage={1} />,
     embedCode: `
-  const { Pagination } = VM.require("buildhub.near/widget/components.pagination");
+  const { Pagination } = VM.require("buildhub.near/widget/components.
 
   return (
     <Pagination totalPages={4} selectedPage={1} />
@@ -139,7 +127,7 @@ const components = [
   {
     name: "Progress State",
     category: "Buttons/Navigation",
-    widgetSrc: "buildhub.near/widget/components.progress-state",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Progress state for step component.",
     requiredProps: {
       children: "Children to render",
@@ -156,7 +144,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { ProgressState } = VM.require("buildhub.near/widget/components.progress-state");
+  const { ProgressState } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex align-items-center gap-3 mb-3">
@@ -170,7 +158,7 @@ const components = [
   {
     name: "Step",
     category: "Buttons/Navigation",
-    widgetSrc: "buildhub.near/widget/components.step",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Step component to show progress between steps.",
     requiredProps: {
       totalSteps: "Total number of steps",
@@ -190,7 +178,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { Step } = VM.require("buildhub.near/widget/components.step");
+  const { Step } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex flex-column gap-3 mb-3">
@@ -203,7 +191,7 @@ const components = [
   {
     name: "Input Field",
     category: "Fields",
-    widgetSrc: "buildhub.near/widget/components.input-field",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Input field for text input",
     requiredProps: {
       value: "Current Value of input",
@@ -234,7 +222,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { InputField } = VM.require("buildhub.near/widget/components.input-field");
+  const { InputField } = VM.require("buildhub.near/widget/components");
 
   const [value, setValue] = useState("");
   const [password, setPassword] = useState("");
@@ -262,7 +250,7 @@ const components = [
   {
     name: "Checkbox",
     category: "Fields",
-    widgetSrc: "buildhub.near/widget/components.checkbox",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Checkbox input for toggles",
     requiredProps: {
       value: "Current Value of checkbox",
@@ -283,7 +271,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { Checkbox } = VM.require("buildhub.near/widget/components.checkbox");
+  const { Checkbox } = VM.require("buildhub.near/widget/components");
 
   const [checked, setChecked] = useState(false);
 
@@ -300,7 +288,7 @@ const components = [
   {
     name: "Textbox",
     category: "Fields",
-    widgetSrc: "buildhub.near/widget/components.text-box",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Textbox for text input",
     requiredProps: {
       value: "Current Value of text box",
@@ -315,7 +303,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { TextBox } = VM.require("buildhub.near/widget/components.text-box");
+  const { TextBox } = VM.require("buildhub.near/widget/components");
 
   const [value, setValue] = useState("");
 
@@ -333,7 +321,7 @@ const components = [
   {
     name: "Text Editor",
     category: "Fields",
-    widgetSrc: "buildhub.near/widget/components.text-editor",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Text editor for markdown input",
     requiredProps: {
       value: "Current Value of checkbox",
@@ -348,7 +336,7 @@ const components = [
       </>
     ),
     embedCode: `
-  const { TextEditor } = VM.require("buildhub.near/widget/components.text-editor");
+  const { TextEditor } = VM.require("buildhub.near/widget/components");
 
   const [value, setValue] = useState("");
 
@@ -364,7 +352,7 @@ const components = [
   {
     name: "Upload Field",
     category: "Fields",
-    widgetSrc: "buildhub.near/widget/components.upload-field",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Component for file uploads",
     optionalProps: {
       background: "Background color of upload filed (default true)",
@@ -376,7 +364,7 @@ const components = [
       </div>
     ),
     embedCode: `
-  const { UploadField } = VM.require("buildhub.near/widget/components.upload-field");
+  const { UploadField } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex flex-column gap-3 mb-3">
@@ -388,7 +376,7 @@ const components = [
   {
     name: "Post",
     category: "Modals",
-    widgetSrc: "buildhub.near/widget/components.post",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Post preview component",
     requiredProps: {
       accountId: "AccountId of post creator",
@@ -417,7 +405,7 @@ const components = [
       </div>
     ),
     embedCode: `
-  const { Post } = VM.require("buildhub.near/widget/components.post");
+  const { Post } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex flex-column gap-3 mb-3">
@@ -432,7 +420,7 @@ const components = [
   {
     name: "User",
     category: "Avatars/Users",
-    widgetSrc: "buildhub.near/widget/components.user",
+    widgetSrc: "buildhub.near/widget/components",
     description: "User component for user profile",
     requiredProps: {
       accountId: "AccountId of post creator",
@@ -464,7 +452,7 @@ const components = [
       </div>
     ),
     embedCode: `
-  const { User } = VM.require("buildhub.near/widget/components.user");
+  const { User } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex flex-column gap-3 mb-3">
@@ -487,7 +475,7 @@ const components = [
   {
     name: "Avatar",
     category: "Avatars/Users",
-    widgetSrc: "buildhub.near/widget/components.avatar",
+    widgetSrc: "buildhub.near/widget/components",
     description: "Show user avatar",
     requiredProps: {
       accountId: "AccountId of post creator",
@@ -502,7 +490,7 @@ const components = [
       </div>
     ),
     embedCode: `
-  const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+  const { Avatar } = VM.require("buildhub.near/widget/components");
 
   return (
     <div className="d-flex flex-column gap-3 mb-3">
@@ -513,6 +501,7 @@ const components = [
   },
 ];
 
+
 const renderProps = (props, optional) => {
   return Object.entries(props || {}).map(([key, desc]) => {
     return (
@@ -705,6 +694,8 @@ const Grid = styled.div`
   }
 `;
 
+// return <p style={{ color: "white" }}>Hello World</p>;
+
 return (
   <Grid className="container-xl">
     <div className="aside">
diff --git a/apps/builddao/widget/components/pagination-widget.jsx b/apps/builddao/widget/components/pagination-widget.jsx
deleted file mode 100644
index 4196eb2a..00000000
--- a/apps/builddao/widget/components/pagination-widget.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-const totalPages = props.totalPages ?? 12; // Assume you have 12 pages
-const maxVisiblePages = props.maxVisiblePages ?? 4;
-const onPageClick = props.onPageClick
-  ? props.onPageClick
-  : () => console.log("clicked");
-const pagesToShow = Math.min(totalPages, maxVisiblePages);
-const [selectedPage, setSelectedPage] = useState(props.selectedPage ?? 11);
-const totalPageSets = Math.ceil(totalPages / maxVisiblePages);
-const [currentPageSet, setCurrentPageSet] = useState(totalPageSets);
-
-const Pagination = styled.div`
-  display: flex;
-  gap: 12px;
-
-  div {
-    display: flex;
-    height: 40px;
-    min-width: 40px;
-    padding: 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 8px;
-    color: var(--White-100, #fff);
-    transition: all 300ms;
-    cursor: pointer;
-
-    /* Other/Button_text */
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-
-    &.selected,
-    &:hover {
-      background-color: #23242b;
-    }
-
-    &.arrow {
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-  }
-`;
-
-const handlePageClick = (pageNumber) => {
-  onPageClick(pageNumber);
-};
-
-const handleArrowClick = (direction) => {
-  if (direction === "left") {
-    setCurrentPageSet(Math.max(currentPageSet - 1, 1));
-  } else {
-    setCurrentPageSet(
-      Math.min(currentPageSet + 1, Math.ceil(totalPages / maxVisiblePages))
-    );
-  }
-};
-
-const getPageNumber = (index) =>
-  (currentPageSet - 1) * maxVisiblePages + index + 1;
-
-return (
-  <Pagination>
-    <div
-      className={`arrow ${currentPageSet === 1 ? "disabled" : undefined}`}
-      onClick={() => handleArrowClick("left")}
-    >
-      <i className="bi bi-arrow-left"></i>
-    </div>
-    {Array.from({ length: pagesToShow }).map((_, index) => {
-      const pageNumber = getPageNumber(index);
-      return (
-        <div
-          key={pageNumber}
-          className={pageNumber === selectedPage ? "selected" : undefined}
-          onClick={() => handlePageClick(pageNumber)}
-        >
-          {pageNumber}
-        </div>
-      );
-    })}
-    <div
-      className={`arrow ${
-        currentPageSet === Math.ceil(totalPages / maxVisiblePages)
-          ? "disabled"
-          : undefined
-      }`}
-      onClick={() => handleArrowClick("right")}
-    >
-      <i className="bi bi-arrow-right"></i>
-    </div>
-  </Pagination>
-);
diff --git a/apps/builddao/widget/components/pagination.jsx b/apps/builddao/widget/components/pagination.jsx
index f371a359..4196eb2a 100644
--- a/apps/builddao/widget/components/pagination.jsx
+++ b/apps/builddao/widget/components/pagination.jsx
@@ -1,20 +1,97 @@
-function Pagination({
-  totalPages,
-  maxVisiblePages,
-  onPageClick,
-  selectedPage,
-}) {
-  return (
-    <Widget
-      src="buildhub.near/widget/components.pagination-widget"
-      props={{
-        totalPages,
-        maxVisiblePages,
-        onPageClick,
-        selectedPage,
-      }}
-    />
-  );
-}
-
-return { Pagination };
+const totalPages = props.totalPages ?? 12; // Assume you have 12 pages
+const maxVisiblePages = props.maxVisiblePages ?? 4;
+const onPageClick = props.onPageClick
+  ? props.onPageClick
+  : () => console.log("clicked");
+const pagesToShow = Math.min(totalPages, maxVisiblePages);
+const [selectedPage, setSelectedPage] = useState(props.selectedPage ?? 11);
+const totalPageSets = Math.ceil(totalPages / maxVisiblePages);
+const [currentPageSet, setCurrentPageSet] = useState(totalPageSets);
+
+const Pagination = styled.div`
+  display: flex;
+  gap: 12px;
+
+  div {
+    display: flex;
+    height: 40px;
+    min-width: 40px;
+    padding: 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    color: var(--White-100, #fff);
+    transition: all 300ms;
+    cursor: pointer;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &.selected,
+    &:hover {
+      background-color: #23242b;
+    }
+
+    &.arrow {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+  }
+`;
+
+const handlePageClick = (pageNumber) => {
+  onPageClick(pageNumber);
+};
+
+const handleArrowClick = (direction) => {
+  if (direction === "left") {
+    setCurrentPageSet(Math.max(currentPageSet - 1, 1));
+  } else {
+    setCurrentPageSet(
+      Math.min(currentPageSet + 1, Math.ceil(totalPages / maxVisiblePages))
+    );
+  }
+};
+
+const getPageNumber = (index) =>
+  (currentPageSet - 1) * maxVisiblePages + index + 1;
+
+return (
+  <Pagination>
+    <div
+      className={`arrow ${currentPageSet === 1 ? "disabled" : undefined}`}
+      onClick={() => handleArrowClick("left")}
+    >
+      <i className="bi bi-arrow-left"></i>
+    </div>
+    {Array.from({ length: pagesToShow }).map((_, index) => {
+      const pageNumber = getPageNumber(index);
+      return (
+        <div
+          key={pageNumber}
+          className={pageNumber === selectedPage ? "selected" : undefined}
+          onClick={() => handlePageClick(pageNumber)}
+        >
+          {pageNumber}
+        </div>
+      );
+    })}
+    <div
+      className={`arrow ${
+        currentPageSet === Math.ceil(totalPages / maxVisiblePages)
+          ? "disabled"
+          : undefined
+      }`}
+      onClick={() => handleArrowClick("right")}
+    >
+      <i className="bi bi-arrow-right"></i>
+    </div>
+  </Pagination>
+);
diff --git a/apps/builddao/widget/components/post-widget.jsx b/apps/builddao/widget/components/post-widget.jsx
deleted file mode 100644
index b8bcf363..00000000
--- a/apps/builddao/widget/components/post-widget.jsx
+++ /dev/null
@@ -1,408 +0,0 @@
-const { User } = VM.require("buildhub.near/widget/components.user");
-
-const StyledPost = styled.div`
-  margin-bottom: 1rem;
-  .post {
-    border-radius: 16px;
-    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-    color: #b6b6b8;
-    padding: 24px !important;
-    background-color: #23242b;
-    transition: all 300ms;
-
-    &:hover {
-      background-color: #1c1f33 !important;
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(28, 31, 51, 0),
-          rgba(28, 31, 51, 1) 25%
-        ) !important;
-      }
-    }
-
-    .post-header {
-      span,
-      .text-muted {
-        color: #fff !important;
-      }
-    }
-
-    .buttons {
-      border-top: 1px solid #3c3d43;
-      padding: 0.5rem;
-    }
-
-    .expand-post {
-      background-image: linear-gradient(
-        to bottom,
-        rgba(35, 36, 43, 0),
-        rgba(35, 36, 43, 1) 25%
-      ) !important;
-    }
-  }
-
-  .dropdown-menu {
-    background-color: #0b0c14 !important;
-    color: #fff !important;
-
-    li.dropdown-item {
-      color: #fff !important;
-      &:hover {
-        a {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-
-    .link-dark,
-    .dropdown-item {
-      color: #fff !important;
-
-      &:hover {
-        color: #0b0c14 !important;
-
-        span {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-  }
-
-  textarea {
-    color: #b6b6b8 !important;
-  }
-`;
-
-const Wrapper = styled.div`
-  margin: 0 -12px;
-  line-height: normal;
-
-  .post {
-    position: relative;
-    padding: 12px;
-    padding-bottom: 4px;
-    display: flex;
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 16px !important;
-    }
-    @media (max-width: 767px) {
-      font-size: 15px !important;
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-size: 15px !important;
-      }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    strong,
-    b {
-      font-weight: 500 !important;
-    }
-    ol,
-    ul,
-    dl {
-      margin-bottom: 0.5rem;
-      white-space: inherit;
-    }
-    p {
-      margin-bottom: 0.5rem;
-    }
-    hr {
-      display: none;
-    }
-    img {
-      border-radius: var(--bs-border-radius-lg);
-      max-height: 40em;
-    }
-    th {
-      min-width: 5em;
-    }
-
-    .table > :not(caption) > * > * {
-      padding: 0.3rem;
-    }
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.03);
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0),
-          rgba(247.35, 247.35, 247.35, 1) 25%
-        );
-      }
-    }
-
-    .post-header {
-      margin: 4px 0;
-    }
-  }
-
-  .post:not(:last-child):before {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 56px;
-    bottom: 0;
-    width: 2px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .post:not(:first-child):after {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 0;
-    width: 2px;
-    height: 8px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .left {
-    margin-right: 12px;
-    min-width: 40px;
-    width: 40px;
-    overflow: hidden;
-  }
-  .right {
-    margin-top: -4px;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .buttons-placeholder {
-    padding-bottom: 10px;
-  }
-
-  .buttons {
-    margin-top: 10px;
-    margin-bottom: 6px;
-    column-gap: 4px;
-    color: #888;
-  }
-
-  .reposted {
-    padding-top: 30px;
-  }
-`;
-
-const RepostWidgetDesktop = styled.div`
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const RepostWidgetMobile = styled.div`
-  display: none;
-  @media screen and (max-width: 768px) {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-`;
-const accountId = props.accountId;
-if (!accountId) {
-  return "No accountId";
-}
-const blockHeight =
-  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
-const hideButtons = !!props.hideButtons;
-const content =
-  props.content ??
-  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
-const subscribe = !!props.subscribe;
-const raw = !!props.raw;
-const groupId = props.groupId ?? content.groupId;
-const indexKey = props.indexKey;
-const permissions = props.permissions;
-const fullPostLink = props.fullPostLink;
-
-const notifyAccountId = accountId;
-const item = {
-  type: "social",
-  path: `${accountId}/post/main`,
-  blockHeight,
-};
-
-const link =
-  props.link ??
-  props.fullPostLink ??
-  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
-
-const contentWidget = (
-  <>
-    <Widget
-      key="content"
-      loading={
-        <div
-          className="overflow-hidden w-100 placeholder-glow"
-          style={{ minHeight: "100px" }}
-        />
-      }
-      src="mob.near/widget/MainPage.N.Post.Content"
-      props={{
-        content,
-        raw,
-        truncateContent: props.truncateContent,
-        noEmbed: props.noEmbed,
-      }}
-    />
-    <RepostWidgetMobile>
-      <Widget
-        loading=""
-        src="mob.near/widget/N.RepostButton"
-        props={{
-          disable: permissions.disableRepost,
-          notifyAccountId,
-          item,
-          // indexKey,
-          // groupId,
-        }}
-      />
-      <span>Repost Feed</span>
-    </RepostWidgetMobile>
-  </>
-);
-
-return (
-  <StyledPost>
-    <Wrapper
-      className="w-100 mx-auto"
-      style={
-        props.hideComments || props.noBorder
-          ? undefined
-          : {
-              borderBottom: "1px solid #eee",
-            }
-      }
-    >
-      <div className={`post ${props.reposted ? "reposted" : ""}`}>
-        <div className="right d-flex flex-column gap-3">
-          <User
-            accountId={accountId}
-            blockHeight={blockHeight}
-            pinned={pinned}
-            hideMenu={hideMenu}
-            link={link}
-            postType={"post"}
-            flagItem={item}
-          />
-          {fullPostLink ? (
-            <a
-              key="full-post-link"
-              target="_blank"
-              href={fullPostLink}
-              className="text-decoration-none link-dark"
-            >
-              {contentWidget}
-            </a>
-          ) : (
-            contentWidget
-          )}
-          {props.customButtons ? (
-            props.customButtons
-          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
-            <div className="buttons d-flex justify-content-between">
-              <Widget
-                loading=""
-                src="mob.near/widget/N.CommentButton"
-                props={{
-                  disabled: permissions.disableComment,
-                  onClick: () => State.update({ showReply: !state.showReply }),
-                }}
-              />
-              <RepostWidgetDesktop>
-                <Widget
-                  loading=""
-                  src="mob.near/widget/N.RepostButton"
-                  props={{
-                    disable: permissions.disableRepost,
-                    notifyAccountId,
-                    item,
-                    // indexKey,
-                    // groupId,
-                  }}
-                />
-              </RepostWidgetDesktop>
-              <Widget
-                loading=""
-                src="mob.near/widget/N.LikeButton"
-                props={{
-                  notifyAccountId,
-                  item,
-                }}
-              />
-              <Widget
-                loading=""
-                src="buildhub.near/widget/components.post.bookmark-button"
-                props={{
-                  item,
-                }}
-              />
-              <Widget
-                loading=""
-                src="mob.near/widget/MainPage.N.Post.ShareButton"
-                props={{ accountId, blockHeight, postType: "post", groupId }}
-              />
-            </div>
-          ) : (
-            <div className="buttons-placeholder" />
-          )}
-        </div>
-      </div>
-      {state.showReply && (
-        <div className="border-top">
-          <Widget
-            loading=""
-            src="mob.near/widget/MainPage.N.Comment.Compose"
-            props={{
-              notifyAccountId,
-              item,
-              onComment: () => State.update({ showReply: false }),
-            }}
-          />
-        </div>
-      )}
-      {props.customComments
-        ? props.customComments
-        : !props.hideComments && (
-            <div className="ms-5 my-3">
-              <Widget
-                key="comments"
-                loading={false}
-                src="mob.near/widget/MainPage.N.Comment.Feed"
-                props={{
-                  item,
-                  highlightComment: props.highlightComment,
-                  limit: props.commentsLimit,
-                  subscribe,
-                  raw,
-                  accounts: props.commentAccounts,
-                  groupId,
-                  permissions,
-                }}
-              />
-            </div>
-          )}
-    </Wrapper>
-  </StyledPost>
-);
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/post.jsx
index 900325da..15d2fd67 100644
--- a/apps/builddao/widget/components/post.jsx
+++ b/apps/builddao/widget/components/post.jsx
@@ -1,10 +1,408 @@
-function Post(props) {
-  return (
+const { User } = VM.require("buildhub.near/widget/components");
+
+const StyledPost = styled.div`
+  margin-bottom: 1rem;
+  .post {
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    color: #b6b6b8;
+    padding: 24px !important;
+    background-color: #23242b;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #1c1f33 !important;
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(28, 31, 51, 0),
+          rgba(28, 31, 51, 1) 25%
+        ) !important;
+      }
+    }
+
+    .post-header {
+      span,
+      .text-muted {
+        color: #fff !important;
+      }
+    }
+
+    .buttons {
+      border-top: 1px solid #3c3d43;
+      padding: 0.5rem;
+    }
+
+    .expand-post {
+      background-image: linear-gradient(
+        to bottom,
+        rgba(35, 36, 43, 0),
+        rgba(35, 36, 43, 1) 25%
+      ) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: #0b0c14 !important;
+    color: #fff !important;
+
+    li.dropdown-item {
+      color: #fff !important;
+      &:hover {
+        a {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: #fff !important;
+
+      &:hover {
+        color: #0b0c14 !important;
+
+        span {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+  }
+
+  textarea {
+    color: #b6b6b8 !important;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin: 0 -12px;
+  line-height: normal;
+
+  .post {
+    position: relative;
+    padding: 12px;
+    padding-bottom: 4px;
+    display: flex;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 16px !important;
+    }
+    @media (max-width: 767px) {
+      font-size: 15px !important;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 15px !important;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    b {
+      font-weight: 500 !important;
+    }
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0.5rem;
+      white-space: inherit;
+    }
+    p {
+      margin-bottom: 0.5rem;
+    }
+    hr {
+      display: none;
+    }
+    img {
+      border-radius: var(--bs-border-radius-lg);
+      max-height: 40em;
+    }
+    th {
+      min-width: 5em;
+    }
+
+    .table > :not(caption) > * > * {
+      padding: 0.3rem;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(247.35, 247.35, 247.35, 1) 25%
+        );
+      }
+    }
+
+    .post-header {
+      margin: 4px 0;
+    }
+  }
+
+  .post:not(:last-child):before {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 56px;
+    bottom: 0;
+    width: 2px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .post:not(:first-child):after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 0;
+    width: 2px;
+    height: 8px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .left {
+    margin-right: 12px;
+    min-width: 40px;
+    width: 40px;
+    overflow: hidden;
+  }
+  .right {
+    margin-top: -4px;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .buttons-placeholder {
+    padding-bottom: 10px;
+  }
+
+  .buttons {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    column-gap: 4px;
+    color: #888;
+  }
+
+  .reposted {
+    padding-top: 30px;
+  }
+`;
+
+const RepostWidgetDesktop = styled.div`
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const RepostWidgetMobile = styled.div`
+  display: none;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+const accountId = props.accountId;
+if (!accountId) {
+  return "No accountId";
+}
+const blockHeight =
+  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+  props.content ??
+  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+
+const notifyAccountId = accountId;
+const item = {
+  type: "social",
+  path: `${accountId}/post/main`,
+  blockHeight,
+};
+
+const link =
+  props.link ??
+  props.fullPostLink ??
+  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const contentWidget = (
+  <>
     <Widget
-      src={"buildhub.near/widget/components.post-widget"}
-      props={{ ...props }}
+      key="content"
+      loading={
+        <div
+          className="overflow-hidden w-100 placeholder-glow"
+          style={{ minHeight: "100px" }}
+        />
+      }
+      src="mob.near/widget/MainPage.N.Post.Content"
+      props={{
+        content,
+        raw,
+        truncateContent: props.truncateContent,
+        noEmbed: props.noEmbed,
+      }}
     />
-  );
-}
+    <RepostWidgetMobile>
+      <Widget
+        loading=""
+        src="mob.near/widget/N.RepostButton"
+        props={{
+          disable: permissions.disableRepost,
+          notifyAccountId,
+          item,
+          // indexKey,
+          // groupId,
+        }}
+      />
+      <span>Repost Feed</span>
+    </RepostWidgetMobile>
+  </>
+);
 
-return { Post };
+return (
+  <StyledPost>
+    <Wrapper
+      className="w-100 mx-auto"
+      style={
+        props.hideComments || props.noBorder
+          ? undefined
+          : {
+              borderBottom: "1px solid #eee",
+            }
+      }
+    >
+      <div className={`post ${props.reposted ? "reposted" : ""}`}>
+        <div className="right d-flex flex-column gap-3">
+          <User
+            accountId={accountId}
+            blockHeight={blockHeight}
+            pinned={pinned}
+            hideMenu={hideMenu}
+            link={link}
+            postType={"post"}
+            flagItem={item}
+          />
+          {fullPostLink ? (
+            <a
+              key="full-post-link"
+              target="_blank"
+              href={fullPostLink}
+              className="text-decoration-none link-dark"
+            >
+              {contentWidget}
+            </a>
+          ) : (
+            contentWidget
+          )}
+          {props.customButtons ? (
+            props.customButtons
+          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+            <div className="buttons d-flex justify-content-between">
+              <Widget
+                loading=""
+                src="mob.near/widget/N.CommentButton"
+                props={{
+                  disabled: permissions.disableComment,
+                  onClick: () => State.update({ showReply: !state.showReply }),
+                }}
+              />
+              <RepostWidgetDesktop>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.RepostButton"
+                  props={{
+                    disable: permissions.disableRepost,
+                    notifyAccountId,
+                    item,
+                    // indexKey,
+                    // groupId,
+                  }}
+                />
+              </RepostWidgetDesktop>
+              <Widget
+                loading=""
+                src="mob.near/widget/N.LikeButton"
+                props={{
+                  notifyAccountId,
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="buildhub.near/widget/components.post.bookmark-button"
+                props={{
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/MainPage.N.Post.ShareButton"
+                props={{ accountId, blockHeight, postType: "post", groupId }}
+              />
+            </div>
+          ) : (
+            <div className="buttons-placeholder" />
+          )}
+        </div>
+      </div>
+      {state.showReply && (
+        <div className="border-top">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Comment.Compose"
+            props={{
+              notifyAccountId,
+              item,
+              onComment: () => State.update({ showReply: false }),
+            }}
+          />
+        </div>
+      )}
+      {props.customComments
+        ? props.customComments
+        : !props.hideComments && (
+            <div className="ms-5 my-3">
+              <Widget
+                key="comments"
+                loading={false}
+                src="mob.near/widget/MainPage.N.Comment.Feed"
+                props={{
+                  item,
+                  highlightComment: props.highlightComment,
+                  limit: props.commentsLimit,
+                  subscribe,
+                  raw,
+                  accounts: props.commentAccounts,
+                  groupId,
+                  permissions,
+                }}
+              />
+            </div>
+          )}
+    </Wrapper>
+  </StyledPost>
+);
diff --git a/apps/builddao/widget/components/progress-state.jsx b/apps/builddao/widget/components/progress-state.jsx
deleted file mode 100644
index f640d58e..00000000
--- a/apps/builddao/widget/components/progress-state.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-const Progress = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  padding: 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-
-  border-radius: 50%;
-  border: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "1px solid var(--Yellow, #FFAF51)";
-      case "error":
-        return "1px solid var(--System-Red, #FD2A5C)";
-      case "completed":
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-      default:
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-    }
-  }};
-
-  background: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#2f2619";
-      case "error":
-        return "#2f101f";
-      case "completed":
-        return "#FFAF51";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#fff";
-      case "error":
-        return "#FD2A5C";
-      case "completed":
-        return "#000";
-      default:
-        return "#fff";
-    }
-  }};
-`;
-
-function ProgressState({ children, status }) {
-  return (
-    <Progress
-      status={status}
-      key={`ProgressState-${status ?? "default"}-${children}`}
-    >
-      {status === "completed" ? (
-        <i className="bi bi-check"></i>
-      ) : status === "error" ? (
-        <i className="bi bi-x"></i>
-      ) : (
-        children
-      )}
-    </Progress>
-  );
-}
-
-return { ProgressState };
diff --git a/apps/builddao/widget/components/step.jsx b/apps/builddao/widget/components/step.jsx
deleted file mode 100644
index d67daaf8..00000000
--- a/apps/builddao/widget/components/step.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-const { ProgressState } = VM.require(
-  "buildhub.near/widget/components.progress-state"
-);
-
-function Step(props) {
-  const totalSteps = props.totalSteps ?? 5;
-  const currentStep = props.currentStep ?? 3;
-  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
-
-  const Container = styled.div`
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: #000; /* Change color as needed */
-      background-image: repeating-linear-gradient(
-        90deg,
-        #3c3d43,
-        #3c3d43 2px,
-        transparent 2px,
-        transparent 4px
-      );
-      transform: translateY(-50%);
-      z-index: -1;
-    }
-  `;
-
-  return (
-    <Container
-      className="d-flex align-items-center justify-content-between"
-      style={{ maxWidth: "360px" }}
-      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
-    >
-      {Array.from({ length: totalSteps }).map((_, i) => (
-        <ProgressState
-          className="z-1"
-          status={
-            i + 1 === currentStep
-              ? currentStatus
-              : currentStep > i + 1
-              ? "completed"
-              : "default"
-          }
-        >
-          {i + 1}
-        </ProgressState>
-      ))}
-    </Container>
-  );
-}
-
-return { Step };
diff --git a/apps/builddao/widget/components/text-box.jsx b/apps/builddao/widget/components/text-box.jsx
deleted file mode 100644
index 9774caf0..00000000
--- a/apps/builddao/widget/components/text-box.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-const Label = styled.label`
-  color: var(--White-100, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const TextArea = styled.textarea`
-  display: flex;
-  min-height: 100px;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  color: var(--White-50, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function TextBox({ label, value, onChange, placeholder, maxWidth }) {
-  return (
-    <div
-      className="d-flex flex-column gap-1 w-100"
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Label>{label}</Label>
-      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
-    </div>
-  );
-}
-return { TextBox };
diff --git a/apps/builddao/widget/components/text-editor.jsx b/apps/builddao/widget/components/text-editor.jsx
deleted file mode 100644
index ca0ad013..00000000
--- a/apps/builddao/widget/components/text-editor.jsx
+++ /dev/null
@@ -1,148 +0,0 @@
-const TextareaWrapper = styled.div`
-  display: grid;
-  vertical-align: top;
-  align-items: center;
-  position: relative;
-  align-items: stretch;
-
-  textarea {
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-  }
-
-  textarea::placeholder {
-    padding-top: 4px;
-    font-size: 20px;
-  }
-
-  textarea:focus::placeholder {
-    font-size: inherit;
-    padding-top: 0px;
-  }
-
-  &::after,
-  textarea,
-  iframe {
-    width: 100%;
-    min-width: 1em;
-    height: unset;
-    min-height: 3em;
-    font: inherit;
-    margin: 0;
-    resize: none;
-    background: none;
-    appearance: none;
-    border: 0px solid #eee;
-    grid-area: 1 / 1;
-    overflow: hidden;
-    outline: none;
-  }
-
-  iframe {
-    padding: 0;
-  }
-
-  textarea:focus,
-  textarea:not(:empty) {
-    border-bottom: 1px solid #eee;
-    min-height: 5em;
-  }
-
-  &::after {
-    content: attr(data-value) " ";
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  &.markdown-editor::after {
-    padding-top: 66px;
-    font-family: monospace;
-    font-size: 14px;
-  }
-`;
-
-const MarkdownEditor = `
-  html {
-    background: #0b0c14;
-  }
-  
-  * {
-    border: none !important;
-  }
-
-  .rc-md-editor {
-    background: #3c3d43;
-    border-top: 1px solid #3c3d43 !important; 
-    border-radius: 8px;
-  }
-
-  .editor-container {
-    background: #3c3d43;
-  }
-  
-  .drop-wrap {
-    top: -110px !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .header-list {
-    display: flex;
-    align-items: center;
-  }
-
-  textarea {
-    background: #0b0c14 !important;
-    color: #fff !important;
-
-    font-family: sans-serif !important;
-    font-size: 1rem;
-
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-navigation {
-    background: #0b0c14 !important;
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-bottom: 0 !important;
-    border-radius: 8px 8px 0 0;
-  
-    i {
-      color: #cdd0d5;
-    }
-  }
-
-  .editor-container {
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-editor .editor-container .sec-md .input {
-    overflow-y: auto;
-    padding: 8px !important;
-    line-height: normal;
-    border-radius: 0 0 8px 8px;
-  }
-`;
-
-function TextEditor({ value, onChange, maxWidth }) {
-  return (
-    <TextareaWrapper
-      className="markdown-editor"
-      data-value={value || ""}
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Widget
-        src="mob.near/widget/MarkdownEditorIframe"
-        props={{
-          initialText: value,
-          embedCss: MarkdownEditor,
-          onChange,
-        }}
-      />
-    </TextareaWrapper>
-  );
-}
-
-return { TextEditor };
diff --git a/apps/builddao/widget/components/upload-field.jsx b/apps/builddao/widget/components/upload-field.jsx
deleted file mode 100644
index ff527de7..00000000
--- a/apps/builddao/widget/components/upload-field.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-const { Button } = VM.require("buildhub.near/widget/components.button");
-
-const Container = styled.div`
-  display: flex;
-  max-width: 390px;
-  min-height: 200px;
-  width: 100%;
-  height: 100%;
-  padding: 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  border-radius: 16px;
-  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
-
-  p {
-    color: var(--White-100, #fff);
-    text-align: center;
-
-    /* Body/Medium-16px */
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.secondary {
-    color: var(--White-50, #cdd0d5);
-    text-align: center;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px; /* 133.333% */
-  }
-
-  i {
-    color: white;
-    font-size: 2rem;
-  }
-`;
-
-function UploadField({ background }) {
-  return (
-    <Container background={background}>
-      <i class="bi bi-cloud-upload"></i>
-      <div className="d-flex flex-column gap-2">
-        <p>Choose a file or drag & drop it here.</p>
-        <p className="secondary">
-          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
-        </p>
-      </div>
-      <Button variant="outline" style={{ background: background && "#23242b" }}>
-        Browse Files
-      </Button>
-    </Container>
-  );
-}
-
-return { UploadField };
diff --git a/apps/builddao/widget/components/user-widget.jsx b/apps/builddao/widget/components/user-widget.jsx
deleted file mode 100644
index b53b4117..00000000
--- a/apps/builddao/widget/components/user-widget.jsx
+++ /dev/null
@@ -1,184 +0,0 @@
-const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
-
-const Button = styled.div`
-  line-height: 20px;
-  min-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: left;
-  background: inherit;
-  color: #6c757d;
-  font-size: 16px;
-  .icon {
-    position: relative;
-    &:before {
-      margin: -8px;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  &:not([disabled]):hover {
-    opacity: 1 !important;
-    color: DeepSkyBlue;
-
-    .icon:before {
-      background: rgba(0, 191, 255, 0.1);
-    }
-  }
-`;
-
-const Wrapper = styled.div`
-  color: #fff;
-
-  p {
-    color: #fff;
-    color: var(--White-100, #fff);
-
-    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.username {
-    color: var(--White-50, #cdd0d5);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  p.time {
-    color: var(--White-100, #fff);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      p {
-        font-size: 13px !important;
-      }
-
-      p.username {
-        font-size: 10px !important;
-      }
-
-      p.time {
-        font-size: 10px !important;
-      }
-    `}
-  }
-`;
-
-const accountId = props.accountId;
-const blockHeight = props.blockHeight;
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
-const name = Social.get(`${accountId}/profile/name`);
-
-const postType = props.postType ?? "post";
-const link = props.link;
-const isPremium = !!props.isPremium;
-
-const Overlay = (props) => (
-  <a
-    className="link-dark text-truncate d-inline-flex mw-100"
-    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
-  >
-    <Widget
-      src="mob.near/widget/Profile.N.OverlayTrigger"
-      loading={props.children}
-      props={{
-        accountId,
-        children: props.children,
-      }}
-    />
-  </a>
-);
-
-return (
-  <div className="d-flex align-items-center">
-    <Overlay>
-      <div className="d-flex gap-1">
-        <Avatar variant={props.variant} accountId={accountId} />
-        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-          <div className="d-flex align-items-center g-1">
-            <p className="m-0">{name || "No-Name Profile"}</p>
-            <div className="flex-shrink-0">
-              <Widget
-                loading={""}
-                src="mob.near/widget/Checkmark"
-                props={{ isPremium, accountId }}
-              />
-            </div>
-          </div>
-          <p className="username">{accountId}</p>
-          <p className="time">
-            {blockHeight === "now" ? (
-              "now"
-            ) : (
-              <a className="text-white" href={link}>
-                <Widget
-                  loading=""
-                  src="mob.near/widget/TimeAgo"
-                  props={{ blockHeight }}
-                />
-              </a>
-            )}
-          </p>
-        </Wrapper>
-        {pinned && (
-          <span title="Pinned" className="ms-2">
-            <i className="bi bi-pin-angle" />
-          </span>
-        )}
-      </div>
-    </Overlay>
-    {!pinned && !hideMenu && blockHeight !== "now" && (
-      <span className="ms-auto flex-shrink-0">
-        <Button data-bs-toggle="dropdown" aria-expanded="false">
-          <i className="bi bi-three-dots-vertical"></i>
-        </Button>
-        <ul className="dropdown-menu">
-          <li className="dropdown-item">
-            <a
-              className="link-dark text-decoration-none"
-              href={`${link}&raw=true`}
-            >
-              <i className="bi bi-filetype-raw" /> View raw markdown source
-            </a>
-          </li>
-          <li>
-            <Widget
-              src="mob.near/widget/MainPage.Common.HideAccount"
-              props={{ accountId }}
-            />
-          </li>
-          {flagItem && (
-            <li>
-              <Widget
-                src="mob.near/widget/MainPage.Common.FlagContent"
-                props={{
-                  item: flagItem,
-                  label: `Flag ${postType} for moderation`,
-                }}
-              />
-            </li>
-          )}
-        </ul>
-      </span>
-    )}
-  </div>
-);
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/user.jsx
index 4257f408..ea9339b4 100644
--- a/apps/builddao/widget/components/user.jsx
+++ b/apps/builddao/widget/components/user.jsx
@@ -1,10 +1,184 @@
-function User(props) {
-  return (
+const { Avatar } = VM.require("buildhub.near/widget/components");
+
+const Button = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: #6c757d;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: DeepSkyBlue;
+
+    .icon:before {
+      background: rgba(0, 191, 255, 0.1);
+    }
+  }
+`;
+
+const Wrapper = styled.div`
+  color: #fff;
+
+  p {
+    color: #fff;
+    color: var(--White-100, #fff);
+
+    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.username {
+    color: var(--White-50, #cdd0d5);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  p.time {
+    color: var(--White-100, #fff);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      p {
+        font-size: 13px !important;
+      }
+
+      p.username {
+        font-size: 10px !important;
+      }
+
+      p.time {
+        font-size: 10px !important;
+      }
+    `}
+  }
+`;
+
+const accountId = props.accountId;
+const blockHeight = props.blockHeight;
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const name = Social.get(`${accountId}/profile/name`);
+
+const postType = props.postType ?? "post";
+const link = props.link;
+const isPremium = !!props.isPremium;
+
+const Overlay = (props) => (
+  <a
+    className="link-dark text-truncate d-inline-flex mw-100"
+    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+  >
     <Widget
-      src="buildhub.near/widget/components.user-widget"
-      props={{ ...props }}
+      src="mob.near/widget/Profile.N.OverlayTrigger"
+      loading={props.children}
+      props={{
+        accountId,
+        children: props.children,
+      }}
     />
-  );
-}
+  </a>
+);
 
-return { User };
+return (
+  <div className="d-flex align-items-center">
+    <Overlay>
+      <div className="d-flex gap-1">
+        <Avatar variant={props.variant} accountId={accountId} />
+        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+          <div className="d-flex align-items-center g-1">
+            <p className="m-0">{name || "No-Name Profile"}</p>
+            <div className="flex-shrink-0">
+              <Widget
+                loading={""}
+                src="mob.near/widget/Checkmark"
+                props={{ isPremium, accountId }}
+              />
+            </div>
+          </div>
+          <p className="username">{accountId}</p>
+          <p className="time">
+            {blockHeight === "now" ? (
+              "now"
+            ) : (
+              <a className="text-white" href={link}>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/TimeAgo"
+                  props={{ blockHeight }}
+                />
+              </a>
+            )}
+          </p>
+        </Wrapper>
+        {pinned && (
+          <span title="Pinned" className="ms-2">
+            <i className="bi bi-pin-angle" />
+          </span>
+        )}
+      </div>
+    </Overlay>
+    {!pinned && !hideMenu && blockHeight !== "now" && (
+      <span className="ms-auto flex-shrink-0">
+        <Button data-bs-toggle="dropdown" aria-expanded="false">
+          <i className="bi bi-three-dots-vertical"></i>
+        </Button>
+        <ul className="dropdown-menu">
+          <li className="dropdown-item">
+            <a
+              className="link-dark text-decoration-none"
+              href={`${link}&raw=true`}
+            >
+              <i className="bi bi-filetype-raw" /> View raw markdown source
+            </a>
+          </li>
+          <li>
+            <Widget
+              src="mob.near/widget/MainPage.Common.HideAccount"
+              props={{ accountId }}
+            />
+          </li>
+          {flagItem && (
+            <li>
+              <Widget
+                src="mob.near/widget/MainPage.Common.FlagContent"
+                props={{
+                  item: flagItem,
+                  label: `Flag ${postType} for moderation`,
+                }}
+              />
+            </li>
+          )}
+        </ul>
+      </span>
+    )}
+  </div>
+);

From 77070a6cefffccf2975c39e00240e1b02d387dde Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 00:48:41 -0500
Subject: [PATCH 22/34] index pattern

---
 apps/builddao/widget/components.jsx           | 592 +-----------------
 apps/builddao/widget/components/Avatar.jsx    |  41 ++
 apps/builddao/widget/components/Button.jsx    |  80 +++
 apps/builddao/widget/components/Checkbox.jsx  |  34 +
 .../builddao/widget/components/InputField.jsx |  65 ++
 .../widget/components/ProgressState.jsx       |  69 ++
 apps/builddao/widget/components/Step.jsx      |  55 ++
 apps/builddao/widget/components/TextBox.jsx   |  45 ++
 .../builddao/widget/components/TextEditor.jsx | 148 +++++
 .../widget/components/UploadField.jsx         |  63 ++
 apps/builddao/widget/components/library.jsx   |  12 +-
 11 files changed, 618 insertions(+), 586 deletions(-)
 create mode 100644 apps/builddao/widget/components/Avatar.jsx
 create mode 100644 apps/builddao/widget/components/Button.jsx
 create mode 100644 apps/builddao/widget/components/Checkbox.jsx
 create mode 100644 apps/builddao/widget/components/InputField.jsx
 create mode 100644 apps/builddao/widget/components/ProgressState.jsx
 create mode 100644 apps/builddao/widget/components/Step.jsx
 create mode 100644 apps/builddao/widget/components/TextBox.jsx
 create mode 100644 apps/builddao/widget/components/TextEditor.jsx
 create mode 100644 apps/builddao/widget/components/UploadField.jsx

diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
index bfae3dd4..38499bad 100644
--- a/apps/builddao/widget/components.jsx
+++ b/apps/builddao/widget/components.jsx
@@ -1,81 +1,16 @@
-const StyledButton = styled.button`
-  all: unset;
-  display: inline-flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  border-radius: 8px;
-  font: 500 14px / normal;
-  transition: all 300ms;
-
-  ${(props) =>
-    props.type === "icon" &&
-    `
-    display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 5px;
-    flex-shrink: 0;
-    border-radius: 50%;
-  `}
-
-  /* Colors based on variant prop */
-  background: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#FFAF51";
-      case "outline":
-        return "transparent";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#000";
-      case "outline":
-        return "#fff";
-      default:
-        return "#CDD0D5";
-    }
-  }};
-
-  border: ${(props) =>
-    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
-
-  /* Hover states */
-  &:hover {
-    background: ${(props) => {
-      switch (props.variant) {
-        case "primary":
-          return "#e49b48";
-        case "outline":
-          return "rgba(255, 255, 255, 0.20)";
-        default:
-          return "#17181c";
-      }
-    }};
-  }
-`;
-
-function Button({ id, children, variant, type, onClick, className, style }) {
-  return (
-    <StyledButton
-      id={id}
-      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
-      className={className}
-      variant={variant}
-      type={type}
-      style={style}
-      onClick={onClick}
-    >
-      {children}
-    </StyledButton>
-  );
-}
+const { Button } = VM.require("buildhub.near/widget/components.Button");
+const { ProgressState } = VM.require(
+  "buildhub.near/widget/components.ProgressState"
+);
+const { Step } = VM.require("buildhub.near/widget/components.Step");
+const { InputField } = VM.require("buildhub.near/widget/components.InputField");
+const { UploadField } = VM.require(
+  "buildhub.near/widget/components.UploadField"
+);
+const { TextBox } = VM.require("buildhub.near/widget/components.TextBox");
+const { TextEditor } = VM.require("buildhub.near/widget/components.TextEditor");
+const { Checkbox } = VM.require("buildhub.near/widget/components.Checkbox");
+const { Avatar } = VM.require("buildhub.near/widget/components.Avatar");
 
 function Pagination({
   totalPages,
@@ -102,506 +37,9 @@ function Post(props) {
   );
 }
 
-const Progress = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  padding: 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-
-  border-radius: 50%;
-  border: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "1px solid var(--Yellow, #FFAF51)";
-      case "error":
-        return "1px solid var(--System-Red, #FD2A5C)";
-      case "completed":
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-      default:
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-    }
-  }};
-
-  background: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#2f2619";
-      case "error":
-        return "#2f101f";
-      case "completed":
-        return "#FFAF51";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#fff";
-      case "error":
-        return "#FD2A5C";
-      case "completed":
-        return "#000";
-      default:
-        return "#fff";
-    }
-  }};
-`;
-
-function ProgressState({ children, status }) {
-  return (
-    <Progress
-      status={status}
-      key={`ProgressState-${status ?? "default"}-${children}`}
-    >
-      {status === "completed" ? (
-        <i className="bi bi-check"></i>
-      ) : status === "error" ? (
-        <i className="bi bi-x"></i>
-      ) : (
-        children
-      )}
-    </Progress>
-  );
-}
-
-function Step(props) {
-  const totalSteps = props.totalSteps ?? 5;
-  const currentStep = props.currentStep ?? 3;
-  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
-
-  const StepContainer = styled.div`
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: #000; /* Change color as needed */
-      background-image: repeating-linear-gradient(
-        90deg,
-        #3c3d43,
-        #3c3d43 2px,
-        transparent 2px,
-        transparent 4px
-      );
-      transform: translateY(-50%);
-      z-index: -1;
-    }
-  `;
-
-  return (
-    <StepContainer
-      className="d-flex align-items-center justify-content-between"
-      style={{ maxWidth: "360px" }}
-      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
-    >
-      {Array.from({ length: totalSteps }).map((_, i) => (
-        <ProgressState
-          className="z-1"
-          status={
-            i + 1 === currentStep
-              ? currentStatus
-              : currentStep > i + 1
-              ? "completed"
-              : "default"
-          }
-        >
-          {i + 1}
-        </ProgressState>
-      ))}
-    </StepContainer>
-  );
-}
-
-const InputContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-`;
-
-const Label = styled.label`
-  color: var(--White-100, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const Input = styled.input`
-  display: flex;
-  max-width: ${(props) => props.maxWidth ?? "390px"};
-  width: 100%;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  flex: 1 0 0;
-
-  color: var(--White-50, #cdd0d5);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function InputField({
-  type,
-  label,
-  key,
-  placeholder,
-  value,
-  onChange,
-  maxWidth,
-}) {
-  return (
-    <InputContainer>
-      {label && <Label>{label}</Label>}
-      <Input
-        key={key}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        type={type ?? "text"}
-        maxWidth={maxWidth}
-      />
-    </InputContainer>
-  );
-}
-
-const UploadContainer = styled.div`
-  display: flex;
-  max-width: 390px;
-  min-height: 200px;
-  width: 100%;
-  height: 100%;
-  padding: 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  border-radius: 16px;
-  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
-
-  p {
-    color: var(--White-100, #fff);
-    text-align: center;
-
-    /* Body/Medium-16px */
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.secondary {
-    color: var(--White-50, #cdd0d5);
-    text-align: center;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px; /* 133.333% */
-  }
-
-  i {
-    color: white;
-    font-size: 2rem;
-  }
-`;
-
-function UploadField({ background }) {
-  return (
-    <UploadContainer background={background}>
-      <i class="bi bi-cloud-upload"></i>
-      <div className="d-flex flex-column gap-2">
-        <p>Choose a file or drag & drop it here.</p>
-        <p className="secondary">
-          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
-        </p>
-      </div>
-      <Button variant="outline" style={{ background: background && "#23242b" }}>
-        Browse Files
-      </Button>
-    </UploadContainer>
-  );
-}
-
-const TextArea = styled.textarea`
-  display: flex;
-  min-height: 100px;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  color: var(--White-50, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function TextBox({ label, value, onChange, placeholder, maxWidth }) {
-  return (
-    <div
-      className="d-flex flex-column gap-1 w-100"
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Label>{label}</Label>
-      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
-    </div>
-  );
-}
-
-const TextareaWrapper = styled.div`
-  display: grid;
-  vertical-align: top;
-  align-items: center;
-  position: relative;
-  align-items: stretch;
-
-  textarea {
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-  }
-
-  textarea::placeholder {
-    padding-top: 4px;
-    font-size: 20px;
-  }
-
-  textarea:focus::placeholder {
-    font-size: inherit;
-    padding-top: 0px;
-  }
-
-  &::after,
-  textarea,
-  iframe {
-    width: 100%;
-    min-width: 1em;
-    height: unset;
-    min-height: 3em;
-    font: inherit;
-    margin: 0;
-    resize: none;
-    background: none;
-    appearance: none;
-    border: 0px solid #eee;
-    grid-area: 1 / 1;
-    overflow: hidden;
-    outline: none;
-  }
-
-  iframe {
-    padding: 0;
-  }
-
-  textarea:focus,
-  textarea:not(:empty) {
-    border-bottom: 1px solid #eee;
-    min-height: 5em;
-  }
-
-  &::after {
-    content: attr(data-value) " ";
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  &.markdown-editor::after {
-    padding-top: 66px;
-    font-family: monospace;
-    font-size: 14px;
-  }
-`;
-
-const MarkdownEditor = `
-  html {
-    background: #0b0c14;
-  }
-  
-  * {
-    border: none !important;
-  }
-
-  .rc-md-editor {
-    background: #3c3d43;
-    border-top: 1px solid #3c3d43 !important; 
-    border-radius: 8px;
-  }
-
-  .editor-container {
-    background: #3c3d43;
-  }
-  
-  .drop-wrap {
-    top: -110px !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .header-list {
-    display: flex;
-    align-items: center;
-  }
-
-  textarea {
-    background: #0b0c14 !important;
-    color: #fff !important;
-
-    font-family: sans-serif !important;
-    font-size: 1rem;
-
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-navigation {
-    background: #0b0c14 !important;
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-bottom: 0 !important;
-    border-radius: 8px 8px 0 0;
-  
-    i {
-      color: #cdd0d5;
-    }
-  }
-
-  .editor-container {
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-editor .editor-container .sec-md .input {
-    overflow-y: auto;
-    padding: 8px !important;
-    line-height: normal;
-    border-radius: 0 0 8px 8px;
-  }
-`;
-
-function TextEditor({ value, onChange, maxWidth }) {
-  return (
-    <TextareaWrapper
-      className="markdown-editor"
-      data-value={value || ""}
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Widget
-        src="mob.near/widget/MarkdownEditorIframe"
-        props={{
-          initialText: value,
-          embedCss: MarkdownEditor,
-          onChange,
-        }}
-      />
-    </TextareaWrapper>
-  );
-}
-
-const CheckboxInput = styled.input`
-  display: none;
-`;
-
-const CheckboxLabel = styled.label`
-  display: inline-flex;
-  padding: 12px;
-  align-items: center;
-  gap: 8px;
-
-  color: #fff;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function Checkbox({ value, onChange, label }) {
-  return (
-    <div key={`Checkbox-${label ?? "No-label"}`}>
-      <CheckboxLabel>
-        <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
-        {value ? (
-          <i className="bi bi-check-square"></i>
-        ) : (
-          <i className="bi bi-square"></i>
-        )}
-        {label}
-      </CheckboxLabel>
-    </div>
-  );
-}
-
-const ImageWrapper = styled.div`
-  img {
-    width: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    height: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    flex-shrink: 0 !important;
-    border-radius: 100px !important;
-    background: lightgray 50% / cover no-repeat !important;
-  }
-
-  .profile-image {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      img {
-        width: 40px !important;
-        height: 40px !important;
-      }
-    `}
-  }
-`;
-
-function Avatar(props) {
-  const accountId = props.accountId ?? context.accountId;
-
-  return (
-    <ImageWrapper variant={props.variant}>
-      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
-    </ImageWrapper>
-  );
-}
-
 function User(props) {
   return (
-    <Widget
-      src="buildhub.near/widget/components.User"
-      props={{ ...props }}
-    />
+    <Widget src="buildhub.near/widget/components.User" props={{ ...props }} />
   );
 }
 
@@ -617,5 +55,5 @@ return {
   TextEditor,
   Checkbox,
   Avatar,
-  User
+  User,
 };
diff --git a/apps/builddao/widget/components/Avatar.jsx b/apps/builddao/widget/components/Avatar.jsx
new file mode 100644
index 00000000..536eb972
--- /dev/null
+++ b/apps/builddao/widget/components/Avatar.jsx
@@ -0,0 +1,41 @@
+
+function Avatar(props) {
+  const accountId = props.accountId ?? context.accountId;
+
+  const ImageWrapper = styled.div`
+  img {
+    width: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    height: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    flex-shrink: 0 !important;
+    border-radius: 100px !important;
+    background: lightgray 50% / cover no-repeat !important;
+  }
+
+  .profile-image {
+    width: auto !important;
+    height: auto !important;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      img {
+        width: 40px !important;
+        height: 40px !important;
+      }
+    `}
+  }
+`;
+
+
+  return (
+    <ImageWrapper variant={props.variant}>
+      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
+    </ImageWrapper>
+  );
+}
+
+return { Avatar };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
new file mode 100644
index 00000000..ea95507a
--- /dev/null
+++ b/apps/builddao/widget/components/Button.jsx
@@ -0,0 +1,80 @@
+const StyledButton = styled.button`
+  all: unset;
+  display: inline-flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+  font: 500 14px / normal;
+  transition: all 300ms;
+
+  ${(props) =>
+    props.type === "icon" &&
+    `
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  `}
+
+  /* Colors based on variant prop */
+  background: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#FFAF51";
+      case "outline":
+        return "transparent";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#000";
+      case "outline":
+        return "#fff";
+      default:
+        return "#CDD0D5";
+    }
+  }};
+
+  border: ${(props) =>
+    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+  /* Hover states */
+  &:hover {
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return "#e49b48";
+        case "outline":
+          return "rgba(255, 255, 255, 0.20)";
+        default:
+          return "#17181c";
+      }
+    }};
+  }
+`;
+
+function Button({ id, children, variant, type, onClick, className, style }) {
+  return (
+    <StyledButton
+      id={id}
+      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
+      className={className}
+      variant={variant}
+      type={type}
+      style={style}
+      onClick={onClick}
+    >
+      {children}
+    </StyledButton>
+  );
+}
+
+return { Button };
diff --git a/apps/builddao/widget/components/Checkbox.jsx b/apps/builddao/widget/components/Checkbox.jsx
new file mode 100644
index 00000000..27387079
--- /dev/null
+++ b/apps/builddao/widget/components/Checkbox.jsx
@@ -0,0 +1,34 @@
+const CheckboxInput = styled.input`
+  display: none;
+`;
+
+const CheckboxLabel = styled.label`
+  display: inline-flex;
+  padding: 12px;
+  align-items: center;
+  gap: 8px;
+
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function Checkbox({ value, onChange, label }) {
+  return (
+    <div key={`Checkbox-${label ?? "No-label"}`}>
+      <CheckboxLabel>
+        <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
+        {value ? (
+          <i className="bi bi-check-square"></i>
+        ) : (
+          <i className="bi bi-square"></i>
+        )}
+        {label}
+      </CheckboxLabel>
+    </div>
+  );
+}
+
+return { Checkbox };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/InputField.jsx b/apps/builddao/widget/components/InputField.jsx
new file mode 100644
index 00000000..ab6fcff0
--- /dev/null
+++ b/apps/builddao/widget/components/InputField.jsx
@@ -0,0 +1,65 @@
+const InputContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+  display: flex;
+  max-width: ${(props) => props.maxWidth ?? "390px"};
+  width: 100%;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  flex: 1 0 0;
+
+  color: var(--White-50, #cdd0d5);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function InputField({
+  type,
+  label,
+  key,
+  placeholder,
+  value,
+  onChange,
+  maxWidth,
+}) {
+  return (
+    <InputContainer>
+      {label && <Label>{label}</Label>}
+      <Input
+        key={key}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type ?? "text"}
+        maxWidth={maxWidth}
+      />
+    </InputContainer>
+  );
+}
+
+return { InputField };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/ProgressState.jsx b/apps/builddao/widget/components/ProgressState.jsx
new file mode 100644
index 00000000..e96fe0ba
--- /dev/null
+++ b/apps/builddao/widget/components/ProgressState.jsx
@@ -0,0 +1,69 @@
+
+const Progress = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 50%;
+  border: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "1px solid var(--Yellow, #FFAF51)";
+      case "error":
+        return "1px solid var(--System-Red, #FD2A5C)";
+      case "completed":
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+      default:
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+    }
+  }};
+
+  background: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#2f2619";
+      case "error":
+        return "#2f101f";
+      case "completed":
+        return "#FFAF51";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#fff";
+      case "error":
+        return "#FD2A5C";
+      case "completed":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  }};
+`;
+
+function ProgressState({ children, status }) {
+  return (
+    <Progress
+      status={status}
+      key={`ProgressState-${status ?? "default"}-${children}`}
+    >
+      {status === "completed" ? (
+        <i className="bi bi-check"></i>
+      ) : status === "error" ? (
+        <i className="bi bi-x"></i>
+      ) : (
+        children
+      )}
+    </Progress>
+  );
+}
+
+return { ProgressState };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/Step.jsx b/apps/builddao/widget/components/Step.jsx
new file mode 100644
index 00000000..fb2b59bb
--- /dev/null
+++ b/apps/builddao/widget/components/Step.jsx
@@ -0,0 +1,55 @@
+const { ProgressState } = VM.require("buildhub.near/widget/components.ProgressState");
+
+const StepContainer = styled.div`
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: #000; /* Change color as needed */
+      background-image: repeating-linear-gradient(
+        90deg,
+        #3c3d43,
+        #3c3d43 2px,
+        transparent 2px,
+        transparent 4px
+      );
+      transform: translateY(-50%);
+      z-index: -1;
+    }
+  `;
+  
+function Step(props) {
+  const totalSteps = props.totalSteps ?? 5;
+  const currentStep = props.currentStep ?? 3;
+  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
+
+  return (
+    <StepContainer
+      className="d-flex align-items-center justify-content-between"
+      style={{ maxWidth: "360px" }}
+      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
+    >
+      {Array.from({ length: totalSteps }).map((_, i) => (
+        <ProgressState
+          className="z-1"
+          status={
+            i + 1 === currentStep
+              ? currentStatus
+              : currentStep > i + 1
+              ? "completed"
+              : "default"
+          }
+        >
+          {i + 1}
+        </ProgressState>
+      ))}
+    </StepContainer>
+  );
+}
+
+return { Step };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/TextBox.jsx b/apps/builddao/widget/components/TextBox.jsx
new file mode 100644
index 00000000..66113c3c
--- /dev/null
+++ b/apps/builddao/widget/components/TextBox.jsx
@@ -0,0 +1,45 @@
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+
+const TextArea = styled.textarea`
+  display: flex;
+  min-height: 100px;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  color: var(--White-50, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function TextBox({ label, value, onChange, placeholder, maxWidth }) {
+  return (
+    <div
+      className="d-flex flex-column gap-1 w-100"
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Label>{label}</Label>
+      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
+    </div>
+  );
+}
+
+return { TextBox };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/TextEditor.jsx b/apps/builddao/widget/components/TextEditor.jsx
new file mode 100644
index 00000000..160ea28f
--- /dev/null
+++ b/apps/builddao/widget/components/TextEditor.jsx
@@ -0,0 +1,148 @@
+const TextareaWrapper = styled.div`
+  display: grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  align-items: stretch;
+
+  textarea {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+  }
+
+  textarea::placeholder {
+    padding-top: 4px;
+    font-size: 20px;
+  }
+
+  textarea:focus::placeholder {
+    font-size: inherit;
+    padding-top: 0px;
+  }
+
+  &::after,
+  textarea,
+  iframe {
+    width: 100%;
+    min-width: 1em;
+    height: unset;
+    min-height: 3em;
+    font: inherit;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: 0px solid #eee;
+    grid-area: 1 / 1;
+    overflow: hidden;
+    outline: none;
+  }
+
+  iframe {
+    padding: 0;
+  }
+
+  textarea:focus,
+  textarea:not(:empty) {
+    border-bottom: 1px solid #eee;
+    min-height: 5em;
+  }
+
+  &::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  &.markdown-editor::after {
+    padding-top: 66px;
+    font-family: monospace;
+    font-size: 14px;
+  }
+`;
+
+const MarkdownEditor = `
+  html {
+    background: #0b0c14;
+  }
+  
+  * {
+    border: none !important;
+  }
+
+  .rc-md-editor {
+    background: #3c3d43;
+    border-top: 1px solid #3c3d43 !important; 
+    border-radius: 8px;
+  }
+
+  .editor-container {
+    background: #3c3d43;
+  }
+  
+  .drop-wrap {
+    top: -110px !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .header-list {
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
+    background: #0b0c14 !important;
+    color: #fff !important;
+
+    font-family: sans-serif !important;
+    font-size: 1rem;
+
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-navigation {
+    background: #0b0c14 !important;
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
+  
+    i {
+      color: #cdd0d5;
+    }
+  }
+
+  .editor-container {
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-editor .editor-container .sec-md .input {
+    overflow-y: auto;
+    padding: 8px !important;
+    line-height: normal;
+    border-radius: 0 0 8px 8px;
+  }
+`;
+
+function TextEditor({ value, onChange, maxWidth }) {
+  return (
+    <TextareaWrapper
+      className="markdown-editor"
+      data-value={value || ""}
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Widget
+        src="mob.near/widget/MarkdownEditorIframe"
+        props={{
+          initialText: value,
+          embedCss: MarkdownEditor,
+          onChange,
+        }}
+      />
+    </TextareaWrapper>
+  );
+}
+
+return { TextEditor };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/UploadField.jsx b/apps/builddao/widget/components/UploadField.jsx
new file mode 100644
index 00000000..6cecca50
--- /dev/null
+++ b/apps/builddao/widget/components/UploadField.jsx
@@ -0,0 +1,63 @@
+const { Button } = VM.require("buildhub.near/widget/components.Button");
+
+const UploadContainer = styled.div`
+  display: flex;
+  max-width: 390px;
+  min-height: 200px;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  border-radius: 16px;
+  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
+
+  p {
+    color: var(--White-100, #fff);
+    text-align: center;
+
+    /* Body/Medium-16px */
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.secondary {
+    color: var(--White-50, #cdd0d5);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+  }
+
+  i {
+    color: white;
+    font-size: 2rem;
+  }
+`;
+
+function UploadField({ background }) {
+  return (
+    <UploadContainer background={background}>
+      <i class="bi bi-cloud-upload"></i>
+      <div className="d-flex flex-column gap-2">
+        <p>Choose a file or drag & drop it here.</p>
+        <p className="secondary">
+          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
+        </p>
+      </div>
+      <Button variant="outline" style={{ background: background && "#23242b" }}>
+        Browse Files
+      </Button>
+    </UploadContainer>
+  );
+}
+
+return { UploadField };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index beb7dea2..317ce587 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -1,4 +1,3 @@
-// Buttons/Navigation
 const {
   Button,
   Pagination,
@@ -14,9 +13,6 @@ const {
   Checkbox
 } = VM.require("buildhub.near/widget/components");
 
-// states
-const [checked, setChecked] = useState(false);
-
 const ButtonPreview = (
   <div>
     <div className="d-flex align-items-center gap-3 mb-3">
@@ -69,7 +65,7 @@ const components = [
     },
     preview: ButtonPreview,
     embedCode: `
-  const { Button } = VM.require("buildhub.near/widget/components.
+  const { Button } = VM.require("buildhub.near/widget/components");
 
   return (
     <div>
@@ -135,12 +131,12 @@ const components = [
     },
     preview: (
       <>
-        <div className="d-flex align-items-center gap-3 mb-3">
+        {/* <div className="d-flex align-items-center gap-3 mb-3">
           <ProgressState status="default">1</ProgressState>
           <ProgressState status="focused">1</ProgressState>
           <ProgressState status="error">1</ProgressState>
           <ProgressState status="completed">1</ProgressState>
-        </div>
+        </div> */}
       </>
     ),
     embedCode: `
@@ -264,8 +260,6 @@ const components = [
         <div className="d-flex flex-column gap-3 mb-3">
           <Checkbox
             label="Checkbox"
-            value={checked}
-            onChange={(e) => setChecked(!checked)}
           />
         </div>
       </>

From 7bb4334a4d5c6a3f6099cff2cc4ef07058d4fb43 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 20:51:53 -0500
Subject: [PATCH 23/34] fix

---
 apps/builddao/widget/Feed.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 78ebfdff..a2aaef3e 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -9,6 +9,7 @@ type = hashtag;
 hashtag = type;
 
 const { Post } = VM.require("buildhub.near/widget/components.post");
+
 Post = Post || (() => <></>);
 
 const Container = styled.div`

From ae681e5eaf30cd03b9153b1df73cc6a6ce273ac4 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Sat, 6 Jan 2024 00:23:24 +0500
Subject: [PATCH 24/34] Replace Widgets with library components and some fixes

---
 apps/builddao/widget/Feed.jsx                 |   1 -
 .../widget/components/post-widget.jsx         | 408 ++++++++++++++++++
 .../widget/components/user-widget.jsx         | 184 ++++++++
 3 files changed, 592 insertions(+), 1 deletion(-)
 create mode 100644 apps/builddao/widget/components/post-widget.jsx
 create mode 100644 apps/builddao/widget/components/user-widget.jsx

diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index a2aaef3e..78ebfdff 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -9,7 +9,6 @@ type = hashtag;
 hashtag = type;
 
 const { Post } = VM.require("buildhub.near/widget/components.post");
-
 Post = Post || (() => <></>);
 
 const Container = styled.div`
diff --git a/apps/builddao/widget/components/post-widget.jsx b/apps/builddao/widget/components/post-widget.jsx
new file mode 100644
index 00000000..b8bcf363
--- /dev/null
+++ b/apps/builddao/widget/components/post-widget.jsx
@@ -0,0 +1,408 @@
+const { User } = VM.require("buildhub.near/widget/components.user");
+
+const StyledPost = styled.div`
+  margin-bottom: 1rem;
+  .post {
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    color: #b6b6b8;
+    padding: 24px !important;
+    background-color: #23242b;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #1c1f33 !important;
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(28, 31, 51, 0),
+          rgba(28, 31, 51, 1) 25%
+        ) !important;
+      }
+    }
+
+    .post-header {
+      span,
+      .text-muted {
+        color: #fff !important;
+      }
+    }
+
+    .buttons {
+      border-top: 1px solid #3c3d43;
+      padding: 0.5rem;
+    }
+
+    .expand-post {
+      background-image: linear-gradient(
+        to bottom,
+        rgba(35, 36, 43, 0),
+        rgba(35, 36, 43, 1) 25%
+      ) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: #0b0c14 !important;
+    color: #fff !important;
+
+    li.dropdown-item {
+      color: #fff !important;
+      &:hover {
+        a {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: #fff !important;
+
+      &:hover {
+        color: #0b0c14 !important;
+
+        span {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+  }
+
+  textarea {
+    color: #b6b6b8 !important;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin: 0 -12px;
+  line-height: normal;
+
+  .post {
+    position: relative;
+    padding: 12px;
+    padding-bottom: 4px;
+    display: flex;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 16px !important;
+    }
+    @media (max-width: 767px) {
+      font-size: 15px !important;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 15px !important;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    b {
+      font-weight: 500 !important;
+    }
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0.5rem;
+      white-space: inherit;
+    }
+    p {
+      margin-bottom: 0.5rem;
+    }
+    hr {
+      display: none;
+    }
+    img {
+      border-radius: var(--bs-border-radius-lg);
+      max-height: 40em;
+    }
+    th {
+      min-width: 5em;
+    }
+
+    .table > :not(caption) > * > * {
+      padding: 0.3rem;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(247.35, 247.35, 247.35, 1) 25%
+        );
+      }
+    }
+
+    .post-header {
+      margin: 4px 0;
+    }
+  }
+
+  .post:not(:last-child):before {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 56px;
+    bottom: 0;
+    width: 2px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .post:not(:first-child):after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 0;
+    width: 2px;
+    height: 8px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .left {
+    margin-right: 12px;
+    min-width: 40px;
+    width: 40px;
+    overflow: hidden;
+  }
+  .right {
+    margin-top: -4px;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .buttons-placeholder {
+    padding-bottom: 10px;
+  }
+
+  .buttons {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    column-gap: 4px;
+    color: #888;
+  }
+
+  .reposted {
+    padding-top: 30px;
+  }
+`;
+
+const RepostWidgetDesktop = styled.div`
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const RepostWidgetMobile = styled.div`
+  display: none;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+const accountId = props.accountId;
+if (!accountId) {
+  return "No accountId";
+}
+const blockHeight =
+  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+  props.content ??
+  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+
+const notifyAccountId = accountId;
+const item = {
+  type: "social",
+  path: `${accountId}/post/main`,
+  blockHeight,
+};
+
+const link =
+  props.link ??
+  props.fullPostLink ??
+  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const contentWidget = (
+  <>
+    <Widget
+      key="content"
+      loading={
+        <div
+          className="overflow-hidden w-100 placeholder-glow"
+          style={{ minHeight: "100px" }}
+        />
+      }
+      src="mob.near/widget/MainPage.N.Post.Content"
+      props={{
+        content,
+        raw,
+        truncateContent: props.truncateContent,
+        noEmbed: props.noEmbed,
+      }}
+    />
+    <RepostWidgetMobile>
+      <Widget
+        loading=""
+        src="mob.near/widget/N.RepostButton"
+        props={{
+          disable: permissions.disableRepost,
+          notifyAccountId,
+          item,
+          // indexKey,
+          // groupId,
+        }}
+      />
+      <span>Repost Feed</span>
+    </RepostWidgetMobile>
+  </>
+);
+
+return (
+  <StyledPost>
+    <Wrapper
+      className="w-100 mx-auto"
+      style={
+        props.hideComments || props.noBorder
+          ? undefined
+          : {
+              borderBottom: "1px solid #eee",
+            }
+      }
+    >
+      <div className={`post ${props.reposted ? "reposted" : ""}`}>
+        <div className="right d-flex flex-column gap-3">
+          <User
+            accountId={accountId}
+            blockHeight={blockHeight}
+            pinned={pinned}
+            hideMenu={hideMenu}
+            link={link}
+            postType={"post"}
+            flagItem={item}
+          />
+          {fullPostLink ? (
+            <a
+              key="full-post-link"
+              target="_blank"
+              href={fullPostLink}
+              className="text-decoration-none link-dark"
+            >
+              {contentWidget}
+            </a>
+          ) : (
+            contentWidget
+          )}
+          {props.customButtons ? (
+            props.customButtons
+          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+            <div className="buttons d-flex justify-content-between">
+              <Widget
+                loading=""
+                src="mob.near/widget/N.CommentButton"
+                props={{
+                  disabled: permissions.disableComment,
+                  onClick: () => State.update({ showReply: !state.showReply }),
+                }}
+              />
+              <RepostWidgetDesktop>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/N.RepostButton"
+                  props={{
+                    disable: permissions.disableRepost,
+                    notifyAccountId,
+                    item,
+                    // indexKey,
+                    // groupId,
+                  }}
+                />
+              </RepostWidgetDesktop>
+              <Widget
+                loading=""
+                src="mob.near/widget/N.LikeButton"
+                props={{
+                  notifyAccountId,
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="buildhub.near/widget/components.post.bookmark-button"
+                props={{
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/MainPage.N.Post.ShareButton"
+                props={{ accountId, blockHeight, postType: "post", groupId }}
+              />
+            </div>
+          ) : (
+            <div className="buttons-placeholder" />
+          )}
+        </div>
+      </div>
+      {state.showReply && (
+        <div className="border-top">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Comment.Compose"
+            props={{
+              notifyAccountId,
+              item,
+              onComment: () => State.update({ showReply: false }),
+            }}
+          />
+        </div>
+      )}
+      {props.customComments
+        ? props.customComments
+        : !props.hideComments && (
+            <div className="ms-5 my-3">
+              <Widget
+                key="comments"
+                loading={false}
+                src="mob.near/widget/MainPage.N.Comment.Feed"
+                props={{
+                  item,
+                  highlightComment: props.highlightComment,
+                  limit: props.commentsLimit,
+                  subscribe,
+                  raw,
+                  accounts: props.commentAccounts,
+                  groupId,
+                  permissions,
+                }}
+              />
+            </div>
+          )}
+    </Wrapper>
+  </StyledPost>
+);
diff --git a/apps/builddao/widget/components/user-widget.jsx b/apps/builddao/widget/components/user-widget.jsx
new file mode 100644
index 00000000..b53b4117
--- /dev/null
+++ b/apps/builddao/widget/components/user-widget.jsx
@@ -0,0 +1,184 @@
+const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
+
+const Button = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: #6c757d;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: DeepSkyBlue;
+
+    .icon:before {
+      background: rgba(0, 191, 255, 0.1);
+    }
+  }
+`;
+
+const Wrapper = styled.div`
+  color: #fff;
+
+  p {
+    color: #fff;
+    color: var(--White-100, #fff);
+
+    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.username {
+    color: var(--White-50, #cdd0d5);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  p.time {
+    color: var(--White-100, #fff);
+    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
+    margin: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      p {
+        font-size: 13px !important;
+      }
+
+      p.username {
+        font-size: 10px !important;
+      }
+
+      p.time {
+        font-size: 10px !important;
+      }
+    `}
+  }
+`;
+
+const accountId = props.accountId;
+const blockHeight = props.blockHeight;
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const name = Social.get(`${accountId}/profile/name`);
+
+const postType = props.postType ?? "post";
+const link = props.link;
+const isPremium = !!props.isPremium;
+
+const Overlay = (props) => (
+  <a
+    className="link-dark text-truncate d-inline-flex mw-100"
+    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+  >
+    <Widget
+      src="mob.near/widget/Profile.N.OverlayTrigger"
+      loading={props.children}
+      props={{
+        accountId,
+        children: props.children,
+      }}
+    />
+  </a>
+);
+
+return (
+  <div className="d-flex align-items-center">
+    <Overlay>
+      <div className="d-flex gap-1">
+        <Avatar variant={props.variant} accountId={accountId} />
+        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+          <div className="d-flex align-items-center g-1">
+            <p className="m-0">{name || "No-Name Profile"}</p>
+            <div className="flex-shrink-0">
+              <Widget
+                loading={""}
+                src="mob.near/widget/Checkmark"
+                props={{ isPremium, accountId }}
+              />
+            </div>
+          </div>
+          <p className="username">{accountId}</p>
+          <p className="time">
+            {blockHeight === "now" ? (
+              "now"
+            ) : (
+              <a className="text-white" href={link}>
+                <Widget
+                  loading=""
+                  src="mob.near/widget/TimeAgo"
+                  props={{ blockHeight }}
+                />
+              </a>
+            )}
+          </p>
+        </Wrapper>
+        {pinned && (
+          <span title="Pinned" className="ms-2">
+            <i className="bi bi-pin-angle" />
+          </span>
+        )}
+      </div>
+    </Overlay>
+    {!pinned && !hideMenu && blockHeight !== "now" && (
+      <span className="ms-auto flex-shrink-0">
+        <Button data-bs-toggle="dropdown" aria-expanded="false">
+          <i className="bi bi-three-dots-vertical"></i>
+        </Button>
+        <ul className="dropdown-menu">
+          <li className="dropdown-item">
+            <a
+              className="link-dark text-decoration-none"
+              href={`${link}&raw=true`}
+            >
+              <i className="bi bi-filetype-raw" /> View raw markdown source
+            </a>
+          </li>
+          <li>
+            <Widget
+              src="mob.near/widget/MainPage.Common.HideAccount"
+              props={{ accountId }}
+            />
+          </li>
+          {flagItem && (
+            <li>
+              <Widget
+                src="mob.near/widget/MainPage.Common.FlagContent"
+                props={{
+                  item: flagItem,
+                  label: `Flag ${postType} for moderation`,
+                }}
+              />
+            </li>
+          )}
+        </ul>
+      </span>
+    )}
+  </div>
+);

From f3c58c45e40973363c2464023293f2cf96debd23 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 21:25:31 -0500
Subject: [PATCH 25/34] condenses

---
 apps/builddao/widget/Aside.jsx                |  39 --
 apps/builddao/widget/components.jsx           | 588 ++++++++++++++++++
 apps/builddao/widget/components/library.jsx   |  14 +
 .../widget/components/post-widget.jsx         | 408 ------------
 .../widget/components/user-widget.jsx         | 184 ------
 5 files changed, 602 insertions(+), 631 deletions(-)
 delete mode 100644 apps/builddao/widget/Aside.jsx
 delete mode 100644 apps/builddao/widget/components/post-widget.jsx
 delete mode 100644 apps/builddao/widget/components/user-widget.jsx

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
deleted file mode 100644
index 17840813..00000000
--- a/apps/builddao/widget/Aside.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-const { Button } = VM.require("buildhub.near/widget/components");
-
-const AsideContainer = styled.div`
-  border-radius: 16px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--bg-1, #0b0c14);
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  padding: 24px 12px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-
-  @media screen and (max-width: 768px) {
-    border: 0px;
-    flex-direction: row;
-    overflow-x: auto;
-  }
-`;
-
-return (
-  <AsideContainer>
-    {Object.keys(props.feeds || {}).map((feed) => (
-      <Button
-        variant={props.currentFeed === feed ? "primary" : "outline"}
-        onClick={() => props.setCurrentFeed(feed)}
-        className={
-          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
-        }
-        style={{ fontSize: "14px" }}
-      >
-        <i className={`bi ${props.feedsDict[feed].icon}`}></i>
-        {props.feedsDict[feed].label}
-      </Button>
-    ))}
-  </AsideContainer>
-);
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
index 38499bad..a8eb2064 100644
--- a/apps/builddao/widget/components.jsx
+++ b/apps/builddao/widget/components.jsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 const { Button } = VM.require("buildhub.near/widget/components.Button");
 const { ProgressState } = VM.require(
   "buildhub.near/widget/components.ProgressState"
@@ -11,6 +12,86 @@ const { TextBox } = VM.require("buildhub.near/widget/components.TextBox");
 const { TextEditor } = VM.require("buildhub.near/widget/components.TextEditor");
 const { Checkbox } = VM.require("buildhub.near/widget/components.Checkbox");
 const { Avatar } = VM.require("buildhub.near/widget/components.Avatar");
+=======
+const StyledButton = styled.button`
+  all: unset;
+  display: inline-flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+  font: 500 14px / normal;
+  transition: all 300ms;
+
+  ${(props) =>
+    props.type === "icon" &&
+    `
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  `}
+
+  /* Colors based on variant prop */
+  background: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#FFAF51";
+      case "outline":
+        return "transparent";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#000";
+      case "outline":
+        return "#fff";
+      default:
+        return "#CDD0D5";
+    }
+  }};
+
+  border: ${(props) =>
+    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+  /* Hover states */
+  &:hover {
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return "#e49b48";
+        case "outline":
+          return "rgba(255, 255, 255, 0.20)";
+        default:
+          return "#17181c";
+      }
+    }};
+  }
+`;
+
+function Button({ id, children, variant, type, onClick, className, style }) {
+  return (
+    <StyledButton
+      id={id}
+      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
+      className={className}
+      variant={variant}
+      type={type}
+      style={style}
+      onClick={onClick}
+    >
+      {children}
+    </StyledButton>
+  );
+}
+>>>>>>> 8eb2901 (condenses)
 
 function Pagination({
   totalPages,
@@ -37,9 +118,512 @@ function Post(props) {
   );
 }
 
+<<<<<<< HEAD
 function User(props) {
   return (
     <Widget src="buildhub.near/widget/components.User" props={{ ...props }} />
+=======
+const Progress = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 50%;
+  border: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "1px solid var(--Yellow, #FFAF51)";
+      case "error":
+        return "1px solid var(--System-Red, #FD2A5C)";
+      case "completed":
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+      default:
+        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+    }
+  }};
+
+  background: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#2f2619";
+      case "error":
+        return "#2f101f";
+      case "completed":
+        return "#FFAF51";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.status) {
+      case "focused":
+        return "#fff";
+      case "error":
+        return "#FD2A5C";
+      case "completed":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  }};
+`;
+
+function ProgressState({ children, status }) {
+  return (
+    <Progress
+      status={status}
+      key={`ProgressState-${status ?? "default"}-${children}`}
+    >
+      {status === "completed" ? (
+        <i className="bi bi-check"></i>
+      ) : status === "error" ? (
+        <i className="bi bi-x"></i>
+      ) : (
+        children
+      )}
+    </Progress>
+  );
+}
+
+function Step(props) {
+  const totalSteps = props.totalSteps ?? 5;
+  const currentStep = props.currentStep ?? 3;
+  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
+
+  const StepContainer = styled.div`
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: #000; /* Change color as needed */
+      background-image: repeating-linear-gradient(
+        90deg,
+        #3c3d43,
+        #3c3d43 2px,
+        transparent 2px,
+        transparent 4px
+      );
+      transform: translateY(-50%);
+      z-index: -1;
+    }
+  `;
+
+  return (
+    <StepContainer
+      className="d-flex align-items-center justify-content-between"
+      style={{ maxWidth: "360px" }}
+      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
+    >
+      {Array.from({ length: totalSteps }).map((_, i) => (
+        <ProgressState
+          className="z-1"
+          status={
+            i + 1 === currentStep
+              ? currentStatus
+              : currentStep > i + 1
+              ? "completed"
+              : "default"
+          }
+        >
+          {i + 1}
+        </ProgressState>
+      ))}
+    </StepContainer>
+  );
+}
+
+const InputContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Label = styled.label`
+  color: var(--White-100, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+  display: flex;
+  max-width: ${(props) => props.maxWidth ?? "390px"};
+  width: 100%;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  flex: 1 0 0;
+
+  color: var(--White-50, #cdd0d5);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function InputField({
+  type,
+  label,
+  key,
+  placeholder,
+  value,
+  onChange,
+  maxWidth,
+}) {
+  return (
+    <InputContainer>
+      {label && <Label>{label}</Label>}
+      <Input
+        key={key}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type ?? "text"}
+        maxWidth={maxWidth}
+      />
+    </InputContainer>
+  );
+}
+
+const UploadContainer = styled.div`
+  display: flex;
+  max-width: 390px;
+  min-height: 200px;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  border-radius: 16px;
+  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
+
+  p {
+    color: var(--White-100, #fff);
+    text-align: center;
+
+    /* Body/Medium-16px */
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin: 0;
+  }
+
+  p.secondary {
+    color: var(--White-50, #cdd0d5);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+  }
+
+  i {
+    color: white;
+    font-size: 2rem;
+  }
+`;
+
+function UploadField({ background }) {
+  return (
+    <UploadContainer background={background}>
+      <i class="bi bi-cloud-upload"></i>
+      <div className="d-flex flex-column gap-2">
+        <p>Choose a file or drag & drop it here.</p>
+        <p className="secondary">
+          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
+        </p>
+      </div>
+      <Button variant="outline" style={{ background: background && "#23242b" }}>
+        Browse Files
+      </Button>
+    </UploadContainer>
+  );
+}
+
+const TextArea = styled.textarea`
+  display: flex;
+  min-height: 100px;
+  padding: 16px 12px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+
+  border-radius: 8px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--Bg-1, #0b0c14);
+
+  color: var(--White-50, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function TextBox({ label, value, onChange, placeholder, maxWidth }) {
+  return (
+    <div
+      className="d-flex flex-column gap-1 w-100"
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Label>{label}</Label>
+      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
+    </div>
+  );
+}
+
+const TextareaWrapper = styled.div`
+  display: grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  align-items: stretch;
+
+  textarea {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+  }
+
+  textarea::placeholder {
+    padding-top: 4px;
+    font-size: 20px;
+  }
+
+  textarea:focus::placeholder {
+    font-size: inherit;
+    padding-top: 0px;
+  }
+
+  &::after,
+  textarea,
+  iframe {
+    width: 100%;
+    min-width: 1em;
+    height: unset;
+    min-height: 3em;
+    font: inherit;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: 0px solid #eee;
+    grid-area: 1 / 1;
+    overflow: hidden;
+    outline: none;
+  }
+
+  iframe {
+    padding: 0;
+  }
+
+  textarea:focus,
+  textarea:not(:empty) {
+    border-bottom: 1px solid #eee;
+    min-height: 5em;
+  }
+
+  &::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  &.markdown-editor::after {
+    padding-top: 66px;
+    font-family: monospace;
+    font-size: 14px;
+  }
+`;
+
+const MarkdownEditor = `
+  html {
+    background: #0b0c14;
+  }
+  
+  * {
+    border: none !important;
+  }
+
+  .rc-md-editor {
+    background: #3c3d43;
+    border-top: 1px solid #3c3d43 !important; 
+    border-radius: 8px;
+  }
+
+  .editor-container {
+    background: #3c3d43;
+  }
+  
+  .drop-wrap {
+    top: -110px !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .header-list {
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
+    background: #0b0c14 !important;
+    color: #fff !important;
+
+    font-family: sans-serif !important;
+    font-size: 1rem;
+
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-navigation {
+    background: #0b0c14 !important;
+    border: 1px solid #3c3d43 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
+  
+    i {
+      color: #cdd0d5;
+    }
+  }
+
+  .editor-container {
+    border-radius: 0 0 8px 8px;
+  }
+
+  .rc-md-editor .editor-container .sec-md .input {
+    overflow-y: auto;
+    padding: 8px !important;
+    line-height: normal;
+    border-radius: 0 0 8px 8px;
+  }
+`;
+
+function TextEditor({ value, onChange, maxWidth }) {
+  return (
+    <TextareaWrapper
+      className="markdown-editor"
+      data-value={value || ""}
+      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+    >
+      <Widget
+        src="mob.near/widget/MarkdownEditorIframe"
+        props={{
+          initialText: value,
+          embedCss: MarkdownEditor,
+          onChange,
+        }}
+      />
+    </TextareaWrapper>
+  );
+}
+
+const CheckboxInput = styled.input`
+  display: none;
+`;
+
+const CheckboxLabel = styled.label`
+  display: inline-flex;
+  padding: 12px;
+  align-items: center;
+  gap: 8px;
+
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+function Checkbox({ value, onChange, label }) {
+  return (
+    <div key={`Checkbox-${label ?? "No-label"}`}>
+      <CheckboxLabel>
+        <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
+        {value ? (
+          <i className="bi bi-check-square"></i>
+        ) : (
+          <i className="bi bi-square"></i>
+        )}
+        {label}
+      </CheckboxLabel>
+    </div>
+  );
+}
+
+const ImageWrapper = styled.div`
+  img {
+    width: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    height: ${(props) =>
+      props.variant === "mobile" ? "40px" : "52px"} !important;
+    flex-shrink: 0 !important;
+    border-radius: 100px !important;
+    background: lightgray 50% / cover no-repeat !important;
+  }
+
+  .profile-image {
+    width: auto !important;
+    height: auto !important;
+  }
+
+  @media screen and (max-width: 768px) {
+    ${(props) =>
+      !props.variant &&
+      `
+      img {
+        width: 40px !important;
+        height: 40px !important;
+      }
+    `}
+  }
+`;
+
+function Avatar(props) {
+  const accountId = props.accountId ?? context.accountId;
+
+  return (
+    <ImageWrapper variant={props.variant}>
+      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
+    </ImageWrapper>
+  );
+}
+
+function User(props) {
+  return (
+    <Widget
+      src="buildhub.near/widget/components.User"
+      props={{ ...props }}
+    />
+>>>>>>> 8eb2901 (condenses)
   );
 }
 
@@ -55,5 +639,9 @@ return {
   TextEditor,
   Checkbox,
   Avatar,
+<<<<<<< HEAD
   User,
+=======
+  User
+>>>>>>> 8eb2901 (condenses)
 };
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/library.jsx
index 317ce587..d70648cb 100644
--- a/apps/builddao/widget/components/library.jsx
+++ b/apps/builddao/widget/components/library.jsx
@@ -1,3 +1,7 @@
+<<<<<<< HEAD
+=======
+// Buttons/Navigation
+>>>>>>> 8eb2901 (condenses)
 const {
   Button,
   Pagination,
@@ -12,6 +16,12 @@ const {
   Avatar,
   Checkbox
 } = VM.require("buildhub.near/widget/components");
+<<<<<<< HEAD
+=======
+
+// states
+const [checked, setChecked] = useState(false);
+>>>>>>> 8eb2901 (condenses)
 
 const ButtonPreview = (
   <div>
@@ -65,7 +75,11 @@ const components = [
     },
     preview: ButtonPreview,
     embedCode: `
+<<<<<<< HEAD
   const { Button } = VM.require("buildhub.near/widget/components");
+=======
+  const { Button } = VM.require("buildhub.near/widget/components.
+>>>>>>> 8eb2901 (condenses)
 
   return (
     <div>
diff --git a/apps/builddao/widget/components/post-widget.jsx b/apps/builddao/widget/components/post-widget.jsx
deleted file mode 100644
index b8bcf363..00000000
--- a/apps/builddao/widget/components/post-widget.jsx
+++ /dev/null
@@ -1,408 +0,0 @@
-const { User } = VM.require("buildhub.near/widget/components.user");
-
-const StyledPost = styled.div`
-  margin-bottom: 1rem;
-  .post {
-    border-radius: 16px;
-    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-    color: #b6b6b8;
-    padding: 24px !important;
-    background-color: #23242b;
-    transition: all 300ms;
-
-    &:hover {
-      background-color: #1c1f33 !important;
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(28, 31, 51, 0),
-          rgba(28, 31, 51, 1) 25%
-        ) !important;
-      }
-    }
-
-    .post-header {
-      span,
-      .text-muted {
-        color: #fff !important;
-      }
-    }
-
-    .buttons {
-      border-top: 1px solid #3c3d43;
-      padding: 0.5rem;
-    }
-
-    .expand-post {
-      background-image: linear-gradient(
-        to bottom,
-        rgba(35, 36, 43, 0),
-        rgba(35, 36, 43, 1) 25%
-      ) !important;
-    }
-  }
-
-  .dropdown-menu {
-    background-color: #0b0c14 !important;
-    color: #fff !important;
-
-    li.dropdown-item {
-      color: #fff !important;
-      &:hover {
-        a {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-
-    .link-dark,
-    .dropdown-item {
-      color: #fff !important;
-
-      &:hover {
-        color: #0b0c14 !important;
-
-        span {
-          color: #0b0c14 !important;
-        }
-      }
-    }
-  }
-
-  textarea {
-    color: #b6b6b8 !important;
-  }
-`;
-
-const Wrapper = styled.div`
-  margin: 0 -12px;
-  line-height: normal;
-
-  .post {
-    position: relative;
-    padding: 12px;
-    padding-bottom: 4px;
-    display: flex;
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 16px !important;
-    }
-    @media (max-width: 767px) {
-      font-size: 15px !important;
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-size: 15px !important;
-      }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    strong,
-    b {
-      font-weight: 500 !important;
-    }
-    ol,
-    ul,
-    dl {
-      margin-bottom: 0.5rem;
-      white-space: inherit;
-    }
-    p {
-      margin-bottom: 0.5rem;
-    }
-    hr {
-      display: none;
-    }
-    img {
-      border-radius: var(--bs-border-radius-lg);
-      max-height: 40em;
-    }
-    th {
-      min-width: 5em;
-    }
-
-    .table > :not(caption) > * > * {
-      padding: 0.3rem;
-    }
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.03);
-      .expand-post {
-        background-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0),
-          rgba(247.35, 247.35, 247.35, 1) 25%
-        );
-      }
-    }
-
-    .post-header {
-      margin: 4px 0;
-    }
-  }
-
-  .post:not(:last-child):before {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 56px;
-    bottom: 0;
-    width: 2px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .post:not(:first-child):after {
-    content: "";
-    position: absolute;
-    left: 30px;
-    top: 0;
-    width: 2px;
-    height: 8px;
-    background-color: #ddd;
-    z-index: -1;
-  }
-
-  .left {
-    margin-right: 12px;
-    min-width: 40px;
-    width: 40px;
-    overflow: hidden;
-  }
-  .right {
-    margin-top: -4px;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .buttons-placeholder {
-    padding-bottom: 10px;
-  }
-
-  .buttons {
-    margin-top: 10px;
-    margin-bottom: 6px;
-    column-gap: 4px;
-    color: #888;
-  }
-
-  .reposted {
-    padding-top: 30px;
-  }
-`;
-
-const RepostWidgetDesktop = styled.div`
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const RepostWidgetMobile = styled.div`
-  display: none;
-  @media screen and (max-width: 768px) {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-`;
-const accountId = props.accountId;
-if (!accountId) {
-  return "No accountId";
-}
-const blockHeight =
-  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
-const hideButtons = !!props.hideButtons;
-const content =
-  props.content ??
-  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
-const subscribe = !!props.subscribe;
-const raw = !!props.raw;
-const groupId = props.groupId ?? content.groupId;
-const indexKey = props.indexKey;
-const permissions = props.permissions;
-const fullPostLink = props.fullPostLink;
-
-const notifyAccountId = accountId;
-const item = {
-  type: "social",
-  path: `${accountId}/post/main`,
-  blockHeight,
-};
-
-const link =
-  props.link ??
-  props.fullPostLink ??
-  `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
-
-const contentWidget = (
-  <>
-    <Widget
-      key="content"
-      loading={
-        <div
-          className="overflow-hidden w-100 placeholder-glow"
-          style={{ minHeight: "100px" }}
-        />
-      }
-      src="mob.near/widget/MainPage.N.Post.Content"
-      props={{
-        content,
-        raw,
-        truncateContent: props.truncateContent,
-        noEmbed: props.noEmbed,
-      }}
-    />
-    <RepostWidgetMobile>
-      <Widget
-        loading=""
-        src="mob.near/widget/N.RepostButton"
-        props={{
-          disable: permissions.disableRepost,
-          notifyAccountId,
-          item,
-          // indexKey,
-          // groupId,
-        }}
-      />
-      <span>Repost Feed</span>
-    </RepostWidgetMobile>
-  </>
-);
-
-return (
-  <StyledPost>
-    <Wrapper
-      className="w-100 mx-auto"
-      style={
-        props.hideComments || props.noBorder
-          ? undefined
-          : {
-              borderBottom: "1px solid #eee",
-            }
-      }
-    >
-      <div className={`post ${props.reposted ? "reposted" : ""}`}>
-        <div className="right d-flex flex-column gap-3">
-          <User
-            accountId={accountId}
-            blockHeight={blockHeight}
-            pinned={pinned}
-            hideMenu={hideMenu}
-            link={link}
-            postType={"post"}
-            flagItem={item}
-          />
-          {fullPostLink ? (
-            <a
-              key="full-post-link"
-              target="_blank"
-              href={fullPostLink}
-              className="text-decoration-none link-dark"
-            >
-              {contentWidget}
-            </a>
-          ) : (
-            contentWidget
-          )}
-          {props.customButtons ? (
-            props.customButtons
-          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
-            <div className="buttons d-flex justify-content-between">
-              <Widget
-                loading=""
-                src="mob.near/widget/N.CommentButton"
-                props={{
-                  disabled: permissions.disableComment,
-                  onClick: () => State.update({ showReply: !state.showReply }),
-                }}
-              />
-              <RepostWidgetDesktop>
-                <Widget
-                  loading=""
-                  src="mob.near/widget/N.RepostButton"
-                  props={{
-                    disable: permissions.disableRepost,
-                    notifyAccountId,
-                    item,
-                    // indexKey,
-                    // groupId,
-                  }}
-                />
-              </RepostWidgetDesktop>
-              <Widget
-                loading=""
-                src="mob.near/widget/N.LikeButton"
-                props={{
-                  notifyAccountId,
-                  item,
-                }}
-              />
-              <Widget
-                loading=""
-                src="buildhub.near/widget/components.post.bookmark-button"
-                props={{
-                  item,
-                }}
-              />
-              <Widget
-                loading=""
-                src="mob.near/widget/MainPage.N.Post.ShareButton"
-                props={{ accountId, blockHeight, postType: "post", groupId }}
-              />
-            </div>
-          ) : (
-            <div className="buttons-placeholder" />
-          )}
-        </div>
-      </div>
-      {state.showReply && (
-        <div className="border-top">
-          <Widget
-            loading=""
-            src="mob.near/widget/MainPage.N.Comment.Compose"
-            props={{
-              notifyAccountId,
-              item,
-              onComment: () => State.update({ showReply: false }),
-            }}
-          />
-        </div>
-      )}
-      {props.customComments
-        ? props.customComments
-        : !props.hideComments && (
-            <div className="ms-5 my-3">
-              <Widget
-                key="comments"
-                loading={false}
-                src="mob.near/widget/MainPage.N.Comment.Feed"
-                props={{
-                  item,
-                  highlightComment: props.highlightComment,
-                  limit: props.commentsLimit,
-                  subscribe,
-                  raw,
-                  accounts: props.commentAccounts,
-                  groupId,
-                  permissions,
-                }}
-              />
-            </div>
-          )}
-    </Wrapper>
-  </StyledPost>
-);
diff --git a/apps/builddao/widget/components/user-widget.jsx b/apps/builddao/widget/components/user-widget.jsx
deleted file mode 100644
index b53b4117..00000000
--- a/apps/builddao/widget/components/user-widget.jsx
+++ /dev/null
@@ -1,184 +0,0 @@
-const { Avatar } = VM.require("buildhub.near/widget/components.avatar");
-
-const Button = styled.div`
-  line-height: 20px;
-  min-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: left;
-  background: inherit;
-  color: #6c757d;
-  font-size: 16px;
-  .icon {
-    position: relative;
-    &:before {
-      margin: -8px;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  &:not([disabled]):hover {
-    opacity: 1 !important;
-    color: DeepSkyBlue;
-
-    .icon:before {
-      background: rgba(0, 191, 255, 0.1);
-    }
-  }
-`;
-
-const Wrapper = styled.div`
-  color: #fff;
-
-  p {
-    color: #fff;
-    color: var(--White-100, #fff);
-
-    font-size: ${(props) => (props.variant === "mobile" ? "13px" : "14px")};
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.username {
-    color: var(--White-50, #cdd0d5);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  p.time {
-    color: var(--White-100, #fff);
-    font-size: ${(props) => (props.variant === "mobile" ? "10px" : "13px")};
-    margin: 0;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      p {
-        font-size: 13px !important;
-      }
-
-      p.username {
-        font-size: 10px !important;
-      }
-
-      p.time {
-        font-size: 10px !important;
-      }
-    `}
-  }
-`;
-
-const accountId = props.accountId;
-const blockHeight = props.blockHeight;
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
-const name = Social.get(`${accountId}/profile/name`);
-
-const postType = props.postType ?? "post";
-const link = props.link;
-const isPremium = !!props.isPremium;
-
-const Overlay = (props) => (
-  <a
-    className="link-dark text-truncate d-inline-flex mw-100"
-    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
-  >
-    <Widget
-      src="mob.near/widget/Profile.N.OverlayTrigger"
-      loading={props.children}
-      props={{
-        accountId,
-        children: props.children,
-      }}
-    />
-  </a>
-);
-
-return (
-  <div className="d-flex align-items-center">
-    <Overlay>
-      <div className="d-flex gap-1">
-        <Avatar variant={props.variant} accountId={accountId} />
-        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-          <div className="d-flex align-items-center g-1">
-            <p className="m-0">{name || "No-Name Profile"}</p>
-            <div className="flex-shrink-0">
-              <Widget
-                loading={""}
-                src="mob.near/widget/Checkmark"
-                props={{ isPremium, accountId }}
-              />
-            </div>
-          </div>
-          <p className="username">{accountId}</p>
-          <p className="time">
-            {blockHeight === "now" ? (
-              "now"
-            ) : (
-              <a className="text-white" href={link}>
-                <Widget
-                  loading=""
-                  src="mob.near/widget/TimeAgo"
-                  props={{ blockHeight }}
-                />
-              </a>
-            )}
-          </p>
-        </Wrapper>
-        {pinned && (
-          <span title="Pinned" className="ms-2">
-            <i className="bi bi-pin-angle" />
-          </span>
-        )}
-      </div>
-    </Overlay>
-    {!pinned && !hideMenu && blockHeight !== "now" && (
-      <span className="ms-auto flex-shrink-0">
-        <Button data-bs-toggle="dropdown" aria-expanded="false">
-          <i className="bi bi-three-dots-vertical"></i>
-        </Button>
-        <ul className="dropdown-menu">
-          <li className="dropdown-item">
-            <a
-              className="link-dark text-decoration-none"
-              href={`${link}&raw=true`}
-            >
-              <i className="bi bi-filetype-raw" /> View raw markdown source
-            </a>
-          </li>
-          <li>
-            <Widget
-              src="mob.near/widget/MainPage.Common.HideAccount"
-              props={{ accountId }}
-            />
-          </li>
-          {flagItem && (
-            <li>
-              <Widget
-                src="mob.near/widget/MainPage.Common.FlagContent"
-                props={{
-                  item: flagItem,
-                  label: `Flag ${postType} for moderation`,
-                }}
-              />
-            </li>
-          )}
-        </ul>
-      </span>
-    )}
-  </div>
-);

From 42765b2ee599213378cc668c7c75c3409e7c6a0d Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 21:33:08 -0500
Subject: [PATCH 26/34] fix case

---
 apps/builddao/widget/Aside.jsx | 39 ++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 apps/builddao/widget/Aside.jsx

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
new file mode 100644
index 00000000..17840813
--- /dev/null
+++ b/apps/builddao/widget/Aside.jsx
@@ -0,0 +1,39 @@
+const { Button } = VM.require("buildhub.near/widget/components");
+
+const AsideContainer = styled.div`
+  border-radius: 16px;
+  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+  background: var(--bg-1, #0b0c14);
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  padding: 24px 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+
+  @media screen and (max-width: 768px) {
+    border: 0px;
+    flex-direction: row;
+    overflow-x: auto;
+  }
+`;
+
+return (
+  <AsideContainer>
+    {Object.keys(props.feeds || {}).map((feed) => (
+      <Button
+        variant={props.currentFeed === feed ? "primary" : "outline"}
+        onClick={() => props.setCurrentFeed(feed)}
+        className={
+          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+        }
+        style={{ fontSize: "14px" }}
+      >
+        <i className={`bi ${props.feedsDict[feed].icon}`}></i>
+        {props.feedsDict[feed].label}
+      </Button>
+    ))}
+  </AsideContainer>
+);

From 9908a1ba7e43a527ab1ffc6a47dd47395cf2556a Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 21:41:54 -0500
Subject: [PATCH 27/34] fix naming

---
 apps/builddao/widget/Aside.jsx                | 40 ++++++++++---------
 apps/builddao/widget/Feed.jsx                 |  2 +-
 .../components/{library.jsx => Library.jsx}   |  0
 .../{pagination.jsx => Pagination.jsx}        |  0
 .../widget/components/{post.jsx => Post.jsx}  |  0
 .../widget/components/{user.jsx => User.jsx}  |  0
 6 files changed, 23 insertions(+), 19 deletions(-)
 rename apps/builddao/widget/components/{library.jsx => Library.jsx} (100%)
 rename apps/builddao/widget/components/{pagination.jsx => Pagination.jsx} (100%)
 rename apps/builddao/widget/components/{post.jsx => Post.jsx} (100%)
 rename apps/builddao/widget/components/{user.jsx => User.jsx} (100%)

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index 17840813..39144eb3 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -1,4 +1,4 @@
-const { Button } = VM.require("buildhub.near/widget/components");
+const { Button } = VM.require("buildhub.near/widget/components.Button");
 
 const AsideContainer = styled.div`
   border-radius: 16px;
@@ -20,20 +20,24 @@ const AsideContainer = styled.div`
   }
 `;
 
-return (
-  <AsideContainer>
-    {Object.keys(props.feeds || {}).map((feed) => (
-      <Button
-        variant={props.currentFeed === feed ? "primary" : "outline"}
-        onClick={() => props.setCurrentFeed(feed)}
-        className={
-          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
-        }
-        style={{ fontSize: "14px" }}
-      >
-        <i className={`bi ${props.feedsDict[feed].icon}`}></i>
-        {props.feedsDict[feed].label}
-      </Button>
-    ))}
-  </AsideContainer>
-);
+const Aside = (props) => {
+  return (
+    <AsideContainer>
+      {Object.keys(props.routes || {}).map((route) => (
+        <Button
+          variant={props.active === route ? "primary" : "outline"}
+          onClick={() => props.setActiveRoute(route)}
+          className={
+            "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+          }
+          style={{ fontSize: "14px" }}
+        >
+          <i className={`bi ${props.routes[route].icon}`}></i>
+          {props.routes[route].label}
+        </Button>
+      ))}
+    </AsideContainer>
+  );
+};
+
+return { Aside };
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 78ebfdff..e2b328f1 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -8,7 +8,7 @@ const { type, hashtag } = props;
 type = hashtag;
 hashtag = type;
 
-const { Post } = VM.require("buildhub.near/widget/components.post");
+const { Post } = VM.require("buildhub.near/widget/components");
 Post = Post || (() => <></>);
 
 const Container = styled.div`
diff --git a/apps/builddao/widget/components/library.jsx b/apps/builddao/widget/components/Library.jsx
similarity index 100%
rename from apps/builddao/widget/components/library.jsx
rename to apps/builddao/widget/components/Library.jsx
diff --git a/apps/builddao/widget/components/pagination.jsx b/apps/builddao/widget/components/Pagination.jsx
similarity index 100%
rename from apps/builddao/widget/components/pagination.jsx
rename to apps/builddao/widget/components/Pagination.jsx
diff --git a/apps/builddao/widget/components/post.jsx b/apps/builddao/widget/components/Post.jsx
similarity index 100%
rename from apps/builddao/widget/components/post.jsx
rename to apps/builddao/widget/components/Post.jsx
diff --git a/apps/builddao/widget/components/user.jsx b/apps/builddao/widget/components/User.jsx
similarity index 100%
rename from apps/builddao/widget/components/user.jsx
rename to apps/builddao/widget/components/User.jsx

From 0fd80a45f59f76240b2c1d96949a02530e6fb1b9 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 22:03:09 -0500
Subject: [PATCH 28/34] working with component library

---
 apps/builddao/widget/Aside.jsx              |  15 +-
 apps/builddao/widget/Feed.jsx               |  22 +-
 apps/builddao/widget/components.jsx         | 588 --------------------
 apps/builddao/widget/components/Library.jsx |  11 -
 apps/builddao/widget/resources-aside.jsx    |   2 +-
 5 files changed, 21 insertions(+), 617 deletions(-)

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index 39144eb3..65250e08 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -20,24 +20,25 @@ const AsideContainer = styled.div`
   }
 `;
 
-const Aside = (props) => {
+function Aside({ Button, routes, active, setActiveRoute }) {
   return (
     <AsideContainer>
-      {Object.keys(props.routes || {}).map((route) => (
+      {Object.keys(routes || {}).map((route) => (
         <Button
-          variant={props.active === route ? "primary" : "outline"}
-          onClick={() => props.setActiveRoute(route)}
+          key={route}
+          variant={active ? "primary" : "outline"}
+          onClick={() => setActiveRoute(route)}
           className={
             "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
           }
           style={{ fontSize: "14px" }}
         >
-          <i className={`bi ${props.routes[route].icon}`}></i>
-          {props.routes[route].label}
+          <i className={`bi ${routes[route].icon}`}></i>
+          {routes[route].label}
         </Button>
       ))}
     </AsideContainer>
   );
-};
+}
 
 return { Aside };
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index e2b328f1..0bf1227a 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -8,8 +8,14 @@ const { type, hashtag } = props;
 type = hashtag;
 hashtag = type;
 
-const { Post } = VM.require("buildhub.near/widget/components");
+const { Post, Button } = VM.require("buildhub.near/widget/components");
 Post = Post || (() => <></>);
+Button = Button || (() => <></>);
+
+function formatDate(date) {
+  const options = { year: "numeric", month: "short", day: "numeric" };
+  return date.toLocaleDateString("en-US", options);
+}
 
 const Container = styled.div`
   display: grid;
@@ -30,14 +36,6 @@ const MainContent = styled.div`
   grid-column: span 4 / span 4;
 `;
 
-const [activeFeed, setActiveFeed] = useState(type || "resolutions");
-const [template, setTemplate] = useState("What did you have in mind?");
-
-function formatDate(date) {
-  const options = { year: "numeric", month: "short", day: "numeric" };
-  return date.toLocaleDateString("en-US", options);
-}
-
 const feeds = {
   resolutions: {
     label: "Resolutions",
@@ -146,13 +144,17 @@ const feeds = {
   },
 };
 
+const [activeFeed, setActiveFeed] = useState(type || "resolutions");
+const [template, setTemplate] = useState("What did you have in mind?");
+
 return (
   <Container>
-    <StyledAside>
+    <StyledAside key={JSON.stringify(feeds)}>
       <Aside
         active={activeFeed}
         setActiveRoute={setActiveFeed}
         routes={feeds}
+        Button={Button}
       />
     </StyledAside>
     <MainContent>
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
index a8eb2064..38499bad 100644
--- a/apps/builddao/widget/components.jsx
+++ b/apps/builddao/widget/components.jsx
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 const { Button } = VM.require("buildhub.near/widget/components.Button");
 const { ProgressState } = VM.require(
   "buildhub.near/widget/components.ProgressState"
@@ -12,86 +11,6 @@ const { TextBox } = VM.require("buildhub.near/widget/components.TextBox");
 const { TextEditor } = VM.require("buildhub.near/widget/components.TextEditor");
 const { Checkbox } = VM.require("buildhub.near/widget/components.Checkbox");
 const { Avatar } = VM.require("buildhub.near/widget/components.Avatar");
-=======
-const StyledButton = styled.button`
-  all: unset;
-  display: inline-flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  border-radius: 8px;
-  font: 500 14px / normal;
-  transition: all 300ms;
-
-  ${(props) =>
-    props.type === "icon" &&
-    `
-    display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 5px;
-    flex-shrink: 0;
-    border-radius: 50%;
-  `}
-
-  /* Colors based on variant prop */
-  background: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#FFAF51";
-      case "outline":
-        return "transparent";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.variant) {
-      case "primary":
-        return "#000";
-      case "outline":
-        return "#fff";
-      default:
-        return "#CDD0D5";
-    }
-  }};
-
-  border: ${(props) =>
-    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
-
-  /* Hover states */
-  &:hover {
-    background: ${(props) => {
-      switch (props.variant) {
-        case "primary":
-          return "#e49b48";
-        case "outline":
-          return "rgba(255, 255, 255, 0.20)";
-        default:
-          return "#17181c";
-      }
-    }};
-  }
-`;
-
-function Button({ id, children, variant, type, onClick, className, style }) {
-  return (
-    <StyledButton
-      id={id}
-      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
-      className={className}
-      variant={variant}
-      type={type}
-      style={style}
-      onClick={onClick}
-    >
-      {children}
-    </StyledButton>
-  );
-}
->>>>>>> 8eb2901 (condenses)
 
 function Pagination({
   totalPages,
@@ -118,512 +37,9 @@ function Post(props) {
   );
 }
 
-<<<<<<< HEAD
 function User(props) {
   return (
     <Widget src="buildhub.near/widget/components.User" props={{ ...props }} />
-=======
-const Progress = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  padding: 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-
-  border-radius: 50%;
-  border: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "1px solid var(--Yellow, #FFAF51)";
-      case "error":
-        return "1px solid var(--System-Red, #FD2A5C)";
-      case "completed":
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-      default:
-        return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
-    }
-  }};
-
-  background: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#2f2619";
-      case "error":
-        return "#2f101f";
-      case "completed":
-        return "#FFAF51";
-      default:
-        return "#23242B";
-    }
-  }};
-
-  color: ${(props) => {
-    switch (props.status) {
-      case "focused":
-        return "#fff";
-      case "error":
-        return "#FD2A5C";
-      case "completed":
-        return "#000";
-      default:
-        return "#fff";
-    }
-  }};
-`;
-
-function ProgressState({ children, status }) {
-  return (
-    <Progress
-      status={status}
-      key={`ProgressState-${status ?? "default"}-${children}`}
-    >
-      {status === "completed" ? (
-        <i className="bi bi-check"></i>
-      ) : status === "error" ? (
-        <i className="bi bi-x"></i>
-      ) : (
-        children
-      )}
-    </Progress>
-  );
-}
-
-function Step(props) {
-  const totalSteps = props.totalSteps ?? 5;
-  const currentStep = props.currentStep ?? 3;
-  const currentStatus = props.currentStatus ? props.currentStatus : "focused";
-
-  const StepContainer = styled.div`
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: #000; /* Change color as needed */
-      background-image: repeating-linear-gradient(
-        90deg,
-        #3c3d43,
-        #3c3d43 2px,
-        transparent 2px,
-        transparent 4px
-      );
-      transform: translateY(-50%);
-      z-index: -1;
-    }
-  `;
-
-  return (
-    <StepContainer
-      className="d-flex align-items-center justify-content-between"
-      style={{ maxWidth: "360px" }}
-      key={`Step-${currentStep}-${currentStatus ?? "default"}`}
-    >
-      {Array.from({ length: totalSteps }).map((_, i) => (
-        <ProgressState
-          className="z-1"
-          status={
-            i + 1 === currentStep
-              ? currentStatus
-              : currentStep > i + 1
-              ? "completed"
-              : "default"
-          }
-        >
-          {i + 1}
-        </ProgressState>
-      ))}
-    </StepContainer>
-  );
-}
-
-const InputContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-`;
-
-const Label = styled.label`
-  color: var(--White-100, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const Input = styled.input`
-  display: flex;
-  max-width: ${(props) => props.maxWidth ?? "390px"};
-  width: 100%;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  flex: 1 0 0;
-
-  color: var(--White-50, #cdd0d5);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function InputField({
-  type,
-  label,
-  key,
-  placeholder,
-  value,
-  onChange,
-  maxWidth,
-}) {
-  return (
-    <InputContainer>
-      {label && <Label>{label}</Label>}
-      <Input
-        key={key}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        type={type ?? "text"}
-        maxWidth={maxWidth}
-      />
-    </InputContainer>
-  );
-}
-
-const UploadContainer = styled.div`
-  display: flex;
-  max-width: 390px;
-  min-height: 200px;
-  width: 100%;
-  height: 100%;
-  padding: 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  border-radius: 16px;
-  border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
-
-  p {
-    color: var(--White-100, #fff);
-    text-align: center;
-
-    /* Body/Medium-16px */
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin: 0;
-  }
-
-  p.secondary {
-    color: var(--White-50, #cdd0d5);
-    text-align: center;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px; /* 133.333% */
-  }
-
-  i {
-    color: white;
-    font-size: 2rem;
-  }
-`;
-
-function UploadField({ background }) {
-  return (
-    <UploadContainer background={background}>
-      <i class="bi bi-cloud-upload"></i>
-      <div className="d-flex flex-column gap-2">
-        <p>Choose a file or drag & drop it here.</p>
-        <p className="secondary">
-          JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
-        </p>
-      </div>
-      <Button variant="outline" style={{ background: background && "#23242b" }}>
-        Browse Files
-      </Button>
-    </UploadContainer>
-  );
-}
-
-const TextArea = styled.textarea`
-  display: flex;
-  min-height: 100px;
-  padding: 16px 12px;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-
-  border-radius: 8px;
-  border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
-  background: var(--Bg-1, #0b0c14);
-
-  color: var(--White-50, #fff);
-
-  /* Body/16px */
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function TextBox({ label, value, onChange, placeholder, maxWidth }) {
-  return (
-    <div
-      className="d-flex flex-column gap-1 w-100"
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Label>{label}</Label>
-      <TextArea placeholder={placeholder} value={value} onChange={onChange} />
-    </div>
-  );
-}
-
-const TextareaWrapper = styled.div`
-  display: grid;
-  vertical-align: top;
-  align-items: center;
-  position: relative;
-  align-items: stretch;
-
-  textarea {
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-  }
-
-  textarea::placeholder {
-    padding-top: 4px;
-    font-size: 20px;
-  }
-
-  textarea:focus::placeholder {
-    font-size: inherit;
-    padding-top: 0px;
-  }
-
-  &::after,
-  textarea,
-  iframe {
-    width: 100%;
-    min-width: 1em;
-    height: unset;
-    min-height: 3em;
-    font: inherit;
-    margin: 0;
-    resize: none;
-    background: none;
-    appearance: none;
-    border: 0px solid #eee;
-    grid-area: 1 / 1;
-    overflow: hidden;
-    outline: none;
-  }
-
-  iframe {
-    padding: 0;
-  }
-
-  textarea:focus,
-  textarea:not(:empty) {
-    border-bottom: 1px solid #eee;
-    min-height: 5em;
-  }
-
-  &::after {
-    content: attr(data-value) " ";
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  &.markdown-editor::after {
-    padding-top: 66px;
-    font-family: monospace;
-    font-size: 14px;
-  }
-`;
-
-const MarkdownEditor = `
-  html {
-    background: #0b0c14;
-  }
-  
-  * {
-    border: none !important;
-  }
-
-  .rc-md-editor {
-    background: #3c3d43;
-    border-top: 1px solid #3c3d43 !important; 
-    border-radius: 8px;
-  }
-
-  .editor-container {
-    background: #3c3d43;
-  }
-  
-  .drop-wrap {
-    top: -110px !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .header-list {
-    display: flex;
-    align-items: center;
-  }
-
-  textarea {
-    background: #0b0c14 !important;
-    color: #fff !important;
-
-    font-family: sans-serif !important;
-    font-size: 1rem;
-
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-navigation {
-    background: #0b0c14 !important;
-    border: 1px solid #3c3d43 !important;
-    border-top: 0 !important;
-    border-bottom: 0 !important;
-    border-radius: 8px 8px 0 0;
-  
-    i {
-      color: #cdd0d5;
-    }
-  }
-
-  .editor-container {
-    border-radius: 0 0 8px 8px;
-  }
-
-  .rc-md-editor .editor-container .sec-md .input {
-    overflow-y: auto;
-    padding: 8px !important;
-    line-height: normal;
-    border-radius: 0 0 8px 8px;
-  }
-`;
-
-function TextEditor({ value, onChange, maxWidth }) {
-  return (
-    <TextareaWrapper
-      className="markdown-editor"
-      data-value={value || ""}
-      style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
-    >
-      <Widget
-        src="mob.near/widget/MarkdownEditorIframe"
-        props={{
-          initialText: value,
-          embedCss: MarkdownEditor,
-          onChange,
-        }}
-      />
-    </TextareaWrapper>
-  );
-}
-
-const CheckboxInput = styled.input`
-  display: none;
-`;
-
-const CheckboxLabel = styled.label`
-  display: inline-flex;
-  padding: 12px;
-  align-items: center;
-  gap: 8px;
-
-  color: #fff;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-function Checkbox({ value, onChange, label }) {
-  return (
-    <div key={`Checkbox-${label ?? "No-label"}`}>
-      <CheckboxLabel>
-        <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
-        {value ? (
-          <i className="bi bi-check-square"></i>
-        ) : (
-          <i className="bi bi-square"></i>
-        )}
-        {label}
-      </CheckboxLabel>
-    </div>
-  );
-}
-
-const ImageWrapper = styled.div`
-  img {
-    width: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    height: ${(props) =>
-      props.variant === "mobile" ? "40px" : "52px"} !important;
-    flex-shrink: 0 !important;
-    border-radius: 100px !important;
-    background: lightgray 50% / cover no-repeat !important;
-  }
-
-  .profile-image {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  @media screen and (max-width: 768px) {
-    ${(props) =>
-      !props.variant &&
-      `
-      img {
-        width: 40px !important;
-        height: 40px !important;
-      }
-    `}
-  }
-`;
-
-function Avatar(props) {
-  const accountId = props.accountId ?? context.accountId;
-
-  return (
-    <ImageWrapper variant={props.variant}>
-      <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
-    </ImageWrapper>
-  );
-}
-
-function User(props) {
-  return (
-    <Widget
-      src="buildhub.near/widget/components.User"
-      props={{ ...props }}
-    />
->>>>>>> 8eb2901 (condenses)
   );
 }
 
@@ -639,9 +55,5 @@ return {
   TextEditor,
   Checkbox,
   Avatar,
-<<<<<<< HEAD
   User,
-=======
-  User
->>>>>>> 8eb2901 (condenses)
 };
diff --git a/apps/builddao/widget/components/Library.jsx b/apps/builddao/widget/components/Library.jsx
index d70648cb..480d1b12 100644
--- a/apps/builddao/widget/components/Library.jsx
+++ b/apps/builddao/widget/components/Library.jsx
@@ -1,7 +1,3 @@
-<<<<<<< HEAD
-=======
-// Buttons/Navigation
->>>>>>> 8eb2901 (condenses)
 const {
   Button,
   Pagination,
@@ -16,12 +12,9 @@ const {
   Avatar,
   Checkbox
 } = VM.require("buildhub.near/widget/components");
-<<<<<<< HEAD
-=======
 
 // states
 const [checked, setChecked] = useState(false);
->>>>>>> 8eb2901 (condenses)
 
 const ButtonPreview = (
   <div>
@@ -75,11 +68,7 @@ const components = [
     },
     preview: ButtonPreview,
     embedCode: `
-<<<<<<< HEAD
   const { Button } = VM.require("buildhub.near/widget/components");
-=======
-  const { Button } = VM.require("buildhub.near/widget/components.
->>>>>>> 8eb2901 (condenses)
 
   return (
     <div>
diff --git a/apps/builddao/widget/resources-aside.jsx b/apps/builddao/widget/resources-aside.jsx
index 45d2018a..ffcd76b9 100644
--- a/apps/builddao/widget/resources-aside.jsx
+++ b/apps/builddao/widget/resources-aside.jsx
@@ -1,4 +1,4 @@
-const { Button } = VM.require("buildhub.near/widget/components.button");
+const { Button } = VM.require("buildhub.near/widget/components");
 
 const Container = styled.div`
   border-radius: 16px;

From 94ffc7cf26b3d99aba2261bb1e4a8c11842ff0cf Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 22:12:05 -0500
Subject: [PATCH 29/34] Aside module

---
 apps/builddao/widget/Aside.jsx | 7 +++----
 apps/builddao/widget/Feed.jsx  | 4 +---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index 65250e08..f286666b 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -1,5 +1,3 @@
-const { Button } = VM.require("buildhub.near/widget/components.Button");
-
 const AsideContainer = styled.div`
   border-radius: 16px;
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
@@ -20,13 +18,14 @@ const AsideContainer = styled.div`
   }
 `;
 
-function Aside({ Button, routes, active, setActiveRoute }) {
+function Aside({ routes, active, setActiveRoute }) {
+  const { Button } = VM.require("buildhub.near/widget/components.Button") || (() => {});
   return (
     <AsideContainer>
       {Object.keys(routes || {}).map((route) => (
         <Button
           key={route}
-          variant={active ? "primary" : "outline"}
+          variant={active === route ? "primary" : "outline"}
           onClick={() => setActiveRoute(route)}
           className={
             "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 0bf1227a..cdc8cba0 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -8,9 +8,8 @@ const { type, hashtag } = props;
 type = hashtag;
 hashtag = type;
 
-const { Post, Button } = VM.require("buildhub.near/widget/components");
+const { Post } = VM.require("buildhub.near/widget/components");
 Post = Post || (() => <></>);
-Button = Button || (() => <></>);
 
 function formatDate(date) {
   const options = { year: "numeric", month: "short", day: "numeric" };
@@ -154,7 +153,6 @@ return (
         active={activeFeed}
         setActiveRoute={setActiveFeed}
         routes={feeds}
-        Button={Button}
       />
     </StyledAside>
     <MainContent>

From 8e4760778ade88b4c05c41891dc585f13b048c03 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Sun, 7 Jan 2024 22:20:10 -0500
Subject: [PATCH 30/34] fix: aside

---
 apps/builddao/widget/Aside.jsx             | 44 +++++++++++-----------
 apps/builddao/widget/Feed.jsx              | 13 ++++---
 apps/builddao/widget/components/Button.jsx |  2 +-
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index f286666b..97326ade 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -18,26 +18,26 @@ const AsideContainer = styled.div`
   }
 `;
 
-function Aside({ routes, active, setActiveRoute }) {
-  const { Button } = VM.require("buildhub.near/widget/components.Button") || (() => {});
-  return (
-    <AsideContainer>
-      {Object.keys(routes || {}).map((route) => (
-        <Button
-          key={route}
-          variant={active === route ? "primary" : "outline"}
-          onClick={() => setActiveRoute(route)}
-          className={
-            "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
-          }
-          style={{ fontSize: "14px" }}
-        >
-          <i className={`bi ${routes[route].icon}`}></i>
-          {routes[route].label}
-        </Button>
-      ))}
-    </AsideContainer>
-  );
-}
+const { Button } =
+  VM.require("buildhub.near/widget/components.Button") || (() => {});
 
-return { Aside };
+const { routes, active, setActiveRoute } = props;
+
+return (
+  <AsideContainer key="aside">
+    {Object.keys(routes || {}).map((route) => (
+      <Button
+        id={route}
+        variant={active === route ? "primary" : "outline"}
+        onClick={() => setActiveRoute(route)}
+        className={
+          "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+        }
+        style={{ fontSize: "14px" }}
+      >
+        <i className={`bi ${routes[route].icon}`}></i>
+        {routes[route].label}
+      </Button>
+    ))}
+  </AsideContainer>
+);
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index cdc8cba0..30688d1c 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -1,8 +1,6 @@
 const { Feed } = VM.require("devs.near/widget/Module.Feed");
-const { Aside } = VM.require("buildhub.near/widget/Aside");
 
 Feed = Feed || (() => <></>); // ensure it's defined or set to a default component
-Aside = Aside || (() => <></>); // ensure it's defined or set to a default component
 
 const { type, hashtag } = props;
 type = hashtag;
@@ -149,10 +147,13 @@ const [template, setTemplate] = useState("What did you have in mind?");
 return (
   <Container>
     <StyledAside key={JSON.stringify(feeds)}>
-      <Aside
-        active={activeFeed}
-        setActiveRoute={setActiveFeed}
-        routes={feeds}
+      <Widget
+        src="buildhub.near/widget/Aside"
+        props={{
+          active: activeFeed,
+          setActiveRoute: setActiveFeed,
+          routes: feeds,
+        }}
       />
     </StyledAside>
     <MainContent>
diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
index ea95507a..885bfd4d 100644
--- a/apps/builddao/widget/components/Button.jsx
+++ b/apps/builddao/widget/components/Button.jsx
@@ -65,7 +65,7 @@ function Button({ id, children, variant, type, onClick, className, style }) {
   return (
     <StyledButton
       id={id}
-      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}`}
+      key={`Button-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
       className={className}
       variant={variant}
       type={type}

From 68670a613968f5fd08f1ca1be4ee22931a899dc8 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 9 Jan 2024 07:23:02 +0500
Subject: [PATCH 31/34] fix: Consistent icons in feed

---
 apps/builddao/widget/Feed.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 30688d1c..bd878e14 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -97,7 +97,7 @@ const feeds = {
   },
   question: {
     label: "Question",
-    icon: "bi-question",
+    icon: "bi-question-lg",
     name: "question",
     template: `## what is your question?
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=question))
@@ -108,7 +108,7 @@ const feeds = {
   },
   opportunity: {
     label: "Opportunity",
-    icon: "bi-suitcase-lg",
+    icon: "bi-briefcase",
     name: "opportunity",
     template: `## TITLE
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=opportunity))
@@ -127,7 +127,7 @@ const feeds = {
   },
   task: {
     label: "Task",
-    icon: "bi-check",
+    icon: "bi-check-lg",
     name: "task",
     template: `## TASK TITLE
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=task))

From 4e551101e3f32b430d0bbade1827355bea6dbf80 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 9 Jan 2024 08:32:40 +0500
Subject: [PATCH 32/34] Enhancments to feed

---
 apps/builddao/widget/Compose.jsx              |  71 +++++++++-
 apps/builddao/widget/Feed.jsx                 |  12 +-
 apps/builddao/widget/components/Library.jsx   |  15 +-
 apps/builddao/widget/components/Post.jsx      |   6 +-
 ...bookmark-button.jsx => BookmarkButton.jsx} |   0
 .../widget/components/post/Content.jsx        | 134 ++++++++++++++++++
 .../builddao/widget/components/post/Embed.jsx |  60 ++++++++
 7 files changed, 277 insertions(+), 21 deletions(-)
 rename apps/builddao/widget/components/post/{bookmark-button.jsx => BookmarkButton.jsx} (100%)
 create mode 100644 apps/builddao/widget/components/post/Content.jsx
 create mode 100644 apps/builddao/widget/components/post/Embed.jsx

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 6ec48414..5cc54a5b 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -1,4 +1,4 @@
-const { User, Button } = VM.require("buildhub.near/widget/components");
+const { Avatar, Button } = VM.require("buildhub.near/widget/components");
 
 const draftKey = props.feed.name || "draft";
 const draft = Storage.privateGet(draftKey);
@@ -303,9 +303,71 @@ const MarkdownEditor = `
 `;
 
 const MarkdownPreview = styled.div`
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 16px !important;
+  }
+  @media (max-width: 767px) {
+    font-size: 15px !important;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 15px !important;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    font-weight: 500 !important;
+  }
+  ol,
+  ul,
+  dl {
+    margin-bottom: 0.5rem;
+    white-space: inherit;
+  }
+  p {
+    margin-bottom: 0.5rem;
+  }
+  hr {
+    display: none;
+  }
+  img {
+    border-radius: var(--bs-border-radius-lg);
+    max-height: 40em;
+  }
+  th {
+    min-width: 5em;
+  }
+
+  .table > :not(caption) > * > * {
+    padding: 0.3rem;
+  }
+
   * {
     color: #b6b6b8 !important;
   }
+
+  a {
+    color: #0d6efd !important;
+
+    &:hover {
+      color: #0a58ca !important;
+    }
+  }
 `;
 
 const LabelSelect = styled.div`
@@ -340,8 +402,11 @@ const LabelSelect = styled.div`
 
 return (
   <PostCreator>
-    <div className="d-flex gap-3">
-      <User accountId={context.accountId} blockHeight={"now"} />
+    <div className="d-flex align-items-start gap-2">
+      <Avatar accountId={context.accountId} />
+      <div>
+        <p className="mb-0 text-white">{context.accountId}</p>
+      </div>
     </div>
 
     <div style={{ border: "none" }}>
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index bd878e14..cb893808 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -187,14 +187,10 @@ return (
           },
         ]}
         Item={(p) => (
-          <Widget
-            loading={<div className="w-100" style={{ height: "200px" }} />}
-            src="/*__@appAccount__*//widget/Post"
-            props={{
-              accountId: p.accountId,
-              blockHeight: p.blockHeight,
-              noBorder: true,
-            }}
+          <Post
+            accountId={p.accountId}
+            blockHeight={p.blockHeight}
+            noBorder={true}
           />
         )}
       />
diff --git a/apps/builddao/widget/components/Library.jsx b/apps/builddao/widget/components/Library.jsx
index 480d1b12..46c19ab4 100644
--- a/apps/builddao/widget/components/Library.jsx
+++ b/apps/builddao/widget/components/Library.jsx
@@ -10,7 +10,7 @@ const {
   TextEditor,
   User,
   Avatar,
-  Checkbox
+  Checkbox,
 } = VM.require("buildhub.near/widget/components");
 
 // states
@@ -261,9 +261,7 @@ const components = [
     preview: (
       <>
         <div className="d-flex flex-column gap-3 mb-3">
-          <Checkbox
-            label="Checkbox"
-          />
+          <Checkbox label="Checkbox" />
         </div>
       </>
     ),
@@ -498,7 +496,6 @@ const components = [
   },
 ];
 
-
 const renderProps = (props, optional) => {
   return Object.entries(props || {}).map(([key, desc]) => {
     return (
@@ -689,9 +686,13 @@ const Grid = styled.div`
   .aside {
     grid-column: span 1 / span 1;
   }
-`;
 
-// return <p style={{ color: "white" }}>Hello World</p>;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;
 
 return (
   <Grid className="container-xl">
diff --git a/apps/builddao/widget/components/Post.jsx b/apps/builddao/widget/components/Post.jsx
index 15d2fd67..f8402f4c 100644
--- a/apps/builddao/widget/components/Post.jsx
+++ b/apps/builddao/widget/components/Post.jsx
@@ -1,4 +1,4 @@
-const { User } = VM.require("buildhub.near/widget/components");
+const { User, BookmarkButton } = VM.require("buildhub.near/widget/components");
 
 const StyledPost = styled.div`
   margin-bottom: 1rem;
@@ -258,7 +258,7 @@ const contentWidget = (
           style={{ minHeight: "100px" }}
         />
       }
-      src="mob.near/widget/MainPage.N.Post.Content"
+      src="buildhub.near/widget/components.post.Content"
       props={{
         content,
         raw,
@@ -353,7 +353,7 @@ return (
               />
               <Widget
                 loading=""
-                src="buildhub.near/widget/components.post.bookmark-button"
+                src="buildhub.near/widget/components.post.BookmarkButton"
                 props={{
                   item,
                 }}
diff --git a/apps/builddao/widget/components/post/bookmark-button.jsx b/apps/builddao/widget/components/post/BookmarkButton.jsx
similarity index 100%
rename from apps/builddao/widget/components/post/bookmark-button.jsx
rename to apps/builddao/widget/components/post/BookmarkButton.jsx
diff --git a/apps/builddao/widget/components/post/Content.jsx b/apps/builddao/widget/components/post/Content.jsx
new file mode 100644
index 00000000..83039a20
--- /dev/null
+++ b/apps/builddao/widget/components/post/Content.jsx
@@ -0,0 +1,134 @@
+const content = props.content;
+const noEmbed = !!props.noEmbed;
+
+const [truncated, setTruncated] = useState(props.truncateContent ?? true);
+
+const Wrapper = styled.div`
+  overflow: hidden;
+  .truncated-content {
+    max-height: 38em;
+    position: relative;
+    overflow: hidden;
+
+    .expand-post {
+      position: absolute;
+      z-index: 1;
+      top: 35em;
+      left: 0;
+      background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 1) 25%
+      );
+      width: 100%;
+      height: 3em;
+
+      > div {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        vertical-align: bottom;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        cursor: pointer;
+        > a {
+          margin: 0 0 0.7em 0.7em;
+        }
+      }
+    }
+
+    @media (max-width: 991px) {
+      max-height: 30em;
+      .expand-post {
+        top: 27em;
+      }
+    }
+  }
+
+  .full-content {
+    .expand-post {
+      display: none;
+    }
+  }
+`;
+
+const [onHashtag] = useState(() => (hashtag) => (
+  <span
+    key={hashtag}
+    className="d-inline-flex"
+    style={{ color: "var(--bs-link-color)" }}
+  >
+    <a href={`/?hashtag=${hashtag}`}>#{hashtag}</a>
+  </span>
+));
+
+const [showLightbox, setShowLightbox] = useState(false);
+
+const [onImage] = useState(
+  () => (props) =>
+    props.src && (
+      <Widget
+        key="content-img"
+        src="mob.near/widget/MainPage.N.Post.Content.Image"
+        loading={<div className="w-100" style={{ height: "24em" }} />}
+        props={{
+          image: {
+            url: props.src,
+          },
+          alt: props.alt ?? "inline image",
+        }}
+      />
+    )
+);
+
+const onLink = useCallback((props) => {
+  if (props.children[0] === "EMBED") {
+    // EMBED
+    return (
+      <Widget
+        src="buildhub.near/widget/components.post.Embed"
+        loading=""
+        props={props}
+      />
+    );
+  } else {
+    return <a {...props} />;
+  }
+}, []);
+
+return (
+  <Wrapper>
+    <div className={truncated ? "truncated-content" : "full-content"}>
+      <div key="text" className="text-break">
+        <Widget
+          key="content"
+          loading={<div className="w-100" style={{ height: "100px" }} />}
+          src="mob.near/widget/N.SocialMarkdown"
+          props={{
+            text: content.text,
+            onHashtag,
+            onImage,
+            onLink: noEmbed ? undefined : onLink,
+          }}
+        />
+      </div>
+      {content.image && (
+        <div key="content-img" className="mt-2">
+          <Widget
+            src="mob.near/widget/MainPage.N.Post.Content.Image"
+            loading={<div className="w-100" style={{ height: "24em" }} />}
+            props={{ image: content.image, alt: "attached image" }}
+          />
+        </div>
+      )}
+      <div className="expand-post">
+        <div>
+          <a className="stretched-link" onClick={() => setTruncated(false)}>
+            Show more
+          </a>
+        </div>
+      </div>
+    </div>
+  </Wrapper>
+);
diff --git a/apps/builddao/widget/components/post/Embed.jsx b/apps/builddao/widget/components/post/Embed.jsx
new file mode 100644
index 00000000..8bd146b0
--- /dev/null
+++ b/apps/builddao/widget/components/post/Embed.jsx
@@ -0,0 +1,60 @@
+// This widget is used for embedding whitelisted set of widgets into a post body.
+
+const EmbedMap = new Map([
+  [
+    "mob.near/widget/MainPage.N.Post.Page",
+    "mob.near/widget/MainPage.N.Post.Embed",
+  ],
+  [
+    "mob.near/widget/MainPage.N.Post.Embed",
+    "mob.near/widget/MainPage.N.Post.Embed",
+  ],
+]);
+
+const href = props.href;
+
+const parseUrl = (url) => {
+  if (typeof url !== "string") {
+    return null;
+  }
+  if (url.startsWith("/")) {
+    url = `https://near.social${url}`;
+  }
+  try {
+    return new URL(url);
+  } catch {
+    return null;
+  }
+};
+
+const parsed = useMemo(() => {
+  const url = parseUrl(href);
+  if (!url) {
+    return null;
+  }
+  return {
+    widgetSrc: url.pathname.substring(1),
+    props: Object.fromEntries([...url.searchParams.entries()]),
+  };
+}, [href]);
+
+if (!parsed || !EmbedMap.has(parsed.widgetSrc)) {
+  return <a href={href}>{props.children}</a>;
+}
+
+const widgetSrc = EmbedMap.get(parsed.widgetSrc);
+
+const Wrapper = styled.div`
+  border-radius: 1rem;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  white-space: normal;
+  margin-top: 12px;
+`;
+
+return (
+  <Wrapper>
+    <Widget loading="" src={widgetSrc} props={parsed.props} />
+  </Wrapper>
+);

From 49bfcb7bbcba64ed067d29557d875118753824c8 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 9 Jan 2024 13:10:07 +0500
Subject: [PATCH 33/34] Add library page

---
 apps/builddao/widget/Resources.jsx       |  3 ++-
 apps/builddao/widget/resources-aside.jsx |  2 +-
 src/App.js                               |  5 +++++
 src/pages/LibraryPage.js                 | 20 ++++++++++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/LibraryPage.js

diff --git a/apps/builddao/widget/Resources.jsx b/apps/builddao/widget/Resources.jsx
index 625f637a..417cd3d8 100644
--- a/apps/builddao/widget/Resources.jsx
+++ b/apps/builddao/widget/Resources.jsx
@@ -23,7 +23,6 @@ const fetchResources = () => {
   const res = fetch(
     "https://raw.githubusercontent.com/itexpert120/buildhub-resources/main/resources.json"
   );
-
   return JSON.parse(res.body);
 };
 
@@ -33,6 +32,8 @@ if (!resources) {
   return <div>Loading...</div>;
 }
 
+console.log(resources);
+
 const [currentResource, setCurrentResource] = useState(resources[0].name);
 
 function getMdLinkByName(nameToFind) {
diff --git a/apps/builddao/widget/resources-aside.jsx b/apps/builddao/widget/resources-aside.jsx
index ffcd76b9..a24180fc 100644
--- a/apps/builddao/widget/resources-aside.jsx
+++ b/apps/builddao/widget/resources-aside.jsx
@@ -27,7 +27,7 @@ return (
         variant={
           props.currentResource === resource.name ? "primary" : "outline"
         }
-        onClick={() => props.setCurrentResource(resource)}
+        onClick={() => props.setCurrentResource(resource.name)}
         className={
           "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
         }
diff --git a/src/App.js b/src/App.js
index 4ca1c04c..0f9c6d18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,6 +38,7 @@ import JoinPage from "./pages/JoinPage";
 import ProposePage from "./pages/ProposePage";
 import ViewPage from "./pages/ViewPage";
 import ResourcesPage from "./pages/ResourcesPage";
+import LibraryPage from "./pages/LibraryPage";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://docs.near.org/bos";
@@ -186,6 +187,10 @@ function App() {
             <Route path={"/propose"}>
               <ProposePage {...passProps} />
             </Route>
+            <Route path={"/library"}>
+              <Navbar {...passProps} />
+              <LibraryPage {...passProps} />
+            </Route>
             <Route path={"/feed"}>
               <Navbar {...passProps} />
               <FeedPage {...passProps} />
diff --git a/src/pages/LibraryPage.js b/src/pages/LibraryPage.js
new file mode 100644
index 00000000..8eb42dd2
--- /dev/null
+++ b/src/pages/LibraryPage.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { Widget } from "near-social-vm";
+import { useBosLoaderStore } from "../stores/bos-loader";
+
+export default function LibraryPage(props) {
+    const redirectMapStore = useBosLoaderStore();
+    return (
+        <div className="h-100">
+            <Widget
+                src="buildhub.near/widget/components.Library"
+                props={{
+                    ...props,
+                }}
+                config={{
+                    redirectMap: redirectMapStore.redirectMap,
+                }}
+            />
+        </div>
+    );
+}

From 242e7bbe5589c9129e49baadc971bc2fac5cde7f Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 9 Jan 2024 13:23:17 +0500
Subject: [PATCH 34/34] Fix styles

---
 apps/builddao/widget/Aside.jsx           | 3 ++-
 apps/builddao/widget/md-view.jsx         | 4 +++-
 apps/builddao/widget/resources-aside.jsx | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/builddao/widget/Aside.jsx b/apps/builddao/widget/Aside.jsx
index 97326ade..c7cc4559 100644
--- a/apps/builddao/widget/Aside.jsx
+++ b/apps/builddao/widget/Aside.jsx
@@ -3,13 +3,14 @@ const AsideContainer = styled.div`
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
   background: var(--bg-1, #0b0c14);
   width: 100%;
-  height: 100%;
 
   display: flex;
   padding: 24px 12px;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
+  margin-bottom: 1rem;
+  height: calc(min(100vh - 64px, 100%));
 
   @media screen and (max-width: 768px) {
     border: 0px;
diff --git a/apps/builddao/widget/md-view.jsx b/apps/builddao/widget/md-view.jsx
index ead6aabb..39136e1c 100644
--- a/apps/builddao/widget/md-view.jsx
+++ b/apps/builddao/widget/md-view.jsx
@@ -22,7 +22,9 @@ const MarkdownContainer = styled.div`
     line-height: 120%; /* 57.6px */
   }
 
-  p {
+  p,
+  ul,
+  li {
     color: var(--White-50, #cdd0d5);
     /* Body/14px */
     font-family: "Inter", sans-serif !important;
diff --git a/apps/builddao/widget/resources-aside.jsx b/apps/builddao/widget/resources-aside.jsx
index a24180fc..769545c3 100644
--- a/apps/builddao/widget/resources-aside.jsx
+++ b/apps/builddao/widget/resources-aside.jsx
@@ -5,13 +5,14 @@ const Container = styled.div`
   border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
   background: var(--bg-1, #0b0c14);
   width: 100%;
-  height: 100%;
 
   display: flex;
   padding: 24px 12px;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
+  margin-bottom: 1rem;
+  height: calc(min(100vh - 64px, 100%));
 
   @media screen and (max-width: 768px) {
     border: 0px;