Merge branch 'main' into entries-page

andrew-fenton · Sep 15, 2024 · 7003fb7 · 7003fb7
2 parents e87b935 + bd11adf
commit 7003fb7
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 23 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,4 +1,8 @@
 #root {
+  height: 100%;
+}
+
+#app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -33,12 +33,14 @@ function App() {
   return (
         <Router>
             <Navbar />
-            <Routes>
-                <Route path="/" element={<Root notes={notes}/>} />
-                <Route path="record" element={<Recorder transcript={transcript} setTranscript={setTranscript}/>} />
-                <Route path="summary" element={<Summary transcript={transcript}/>} />
-                <Route path="journal" element={<Journal />} />
-            </Routes>
+            <div id="app">
+                <Routes>
+                    <Route path="/" element={<Root notes={notes}/>} />
+                    <Route path="record" element={<Recorder transcript={transcript} setTranscript={setTranscript}/>} />
+                    <Route path="summary" element={<Summary transcript={transcript}/>} />
+                    <Route path="journal" element={<Journal />} />
+                </Routes>
+            </div>
         </Router>
     )
 }

diff --git a/frontend/src/routes/root.jsx b/frontend/src/routes/root.jsx
@@ -1,21 +1,52 @@
 import '../App.css';
 import LandingMic from '../widgets/LandingMic';
-import MemoryNote from '../widgets/MemoryNote';
 import { Divider } from "antd";
+import { Input, Button, Card } from 'antd';
+import { StarOutlined } from '@ant-design/icons';
 
-function Root({ notes }) {
+function Root() {
     return (
         <>
+            <h2 style={{ fontWeight: 800 }}>
+                Welcome back, <span style={{ color: '#14b8a6' }}>Janet</span>
+            </h2>
+            <div style={{ display: "flex", flexDirection: "row" }}>
+                <h3>Total Entries</h3><br/>
+                <h1>9</h1>
+                <Divider type="vertical" style={{borderTop: '2px solid #f0f0f0'}}/>
+                <h3>Entries this week</h3><br/>
+                <h1>3</h1>
+            </div>
+            <Divider style={{borderTop: '2px solid #f0f0f0'}}/>
             <div>
-                <h2>Record a memory</h2>
-                <LandingMic/>
+                <Input.Search
+                    placeholder="Search your memories"
+                    enterButton={
+                        <Button type="primary" icon={<StarOutlined/>} style={{ backgroundColor: '#bfdbfe' }}/>
+                    }
+                    size="large"
+                    onSearch={value => console.log(value)}
+                />
+
+                <Card style={{ 
+                    borderRadius: '15px', 
+                    padding: '0', 
+                    margin: '20px', 
+                    marginBottom: '40px',
+                    textAlign: "left", 
+                    border: "2px solid #000",
+                    fontSize: "12px"
+                }}>
+                    Example searches:                   <br/>
+                    - Am I improving at collaboration?  <br/>
+                    - What are my best qualities?       <br/>
+                    - Do I overwork myself?
+                </Card>
             </div>
             <Divider style={{borderTop: '2px solid #f0f0f0'}}/>
             <div>
-                <h2>Recent Memories</h2>
-                {notes.slice(0, 3).map((note, index) => (
-                    <MemoryNote key={index} note={note}/>
-                ))}
+                <h2>Record a memory</h2>
+                <LandingMic/>
             </div>
         </>
     )

diff --git a/frontend/src/widgets/LandingMic.jsx b/frontend/src/widgets/LandingMic.jsx
@@ -7,9 +7,8 @@ function LandingMic(props) {
         <button onClick={() => navigateTo("/record")}
             style={{
                 borderRadius: '50%',
-                width: "128px",
-                height: "128px",
-                border: '5px solid black',
+                width: "64px",
+                height: "64px",
                 backgroundColor: "#bfdbfe",
             }}>
             <div style={{
@@ -21,12 +20,12 @@ function LandingMic(props) {
                 <svg
                     {...props}
                     xmlns="http://www.w3.org/2000/svg"
-                    width="64"
-                    height="64"
+                    width="24"
+                    height="24"
                     viewBox="0 0 23 23"
                     fill="none"
                     stroke="currentColor"
-                    strokeWidth="2"
+                    strokeWidth="2.5"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                 >

diff --git a/frontend/src/widgets/Navbar.jsx b/frontend/src/widgets/Navbar.jsx
@@ -1,12 +1,19 @@
 import { Link } from "react-router-dom";
-import { FiMenu } from 'react-icons/fi'
+import { FaBook } from "react-icons/fa";
 
 function Navbar() {
     return (
-        <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: "100%", display: "top" }}>
+        <nav style={{ 
+            display: 'flex', 
+            flexDirection: 'row',
+            justifyContent: 'space-between', 
+            alignItems: 'center', 
+            width: "100%",
+            padding: "15px",
+        }}>
             <div></div>
             <h2><Link style={{ textDecoration: "none", color: "black", fontWeight: 600 }} to="/">memora.</Link></h2>
-            <FiMenu size={30}/>
+            <FaBook size={30}/>
             <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
         </nav>
     );