Sign up changes ui

2025-07-08 16:08:09 +05:30
parent 220336f3d7
commit 1ab4eb4750
5 changed files with 279 additions and 125 deletions
--- a/apps/student/app/signup/steps/AdditionalDetailsStep.tsx
+++ b/apps/student/app/signup/steps/AdditionalDetailsStep.tsx
@@ -11,21 +11,34 @@ import {
 } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
 import { Textarea } from '@workspace/ui/components/textarea';
+import { useState, useEffect } from 'react';

 export default function AdditionalDetailsStep({ form }: { form: any }) {
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Additional Details</h3>
+  // For skills field bug fix: keep a local string state
+  const [skillsInput, setSkillsInput] = useState(
+    Array.isArray(form.getValues('skills')) ? form.getValues('skills').join(', ') : form.getValues('skills') || ''
+  );

-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+  // Keep local state in sync if form value changes externally
+  useEffect(() => {
+    const formSkills = form.getValues('skills');
+    const asString = Array.isArray(formSkills) ? formSkills.join(', ') : formSkills || '';
+    setSkillsInput(asString);
+  }, [form.watch('skills')]);
+
+  return (
+    <div className="space-y-8">
+      <h3 className="text-2xl font-bold mb-4 text-primary">Additional Details</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <FormField
          control={form.control}
          name="linkedin"
          render={({ field }) => (
-            <FormItem>
-              <FormLabel>LinkedIn Profile</FormLabel>
+            <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+              <FormLabel className="font-semibold">LinkedIn Profile</FormLabel>
              <FormControl>
-                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
+                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} className="focus:ring-2 focus:ring-primary/40" />
              </FormControl>
              <FormDescription>Optional</FormDescription>
              <FormMessage />
@@ -37,10 +50,10 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
          control={form.control}
          name="github"
          render={({ field }) => (
-            <FormItem>
-              <FormLabel>GitHub Profile</FormLabel>
+            <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+              <FormLabel className="font-semibold">GitHub Profile</FormLabel>
              <FormControl>
-                <Input type="url" placeholder="https://github.com/yourusername" {...field} />
+                <Input type="url" placeholder="https://github.com/yourusername" {...field} className="focus:ring-2 focus:ring-primary/40" />
              </FormControl>
              <FormDescription>Optional</FormDescription>
              <FormMessage />
@@ -53,21 +66,18 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
        control={form.control}
        name="skills"
        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Skills</FormLabel>
+          <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+            <FormLabel className="font-semibold">Skills</FormLabel>
            <FormControl>
              <Textarea
                placeholder="JavaScript, React, Node.js, Python"
-                className="resize-none"
-                value={
-                  field.value
-                    ? Array.isArray(field.value)
-                      ? field.value.join(', ')
-                      : field.value
-                    : ''
-                }
-                onChange={(e) => {
+                className="resize-none focus:ring-2 focus:ring-primary/40"
+                value={skillsInput}
+                onChange={e => setSkillsInput(e.target.value)}
+                onBlur={e => {
+                  // On blur, update the form value as an array
                  const value = e.target.value;
+                  setSkillsInput(value);
                  const skills = value
                    .split(',')
                    .map((s) => s.trim())
--- a/apps/student/app/signup/steps/InternshipStep.tsx
+++ b/apps/student/app/signup/steps/InternshipStep.tsx
@@ -9,6 +9,7 @@ import { Textarea } from '@workspace/ui/components/textarea';
 import { Separator } from '@workspace/ui/components/separator';
 import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
 import { useForm } from 'react-hook-form';
+import { Briefcase, MapPin, CalendarDays, X } from 'lucide-react';

 export default function InternshipStep({ form }: { form: any }) {
  const [modalOpen, setModalOpen] = useState(false);
@@ -35,27 +36,32 @@ export default function InternshipStep({ form }: { form: any }) {
  };

  return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Internships</h3>
-        <Button variant="outline" onClick={() => setModalOpen(true)}>
-          Add Internship
+    <div className="space-y-10">
+      <div className="flex justify-between items-center mb-2">
+        <h3 className="text-2xl font-bold text-primary">Internships</h3>
+        <Button
+          variant="default"
+          className="rounded-full px-6 py-2 text-base font-semibold shadow-md hover:scale-105 transition-transform"
+          onClick={() => setModalOpen(true)}
+        >
+          + Add Internship
        </Button>
      </div>

      {/* Custom Modal */}
      {modalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
+        <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl p-8 relative border border-gray-200 pointer-events-auto">
            <button
-              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+              className="absolute top-4 right-4 text-gray-400 hover:text-primary rounded-full p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
              onClick={() => setModalOpen(false)}
              aria-label="Close"
+              type="button"
            >
-              ×
+              <X size={24} />
            </button>
-            <h2 className="text-xl font-bold mb-4">Add Internship Details</h2>
-            <div className="grid grid-cols-1 gap-4">
+            <h2 className="text-2xl font-bold mb-6 text-center text-primary">Add Internship Details</h2>
+            <div className="grid grid-cols-1 gap-5">
              <FormField
                control={modalForm.control}
                name="title"
@@ -63,7 +69,7 @@ export default function InternshipStep({ form }: { form: any }) {
                  <FormItem>
                    <FormLabel>Title</FormLabel>
                    <FormControl>
-                      <Input {...field} placeholder="e.g. SDE Intern" />
+                      <Input {...field} placeholder="e.g. SDE Intern" className="focus:ring-2 focus:ring-primary/40" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -76,7 +82,7 @@ export default function InternshipStep({ form }: { form: any }) {
                  <FormItem>
                    <FormLabel>Company</FormLabel>
                    <FormControl>
-                      <Input {...field} placeholder="e.g. Google" />
+                      <Input {...field} placeholder="e.g. Google" className="focus:ring-2 focus:ring-primary/40" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -89,7 +95,7 @@ export default function InternshipStep({ form }: { form: any }) {
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
-                      <Textarea {...field} placeholder="Describe your work..." />
+                      <Textarea {...field} placeholder="Describe your work..." className="focus:ring-2 focus:ring-primary/40" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -102,7 +108,7 @@ export default function InternshipStep({ form }: { form: any }) {
                  <FormItem>
                    <FormLabel>Location</FormLabel>
                    <FormControl>
-                      <Input {...field} placeholder="Remote / Mumbai" />
+                      <Input {...field} placeholder="Remote / Mumbai" className="focus:ring-2 focus:ring-primary/40" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -116,7 +122,7 @@ export default function InternshipStep({ form }: { form: any }) {
                    <FormItem>
                      <FormLabel>Start Date</FormLabel>
                      <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
@@ -129,7 +135,7 @@ export default function InternshipStep({ form }: { form: any }) {
                    <FormItem>
                      <FormLabel>End Date</FormLabel>
                      <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
@@ -137,11 +143,13 @@ export default function InternshipStep({ form }: { form: any }) {
                />
              </div>
            </div>
-            <div className="flex justify-end mt-6 gap-2">
-              <Button variant="outline" onClick={() => setModalOpen(false)}>
+            <div className="flex justify-end mt-8 gap-3">
+              <Button variant="outline" onClick={() => setModalOpen(false)} className="rounded-full px-5">
                Cancel
              </Button>
-              <Button onClick={addInternship}>Add</Button>
+              <Button onClick={addInternship} className="rounded-full px-5">
+                Add
+              </Button>
            </div>
          </div>
        </div>
@@ -149,25 +157,32 @@ export default function InternshipStep({ form }: { form: any }) {

      <Separator />

-      <div className="space-y-4">
+      <div className="bg-white/80 border border-gray-200 rounded-2xl shadow-lg p-6 space-y-6 min-h-[120px]">
        {internships.length === 0 && (
-          <p className="text-sm text-muted-foreground">No internships added yet.</p>
+          <p className="text-base text-muted-foreground text-center">No internships added yet.</p>
        )}

        {internships.map((intern: any, idx: number) => (
-          <Card key={idx} className="bg-muted">
-            <CardHeader>
-              <CardTitle className="text-base font-semibold">
-                {intern.title} at {intern.company}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-1 text-sm">
-              <p>{intern.location}</p>
-              <p>
-                {intern.startDate} to {intern.endDate}
-              </p>
-              <p>{intern.description}</p>
-            </CardContent>
+          <Card key={idx} className="bg-white border border-gray-100 rounded-xl shadow flex flex-col md:flex-row items-start md:items-center gap-4 p-4">
+            <div className="flex flex-col flex-1 gap-1">
+              <CardHeader className="p-0 mb-1">
+                <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                  <Briefcase size={18} className="text-primary" />
+                  {intern.title} <span className="text-gray-500 font-normal">@ {intern.company}</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-0 space-y-1 text-sm">
+                <div className="flex items-center gap-2 text-gray-600">
+                  <MapPin size={16} />
+                  <span>{intern.location}</span>
+                </div>
+                <div className="flex items-center gap-2 text-gray-600">
+                  <CalendarDays size={16} />
+                  <span>{intern.startDate} to {intern.endDate}</span>
+                </div>
+                <div className="text-gray-700 mt-1">{intern.description}</div>
+              </CardContent>
+            </div>
          </Card>
        ))}
      </div>
--- a/apps/student/app/signup/steps/SemesterGradesStep.tsx
+++ b/apps/student/app/signup/steps/SemesterGradesStep.tsx
@@ -10,69 +10,81 @@ import { Separator } from '@workspace/ui/components/separator';
 export default function SemesterGradesStep({ form }: { form: any }) {
  const sems = Array.from({ length: 8 }, (_, i) => i + 1);

+  // Watch all KT values for all semesters
+  const ktValues = form.watch('sgpi') || [];
+
  return (
-    <div className="space-y-6">
-      <h3 className="text-lg font-semibold">Semester Grades</h3>
+    <div className="space-y-8">
+      <h3 className="text-2xl font-bold mb-4 text-primary">Semester Grades</h3>

-      {sems.map((sem) => (
-        <div key={sem} className="border p-4 rounded-md shadow-sm">
-          <h4 className="font-medium text-md mb-2">Semester {sem}</h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {sems.map((sem) => (
+          <div
+            key={sem}
+            className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 transition-transform hover:scale-[1.01] flex flex-col gap-4"
+          >
+            <h4 className="font-semibold text-lg mb-2 text-primary/80">Semester {sem}</h4>

-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <FormField
-              control={form.control}
-              name={`sgpi.${sem - 1}.sgpi`}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>SGPI *</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="number"
-                      step="0.01"
-                      placeholder="e.g., 9.86"
-                      value={field.value ?? ''}
-                      onChange={e => {
-                        const val = e.target.value;
-                        field.onChange(val === '' ? '' : Number(val));
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
+              <FormField
+                control={form.control}
+                name={`sgpi.${sem - 1}.sgpi`}
+                render={({ field }) => (
+                  <FormItem className="flex-1 min-w-[120px]">
+                    <FormLabel>SGPI *</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        step="0.01"
+                        placeholder="e.g., 9.86"
+                        value={field.value ?? ''}
+                        onChange={e => {
+                          const val = e.target.value;
+                          field.onChange(val === '' ? '' : Number(val));
+                        }}
+                        className="focus:ring-2 focus:ring-primary/40"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`sgpi.${sem - 1}.kt`}
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center space-x-2 min-w-[100px]">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <FormLabel className="!m-0">KT?</FormLabel>
+                  </FormItem>
+                )}
+              />
+
+              {/* Only show KT Dead if KT is checked */}
+              {ktValues[sem - 1]?.kt && (
+                <FormField
+                  control={form.control}
+                  name={`sgpi.${sem - 1}.ktDead`}
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-2 min-w-[120px]">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <FormLabel className="!m-0">KT Dead?</FormLabel>
+                    </FormItem>
+                  )}
+                />
              )}
-            />
-
-            <FormField
-              control={form.control}
-              name={`sgpi.${sem - 1}.kt`}
-              render={({ field }) => (
-                <FormItem className="flex items-center space-x-2">
-                  <FormControl>
-                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-                  </FormControl>
-                  <FormLabel className="!m-0">KT?</FormLabel>
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name={`sgpi.${sem - 1}.ktDead`}
-              render={({ field }) => (
-                <FormItem className="flex items-center space-x-2">
-                  <FormControl>
-                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-                  </FormControl>
-                  <FormLabel className="!m-0">KT Dead?</FormLabel>
-                </FormItem>
-              )}
-            />
+            </div>
          </div>
-        </div>
-      ))}
+        ))}
+      </div>

      <Separator />
-      <p className="text-sm text-muted-foreground">Note: First 4 semesters are mandatory.</p>
+      <p className="text-sm text-muted-foreground mt-2">Note: First 4 semesters are mandatory.</p>
    </div>
  );
 }