feat: Add explainations about submit project (#314)

Signed-off-by: laixingyou <[email protected]>
oss-compass · Feb 19, 2024 · 0ece5f2 · 0ece5f2
1 parent 6b9c14e
commit 0ece5f2
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 30 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/modules/submitProject/FormCommunity/GovernanceRepository.tsx b/apps/web/src/modules/submitProject/FormCommunity/GovernanceRepository.tsx
@@ -12,6 +12,8 @@ import InputUrlField, { InputRef } from '../Misc/InputUrlField';
 import AddSelectPopover from '../Misc/AddSelectPopover';
 import FillItem from '../Misc/FillItem';
 import { useTranslation } from 'react-i18next';
+import Tooltip from '@common/components/Tooltip';
+import { AiOutlineQuestionCircle } from 'react-icons/ai';
 
 export interface Props {
   value: string[];
@@ -38,8 +40,23 @@ const GovernanceRepository = forwardRef<Ref, Props>(
 
     return (
       <>
-        <label className="mt-10 mb-4 block text-xl font-medium">
+        <label className="mt-10 mb-4 flex items-center text-xl font-medium">
           {t('submit_project:governance_repository')}
+          <Tooltip
+            arrow
+            title={
+              <>
+                <span className="text-sm">
+                  {t('submit_project:governance_repository_desc')}
+                </span>
+              </>
+            }
+            placement="right"
+          >
+            <span className="ml-2 cursor-pointer">
+              <AiOutlineQuestionCircle />
+            </span>
+          </Tooltip>
           <span className="ml-2 text-base font-normal text-gray-400">
             ({t('submit_project:optional')})
           </span>

diff --git a/apps/web/src/modules/submitProject/FormCommunity/SoftwareArtifactRepository.tsx b/apps/web/src/modules/submitProject/FormCommunity/SoftwareArtifactRepository.tsx
@@ -11,6 +11,8 @@ import InputUrlField, { InputRef } from '../Misc/InputUrlField';
 import AddSelectPopover from '../Misc/AddSelectPopover';
 import FillItem from '../Misc/FillItem';
 import { useTranslation } from 'react-i18next';
+import Tooltip from '@common/components/Tooltip';
+import { AiOutlineQuestionCircle } from 'react-icons/ai';
 
 export interface Props {
   value: string[];
@@ -37,8 +39,23 @@ const SoftwareArtifactRepository = forwardRef<Ref, Props>(
 
     return (
       <>
-        <label className="mb-4 block text-xl font-medium">
+        <label className="mb-4 flex items-center text-xl font-medium">
           {t('submit_project:software_artifact_repository')}
+          <Tooltip
+            arrow
+            title={
+              <>
+                <span className="text-sm">
+                  {t('submit_project:software_artifact_repository_desc')}
+                </span>
+              </>
+            }
+            placement="right"
+          >
+            <span className="ml-2 cursor-pointer">
+              <AiOutlineQuestionCircle />
+            </span>
+          </Tooltip>
         </label>
 
         {value.map((item, index, array) => {

diff --git a/apps/web/src/modules/submitProject/Misc/SuccessMessage.tsx b/apps/web/src/modules/submitProject/Misc/SuccessMessage.tsx
@@ -1,40 +1,54 @@
 import React from 'react';
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
 
 const SuccessMessage: React.FC<{ url?: string; content: string }> = ({
   url,
   content,
 }) => {
+  const { t } = useTranslation();
+
   return (
-    <div className="daisy-alert-success daisy-alert mt-5 text-green-500">
+    <>
+      <div className="daisy-alert-success daisy-alert mt-5 text-green-500">
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-10 w-10 flex-shrink-0 stroke-current"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <div className="flex flex-col">
+            <h3 className="mr-2 text-xl font-bold">{content}</h3>
+            {url && (
+              <a
+                className="underline underline-offset-2"
+                target="_blank"
+                rel="noopener noreferrer"
+                href={url}
+              >
+                {url}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
       <div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-10 w-10 flex-shrink-0 stroke-current"
-          fill="none"
-          viewBox="0 0 24 24"
+        <Link
+          href="/settings/subscribe"
+          className="text-primary flex cursor-pointer items-center whitespace-nowrap  py-4 text-center text-sm"
         >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <div className="flex flex-col">
-          <h3 className="mr-2 text-xl font-bold">{content}</h3>
-          {url && (
-            <a
-              className="underline underline-offset-2"
-              target="_blank"
-              rel="noopener noreferrer"
-              href={url}
-            >
-              {url}
-            </a>
-          )}
-        </div>
+          {t('submit_project:click_here_to_view_your_subscription')}
+        </Link>
       </div>
-    </div>
+    </>
   );
 };