Profile page

apps/builddao/widget/Profile.jsx

@@ -1,8 +1,8 @@
-if (!context.accountId || !props.accountId) {
+if (!(props.accountId ?? context.accountId)) {
   return "No Account ID";
 }
 
-const accountId = props.accountId || context.accountId;
+const accountId = props.accountId ?? context.accountId;
 
 const profile = Social.getr(`${accountId}/profile`);
 if (!profile) {
@@ -13,6 +13,11 @@ const ProfileContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 1rem;
+
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 const SideContainer = styled.div`
@@ -32,17 +37,13 @@ return (
       />
     </SideContainer>
     <MainContainer>
-      <button
-        onClick={() => {
-          Social.set({
-            profile: {
-              location: "Multan, Pakistan",
-            },
-          });
+      <Widget
+        src="buildhub.near/widget/components.profile.ProfileTabs"
+        props={{
+          accountId,
+          profile,
         }}
-      >
-        test
-      </button>
+      />
     </MainContainer>
   </ProfileContainer>
 );

apps/builddao/widget/components/InputField.jsx

@@ -17,9 +17,8 @@ const Label = styled.label`
 
 const Input = styled.input`
   display: flex;
-  max-width: ${(props) => props.maxWidth ?? "390px"};
   width: 100%;
-  padding: 16px 12px;
+  padding: 12px;
   align-items: flex-start;
   gap: 10px;
 
@@ -48,15 +47,18 @@ function InputField({
   maxWidth,
 }) {
   return (
-    <InputContainer>
+    <InputContainer
+      key={`input-container-${key}`}
+      style={{ maxWidth: maxWidth ?? "390px" }}
+    >
       {label && <Label>{label}</Label>}
       <Input
-        key={key}
+        key={`input-field-${key}`}
         value={value}
         onChange={onChange}
         placeholder={placeholder}
         type={type ?? "text"}
-        maxWidth={maxWidth}
+        style={{ maxWidth: maxWidth ?? "390px" }}
       />
     </InputContainer>
   );

apps/builddao/widget/components/Post.jsx

@@ -288,7 +288,10 @@ const contentWidget = (
 
 return (
   <>
-    <StyledPost key={`Post-${item.path}-${item.blockHeight}`}>
+    <StyledPost
+      key={`Post-${item.path}-${item.blockHeight}`}
+      style={{ width: props.width ? props.width : "auto" }}
+    >
       <Wrapper
         className="w-100 mx-auto"
         style={

apps/builddao/widget/components/TextEditor.jsx

@@ -126,22 +126,41 @@ const MarkdownEditor = `
   }
 `;
 
-function TextEditor({ value, onChange, maxWidth }) {
+const Label = styled.label`
+  color: var(--label-color, #fff);
+
+  /* Body/16px */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+function TextEditor({ value, label, 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: props.EditorCSS || MarkdownEditor,
-          onChange,
-        }}
-      />
-    </TextareaWrapper>
+    <Container>
+      <Label>{label}</Label>
+      <TextareaWrapper
+        className="markdown-editor"
+        data-value={value || ""}
+        style={{ maxWidth: maxWidth ? maxWidth : "550px" }}
+      >
+        <Widget
+          src="mob.near/widget/MarkdownEditorIframe"
+          props={{
+            initialText: value,
+            embedCss: props.EditorCSS || MarkdownEditor,
+            onChange,
+          }}
+        />
+      </TextareaWrapper>
+    </Container>
   );
 }
 

apps/builddao/widget/components/User.jsx

@@ -58,8 +58,9 @@ const Overlay = (props) => (
   <Link
     className="link-dark text-truncate d-inline-flex mw-100"
     to={href({
-      widgetSrc: "mob.near/widget/ProfilePage",
+      widgetSrc: "mob.near/widget/app",
       params: {
+        page: "profile",
         accountId,
       },
     })}

apps/builddao/widget/components/buttons/UserDropdown.jsx

@@ -181,7 +181,7 @@ return (
         <Link
           className="dropdown-item"
           type="button"
-          to={`/mob.near/widget/ProfilePage?accountId=${context.accountId}`}
+          to={`/buildhub.near/widget/app?page=profile&accountId=${context.accountId}`}
         >
           <User />
           My Profile

apps/builddao/widget/components/navigation/header.jsx

@@ -130,11 +130,7 @@ const AppHeader = ({ page, routes, ...props }) => (
               }
               return (
                 <NavLink to={k}>
-                  <Button
-                    key={k}
-                    variant={page === k && "primary"}
-                    style={{ padding: "0.5rem 1rem", fontWeight: 500 }}
-                  >
+                  <Button key={k} variant={page === k && "primary"}>
                     {route.init.icon && <i className={route.init.icon}></i>}
                     {route.init.name}
                   </Button>

apps/builddao/widget/components/post/Header.jsx

@@ -104,8 +104,9 @@ const Overlay = (props) => (
   <Link
     className="link-dark text-truncate d-inline-flex mw-100"
     to={href({
-      widgetSrc: "mob.near/widget/ProfilePage",
+      widgetSrc: "buildhub.near/widget/app",
       params: {
+        page: "profile",
         accountId,
       },
     })}
@@ -155,7 +156,7 @@ return (
           )}
         </Wrapper>
         {pinned && (
-          <span title="Pinned" className="ms-2">
+          <span title="Pinned" className="ms-2 text-white">
             <i className="bi bi-pin-angle" />
           </span>
         )}