chore: UI improvements on create poll page and wording changes

anandbaburajan · Apr 2, 2024 · 8725ebd · 8725ebd
1 parent 84e2efd
commit 8725ebd
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 70 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -29,7 +29,7 @@ const Home = (): JSX.Element => {
     pollTitle: "",
     pollLocation: "",
     pollDescription: "",
-    pollType: "Group-poll",
+    pollType: "group",
   });
 
   const { pollTitle, pollLocation, pollDescription, pollType } = pollDetails;
@@ -167,7 +167,7 @@ const Home = (): JSX.Element => {
             </Jumbotron>
             <Jumbotron className="new-poll-jumbo">
               <Row>
-                <Col sm>
+                <Col sm className="samay-form-col">
                   <Form.Control
                     className="form-text"
                     type="text"
@@ -177,7 +177,7 @@ const Home = (): JSX.Element => {
                     onChange={handlePollDetailsChange}
                   />
                 </Col>
-                <Col sm>
+                <Col sm className="samay-form-col">
                   <Form.Control
                     className="form-text"
                     type="text"
@@ -187,7 +187,7 @@ const Home = (): JSX.Element => {
                     onChange={handlePollDetailsChange}
                   />
                 </Col>
-                <Col sm>
+                <Col sm className="samay-form-col">
                   <Form.Control
                     className="form-text"
                     type="text"
@@ -197,18 +197,19 @@ const Home = (): JSX.Element => {
                     onChange={handlePollDetailsChange}
                   />
                 </Col>
-                <Col sm>
-                <Form.Group>
-                <Form.Control as="select"
-                className="form-text"
-                name="pollType"
-                defaultValue="Group-poll"
-                onChange={handlePollDetailsChange}
-                >
-                  <option value="Group-poll" selected>Group-poll</option>
-                  <option>One-on-one</option>
-                  </Form.Control>
-                </Form.Group>
+                <Col sm className="samay-form-col">
+                  <Form.Group className="form-group">
+                    <Form.Control
+                      as="select"
+                      className="form-select"
+                      name="pollType"
+                      defaultValue="group"
+                      onChange={handlePollDetailsChange}
+                    >
+                      <option value="group">Group poll</option>
+                      <option value="oneonone">One-on-one poll</option>
+                    </Form.Control>
+                  </Form.Group>
                 </Col>
                 <Col sm="auto">
                   <Button

diff --git a/src/components/poll/AdminPollInfo.tsx b/src/components/poll/AdminPollInfo.tsx
@@ -22,12 +22,8 @@ const AdminPollInfo = (props: {
   const { poll, showFinalTime, showCopyBox } = props;
   return (
     <div>
-      <Badge
-        pill
-        variant="secondary"
-        className="poll-badge-polltype"
-      >
-        {poll.type ==="Group-poll" ? "Group-poll" : "One-on-one"}
+      <Badge pill variant="secondary" className="poll-badge-polltype">
+        {poll.type === "group" ? "group" : "oneonone"}
       </Badge>
       <Badge
         pill

diff --git a/src/components/poll/MarkTimesOneOnOne.tsx b/src/components/poll/MarkTimesOneOnOne.tsx
@@ -10,18 +10,19 @@ const MarkTimesOneOnOne = (props: {
   setNewVote: Dispatch<Vote>;
 }): JSX.Element => {
   const { times, newVote, poll, setNewVote } = props;
-  
+
   let availableTimes = [];
-  let VotedTimes = poll.votes.map((vote)=> vote.times[0]);
+  let VotedTimes = poll.votes.map((vote) => vote.times[0]);
 
   poll.times.map((time) => {
     if (!isTimePresentInPollTimes(time, VotedTimes)) {
-        availableTimes.push(time)
+      availableTimes.push(time);
     }
-  }
-  );
+  });
 
-  const handleMarkTimeRadioButton= (e: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleMarkTimeRadioButton = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): void => {
     if (e.target !== e.currentTarget) return;
     const { dataset, checked } = e.target;
     const time: Time = dataset.value ? JSON.parse(dataset.value) : {};
@@ -52,5 +53,4 @@ const MarkTimesOneOnOne = (props: {
   );
 };
 
-
 export default MarkTimesOneOnOne;
diff --git a/src/components/poll/PollTableAdmin.tsx b/src/components/poll/PollTableAdmin.tsx
@@ -43,7 +43,7 @@ const PollTableAdmin = (props: {
           </tr>
         </thead>
         <tbody>
-          {pollFromDB.open && pollFromDB.type === "Group-poll" && (
+          {pollFromDB.open && pollFromDB.type === "group" && (
             <MarkFinalTime times={sortedTimes} setFinalTime={setFinalTime} />
           )}
           <tr>

diff --git a/src/components/poll/PollTableVoter.tsx b/src/components/poll/PollTableVoter.tsx
@@ -19,42 +19,43 @@ const PollTableVoter = (props: {
   const { pollFromDB, sortedTimes, newVote, setNewVote } = props;
 
   let availableTimes = [];
-  let VotedTimes = pollFromDB.votes.map((vote)=> vote.times[0]);
+  let VotedTimes = pollFromDB.votes.map((vote) => vote.times[0]);
 
   pollFromDB.times.map((time) => {
     if (!isTimePresentInPollTimes(time, VotedTimes)) {
-        availableTimes.push(time)
+      availableTimes.push(time);
     }
-  }
-  );
+  });
 
   return (
     <div>
       <Table responsive>
         <thead>
           <tr>
-            {pollFromDB.type === "Group-poll" && (sortedTimes.map((time) => (
-              <th key={time.start} className="poll-slot-time">
-                <PollDateTime time={time} type="voter" />
-              </th>
-            )))}
-            {pollFromDB.type === "One-on-one" && (availableTimes.map((time) => (
-              <th key={time.start} className="poll-slot-time">
-                <PollDateTime time={time} />
-              </th>
-            )))}
+            {pollFromDB.type === "group" &&
+              sortedTimes.map((time) => (
+                <th key={time.start} className="poll-slot-time">
+                  <PollDateTime time={time} type="voter" />
+                </th>
+              ))}
+            {pollFromDB.type === "oneonone" &&
+              availableTimes.map((time) => (
+                <th key={time.start} className="poll-slot-time">
+                  <PollDateTime time={time} />
+                </th>
+              ))}
           </tr>
         </thead>
         <tbody>
-          {pollFromDB.open && pollFromDB.type === "Group-poll" && (
+          {pollFromDB.open && pollFromDB.type === "group" && (
             <MarkTimes
               times={sortedTimes}
               newVote={newVote}
               poll={pollFromDB}
               setNewVote={setNewVote}
             />
           )}
-          {pollFromDB.open && pollFromDB.type === "One-on-one" && (
+          {pollFromDB.open && pollFromDB.type === "oneonone" && (
             <MarkTimesOneOnOne
               times={sortedTimes}
               newVote={newVote}

diff --git a/src/components/poll/SubmitFinalTime.tsx b/src/components/poll/SubmitFinalTime.tsx
@@ -21,7 +21,7 @@ const SubmitFinalTime = (props: {
     e: React.MouseEvent<HTMLInputElement>
   ): Promise<void> => {
     e.preventDefault();
-    if (finalTime && poll.type === "Group-poll") {
+    if (finalTime && poll.type === "group") {
       setDisabled(true);
       try {
         const voterArgs = {
@@ -45,13 +45,13 @@ const SubmitFinalTime = (props: {
         toast.info("Please try again later", toastOptions);
         Router.reload();
       }
-    } else if (poll.type === "Group-poll") {
+    } else if (poll.type === "group") {
       toast.error("Please choose the final time", toastOptions);
     } else {
       setDisabled(true);
     }
   };
-  if (poll.type === "Group-poll") {
+  if (poll.type === "group") {
     return (
       <>
         <Button

diff --git a/src/components/poll/SubmitTimes.tsx b/src/components/poll/SubmitTimes.tsx
@@ -59,7 +59,7 @@ const SubmitTimes = (props: {
           const votedPolls = localStorage.getItem("samayVotedPolls");
 
           if (!votedPolls) {
-            if (pollFromDB.type === "One-on-one") {
+            if (pollFromDB.type === "oneonone") {
               const initKukkeePolls = {
                 polls: [
                   {
@@ -85,7 +85,7 @@ const SubmitTimes = (props: {
                 JSON.stringify(initKukkeePolls)
               );
             }
-          } else if (pollFromDB.type === "One-on-one") {
+          } else if (pollFromDB.type === "oneonone") {
             const votedPollsJSON = JSON.parse(votedPolls);
 
             votedPollsJSON.polls.push({

diff --git a/src/models/poll.ts b/src/models/poll.ts
@@ -30,7 +30,7 @@ export interface Poll {
   open?: boolean;
   secret: string;
   location?: string;
-  type? : string;
+  type?: string;
   times: Time[];
   finalTime?: Time;
   votes?: Vote[];
@@ -71,7 +71,7 @@ const PollSchema: Schema = new Schema(
     open: { type: Boolean, default: true },
     secret: { type: String, required: true },
     location: { type: String },
-    type: {type: String, default: "Group-poll"},
+    type: { type: String },
     times: {
       type: [{ start: Number, end: Number }],
       required: true,

diff --git a/src/styles/form.scss b/src/styles/form.scss
@@ -51,17 +51,48 @@
 }
 
 .form-select {
-  background-color: #101827;
+  background-color: #ffffff;
   color: #101827;
-  border: none;
-  outline: 0.05rem solid #e0e1e0;
-  border-radius: 0.3rem;
+  border: 0.09rem solid #e5e7eb;
+  border-radius: 0.5rem;
   font-family: "Inter";
   font-size: 0.9rem;
-  width: 8rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+  margin-top: 0;
+  transition: 0.2s;
+  padding-left: 0.5rem !important;
 
-  &:focus {
-    outline: 0.14rem solid #101827;
-    background-color: #101827;
+  @include media-breakpoint-up(sm) {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+}
+
+.form-select:hover {
+  color: #101827;
+  background-color: #ffffff;
+  border: 0.09rem solid #b7b9bd;
+}
+
+.form-select:focus {
+  color: #101827;
+  background-color: #ffffff;
+  border: 0.1rem solid #101827;
+}
+
+.form-group {
+  margin-bottom: 0 !important;
+}
+
+.samay-form-col {
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  @include media-breakpoint-up(sm) {
+    padding-right: 0rem;
+    &.first-of-type {
+      padding-left: 2rem;
+    }
   }
 }
diff --git a/src/styles/new-poll.scss b/src/styles/new-poll.scss
@@ -1,16 +1,14 @@
 .new-poll-jumbo {
   background-color: #fefffe;
   color: #ffffff;
-  padding-top: 1.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding: 1rem;
   margin-bottom: 5rem;
   border-radius: 0.5rem;
   border: 0.09rem solid #e5e7eb;
+
   @include media-breakpoint-up(lg) {
     margin-bottom: 2rem;
-}
+  }
 }
 
 .new-poll-timeslot-jumbo {
@@ -26,4 +24,4 @@
   margin-bottom: 1.7rem;
   border: 0.09rem solid #e5e7eb;
   height: 37rem;
-}
+}
diff --git a/src/styles/poll.scss b/src/styles/poll.scss
@@ -87,7 +87,7 @@
 
   @include media-breakpoint-up(sm) {
     font-size: 0.8rem;
-    padding: 0.5rem;  
+    padding: 0.5rem;
   }
 }
 
@@ -101,7 +101,7 @@
   letter-spacing: 0.06rem;
 
   background-color: #fefffe;
-  color: #565656;;
+  color: #565656;
   margin-top: 1rem;
   margin-right: 1rem;
   margin-bottom: 1rem;
@@ -383,7 +383,7 @@
 }
 
 .poll-slot-checkbox-one-on-one input[type="radio"]:checked {
-  background-color:#49de80;
+  background-color: #49de80;
   padding: 4px;
   border: 0.15rem solid #49de80;
 }