Add Components Library

apps/builddao/widget/Aside.jsx

@@ -1,15 +1,16 @@
-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);
   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;
@@ -18,67 +19,26 @@ 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 };
+const { Button } =
+  VM.require("buildhub.near/widget/components.Button") || (() => {});
+
+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>
+);

apps/builddao/widget/Compose.jsx

@@ -1,3 +1,5 @@
+const { Avatar, 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,77 +275,99 @@ const MarkdownEditor = `
 
     border: 1px solid #4f5055 !important;
     border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
   }
 
   .rc-md-navigation {
     background: #23242b !important;
     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;
+    border-radius: 0 0 8px 8px;
   }
 `;
 
-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;
+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;
+    }
+  }
 
-  transition: all 300ms;
+  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;
+  }
 
-  &:hover {
-    background: #fff;
-    color: #000;
+  .table > :not(caption) > * > * {
+    padding: 0.3rem;
   }
-`;
 
-const MarkdownPreview = styled.div`
   * {
     color: #b6b6b8 !important;
   }
+
+  a {
+    color: #0d6efd !important;
+
+    &:hover {
+      color: #0a58ca !important;
+    }
+  }
 `;
 
 const LabelSelect = styled.div`
@@ -373,23 +402,10 @@ 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 className="d-flex align-items-start gap-2">
+      <Avatar accountId={context.accountId} />
+      <div>
+        <p className="mb-0 text-white">{context.accountId}</p>
       </div>
     </div>
 
@@ -422,45 +438,11 @@ 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")}
+        style={{ fontSize: 14 }}
       >
         {view === "editor" ? (
           <>
@@ -471,8 +453,10 @@ return (
             Edit <i className="bi bi-pencil-square"></i>
           </>
         )}
-      </SecondaryButton>
+      </Button>
       <Button
+        variant="primary"
+        style={{ fontSize: 14 }}
         onClick={() =>
           postToCustomFeed({ feed: props.feed, text: postContent, labels })
         }