change homepage design

andrew-fenton · Sep 15, 2024 · 2d6aae1 · 2d6aae1
1 parent 65a18fc
commit 2d6aae1
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
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"
                 >