Merge pull request #84 from sympoll/animations-and-design

Animations and design
sympoll · Sep 8, 2024 · ef35c09 · ef35c09
2 parents b898c54 + a9aed58
commit ef35c09
Show file tree

Hide file tree

Showing 14 changed files with 573 additions and 254 deletions.
diff --git a/.env b/.env
@@ -28,6 +28,7 @@ VITE_USER_SERVICE_URL=/user
 VITE_USER_SERVICE_USERNAME_TAKEN=/username
 VITE_USER_SERVICE_EMAIL_TAKEN=/email
 VITE_USER_SERVICE_USER_BY_ID=/by-user-id
+VITE_USER_SERVICE_DESCRIPTION=/description
 
 VITE_GROUP_SERVICE_URL=/group
 VITE_GROUP_SERVICE_GET_GROUPS_BY_MEMBER_ID=/by-member-id

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,16 +5,24 @@ import ContentPage from "./pages/ContentPage";
 import NotFoundPage from "./pages/NotFoundPage";
 import ProtectedRoute from "./cmps/route/ProtectedRoute";
 import KeycloakLoginPage from "./pages/KeycloakLoginPage";
+import { useUser } from "./context/UserContext";
+import { useEffect } from "react";
 
 export default function App() {
+  const { user } = useUser();
+
   return (
-    // can add silent login here to auto try to sign in, and if not previously signed in within a certain time, auto redirect to the landing page
     // TODO: add reset account page
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<LandingPage />} />
+        {/* If the user is logged in, redirect to /feed; otherwise, show the landing page */}
+        <Route path="/" element={user ? <Navigate to="/feed" replace /> : <LandingPage />} />
+
+        {/* Login and Reset Account pages */}
         <Route path="/login" element={<KeycloakLoginPage />} />
         <Route path="/reset-account" element={<NotFoundPage />} />
+
+        {/* Handle any undefined routes */}
         <Route path="/*" element={<NotFoundPage />} />
 
         {/* Protected routes */}

diff --git a/src/assets/styles/basics/animations.scss b/src/assets/styles/basics/animations.scss
@@ -1,12 +1,78 @@
-/* Fade from 0 opacity to 1 opacity */
-@mixin fadeIn($duration: 0.5s, $timingFunction: ease-in-out) {
+/* Fade from 0 opacity to 1 opacity with a delay */
+@mixin fadeIn($duration: 0.5s, $timingFunction: ease-in-out, $delay: 0s) {
   @keyframes fadeIn {
     from {
       opacity: 0;
+      visibility: hidden;
     }
     to {
       opacity: 1;
+      visibility: visible;
     }
   }
-  animation: fadeIn $duration $timingFunction forwards;
+  opacity: 0; /* Ensure it's hidden before animation starts */
+  visibility: hidden;
+  animation: fadeIn $duration $timingFunction $delay forwards;
+}
+
+@mixin backInDown($duration: 1s, $timingFunction: ease-in-out, $delay: 0s) {
+  @keyframes backInDown {
+    0% {
+      transform: translateY(-1200px) scale(0.7);
+      opacity: 0.7;
+      visibility: hidden;
+    }
+    80% {
+      transform: translateY(0px) scale(0.7);
+      opacity: 0.7;
+      visibility: visible;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  opacity: 0; /* Ensure it's hidden before animation starts */
+  visibility: hidden;
+  animation: backInDown $duration $timingFunction $delay forwards;
+}
+
+@mixin fadeInUp($duration: 1s, $startingPosition: 100%, $timingFunction: ease-in-out, $delay: 0s) {
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, $startingPosition, 0);
+      visibility: hidden;
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
+  }
+
+  opacity: 0;
+  visibility: hidden;
+  animation: fadeInUp $duration $timingFunction $delay forwards;
+}
+
+@mixin fadeInDown($duration: 1s, $timingFunction: ease-in-out, $delay: 0s) {
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translate3d(0, -100%, 0);
+      visibility: hidden;
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
+  }
+
+  opacity: 0;
+  visibility: hidden;
+  animation: fadeInDown $duration $timingFunction $delay forwards;
 }
diff --git a/src/assets/styles/cmps/landing-page/_LandingPage.scss b/src/assets/styles/cmps/landing-page/_LandingPage.scss
@@ -1,15 +1,18 @@
 .landing-page-content {
+  @include fadeIn(3s);
+
   @include center;
   display: grid;
   margin-top: 10px;
-  margin-bottom: 20px;
-  font-size: 18px;
+  margin-bottom: 30px;
+  font-size: 20px;
   font-family: $secondaryFont;
   font-weight: 400;
   font-style: normal;
 }
 
 .landing-page-buttons {
+  @include fadeInUp(1.4s, 30%, ease-in-out, 4s);
   @include center;
   display: grid;
   row-gap: 10px;
@@ -21,6 +24,7 @@
 }
 
 .landing-page-logo-img {
+  @include backInDown(1.8s, ease-in-out, 2s);
   display: block;
   max-width: 80%;
   height: auto;

diff --git a/src/assets/styles/cmps/user-profile/_UserProfile.scss b/src/assets/styles/cmps/user-profile/_UserProfile.scss
@@ -144,6 +144,7 @@
   &__content-container {
     @include flex-column;
     gap: 10px;
+    width: 100%;
 
     &__row1 {
       display: flex;
@@ -201,13 +202,94 @@
     gap: 10px;
   }
 
-  &__description {
-    padding: 20px;
+  &__description-container {
+    @include flex-column;
+    padding: 14px;
     background: $mainColor-light0;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    color: #4b3832;
+    color: $mainFontColor;
     flex-basis: 60%;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  &__edit-description-container {
+    @include flex-column;
+    width: 100%;
+    gap: 6px;
+    height: 100%;
+
+    .user-profile__edit-description-input {
+      flex-grow: 1;
+      padding: 6px;
+      border-radius: 5px;
+      border: 1px solid $mainFontColor;
+      background-color: $mainBgColor0;
+      font-size: $mainFontSize;
+      font-family: $mainFont;
+      min-width: 0;
+      resize: vertical;
+    }
+
+    button {
+      background-color: $mainColor-dark0;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      padding: 6px 12px;
+      cursor: pointer;
+      flex-shrink: 0;
+      width: auto;
+
+      &:hover {
+        background-color: darken($mainColor-dark0, 10%);
+      }
+    }
+  }
+
+  &__edit-description-button {
+    position: absolute;
+    top: 12px; // Adjust the spacing as needed
+    right: 12px; // Adjust the spacing as needed
+    cursor: pointer;
+    color: $mainFontColor;
+    scale: 0.8;
+
+    &:hover {
+      color: $mainColor-dark0;
+    }
+  }
+
+  &__edit-description-menu {
+    position: absolute;
+    top: 40px;
+    right: 0px;
+    width: fit-content;
+    background: $mainBgColor0;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+    padding: 0;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      background: none;
+      border: none;
+      color: #4b3832;
+      font-weight: bold;
+      font-size: 13px;
+      cursor: pointer;
+      padding: 8px 12px;
+      text-align: left;
+      border-radius: 10px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        opacity: 0.8;
+      }
+    }
   }
 
   &__user-info {

diff --git a/src/cmps/app-header/AppHeader.tsx b/src/cmps/app-header/AppHeader.tsx
@@ -1,6 +1,8 @@
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useUpdateContext } from "../../context/UpdateContext";
+import { useAuth } from "../../context/AuthProvider";
+
 import refreshImage from "/imgs/button/refresh.png";
 
 export default function AppHeader() {

diff --git a/src/cmps/feed/FeedContent.tsx b/src/cmps/feed/FeedContent.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Poll from "./poll/Poll";
-import { deletePoll, fetchAllUserGroupsPolls, fetchPollsByGroupId } from "../../services/poll.service";
+import {
+  deletePoll,
+  fetchAllUserGroupsPolls,
+  fetchPollsByGroupId
+} from "../../services/poll.service";
 import { PollData } from "../../models/PollData.model";
 import FeedLoadingAnimation from "../global/LoadingAnimation";
 import ContentPageErrorMessage from "../content-page/messege/ContentPageErrorMessage";
@@ -20,6 +24,7 @@ export default function FeedContent() {
   const { registerForUpdate } = useUpdateContext(); // Access context
   const { user } = useUser();
   const [pollIdToDelete, setPollIdToDelete] = useState<string>("");
+  const [isCreatePollFormVisible, setIsCreatePollFormVisible] = useState(false);
 
   const cmpName = "FEED ";
 
@@ -42,7 +47,7 @@ export default function FeedContent() {
 
       setIsLoading(false);
       removeErrorFromFeed();
-      setPolls(fetchedPolls); 
+      setPolls(fetchedPolls);
     } catch (err) {
       if (err instanceof Error) {
         console.error(cmpName + err.message);
@@ -78,32 +83,32 @@ export default function FeedContent() {
   const showVerifyDeletePopup = (pollId: string) => {
     setIsVerifyPopupOpen(true);
     setPollIdToDelete(pollId);
-  }
+  };
 
   const closeVerifyDeletePopup = () => {
-    setIsVerifyPopupOpen(false)
+    setIsVerifyPopupOpen(false);
     setPollIdToDelete("");
-  }
+  };
 
   const onDeletePoll = async () => {
-    if(pollIdToDelete !== "")
-    {
+    if (pollIdToDelete !== "") {
       console.log("deleting poll");
       await deletePoll(pollIdToDelete, user?.userId, groupId)
-      .then((data) => {
-        deletePollFromPollsList(data.pollId);
-      }).catch((error) => {
-        console.log("Unable to delete poll: ", pollIdToDelete);
-        setError(error);
-      });
+        .then((data) => {
+          deletePollFromPollsList(data.pollId);
+        })
+        .catch((error) => {
+          console.log("Unable to delete poll: ", pollIdToDelete);
+          setError(error);
+        });
 
       closeVerifyDeletePopup();
     }
-  }
+  };
 
   const deletePollFromPollsList = (pollId: string) => {
     setPolls(polls?.filter((poll) => poll.pollId !== pollId));
-  }
+  };
 
   if (isLoading) {
     return <FeedLoadingAnimation message="Feed is loading" dots="off" />;
@@ -116,22 +121,38 @@ export default function FeedContent() {
   if (polls.length === 0) {
     return (
       <div className="feed-container">
-        {groupId && <FeedBar addNewPoll={addNewPoll} groupId={groupId} />}
-        <ContentPageMessage
-          msgText={
-            groupId
-              ? "No polls are currently available for this group. Please check back later or contact the group administrator for more information."
-              : "No polls are currently available for your groups. Please check back later or contact a group administrator for more information."
-          }
-        />
+        {groupId && (
+          <FeedBar
+            addNewPoll={addNewPoll}
+            groupId={groupId}
+            isCreatePollFormVisible={isCreatePollFormVisible}
+            setIsCreatePollFormVisible={setIsCreatePollFormVisible}
+          />
+        )}
+        {!isCreatePollFormVisible && (
+          <ContentPageMessage
+            msgText={
+              groupId
+                ? "No polls are currently available for this group. Please check back later or contact the group administrator for more information."
+                : "No polls are currently available for your groups. Please check back later or contact a group administrator for more information."
+            }
+          />
+        )}
       </div>
     );
   }
 
   return (
     <div className="feed-container">
       <div className="feed-header">
-        {groupId && <FeedBar addNewPoll={addNewPoll} groupId={groupId} />}
+        {groupId && (
+          <FeedBar
+            addNewPoll={addNewPoll}
+            groupId={groupId}
+            isCreatePollFormVisible={isCreatePollFormVisible}
+            setIsCreatePollFormVisible={setIsCreatePollFormVisible}
+          />
+        )}
       </div>
       <div className="feed-content-container">
         {polls.map((poll) => (
@@ -156,7 +177,13 @@ export default function FeedContent() {
           />
         ))}
       </div>
-      {isVerifyPopupOpen && (<VerifyPopup headlineMessage="delete the poll?" OnClickYes={onDeletePoll} onClose={closeVerifyDeletePopup}></VerifyPopup>)}
+      {isVerifyPopupOpen && (
+        <VerifyPopup
+          headlineMessage="delete the poll?"
+          OnClickYes={onDeletePoll}
+          onClose={closeVerifyDeletePopup}
+        ></VerifyPopup>
+      )}
     </div>
   );
 }