diff --git a/app/css/pages/settings.css b/app/css/pages/settings.css index f4d06d796b..9c7d8ee4d4 100644 --- a/app/css/pages/settings.css +++ b/app/css/pages/settings.css @@ -150,6 +150,15 @@ @apply leading-150 text-textColor6; } } + + .seniority { + .c-single-select { + .c-results-zone button, + button { + @apply shadow-sm; + } + } + } & .pronouns-section { & .instructions { @apply mb-24; diff --git a/app/helpers/react_components/settings/profile_form.rb b/app/helpers/react_components/settings/profile_form.rb index 9884268a69..157dfd5d45 100644 --- a/app/helpers/react_components/settings/profile_form.rb +++ b/app/helpers/react_components/settings/profile_form.rb @@ -6,7 +6,8 @@ def to_s user: { name: current_user.name, location: current_user.location, - bio: current_user.bio + bio: current_user.bio, + seniority: current_user.seniority }, profile:, links: { diff --git a/app/javascript/components/modals/seniority-survey-modal/InitialView.tsx b/app/javascript/components/modals/seniority-survey-modal/InitialView.tsx index 22b872d8cc..f4b6a2ce4f 100644 --- a/app/javascript/components/modals/seniority-survey-modal/InitialView.tsx +++ b/app/javascript/components/modals/seniority-survey-modal/InitialView.tsx @@ -10,7 +10,7 @@ import { ErrorFallback } from '@/components/common/ErrorFallback' const DEFAULT_ERROR = new Error('Unable to save seniority level.') -const SENIORITIES: { label: string; value: SeniorityLevel }[] = [ +export const SENIORITIES: { label: string; value: SeniorityLevel }[] = [ { label: 'Absolute Beginner', value: 'absolute_beginner', diff --git a/app/javascript/components/settings/EmailForm.tsx b/app/javascript/components/settings/EmailForm.tsx index efd738292b..5d61c2672a 100644 --- a/app/javascript/components/settings/EmailForm.tsx +++ b/app/javascript/components/settings/EmailForm.tsx @@ -65,12 +65,12 @@ export default function EmailForm({ />
-
-
+ +
+ + setUser({ ...user, seniority: value })} + /> +
+ {profile ? (

Your social accounts

@@ -168,3 +182,37 @@ const SuccessMessage = () => {
) } + +function OptionComponent({ option }: { option: SeniorityLevel }): JSX.Element { + switch (option) { + case 'absolute_beginner': + return
Absolute Beginner
+ case 'beginner': + return
Beginner
+ case 'junior': + return
Junior Developer
+ case 'mid': + return
Mid-level Developer
+ case 'senior': + return
Senior Developer
+ } +} + +function SenioritySelect({ + value, + setValue, +}: { + value: SeniorityLevel + setValue: (value: SeniorityLevel) => void +}): JSX.Element { + return ( + + className="w-[250px]" + options={['absolute_beginner', 'beginner', 'junior', 'mid', 'senior']} + value={value} + setValue={setValue} + SelectedComponent={OptionComponent} + OptionComponent={OptionComponent} + /> + ) +}