update: improve UX of project tag, decrease font size of member role

src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx

@@ -42,11 +42,13 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     title: yup.string().trim().required("please provide a title").min(2),
     hashtag: yup
         .string()
-        .required("please provide a hashtag")
+        .required("please provide a project tag")
+        .matches(/^#/, "a hashtag has to start with '#'")
         .matches(
-            /^(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:(?!))){0,28}(?:[A-Za-z0-9_]))?)((?: #)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?))*$/,
-            "a hashtag should only contain letters, numbers, & underscores"
+            /^#[^ !@#$%^&*(),.?":{}|<>]*$/,
+            "your project's tag can only contain letters, numbers and '_’"
         )
+        .max(35, 'Your project tag must be shorter than 35 characters.')
         .test({
             name: "is unique hashtag",
             test: async (value, context) => {

src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx

@@ -9,6 +9,7 @@ import AvatarInput from "src/Components/Inputs/FilesInputs/AvatarInput/AvatarInp
 import CoverImageInput from "src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput";
 import ScreenshotsInput from "src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput";
 import { BsLightningChargeFill } from "react-icons/bs";
+import InfoCard from "src/Components/InfoCard/InfoCard";
 
 interface Props { }
 
@@ -116,7 +117,7 @@ export default function ProjectDetailsTab(props: Props) {
                         {errors.description.message}
                     </p>}
                     <p className="text-body5 font-medium mt-16">
-                        Hashtag<sup className="text-red-500">*</sup>
+                        Project tag<sup className="text-red-500">*</sup>
                     </p>
                     <div className="input-wrapper mt-8 relative">
                         <input
@@ -126,12 +127,20 @@ export default function ProjectDetailsTab(props: Props) {
                             {...register("hashtag")}
                         />
                     </div>
-                    {(isUpdating && dirtyFields.hashtag) && <p className="text-body5 text-orange-500 mt-8">
-                        <span className="font-bolder text-orange-400">Warning:</span> changing the hashtag of the project will break all the old links for the project.
-                    </p>}
                     {errors.hashtag && <p className="input-error">
                         {errors.hashtag.message}
                     </p>}
+                    {(isUpdating && dirtyFields.hashtag) &&
+                        <InfoCard className="mt-8 bg-warning-50 border-warning-100">
+                            <span className="font-medium text-orange-600">⚠️ Warning:</span> when you change the tag of your project, existing links that use this tag will no longer work & will need to be updateded.
+                        </InfoCard>}
+                    {!isUpdating &&
+                        <InfoCard className="mt-8">
+                            <span className="font-medium text-gray-900">ℹ️ Project tag</span>  allows you to mention your project in stories, or across other platforms like Discord. <br />
+                            You can change your project’s tag later, but links that use the old tag will no longer work & need to be updated.
+                        </InfoCard>
+                    }
+
                 </div>
             </Card>
             <Card className="">

src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx

@@ -40,6 +40,7 @@ export default function MemberRow({ user, onRemove, onUpdateRole, disabled, canU
                     menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
                     {[Team_Member_Role.Admin, Team_Member_Role.Maker].map(role =>
                         <MenuItem
+                            className={'text-body5'}
                             onClick={() => onUpdateRole(role)}
                             key={role}>{role}</MenuItem>
                     )}

src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx

@@ -35,7 +35,7 @@ export default function TeamTab() {
                 </div>
                 <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
                     <p className="text-body5">
-                        <span className="font-bold">💡 Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project.
+                        <span className="font-bold">ℹ️ Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project and its development progress. To add them, they will first need to create a maker profile.
                     </p>
                 </div>
             </Card>