chore: improve voter page and navbar

anandbaburajan · Mar 31, 2024 · c085e87 · c085e87
1 parent 69e29eb
commit c085e87
Show file tree

Hide file tree

Showing 18 changed files with 4,876 additions and 3,147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/poll/[id].tsx b/pages/poll/[id].tsx
@@ -32,6 +32,8 @@ const Poll = (props: {
     times: [],
   });
 
+  let showVoteRecorded = false;
+
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { value } = e.target;
     setNewVote({ name: value, times: newVote.times });
@@ -67,15 +69,8 @@ const Poll = (props: {
         let poll = votedPollsFromLS.polls[i];
 
         if (Object.keys(poll)[0] === pollID && pollFromDB.open) {
-          pageSection = (
-            <>
-              <div className="voter-page-final-container">
-                <span className="voter-page-vote-recorded">
-                  Your vote has been successfully recorded.
-                </span>
-              </div>
-            </>
-          );
+          pageSection = <></>;
+          showVoteRecorded = true;
           break;
         } else if (pollFromDB.open) {
           pageSection = (
@@ -149,14 +144,12 @@ const Poll = (props: {
       <Layout>
         <div className="global-page-section">
           <Container className="global-container">
-          <Jumbotron className="voter-poll-info-jumbo mb-0">
-          <div
-            className={`voter-page-info-container ${
-              pollFromDB.open ? "" : "closed"
-            }`}
-          >
-            <VoterPollInfo poll={pollFromDB} showFinalTime={!pollFromDB.open} />
-            </div>
+            <Jumbotron className="poll-info-jumbo">
+              <VoterPollInfo
+                poll={pollFromDB}
+                showFinalTime={!pollFromDB.open}
+                showVoteRecorded={showVoteRecorded}
+              />
             </Jumbotron>
             {pageSection}
           </Container>

diff --git a/pages/poll/[id]/[secret].tsx b/pages/poll/[id]/[secret].tsx
@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { getPoll } from "../../../src/utils/api/server";
 import Layout from "../../../src/components/Layout";
-import PollInfo from "../../../src/components/poll/PollInfo";
+import AdminPollInfo from "../../../src/components/poll/AdminPollInfo";
 import PollTableAdmin from "../../../src/components/poll/PollTableAdmin";
 import SubmitFinalTime from "../../../src/components/poll/SubmitFinalTime";
 import DeletePoll from "../../../src/components/poll/DeletePoll";
@@ -45,7 +45,7 @@ const Poll = (props: {
                   secret={secret}
                 />
               </span>
-              <PollInfo poll={pollFromDB} showFinalTime showCopyBox />
+              <AdminPollInfo poll={pollFromDB} showFinalTime showCopyBox />
             </Jumbotron>
             {pollFromDB.votes?.length > 0 && (
               <>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ const NavBar = (): JSX.Element => {
   return (
     <Navbar className="navbar" variant="light" expand="lg" collapseOnSelect>
       <Container className="global-container">
-        <Navbar.Brand href="/">
+        <Navbar.Brand href="/" className="navbar-brand">
           <img alt="logo" src="/favicon.svg" className="navbar-logo" />
           <span className="navbar-logo-text">samay</span>
         </Navbar.Brand>

diff --git a/src/components/poll/PollInfo.tsx → src/components/poll/AdminPollInfo.tsx b/src/components/poll/PollInfo.tsx → src/components/poll/AdminPollInfo.tsx
@@ -14,7 +14,7 @@ import CopyText from "../copyText";
 dayjs.extend(localizedFormat);
 dayjs.extend(timezone);
 
-const PollInfo = (props: {
+const AdminPollInfo = (props: {
   poll: PollFromDB;
   showFinalTime: boolean;
   showCopyBox: boolean;
@@ -45,8 +45,8 @@ const PollInfo = (props: {
         Times are shown in: {dayjs.tz.guess()} timezone
       </span>
       {!poll.open && showFinalTime && (
-        <span className="poll-info-detail-title">
-          <CalendarCheck className="poll-info-icon" />
+        <span className="poll-info-final-time">
+          <CalendarCheck className="poll-info-final-time-decided-icon" />
           {dayjs(poll.finalTime?.start).format("ddd")},{" "}
           {dayjs(poll.finalTime?.start).format("MMM")}{" "}
           {dayjs(poll.finalTime?.start).format("DD")},{" "}
@@ -56,7 +56,7 @@ const PollInfo = (props: {
       )}
       {showCopyBox && (
         <>
-          <span className="poll-info-detail-title copy-text-mobile">
+          <span className="poll-info-detail-title-share copy-text-mobile">
             <ShareFill className="poll-info-icon" />
             <CopyText
               pollTitle={poll.title}
@@ -69,7 +69,7 @@ const PollInfo = (props: {
       )}
       {showCopyBox && (
         <>
-          <span className="poll-info-detail-title copy-text-desktop">
+          <span className="poll-info-detail-title-share copy-text-desktop">
             <ShareFill className="poll-info-icon" />
             Share this{" "}
             <CopyText
@@ -86,4 +86,4 @@ const PollInfo = (props: {
   );
 };
 
-export default PollInfo;
+export default AdminPollInfo;
diff --git a/src/components/poll/PollDateTime.tsx b/src/components/poll/PollDateTime.tsx
@@ -4,15 +4,25 @@ import { Time } from "../../models/poll";
 
 dayjs.extend(localizedFormat);
 
-const PollDateTime = (props: { time: Time }): JSX.Element => {
-  const { time } = props;
+const PollDateTime = (props: { time: Time; type: string }): JSX.Element => {
+  const { time, type } = props;
+
   return (
-    <div>
+    <div className="datetime-component">
       <span className="datetime-weekday">
         {dayjs(time.start).format("ddd")}
       </span>
       <span className="datetime-day">{dayjs(time.start).format("D")}</span>
       <span className="datetime-mon">{dayjs(time.start).format("MMM")}</span>
+      <span
+        className={`${
+          type === "voter"
+            ? "datetime-time-sep-voter"
+            : "datetime-time-sep-admin"
+        }`}
+      >
+        [
+      </span>
       <span className="datetime-time-1">{dayjs(time.start).format("LT")}</span>
       <span className="datetime-time-2">{dayjs(time.end).format("LT")}</span>
     </div>

diff --git a/src/components/poll/PollDateTimeWithCheck.tsx b/src/components/poll/PollDateTimeWithCheck.tsx
diff --git a/src/components/poll/PollTableAdmin.tsx b/src/components/poll/PollTableAdmin.tsx
@@ -37,7 +37,7 @@ const PollTableAdmin = (props: {
                     : "poll-slot-time"
                 }
               >
-                <PollDateTime time={time} />
+                <PollDateTime time={time} type="admin" />
               </th>
             ))}
           </tr>

diff --git a/src/components/poll/PollTableVoter.tsx b/src/components/poll/PollTableVoter.tsx
@@ -23,7 +23,7 @@ const PollTableVoter = (props: {
           <tr>
             {sortedTimes.map((time) => (
               <th key={time.start} className="poll-slot-time">
-                <PollDateTime time={time} />
+                <PollDateTime time={time} type="voter" />
               </th>
             ))}
           </tr>

diff --git a/src/components/poll/PollTableVotes.tsx b/src/components/poll/PollTableVotes.tsx
diff --git a/src/components/poll/VoterPollInfo.tsx b/src/components/poll/VoterPollInfo.tsx
@@ -1,5 +1,10 @@
 import { Badge } from "react-bootstrap";
-import { CalendarCheck, GeoAltFill, Globe } from "react-bootstrap-icons";
+import {
+  CalendarCheck,
+  CheckCircleFill,
+  GeoAltFill,
+  Globe,
+} from "react-bootstrap-icons";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import timezone from "dayjs/plugin/timezone";
@@ -11,50 +16,50 @@ dayjs.extend(timezone);
 const PollInfo = (props: {
   poll: PollFromDB;
   showFinalTime: boolean;
+  showVoteRecorded: boolean;
 }): JSX.Element => {
-  const { poll, showFinalTime } = props;
+  const { poll, showFinalTime, showVoteRecorded } = props;
+
   return (
     <div>
       <Badge
         pill
         variant={poll.open ? "success" : "secondary"}
-        className={
-          poll.open
-            ? "voter-page-poll-badge-open"
-            : "voter-page-poll-badge-closed"
-        }
+        className={poll.open ? "poll-badge-open" : "poll-badge-closed"}
       >
         {poll.open ? "Open" : "Closed"}
       </Badge>
-      {poll.title && (
-        <span className="voter-page-poll-info-title">{poll.title}</span>
-      )}
-      {!poll.title && (
-        <span className="voter-page-poll-info-title">Untitled</span>
-      )}
+      {poll.title && <span className="poll-info-title">{poll.title}</span>}
+      {!poll.title && <span className="poll-info-title">Untitled</span>}
       {poll.description && (
-        <span className="voter-page-poll-info-desc">{poll.description}</span>
+        <span className="poll-info-desc">{poll.description}</span>
       )}
       {poll.location && (
-        <span className="voter-page-poll-info-detail-title">
-          <GeoAltFill className="voter-page-poll-info-icon" />
+        <span className="poll-info-detail-title">
+          <GeoAltFill className="poll-info-icon" />
           {poll.location}
         </span>
       )}
-      <span className="voter-page-poll-info-detail-title">
-        <Globe className="voter-page-poll-info-icon" />
+      <span className="poll-info-detail-title">
+        <Globe className="poll-info-icon" />
         Times are shown in: {dayjs.tz.guess()} timezone
       </span>
       {showFinalTime && (
-        <span className="voter-page-poll-info-detail-title">
-          <CalendarCheck className="voter-page-poll-info-icon" />
+        <span className="poll-info-final-time">
+          <CalendarCheck className="poll-info-final-time-decided-icon" />
           {dayjs(poll.finalTime?.start).format("ddd")},{" "}
           {dayjs(poll.finalTime?.start).format("MMM")}{" "}
           {dayjs(poll.finalTime?.start).format("DD")},{" "}
           {dayjs(poll.finalTime?.start).format("LT")} -{" "}
           {dayjs(poll.finalTime?.end).format("LT")}
         </span>
       )}
+      {showVoteRecorded && !showFinalTime && (
+        <span className="voter-page-vote-recorded">
+          <CheckCircleFill className="poll-vote-recorded-icon" />
+          Your vote has been successfully recorded.
+        </span>
+      )}
     </div>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ const PollTableAdmin = (props: { @@
                         : "poll-slot-time"
                     }
                   >
-                    <PollDateTime time={time} />
+                    <PollDateTime time={time} type="admin" />
                   </th>
                 ))}
               </tr>
@@ Expand Down @@