Refactor proposal feed component (#912)

* fix solution action

* fix preview for proposals

* reused feed component

* delete components

* remove comments

* update test

* move all props to one file

instances/devhub.near/widget/app.jsx

@@ -14,27 +14,13 @@ const { AppLayout } = VM.require(
   "${REPL_DEVHUB}/widget/devhub.components.templates.AppLayout"
 );
 
-if (!AppLayout) {
+const { CssContainer } = VM.require("${REPL_DEVHUB}/widget/config.css");
+const { Theme } = VM.require("${REPL_DEVHUB}/widget/config.theme");
+
+if (!AppLayout || !Theme || !CssContainer) {
   return <p>Loading modules...</p>;
 }
 
-// CSS styles to be used across the app.
-// Define fonts here, as well as any other global styles.
-const Theme = styled.div`
-  a {
-    color: inherit;
-  }
-
-  .attractable {
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
-    transition: box-shadow 0.6s;
-
-    &:hover {
-      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-    }
-  }
-`;
-
 if (!page) {
   // If no page is specified, we default to the feed page TEMP
   page = "home";
@@ -256,8 +242,10 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page}>
-      <Page />
-    </AppLayout>
+    <CssContainer>
+      <AppLayout page={page}>
+        <Page />
+      </AppLayout>
+    </CssContainer>
   </Theme>
 );

instances/devhub.near/widget/config/css.jsx

@@ -0,0 +1,26 @@
+const CssContainer = styled.div`
+  .theme-btn {
+    background-color: var(--theme-color) !important;
+    border: none;
+    color: white;
+
+    &:active {
+      color: white;
+    }
+  }
+
+  a {
+    color: inherit;
+  }
+
+  .attractable {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+    transition: box-shadow 0.6s;
+
+    &:hover {
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    }
+  }
+`;
+
+return { CssContainer };

instances/devhub.near/widget/config/data.jsx

@@ -0,0 +1,97 @@
+const proposalFeedAnnouncement = (
+  <div className="text-muted bg-grey text-sm mt-2 p-3 rounded-3">
+    <p className="d-flex gap-3 align-items-center mb-0">
+      <div>
+        <i class="bi bi-info-circle"></i>
+      </div>
+      <div>
+        <span className="fw-bold">
+          Welcome to
+          <a
+            href="?page=community&handle=developer-dao&tab=overview"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            DevDAO’s New Proposal Feed!
+          </a>
+        </span>
+        This dedicated space replaces the
+        <a
+          href="?page=feed"
+          className="text-decoration-underline no-space"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          old activity feed
+        </a>
+        , making it easier to submit and track funding requests from DevDAO, the
+        primary organization behind DevHub. To submit a formal proposal, click
+        New Proposal. See our{" "}
+        <a
+          href="?page=community&handle=developer-dao&tab=funding"
+          className="text-decoration-underline no-space"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          guidelines
+        </a>
+        for details. For discussions and brainstorming, please utilize the
+        relevant{" "}
+        <a
+          href="?page=communities"
+          className="text-decoration-underline no-space"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          communities
+        </a>
+        .
+      </div>
+    </p>
+  </div>
+);
+
+const categoryOptions = [
+  {
+    title: "DevDAO Operations",
+    value: "DevDAO Operations",
+  },
+  {
+    title: "DevDAO Platform",
+    value: "DevDAO Platform",
+  },
+  {
+    title: "Events & Hackathons",
+    value: "Events & Hackathons",
+  },
+  {
+    title: "Engagement & Awareness",
+    value: "Engagement & Awareness",
+  },
+  {
+    title: "Decentralized DevRel",
+    value: "Decentralized DevRel",
+  },
+  {
+    title: "Universities & Bootcamps",
+    value: "Universities & Bootcamps",
+  },
+  {
+    title: "Tooling & Infrastructure",
+    value: "Tooling & Infrastructure",
+  },
+  {
+    title: "Other",
+    value: "Other",
+  },
+];
+
+return {
+  contract: "devhub.near",
+  proposalFeedIndexerQueryName:
+    "polyprogrammist_near_devhub_prod_v1_proposals_with_latest_snapshot",
+  indexerHasuraRole: "polyprogrammist_near",
+  isDevhub: true,
+  proposalFeedAnnouncement,
+  availableCategoryOptions: categoryOptions,
+};

instances/devhub.near/widget/config/theme.jsx

@@ -0,0 +1,5 @@
+const Theme = styled.div`
+  --theme-color: rgb(4, 164, 110);
+`;
+
+return { Theme };