[refactor] refactoring use new design style

app/src/components.rs

@@ -1,3 +1,4 @@
+pub mod card;
 pub mod load_more;
 pub mod nav;
 pub mod post_item;

app/src/components/card.rs

@@ -0,0 +1 @@
+pub mod outline_card;

app/src/components/card/outline_card.rs

@@ -0,0 +1,19 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct LoadMoreProps {
+    pub children: Html,
+    #[prop_or_default]
+    pub class: String,
+}
+
+#[function_component]
+pub fn OutlineCard(props: &LoadMoreProps) -> Html {
+    html! {
+        <div class={format!("rounded-6xl bg-white-600 p-3 dark:bg-gray-600 {}", props.class)}>
+            <div class="rounded-4xl bg-white dark:bg-white-dark">
+               {props.children.clone()}
+            </div>
+        </div>
+    }
+}

app/src/components/post_item.rs

@@ -23,13 +23,17 @@ pub fn PostItem(props: &PostItemProps) -> Html {
 
     html! {
         <a href={format!("/post/{}", post.id)}>
-            <div class="my-5">
-                <div class="text-xl font-bold text-black">
-                    {&post.title}
-                    <div>{tags}</div>
+            <div class="mt-5">
+                <div class="flex items-center">
+                    <div class="font-semibold text-lg text-black dark:text-black-dark">{&post.title}</div>
+                    {for tags}
+                </div>
+                <div class="text-sm text-black-400 dark:text-gray-900 mt-1.5 mb-2">
+                    {&post.spoiler}
+                </div>
+                <div class="text-xs text-gray-500 dark:text-gray-450">
+                    {&post.created_at}
                 </div>
-                <div class="text-black-700 text-sm mt-0.5 mb-1">{&post.spoiler}</div>
-                <div class="text-xs text-black-500">{&post.created_at}</div>
             </div>
         </a>
     }

app/src/components/tag.rs

@@ -8,6 +8,6 @@ pub struct TagProps {
 #[function_component]
 pub fn Tag(props: &TagProps) -> Html {
     html! {
-        <span class="pixel-badge mr-2 px-2 py-0.5 text-xs text-black-500 text-white bg-black">{props.children.clone()}</span>
+        <div class="text-xs px-2 rounded flex justify-center items-center">{props.children.clone()}</div>
     }
 }

app/src/pages.rs

@@ -1,5 +1,4 @@
 pub mod dynamic;
-pub mod home;
 pub mod links;
 pub mod not_found;
 pub mod post;

app/src/pages/posts.rs

@@ -1,5 +1,6 @@
 use std::rc::Rc;
 
+use crate::components::card::outline_card::OutlineCard;
 use crate::components::{load_more::LoadMore, post_item::PostItem};
 use crate::http::HTTP;
 use shared::post::{PaginationPostsRes, Post};
@@ -67,12 +68,14 @@ pub fn Content() -> HtmlResult {
     });
 
     Ok(html! {
-        <div class="mt-12">
-            {for rendered_posts}
-            if *has_load_more {
-                <LoadMore onload={handle_load_more_click} />
-            }
-        </div>
+        <OutlineCard class="mt-8">
+            <div class="pb-7 pt-1 px-6 grid gap-5 divide-y md:divide-solid divide-gray-200 dark:divide-gray-100">
+                {for rendered_posts}
+                if *has_load_more {
+                    <LoadMore onload={handle_load_more_click} />
+                }
+            </div>
+        </OutlineCard>
     })
 }
 

app/src/portal.rs

@@ -13,26 +13,35 @@ pub struct BrowserAppProps {
     pub config: Config,
 }
 
+#[function_component]
+pub fn App() -> Html {
+    let cb = Callback::from(|_| {
+        let document = web_sys::window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .document_element()
+            .unwrap();
+
+        document.set_class_name("dark");
+    });
+
+    html! {
+        <main class="p-4 h-full w-full flex justify-center bg-white-200 dark:bg-black-900">
+            <div class="h-full w-[655px]">
+                <Nav />
+                <Switch<Routes> render={switch} />
+            </div>
+            <button onclick={cb}>{"Dark"}</button>
+        </main>
+    }
+}
+
 #[function_component]
 pub fn BrowserApp() -> Html {
     html! {
         <BrowserRouter>
-            <main class="p-4 h-full w-full flex justify-center">
-                <div class="h-full w-[768px]">
-                    <Nav />
-                    <Switch<Routes> render={switch} />
-                </div>
-            </main>
-            <footer class="footer">
-                <div class="content has-text-centered">
-                    { "Powered by " }
-                    <a href="https://yew.rs">{ "Yew" }</a>
-                    { " using " }
-                    <a href="https://bulma.io">{ "Bulma" }</a>
-                    { " and images from " }
-                    <a href="https://unsplash.com">{ "Unsplash" }</a>
-                </div>
-            </footer>
+            <App />
         </BrowserRouter>
     }
 }
@@ -54,22 +63,7 @@ pub fn ServerApp(props: &ServerAppProps) -> Html {
 
     html! {
         <Router history={history}>
-            <main class="p-4 h-full w-full flex justify-center">
-                <div class="h-full w-[768px]">
-                    <Nav />
-                    <Switch<Routes> render={switch} />
-                </div>
-            </main>
-            <footer class="footer">
-                <div class="content has-text-centered">
-                    { "Powered by " }
-                    <a href="https://yew.rs">{ "Yew" }</a>
-                    { " using " }
-                    <a href="https://bulma.io">{ "Bulma" }</a>
-                    { " and images from " }
-                    <a href="https://unsplash.com">{ "Unsplash" }</a>
-                </div>
-            </footer>
+           <App />
         </Router>
     }
 }

app/src/routes.rs

@@ -1,9 +1,7 @@
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-use crate::pages::{
-    dynamic::Dynamic, home::Home, links::Links, not_found::NotFound, post::Post, posts::Posts,
-};
+use crate::pages::{dynamic::Dynamic, links::Links, not_found::NotFound, post::Post, posts::Posts};
 
 #[derive(Routable, PartialEq, Eq, Clone, Debug)]
 pub enum Routes {
@@ -28,7 +26,7 @@ pub fn switch(routes: Routes) -> Html {
         Routes::Posts => {
             html! {<Posts />}
         }
-        Routes::Home => html! {<Home />},
+        Routes::Home => html! {<Redirect<Routes> to={Routes::Posts} />},
         Routes::NotFound => html! {<NotFound />},
         Routes::Links => html! {<Links />},
         Routes::Dynamic { path } => html! {<Dynamic path={path} />},

entry/styles/input.css

@@ -5,7 +5,7 @@
 @layer base {
   body,
   html {
-    min-height: 100%;
+    height: 100%;
   }
 }