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({
/>
-
-
+
Confirm your password
setState({ ...state, password: e.target.value })}
required
diff --git a/app/javascript/components/settings/ProfileForm.tsx b/app/javascript/components/settings/ProfileForm.tsx
index 47388c216a..15fa4fbf12 100644
--- a/app/javascript/components/settings/ProfileForm.tsx
+++ b/app/javascript/components/settings/ProfileForm.tsx
@@ -6,11 +6,14 @@ import { FormMessage } from './FormMessage'
import { FauxInputWithValidation } from './inputs/FauxInputWithValidation'
import { InputWithValidation } from './inputs/InputWithValidation'
import { createMaxLengthAttributes } from './useInvalidField'
+import { SeniorityLevel } from '../modals/welcome-modal/WelcomeModal'
+import { SingleSelect } from '../common/SingleSelect'
type User = {
name: string
location: string
bio: string
+ seniority: SeniorityLevel
}
type Profile = {
@@ -97,6 +100,17 @@ export default function ProfileForm({
Tell the world about you 🌎. Emojis encouraged!
+
+
+
+ Seniority
+
+ 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}
+ />
+ )
+}