diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 3d3fe46..c1e66f7 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router";
import styled from "styled-components";
import logoImage from "../../assets/logo.svg";
import { media } from "../../utils/media";
@@ -27,7 +28,9 @@ function Header({ className, children }) {
return (
-
+
+
+
{children}
diff --git a/src/layouts/onboarding-layout.jsx b/src/layouts/onboarding-layout.jsx
index beab0ed..feb5d44 100644
--- a/src/layouts/onboarding-layout.jsx
+++ b/src/layouts/onboarding-layout.jsx
@@ -1,24 +1,40 @@
import { useNavigate } from "react-router";
+import styled from "styled-components";
import { OutlinedButton } from "../components/button/button";
import BUTTON_SIZE from "../components/button/button-size";
import Header from "../components/header/header";
+const LayoutHeader = styled(Header)`
+ flex-shrink: 0;
+`;
+
+const Main = styled.main`
+ flex-grow: 1;
+ min-height: 100vh - 64px;
+`;
+
+const StyledOnbardingLayout = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+`;
+
function OnboardingLayout({ children }) {
const navigate = useNavigate();
const handlePostCreate = () => navigate("/post");
return (
- <>
-
- {children}
- >
+
+ {children}
+
);
}
diff --git a/src/pages/rolling-paper-list-page.jsx b/src/pages/rolling-paper-list-page.jsx
index 425f9cc..7e780dc 100644
--- a/src/pages/rolling-paper-list-page.jsx
+++ b/src/pages/rolling-paper-list-page.jsx
@@ -1,17 +1,16 @@
-import { PrimaryButton } from "../components/button/button";
-import BUTTON_SIZE from "../components/button/button-size";
-import React, { useEffect, useState, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router";
import styled from "styled-components";
+import { apiClient } from "../api/client";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
import RollingPaperList from "../features/rolling-paper/components/rolling-paper-list";
-import { media } from "../utils/media";
import { useMedia } from "../hooks/use-media";
-import { apiClient } from "../api/client";
+import { media } from "../utils/media";
const TopContainer = styled.div`
text-align: center;
margin-top: 50px;
- min-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
`;
@@ -72,7 +71,7 @@ function getCachedImage(url) {
return cache[url].src;
}
-function ShowMessageList() {
+function RollingPaperListPage() {
const navigate = useNavigate();
const [recipientsData, setRecipientsData] = useState([]);
@@ -188,4 +187,4 @@ function ShowMessageList() {
);
}
-export default ShowMessageList;
+export default RollingPaperListPage;