Styling fixes, apply informal name style to all anonymous profiles)

Author: rasmi

frontend/src/components/stages/profile_stage_editor.scss

@@ -9,13 +9,17 @@
 
 .checkbox-wrapper {
   @include common.flex-row-align-center;
-  gap: common.$spacing-medium;
+  gap: common.$spacing-small;
 }
 
 md-checkbox {
   flex-shrink: 0;
 }
 
+.tab {
+  margin-left: calc(48px + common.$spacing-small);
+}
+
 .profile-options {
   @include common.flex-column;
   gap: common.$spacing-medium;

frontend/src/components/stages/profile_stage_editor.ts

@@ -96,9 +96,25 @@ export class ProfileStageEditorComponent extends MobxLitElement {
           ></md-radio>
           <label>🐱 Generate anonymous animal-themed profiles</label>
         </div>
-        ${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL
+        <div class="profile-option">
+          <md-radio
+            name="profile-type"
+            value="participant"
+            ?checked=${this.stage.profileType ===
+            ProfileType.ANONYMOUS_PARTICIPANT}
+            ?disabled=${!this.experimentEditor.canEditStages}
+            @change=${() =>
+              handleProfileTypeChange(ProfileType.ANONYMOUS_PARTICIPANT)}
+          ></md-radio>
+          <label
+            >👤 Generate anonymous participant profiles (Participant 1, 2,
+            ...)</label
+          >
+        </div>
+        ${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL ||
+        this.stage.profileType === ProfileType.ANONYMOUS_PARTICIPANT
           ? html`
-              <label class="checkbox-wrapper">
+              <label class="checkbox-wrapper tab">
                 <md-checkbox
                   touch-target="wrapper"
                   ?checked=${this.stage.informalNameStyle}
@@ -113,27 +129,12 @@ export class ProfileStageEditorComponent extends MobxLitElement {
                 >
                 </md-checkbox>
                 <span
-                  >Use informal name style (e.g., bear123 instead of Bear
-                  1002)</span
+                  >Use informal name style (e.g., bear123 or
+                  participant123)</span
                 >
               </label>
             `
           : nothing}
-        <div class="profile-option">
-          <md-radio
-            name="profile-type"
-            value="participant"
-            ?checked=${this.stage.profileType ===
-            ProfileType.ANONYMOUS_PARTICIPANT}
-            ?disabled=${!this.experimentEditor.canEditStages}
-            @change=${() =>
-              handleProfileTypeChange(ProfileType.ANONYMOUS_PARTICIPANT)}
-          ></md-radio>
-          <label
-            >👤 Generate anonymous participant profiles (Participant 1, 2,
-            ...)</label
-          >
-        </div>
       </div>
     `;
   }

utils/src/participant.ts

@@ -223,7 +223,7 @@ export function setProfile(
     [PROFILE_SET_ANIMALS_2_ID]: profileFromSet(PROFILE_SET_ANIMALS_2),
     [PROFILE_SET_NATURE_ID]: profileFromSet(PROFILE_SET_NATURE),
     [PROFILE_SET_ANONYMOUS_PARTICIPANT_ID]: {
-      name: `Participant ${randomNumber}`,
+      name: formatName('Participant'),
       avatar: '👤',
       repeat: 0,
     },