Prioritise Mastodon over Twitter (#4365)

Author: hugovk

frontend/src/components/blocks/socials-section.tsx

@@ -28,8 +28,8 @@ export const SocialsSection = ({ hashtag, label }: Props) => {
             hoverColor="green"
             socials={[
               {
-                icon: "twitter",
-                link: "https://twitter.com/pyconit",
+                icon: "mastodon",
+                link: "https://social.python.it/@pycon",
                 rel: "me",
               },
               {
@@ -48,8 +48,8 @@ export const SocialsSection = ({ hashtag, label }: Props) => {
                 rel: "me",
               },
               {
-                icon: "mastodon",
-                link: "https://social.python.it/@pycon",
+                icon: "twitter",
+                link: "https://twitter.com/pyconit",
                 rel: "me",
               },
             ]}

frontend/src/components/cfp-form/index.tsx

@@ -289,8 +289,8 @@ export const CfpForm = ({
         participantData.me.participant.website,
       );
       formState.setField(
-        "participantTwitterHandle",
-        participantData.me.participant.twitterHandle,
+        "participantMastodonHandle",
+        participantData.me.participant.mastodonHandle,
       );
       formState.setField(
         "participantInstagramHandle",
@@ -305,8 +305,8 @@ export const CfpForm = ({
         participantData.me.participant.facebookUrl,
       );
       formState.setField(
-        "participantMastodonHandle",
-        participantData.me.participant.mastodonHandle,
+        "participantTwitterHandle",
+        participantData.me.participant.twitterHandle,
       );
       formState.setField(
         "speakerAvailabilities",

frontend/src/components/edit-profile-page-handler/index.tsx

@@ -69,8 +69,8 @@ const onMyProfileFetched = (data: MyEditProfileQuery, formState) => {
     me.participant?.previousTalkVideo ?? "",
   );
   formState.setField(
-    "participantTwitterHandle",
-    me.participant?.twitterHandle ?? "",
+    "participantMastodonHandle",
+    me.participant?.mastodonHandle ?? "",
   );
   formState.setField(
     "participantInstagramHandle",
@@ -85,8 +85,8 @@ const onMyProfileFetched = (data: MyEditProfileQuery, formState) => {
     me.participant?.facebookUrl ?? "",
   );
   formState.setField(
-    "participantMastodonHandle",
-    me.participant?.mastodonHandle ?? "",
+    "participantTwitterHandle",
+    me.participant?.twitterHandle ?? "",
   );
 };
 

frontend/src/components/footer/index.tsx

@@ -72,7 +72,11 @@ export const Footer = () => {
           </div>
         }
         socials={[
-          { icon: "twitter", link: "https://twitter.com/pyconit", rel: "me" },
+          {
+            icon: "mastodon",
+            link: "https://social.python.it/@pycon",
+            rel: "me",
+          },
           {
             icon: "facebook",
             link: "https://www.facebook.com/pythonitalia",
@@ -88,11 +92,7 @@ export const Footer = () => {
             link: "https://www.linkedin.com/company/pycon-italia",
             rel: "me",
           },
-          {
-            icon: "mastodon",
-            link: "https://social.python.it/@pycon",
-            rel: "me",
-          },
+          { icon: "twitter", link: "https://twitter.com/pyconit", rel: "me" },
         ]}
       />
     </>

frontend/src/components/grant-form/index.tsx

@@ -220,8 +220,8 @@ export const GrantForm = ({
         participantData.me.participant.website,
       );
       formState.setField(
-        "participantTwitterHandle",
-        participantData.me.participant.twitterHandle,
+        "participantMastodonHandle",
+        participantData.me.participant.mastodonHandle,
       );
       formState.setField(
         "participantInstagramHandle",
@@ -236,8 +236,8 @@ export const GrantForm = ({
         participantData.me.participant.facebookUrl,
       );
       formState.setField(
-        "participantMastodonHandle",
-        participantData.me.participant.mastodonHandle,
+        "participantTwitterHandle",
+        participantData.me.participant.twitterHandle,
       );
     }
   }, []);

frontend/src/components/participant-info-section/index.tsx

@@ -58,12 +58,12 @@ export const ParticipantInfoSection = ({
               justifyContent="end"
               gap="medium"
             >
-              {participant?.twitterHandle && (
+              {participant?.mastodonHandle && (
                 <Link
                   target="_blank"
-                  href={`https://twitter.com/${participant.twitterHandle}`}
+                  href={convertMastodonHandle(participant.mastodonHandle)}
                 >
-                  <TwitterIcon className="w-6 h-6" />
+                  <MastodonIcon className="w-6 h-6" />
                 </Link>
               )}
 
@@ -76,15 +76,6 @@ export const ParticipantInfoSection = ({
                 </Link>
               )}
 
-              {participant?.mastodonHandle && (
-                <Link
-                  target="_blank"
-                  href={convertMastodonHandle(participant.mastodonHandle)}
-                >
-                  <MastodonIcon className="w-6 h-6" />
-                </Link>
-              )}
-
               {participant?.linkedinUrl && (
                 <Link target="_blank" href={participant.linkedinUrl}>
                   <LinkedinIcon className="w-6 h-6" />
@@ -102,6 +93,15 @@ export const ParticipantInfoSection = ({
                   <WebIcon className="w-6 h-6" />
                 </Link>
               )}
+
+              {participant?.twitterHandle && (
+                <Link
+                  target="_blank"
+                  href={`https://twitter.com/${participant.twitterHandle}`}
+                >
+                  <TwitterIcon className="w-6 h-6" />
+                </Link>
+              )}
             </HorizontalStack>
           </VerticalStack>
         </LayoutContent>

frontend/src/components/public-profile-card/index.tsx

@@ -118,15 +118,6 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("website")}
             />
           </InputWrapper>
-          <InputWrapper title="Twitter">
-            <Input
-              {...text("participantTwitterHandle")}
-              required={false}
-              maxLength={15}
-              placeholder={inputPlaceholder}
-              errors={getParticipantValidationError("twitterHandle")}
-            />
-          </InputWrapper>
           <InputWrapper title="Mastodon">
             <Input
               {...text("participantMastodonHandle")}
@@ -163,6 +154,15 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("facebookUrl")}
             />
           </InputWrapper>
+          <InputWrapper title="Twitter">
+            <Input
+              {...text("participantTwitterHandle")}
+              required={false}
+              maxLength={15}
+              placeholder={inputPlaceholder}
+              errors={getParticipantValidationError("twitterHandle")}
+            />
+          </InputWrapper>
         </Grid>
       </CardPart>
     </MultiplePartsCard>