From cfe9a4d9bfdada73b6988c0dfdd42597e0838f96 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 13:49:17 +0200
Subject: [PATCH 1/5] Request an article Form

---
 docusaurus.config.js                   |   8 ++
 src/components/FeedbackForm/index.js   | 160 +----------------------
 src/components/ModalFormSpark/index.js | 172 +++++++++++++++++++++++++
 src/components/RequestArticle/index.js |  32 +++++
 src/theme/DocItem/MoreActions/index.js |   6 +
 src/theme/Icon/Article/index.js        |  15 +++
 6 files changed, 237 insertions(+), 156 deletions(-)
 create mode 100644 src/components/ModalFormSpark/index.js
 create mode 100644 src/components/RequestArticle/index.js
 create mode 100644 src/theme/Icon/Article/index.js

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 360aa0f2..ad386a9a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -44,6 +44,14 @@ const config = {
         title: 'Report an Issue',
         url : 'https://github.com/rsksmart/devportal/issues',
       },
+      requestArticle : {
+        title: 'Request an Article',
+        form : {
+          id : '5qQ40ScPu',
+          title : 'Request an Article',
+          description : 'Please provide a detailed description of the article you would like to see on the Devportal.',
+        }
+      },
     }
   },
   // GitHub pages deployment config.
diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
index 8174d0a4..778eb1d9 100644
--- a/src/components/FeedbackForm/index.js
+++ b/src/components/FeedbackForm/index.js
@@ -1,160 +1,7 @@
-import React, {useState, useEffect} from "react";
+import React, {useState} from "react";
 import Translate from '@docusaurus/Translate';
-import Modal from 'react-bootstrap/Modal';
-import {useFormspark} from "@formspark/use-formspark";
 
-function MyVerticallyCenteredModal(props) {
-  const [url, setUrl] = useState('#');
-
-  const [submit, submitting] = useFormspark({
-    formId: `vg6LeINWT`,
-  });
-
-  const [message, setMessage] = useState("");
-  const [email, setEmail] = useState("");
-  const [name, setName] = useState("");
-
-  const [sending, setSending] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-
-  const totalStars = 5;
-  const [rating, setRating] = useState(props.rating || 0);
-  const [hover, setHover] = useState(null);
-
-  useEffect(() => {
-    setRating(props.rating);
-
-    if (window) {
-      setUrl(window.location.origin + window.location.pathname);
-    }
-  }, [props.rating, props.show]);
-
-  const onSubmit = async (e) => {
-    if (submitting) return;
-
-    e.preventDefault();
-    setSending(true);
-    await submit(
-      {message, email, name, rating, url}
-    );
-    setSubmitted(true);
-    setSending(false);
-    setMessage("");
-    setEmail("");
-    setName("");
-    setRating(0);
-    setTimeout(() => {
-      setSubmitted(false);
-    }, 4000)
-  };
-
-  return (
-    <Modal
-      {...props}
-      size="md"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-    >
-      <button onClick={props.onHide} className={'btn-blank d-flex position-absolute end-0 top-0 text-body me-32 mt-32 z-1'}>
-        <svg width="24" height="24">
-          <use xlinkHref="#icon-close-circle"/>
-        </svg>
-      </button>
-      <Modal.Body>
-        <Modal.Title as={'h4'} id="contained-modal-title-vcenter" className={'mb-16 subtitle-2 pe-32'}>
-          Thank you for your feedback!
-        </Modal.Title>
-        <p>We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!</p>
-        <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
-          <span>Current rating</span>
-          <div className={'d-flex gap-8'}>
-            {[...Array(totalStars)].map((star, index) => {
-              const currentRating = index + 1;
-
-              return (
-                <label key={index}
-                       onMouseEnter={() => setHover(currentRating)}
-                       onMouseLeave={() => setHover(null)}
-                >
-                  <input
-                    disabled={submitting}
-                    className={`d-none`}
-                    key={star}
-                    type="radio"
-                    name="rating"
-                    value={currentRating}
-                    onChange={() => setRating(currentRating)}
-                  />
-                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
-                    <path
-                      d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
-                      fill="currentColor"/>
-                    <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
-                  </svg>
-                </label>
-              );
-            })}
-          </div>
-        </div>
-        <form onSubmit={onSubmit}>
-          <div className="d-flex flex-column gap-12 mb-24">
-            <input type="hidden" name="rating" value={rating}/>
-            <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
-                   value={name} onChange={(e) => setName(e.target.value)}
-            />
-            <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
-                   value={email} onChange={(e) => setEmail(e.target.value)}
-            />
-
-            <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
-                      onChange={(e) => setMessage(e.target.value)}/>
-          </div>
-
-          <div className={`d-flex justify-content-between align-items-center`}>
-            <button type={`button`} className={`btn-blank`} onClick={props.onHide}>
-              {!submitted ? (`Not now`) : (`Close`)}
-            </button>
-
-            <button
-              className="btn position-relative py-10"
-              type="submit" disabled={submitting}
-            >
-              <span>
-                {sending && (
-                  <>
-                    Submitting
-                    <div className="spinner-border" role="status">
-                      <span className="visually-hidden">Loading...</span>
-                    </div>
-                  </>
-                )}
-                {!sending && !submitted && (
-                  <>
-                    Submit
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-arrow-right"/>
-                    </svg>
-                  </>
-                )}
-                {!sending && submitted && (
-                  <>
-                    Submitted
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-check-circle"/>
-                    </svg>
-                  </>
-                )}
-              </span>
-            </button>
-
-          </div>
-        </form>
-
-
-      </Modal.Body>
-    </Modal>
-  );
-}
+import { ModalFormSpark } from "/src/components/ModalFormSpark";
 
 export const FeedbackForm = () => {
 
@@ -200,9 +47,10 @@ export const FeedbackForm = () => {
         })}
       </div>
 
-      <MyVerticallyCenteredModal
+      <ModalFormSpark
         show={modalShow}
         rating={rating}
+        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!'}}
         onHide={() => setModalShow(false)}
       />
     </div>
diff --git a/src/components/ModalFormSpark/index.js b/src/components/ModalFormSpark/index.js
new file mode 100644
index 00000000..4c6baca5
--- /dev/null
+++ b/src/components/ModalFormSpark/index.js
@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+import Modal from 'react-bootstrap/Modal'
+
+export const ModalFormSpark = (props) => {
+  const [url, setUrl] = useState('#');
+
+  const { form } = props;
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  });
+
+
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+
+  const [sending, setSending] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const totalStars = 5;
+  const [rating, setRating] = useState(props.rating || 0);
+  const [hover, setHover] = useState(null);
+
+  useEffect(() => {
+    if (props.rating) {
+      setRating(props.rating);
+    }
+
+    if (window) {
+      setUrl(window.location.origin + window.location.pathname);
+    }
+  }, [props.rating, props.show]);
+
+  const onSubmit = async (e) => {
+    if (submitting) return;
+
+    e.preventDefault();
+    setSending(true);
+    let query = {message, email, name, url}
+
+    query = props?.rating ? {...query, rating} : query;
+
+    await submit(query);
+    setSubmitted(true);
+    setSending(false);
+    setMessage("");
+    setEmail("");
+    setName("");
+    setRating(0);
+    setTimeout(() => {
+      setSubmitted(false);
+    }, 4000)
+  };
+
+  return form?.id && (
+    <Modal
+      {...props}
+      size="md"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <button onClick={props.onHide} className={`btn-blank d-flex position-absolute end-0 top-0 text-body z-1 ${!form.description && !form.title ? 'me-8 mt-8' : 'me-32 mt-32'}`}>
+        <svg width="24" height="24">
+          <use xlinkHref="#icon-close-circle"/>
+        </svg>
+      </button>
+      <Modal.Body>
+        {form?.title && (
+          <Modal.Title as={'h4'} id="contained-modal-title-vcenter" className={'mb-16 subtitle-2 pe-32'}>
+            {form.title}
+          </Modal.Title>
+        )}
+        {form.description && (
+          <p className={!form.title ? 'pe-32' : ''}>{form.description}</p>
+        )}
+
+        {props?.rating && (
+          <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
+            <span>Current rating</span>
+            <div className={'d-flex gap-8'}>
+              {[...Array(totalStars)].map((star, index) => {
+                const currentRating = index + 1;
+
+                return (
+                  <label key={index}
+                         onMouseEnter={() => setHover(currentRating)}
+                         onMouseLeave={() => setHover(null)}
+                  >
+                    <input
+                      disabled={submitting}
+                      className={`d-none`}
+                      key={star}
+                      type="radio"
+                      name="rating"
+                      value={currentRating}
+                      onChange={() => setRating(currentRating)}
+                    />
+                    <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
+                      <path
+                        d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
+                        fill="currentColor"/>
+                      <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
+                    </svg>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <form onSubmit={onSubmit}>
+          <div className="d-flex flex-column gap-12 mb-24">
+            {props?.rating && (
+              <input type="hidden" name="rating" value={rating}/>
+            )}
+            <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
+                   value={name} onChange={(e) => setName(e.target.value)}
+            />
+            <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
+                   value={email} onChange={(e) => setEmail(e.target.value)}
+            />
+
+            <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
+                      onChange={(e) => setMessage(e.target.value)}/>
+          </div>
+
+          <div className={`d-flex justify-content-between align-items-center`}>
+            <button type={`button`} className={`btn-blank`} onClick={props.onHide}>
+              {!submitted ? (`Not now`) : (`Close`)}
+            </button>
+
+            <button
+              className="btn position-relative py-10"
+              type="submit" disabled={submitting}
+            >
+              <span>
+                {sending && (
+                  <>
+                    Submitting
+                    <div className="spinner-border" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
+                  </>
+                )}
+                {!sending && !submitted && (
+                  <>
+                    Submit
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-arrow-right"/>
+                    </svg>
+                  </>
+                )}
+                {!sending && submitted && (
+                  <>
+                    Submitted
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-check-circle"/>
+                    </svg>
+                  </>
+                )}
+              </span>
+            </button>
+
+          </div>
+        </form>
+
+      </Modal.Body>
+    </Modal>
+  );
+}
diff --git a/src/components/RequestArticle/index.js b/src/components/RequestArticle/index.js
new file mode 100644
index 00000000..b6f07190
--- /dev/null
+++ b/src/components/RequestArticle/index.js
@@ -0,0 +1,32 @@
+import React, {useState} from "react";
+import Translate from '@docusaurus/Translate';
+
+import { ModalFormSpark } from "/src/components/ModalFormSpark";
+import IconArticle from "@theme/Icon/Article";
+
+export const RequestArticle = ({label, form}) => {
+
+  const [modalShow, setModalShow] = useState(false);
+
+  return label && form?.id && (
+    <>
+      <button className={`btn-blank link-base d-inline-flex gap-8 align-items-center`}
+              onClick={() => setModalShow(true)}
+              type="button"
+      >
+        <IconArticle/>
+        <Translate
+          id="theme.moreLinks.requestArticle"
+        >
+          {label}
+        </Translate>
+      </button>
+
+      <ModalFormSpark
+        show={modalShow}
+        form={form}
+        onHide={() => setModalShow(false)}
+      />
+    </>
+  )
+}
diff --git a/src/theme/DocItem/MoreActions/index.js b/src/theme/DocItem/MoreActions/index.js
index 6a54e6a7..796e8090 100644
--- a/src/theme/DocItem/MoreActions/index.js
+++ b/src/theme/DocItem/MoreActions/index.js
@@ -13,6 +13,7 @@ import IconCommunity from "@theme/Icon/Community";
 import IconChangelog from "@theme/Icon/Changelog";
 
 import Link from '@docusaurus/Link';
+import { RequestArticle } from '../../../components/RequestArticle'
 
 export default function MoreActions({editUrl}) {
 
@@ -74,6 +75,11 @@ export default function MoreActions({editUrl}) {
           </Link>
         </li>
       )}
+      {links?.requestArticle && links.requestArticle?.form?.id && (
+        <li className={`py-3`}>
+          <RequestArticle label={links.requestArticle.title} form={links.requestArticle.form} />
+        </li>
+      )}
     </ul>
   </div>
 }
diff --git a/src/theme/Icon/Article/index.js b/src/theme/Icon/Article/index.js
new file mode 100644
index 00000000..0ae32a08
--- /dev/null
+++ b/src/theme/Icon/Article/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export default function IconArticle ({ className, ...restProps }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24"
+         fill="currentColor"
+         className={clsx(className)}
+         aria-hidden="true"
+         {...restProps}>
+        <path d="m19.27 6.97-5.24-5.25a.68.68 0 0 0-.53-.22H6c-.83 0-1.5.67-1.5 1.5v18c0 .82.67 1.5 1.5 1.5h12c.82 0 1.5-.68 1.5-1.5V7.5a.68.68 0 0 0-.23-.53ZM13.5 3.3l4.2 4.2h-4.2V3.3ZM18 21H6V3h6v4.5c0 .82.68 1.5 1.5 1.5H18v12Z"/>
+        <path d="M16.5 16.5h-9V18h9v-1.5ZM16.5 12h-9v1.5h9V12Z"/>
+    </svg>
+  )
+}

From b6bcbf367306a059115692e4327c423d500c353d Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 13:51:13 +0200
Subject: [PATCH 2/5] Request an article Form

---
 docusaurus.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index ad386a9a..5b16e9e1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -48,8 +48,8 @@ const config = {
         title: 'Request an Article',
         form : {
           id : '5qQ40ScPu',
-          title : 'Request an Article',
-          description : 'Please provide a detailed description of the article you would like to see on the Devportal.',
+          title : 'Request a New Article',
+          description : 'Looking for information we haven’t covered? Fill out the form below to request a new article, and we’ll consider it in future updates.',
         }
       },
     }

From 875c3f15a36526c2e1036dbb167d93315d6b9e94 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Mon, 25 Nov 2024 13:47:13 +0200
Subject: [PATCH 3/5] Request a New Article from update: - separate Request
 Article Form and Feedbakc form - update Request a New Article form fields

---
 src/components/FeedbackForm/index.js          |   2 +-
 .../Forms/FormFeedback/index.js               | 149 +++++++++++++++++
 .../Forms/FormRequestArticle/index.js         | 152 ++++++++++++++++++
 src/components/ModalFormSpark/index.js        | 144 +----------------
 src/components/RequestArticle/index.js        |   2 +-
 src/scss/abstracts/_variables.scss            |   4 +
 src/scss/base/_forms.scss                     |   6 +
 7 files changed, 318 insertions(+), 141 deletions(-)
 create mode 100644 src/components/ModalFormSpark/Forms/FormFeedback/index.js
 create mode 100644 src/components/ModalFormSpark/Forms/FormRequestArticle/index.js

diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
index 778eb1d9..166b6c10 100644
--- a/src/components/FeedbackForm/index.js
+++ b/src/components/FeedbackForm/index.js
@@ -50,7 +50,7 @@ export const FeedbackForm = () => {
       <ModalFormSpark
         show={modalShow}
         rating={rating}
-        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!'}}
+        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!', type: 'feedback'}}
         onHide={() => setModalShow(false)}
       />
     </div>
diff --git a/src/components/ModalFormSpark/Forms/FormFeedback/index.js b/src/components/ModalFormSpark/Forms/FormFeedback/index.js
new file mode 100644
index 00000000..fe4fcc72
--- /dev/null
+++ b/src/components/ModalFormSpark/Forms/FormFeedback/index.js
@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormFeedback = (props) => {
+  const [url, setUrl] = useState('#');
+
+  const { form } = props;
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  });
+
+
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+
+  const [sending, setSending] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const totalStars = 5;
+  const [rating, setRating] = useState(props.rating || 0);
+  const [hover, setHover] = useState(null);
+
+  useEffect(() => {
+    if (props.rating) {
+      setRating(props.rating);
+    }
+
+    if (window) {
+      setUrl(window.location.origin + window.location.pathname);
+    }
+  }, [props.rating]);
+
+  const onSubmit = async (e) => {
+    if (submitting) return;
+
+    e.preventDefault();
+    setSending(true);
+    let query = {message, email, name, url}
+
+    query = props?.rating ? {...query, rating} : query;
+
+    await submit(query);
+    setSubmitted(true);
+    setSending(false);
+    setMessage("");
+    setEmail("");
+    setName("");
+    setRating(0);
+    setTimeout(() => {
+      setSubmitted(false);
+    }, 4000)
+  };
+
+  return form?.id && (
+    <>
+      {props?.rating && (
+        <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
+          <span>Current rating</span>
+          <div className={'d-flex gap-8'}>
+            {[...Array(totalStars)].map((star, index) => {
+              const currentRating = index + 1;
+
+              return (
+                <label key={index}
+                       onMouseEnter={() => setHover(currentRating)}
+                       onMouseLeave={() => setHover(null)}
+                >
+                  <input
+                    disabled={submitting}
+                    className={`d-none`}
+                    key={star}
+                    type="radio"
+                    name="rating"
+                    value={currentRating}
+                    onChange={() => setRating(currentRating)}
+                  />
+                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
+                    <path
+                      d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
+                      fill="currentColor"/>
+                    <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
+                  </svg>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="d-flex flex-column gap-12 mb-24">
+          {props?.rating && (
+            <input type="hidden" name="rating" value={rating}/>
+          )}
+          <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
+                 value={name} onChange={(e) => setName(e.target.value)}
+          />
+          <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
+                 value={email} onChange={(e) => setEmail(e.target.value)}
+          />
+
+          <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
+                    onChange={(e) => setMessage(e.target.value)}/>
+        </div>
+
+        <div className={`d-flex justify-content-between align-items-center`}>
+          <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+            {!submitted ? (`Not now`) : (`Close`)}
+          </button>
+
+          <button
+            className="btn position-relative py-10"
+            type="submit" disabled={submitting}
+          >
+              <span>
+                {sending && (
+                  <>
+                    Submitting
+                    <div className="spinner-border" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
+                  </>
+                )}
+                {!sending && !submitted && (
+                  <>
+                    Submit
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-arrow-right"/>
+                    </svg>
+                  </>
+                )}
+                {!sending && submitted && (
+                  <>
+                    Submitted
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-check-circle"/>
+                    </svg>
+                  </>
+                )}
+              </span>
+          </button>
+
+        </div>
+      </form>
+    </>
+  );
+}
diff --git a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
new file mode 100644
index 00000000..6b39d56f
--- /dev/null
+++ b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormRequestArticle = (props) => {
+  // const [url, setUrl] = useState('#')
+
+  const { form } = props
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  })
+
+  // const [email, setEmail] = useState('')
+  // const [name, setName] = useState('')
+  //
+  // const [requestType, setRequestType] = useState('tutorial')
+  // const [title, setTitle] = useState('')
+  // const [why, setWhy] = useState('')
+  // const [otherInformation, setOtherInformation] = useState('')
+  // const [submitIssue, setSubmitIssue] = useState('')
+
+  const requestTypes = ['Tutorial', 'Guide', 'Video', 'Image']
+
+  const initFormData = {
+    // name: '',
+    // email: '',
+    requestType: requestTypes[0],
+    title: '',
+    publicationLocation: '',
+    why: '',
+    otherInformation: '',
+    submitIssue: '',
+  }
+
+  const [formData, setFormData] = useState(initFormData)
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }))
+  }
+
+  const [sending, setSending] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  useEffect(() => {
+    if (window) {
+      const url = window.location.origin + window.location.pathname;
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        url: url,
+      }))
+    }
+  }, [])
+
+  const onSubmit = async (e) => {
+    if (submitting) return
+
+    e.preventDefault()
+    setSending(true)
+    // let query = { message, email, name, url }
+
+
+    await submit(formData)
+    setSubmitted(true);
+    setSending(false);
+    setFormData(initFormData);
+
+    setTimeout(() => {
+      setSubmitted(false)
+    }, 4000)
+  }
+
+  return form?.id && (
+    <form onSubmit={onSubmit}>
+      <div className="d-flex flex-column gap-12 mb-24">
+      {requestTypes.length > 0 && (
+        <div>
+          {requestTypes.map((value, index) => (
+            <label className="form-check form-check-inline" key={index}>
+              <input className="form-check-input" type="radio" name="requestType" checked={formData.requestType === value} value={value} onChange={handleInputChange}/>
+              <span className="form-check-label">{value}</span>
+            </label>
+          ))}
+        </div>
+      )}
+        {/*<input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`} maxLength={50}*/}
+        {/*       value={formData.name} onChange={handleInputChange}*/}
+        {/*/>*/}
+        {/*<input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`} maxLength={100}*/}
+        {/*       value={formData.email} onChange={handleInputChange}*/}
+        {/*/>*/}
+        <input type="text" className="form-control" name={`title`} required={true} placeholder={`Title`} maxLength={100}
+               value={formData.title} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="why" placeholder={`Why / Reason for Request`} required={true} rows={3} maxLength={500}
+                  value={formData.why} onChange={handleInputChange}
+        />
+        <input type="text" className="form-control" name={`publicationLocation`} required={false} placeholder={`Publication location`} maxLength={100}
+               value={formData.publicationLocation} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="otherInformation" placeholder={`Any other information`} required={false} rows={3} maxLength={500}
+                  value={formData.otherInformation} onChange={handleInputChange}
+        />
+        <input type="text" className="form-control" name={`submitIssue`} required={false} placeholder={`Submit an Issue / Pull Request`} maxLength={100}
+               value={formData.submitIssue} onChange={handleInputChange}
+        />
+      </div>
+
+      <div className={`d-flex justify-content-between align-items-center`}>
+        <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+          {!submitted ? (`Not now`) : (`Close`)}
+        </button>
+
+        <button
+          className="btn position-relative py-10"
+          type="submit" disabled={submitting}
+        >
+          <span>
+            {sending && (
+              <>
+                Submitting
+                <div className="spinner-border" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </>
+            )}
+            {!sending && !submitted && (
+              <>
+                Submit
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-arrow-right"/>
+                </svg>
+              </>
+            )}
+            {!sending && submitted && (
+              <>
+                Submitted
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-check-circle"/>
+                </svg>
+              </>
+            )}
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/components/ModalFormSpark/index.js b/src/components/ModalFormSpark/index.js
index 4c6baca5..8502300f 100644
--- a/src/components/ModalFormSpark/index.js
+++ b/src/components/ModalFormSpark/index.js
@@ -1,59 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import { useFormspark } from '@formspark/use-formspark'
+import React from 'react'
 import Modal from 'react-bootstrap/Modal'
+import { FormFeedback } from './Forms/FormFeedback'
+import { FormRequestArticle } from './Forms/FormRequestArticle'
 
 export const ModalFormSpark = (props) => {
-  const [url, setUrl] = useState('#');
 
   const { form } = props;
 
-  const [submit, submitting] = useFormspark({
-    formId: form?.id || ``,
-  });
-
-
-  const [message, setMessage] = useState("");
-  const [email, setEmail] = useState("");
-  const [name, setName] = useState("");
-
-  const [sending, setSending] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-
-  const totalStars = 5;
-  const [rating, setRating] = useState(props.rating || 0);
-  const [hover, setHover] = useState(null);
-
-  useEffect(() => {
-    if (props.rating) {
-      setRating(props.rating);
-    }
-
-    if (window) {
-      setUrl(window.location.origin + window.location.pathname);
-    }
-  }, [props.rating, props.show]);
-
-  const onSubmit = async (e) => {
-    if (submitting) return;
-
-    e.preventDefault();
-    setSending(true);
-    let query = {message, email, name, url}
-
-    query = props?.rating ? {...query, rating} : query;
-
-    await submit(query);
-    setSubmitted(true);
-    setSending(false);
-    setMessage("");
-    setEmail("");
-    setName("");
-    setRating(0);
-    setTimeout(() => {
-      setSubmitted(false);
-    }, 4000)
-  };
-
   return form?.id && (
     <Modal
       {...props}
@@ -76,95 +29,8 @@ export const ModalFormSpark = (props) => {
           <p className={!form.title ? 'pe-32' : ''}>{form.description}</p>
         )}
 
-        {props?.rating && (
-          <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
-            <span>Current rating</span>
-            <div className={'d-flex gap-8'}>
-              {[...Array(totalStars)].map((star, index) => {
-                const currentRating = index + 1;
-
-                return (
-                  <label key={index}
-                         onMouseEnter={() => setHover(currentRating)}
-                         onMouseLeave={() => setHover(null)}
-                  >
-                    <input
-                      disabled={submitting}
-                      className={`d-none`}
-                      key={star}
-                      type="radio"
-                      name="rating"
-                      value={currentRating}
-                      onChange={() => setRating(currentRating)}
-                    />
-                    <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
-                      <path
-                        d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
-                        fill="currentColor"/>
-                      <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
-                    </svg>
-                  </label>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        <form onSubmit={onSubmit}>
-          <div className="d-flex flex-column gap-12 mb-24">
-            {props?.rating && (
-              <input type="hidden" name="rating" value={rating}/>
-            )}
-            <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
-                   value={name} onChange={(e) => setName(e.target.value)}
-            />
-            <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
-                   value={email} onChange={(e) => setEmail(e.target.value)}
-            />
-
-            <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
-                      onChange={(e) => setMessage(e.target.value)}/>
-          </div>
-
-          <div className={`d-flex justify-content-between align-items-center`}>
-            <button type={`button`} className={`btn-blank`} onClick={props.onHide}>
-              {!submitted ? (`Not now`) : (`Close`)}
-            </button>
-
-            <button
-              className="btn position-relative py-10"
-              type="submit" disabled={submitting}
-            >
-              <span>
-                {sending && (
-                  <>
-                    Submitting
-                    <div className="spinner-border" role="status">
-                      <span className="visually-hidden">Loading...</span>
-                    </div>
-                  </>
-                )}
-                {!sending && !submitted && (
-                  <>
-                    Submit
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-arrow-right"/>
-                    </svg>
-                  </>
-                )}
-                {!sending && submitted && (
-                  <>
-                    Submitted
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-check-circle"/>
-                    </svg>
-                  </>
-                )}
-              </span>
-            </button>
-
-          </div>
-        </form>
+        {(form?.type === 'feedback') && <FormFeedback form={form} rating={props.rating || null} onDismiss={props.onHide || null} />}
+        {(form?.type === 'request-article') && <FormRequestArticle form={form} onDismiss={props.onHide || null} />}
 
       </Modal.Body>
     </Modal>
diff --git a/src/components/RequestArticle/index.js b/src/components/RequestArticle/index.js
index b6f07190..0433e1c4 100644
--- a/src/components/RequestArticle/index.js
+++ b/src/components/RequestArticle/index.js
@@ -24,7 +24,7 @@ export const RequestArticle = ({label, form}) => {
 
       <ModalFormSpark
         show={modalShow}
-        form={form}
+        form={{...form, type : "request-article"}}
         onHide={() => setModalShow(false)}
       />
     </>
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
index f8d3b825..4055eaae 100644
--- a/src/scss/abstracts/_variables.scss
+++ b/src/scss/abstracts/_variables.scss
@@ -562,3 +562,7 @@ $form-select-font-size-lg:        $input-font-size-lg;
 $form-select-border-radius-lg:    $input-border-radius-lg;
 
 $form-select-transition:          $input-transition;
+
+$form-check-input-checked-bg-color:     #{'var(--bs-body-bg)'};
+$form-check-input-checked-border-color: #{'var(--bs-body-color)'};
+$form-check-input-focus-box-shadow: 0 0 0 0.20rem rgba(var(--bs-body-color-rgb), 0.15)
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 9c141d3a..765ab73e 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -64,3 +64,9 @@ label {
     --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z' fill='white'/%3E%3C/svg%3E%0A");
   }
 }
+.form-check-input:checked[type=radio]{
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
+  [data-theme='dark']:root & {
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+  }
+}

From 8e4c3e54610459c6cc0263223108982c058fc00b Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Mon, 25 Nov 2024 13:49:21 +0200
Subject: [PATCH 4/5] Request a New Article from update: - clean up commented
 code

---
 .../Forms/FormRequestArticle/index.js         | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
index 6b39d56f..556056b8 100644
--- a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
+++ b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -2,28 +2,15 @@ import React, { useEffect, useState } from 'react'
 import { useFormspark } from '@formspark/use-formspark'
 
 export const FormRequestArticle = (props) => {
-  // const [url, setUrl] = useState('#')
-
   const { form } = props
 
   const [submit, submitting] = useFormspark({
     formId: form?.id || ``,
   })
 
-  // const [email, setEmail] = useState('')
-  // const [name, setName] = useState('')
-  //
-  // const [requestType, setRequestType] = useState('tutorial')
-  // const [title, setTitle] = useState('')
-  // const [why, setWhy] = useState('')
-  // const [otherInformation, setOtherInformation] = useState('')
-  // const [submitIssue, setSubmitIssue] = useState('')
-
   const requestTypes = ['Tutorial', 'Guide', 'Video', 'Image']
 
   const initFormData = {
-    // name: '',
-    // email: '',
     requestType: requestTypes[0],
     title: '',
     publicationLocation: '',
@@ -61,8 +48,6 @@ export const FormRequestArticle = (props) => {
 
     e.preventDefault()
     setSending(true)
-    // let query = { message, email, name, url }
-
 
     await submit(formData)
     setSubmitted(true);
@@ -87,12 +72,6 @@ export const FormRequestArticle = (props) => {
           ))}
         </div>
       )}
-        {/*<input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`} maxLength={50}*/}
-        {/*       value={formData.name} onChange={handleInputChange}*/}
-        {/*/>*/}
-        {/*<input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`} maxLength={100}*/}
-        {/*       value={formData.email} onChange={handleInputChange}*/}
-        {/*/>*/}
         <input type="text" className="form-control" name={`title`} required={true} placeholder={`Title`} maxLength={100}
                value={formData.title} onChange={handleInputChange}
         />

From 8fbb47c13783bbd373949b2f6995b907ded40d97 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Mon, 25 Nov 2024 14:59:32 +0200
Subject: [PATCH 5/5] Add text info

---
 .../ModalFormSpark/Forms/FormRequestArticle/index.js   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
index 556056b8..55c27c60 100644
--- a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
+++ b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -16,7 +16,6 @@ export const FormRequestArticle = (props) => {
     publicationLocation: '',
     why: '',
     otherInformation: '',
-    submitIssue: '',
   }
 
   const [formData, setFormData] = useState(initFormData)
@@ -78,15 +77,16 @@ export const FormRequestArticle = (props) => {
         <textarea className="form-control" name="why" placeholder={`Why / Reason for Request`} required={true} rows={3} maxLength={500}
                   value={formData.why} onChange={handleInputChange}
         />
-        <input type="text" className="form-control" name={`publicationLocation`} required={false} placeholder={`Publication location`} maxLength={100}
+        <input type="text" className="form-control" name={`publicationLocation`} required={false} placeholder={`Publication location (E.g, DevPortal, Blog)`} maxLength={100}
                value={formData.publicationLocation} onChange={handleInputChange}
         />
         <textarea className="form-control" name="otherInformation" placeholder={`Any other information`} required={false} rows={3} maxLength={500}
                   value={formData.otherInformation} onChange={handleInputChange}
         />
-        <input type="text" className="form-control" name={`submitIssue`} required={false} placeholder={`Submit an Issue / Pull Request`} maxLength={100}
-               value={formData.submitIssue} onChange={handleInputChange}
-        />
+        <div className="markdown mt-4">
+          <p className="mb-4 fw-bold">Are you a technical contributor?</p>
+          <p><a href="https://github.com/rsksmart/devportal" target="_blank" rel="noreferrer">Submit a Pull Request</a> or an Issue</p>
+        </div>
       </div>
 
       <div className={`d-flex justify-content-between align-items-center`}>