styling profile

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@dicebear/collection": "^9.4.0",
     "@dicebear/core": "^9.4.0",
+    "framer-motion": "^12.35.0",
     "hamburger-menu": "^0.7.1",
     "hamburger-react": "^2.5.2",
     "react": "^18.2.0",

frontend/src/components/CompletedQuests.jsx

@@ -1,14 +1,30 @@
 import { useQuestStore } from "../stores/useQuestStore"
 import { QuestCard } from "./cards/QuestCard"
+import { useState } from "react"
+import { motion, AnimatePresence } from 'framer-motion'
 
 export const CompletedQuests = () => {
   const { quests, completeQuest, deleteQuest } = useQuestStore()
-
   const completed = quests.filter(quest => quest.done === true)
+  const [ isVisible, setIsVisible ] = useState(false)
 
   return (
     <>
       <h2>Completed quests</h2>
+      <button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+            style={{ overflow: 'hidden' }}
+          >
+
       {completed.map((quest) => (
           <QuestCard
             key={quest._id}
@@ -18,7 +34,10 @@ export const CompletedQuests = () => {
             handleChecked={completeQuest}
             onDelete={deleteQuest}
           />
-      ))}
-    </>
-  )
-}
+        ))}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  </>
+    )
+  }

frontend/src/components/CreateQuest.jsx

@@ -66,7 +66,7 @@ export const CreateQuest = () => {
         {/* NOTE: category commented out for now. Not used currently */}
 
         <label>
-          How many minutes will it take you?
+          How many minutes will it take?
           <Input 
             name="time" 
             type='number'
@@ -78,19 +78,20 @@ export const CreateQuest = () => {
 
         {error && <p>{error}</p>}
 
-        <Button type="submit">Add new quest</Button>
+        <Button type="submit">Add quest</Button>
       </Label>
     </Form>
   )
 }
 
 const Form = styled.form`
-  margin: 10px;
+  margin: 20px 0;
   padding: 16px;
   border-radius: 12px;
   border: 2px solid #B594FF;
   background: #FFF;
   box-shadow: 2px 4px 4px 0 #DBDBDB;
+  text-align: center;
 `
 
 const Label = styled.label`
@@ -109,7 +110,6 @@ const Input = styled.input`
 
 const Button = styled.button`
   display: flex;
-  width: 315px;
   height: 54px;
   padding: 8px 16px;
   justify-content: center;

frontend/src/components/QuestLibrary.jsx

@@ -1,68 +1,49 @@
 import { LibraryQuestCard } from "./cards/LibraryQuestCard"
-import { useEffect } from 'react'
+import { useState } from 'react'
 import { useQuestStore } from "../stores/useQuestStore"
 import styled from 'styled-components'
 import questLibrary from '../library.json'
+import { motion, AnimatePresence } from 'framer-motion'
 
 export const QuestLibrary = () => {
   const { fetchLibraryQuests, libraryQuests, duplicateQuest, createQuest } = useQuestStore()
+  const [ isVisible, setIsVisible ] = useState(false)
 
   const handleAdd = (quest) => {
     createQuest(quest.message, quest.timeNeeded, quest.category)
   }
 
   return (
     <>
-      <h2>Library</h2>
-      {questLibrary.map((quest, index) => (
-        <LibraryQuestCard
-          key={index}
-          id={index}
-          message={quest.message}
-          timeNeeded={quest.timeNeeded}
-          category={quest.category}
-          onAdd={() => handleAdd(quest)}
-        />
-      ))}
-
-
-    </>
+      <h2>Quest library</h2>
+      <button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+            style={{ overflow: 'hidden' }}
+          >
+
+        {questLibrary.map((quest, index) => (
+          <LibraryQuestCard
+            key={index}
+            id={index}
+            message={quest.message}
+            timeNeeded={quest.timeNeeded}
+            category={quest.category}
+            onAdd={() => handleAdd(quest)}
+          />
+        ))}
+      </motion.div>
+    )}
+  </AnimatePresence>
+</>
   )
 }
 
-
-
-const Container = styled.div`
-  display: flex;
-  padding: 5px 16px;
-  justify-content: space-between;
-  border-radius: 12px;
-  border: 1px solid var(--accent-color);
-  background-color: #FFFFFF;
-  box-shadow: 0 2px 2px 0 #DBDBDB;
-  margin: 5px 10px;
-
-`
-
-const P = styled.p`
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  margin: 0;
-`
-
-const TimeP = styled.p`
-  font-family: Roboto;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  color: var(--accent-color);
-  margin: 0;
-`
-
-const Div = styled.div`
-  display: flex;
-  gap: 5px;
-`

frontend/src/components/QuestList.jsx

@@ -1,14 +1,16 @@
 // import { apiUrl } from '../../api';
 import styled from 'styled-components';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { QuestCard } from './cards/QuestCard';
 import { useQuestStore } from '../stores/useQuestStore';
 import { useUserStore } from '../stores/useUserStore';
+import { motion, AnimatePresence } from 'framer-motion'
 
 
 export const QuestList = () => {
   const { quests, error, isLoading, fetchQuests, deleteQuest, completeQuest } = useQuestStore()
   const { user } = useUserStore()  
+  const [ isVisible, setIsVisible ] = useState(false)
 
   useEffect(() => {
     fetchQuests()
@@ -19,7 +21,21 @@ export const QuestList = () => {
 
   return (
     <>
-      <p>Your quests:</p>
+      <h2>My quests</h2>
+      <button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
+          style={{ overflow: 'hidden' }}
+        >
+
       {quests
         .filter(quest => !quest.done)
         .map((quest) => (
@@ -33,7 +49,10 @@ export const QuestList = () => {
             onDelete={deleteQuest}
             handleChecked={completeQuest}
           />
-      ))}
+        ))}
+      </motion.div>
+      )}
+    </AnimatePresence>
     </>
   )
 };