add new style

Cargo.toml

@@ -122,4 +122,4 @@ lib-default-features = false
 
 tailwind-input-file = "input.css"
 tailwind-config-file = "tailwind.config.js"
-#in-target-triple = "aarch64-unknown-linux-gnu"
+#bin-target-triple = "aarch64-unknown-linux-gnu"

README.md

@@ -1,8 +1,15 @@
-source : https://github.com/Oishh/leptos-axum-tailwind-start
-
 wasm-pack build --target=web --debug --no-default-features --features=hydrate
 cargo run --no-default-features --features=ssr
 
+# dev
+source .env
+cargo sqlx migrate run
+cargo leptos watch
+
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+
+# deploy
+
 example of systemd config
 ```
 [Unit]
@@ -18,25 +25,25 @@ Type=simple
 WantedBy=multi-user.target
 ```
 
-# dev
-source .env
-cargo sqlx migrate run
-cargo leptos watch
-
-npx tailwindcss -i ./input.css -o ./style/output.css --watch
-
 ## features
 [x] ssr
 [x] MySQL
 [x] tailwindcss
 [x] router
 [ ] value gestion des erreurs
-[ ] deploy
+[x] deploy
 
 ## pages
-[ ] liens
+[x] liens
-[ ] formulaire
+[x] formulaire
 [ ] recap capteurs
 
 
-// https://github.com/Bechma/realworld-leptos
+
+
+## style
+[Simple dark dashboard](https://dribbble.com/shots/10090105-Dashboard-UI/attachments/2097885?mode=media)
+
+## helps
+[Leptos starter kit](https://github.com/Oishh/leptos-axum-tailwind-start)
+[Leptos blog](https://github.com/Bechma/realworld-leptos)

src/app.rs

@@ -11,15 +11,11 @@ pub fn App() -> impl IntoView {
     view! {
         <Stylesheet href="/pkg/rust_leptos.css"/>
 
-        <Title text="Welcome to Leptos"/>
+        <Title text="Bienvenue à la maison"/>
 
-        <div class="dark:bg-black dark:text-lime-500 dark:hover:text-lime-400 h-screen flex flex-col">
+        <div class="dark:bg-prim dark:text-second h-screen flex flex-col">
             <Router>
-                <nav class="flex gap-5 px-2 py-1 ">
+                <Navigation />
-                    <a href="/">Home</a>
-                    <A href="/liens">Liens</A>
-                    <a href="/formulaire">Formulaire</a>
-                </nav>
                 <main class="flex-1">
                     <Routes>
                         <Route path="/" view=move || view! { <Home/> }/>
@@ -34,10 +30,21 @@ pub fn App() -> impl IntoView {
     }
 }
 
+#[component]
+pub fn Navigation() -> impl IntoView {
+    view! {
+        <nav class="flex gap-5 px-2 py-1 text-lg">
+            <A href="/" class="hover:text-third border-b border-transparent hover:border-third inline-block transition-colors">Home</A>
+            <A href="/liens" class="hover:text-third hover:border-b border-third inline-block transition-colors">Liens</A>
+            <A href="/formulaire" class="hover:text-third hover:border-b border-third inline-block transition-colors">Formulaire</A>
+        </nav>
+    }
+}
+
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <h1>Home</h1>
+        <h1 class="m-2">Home</h1>
     }
 }
 

src/routes/link.rs

@@ -41,15 +41,15 @@ pub fn Links() -> impl IntoView {
 
     let form = move || {
         show.get().then(|| {
-            view! { <div class="my-0 mx-auto w-72 text-center">
+            view! { <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
-                <h2 class="p-6 text-4xl">"Ajout d'un lien"</h2>
+                <h2 class="pb-6 text-2xl text-center">"Ajout d'un lien"</h2>
-                <ActionForm action=link_action attr:class="border border-lime-500">
+                <ActionForm action=link_action attr:class="">
                 <div>
                     <label class="block mt-3 mb-1">"Nom"</label>
                     <input type="text"
                            name="name"
                            prop:value=move || reset_form.get()
-                           class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
+                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
                 </div>
 
                 <div>
@@ -57,10 +57,10 @@ pub fn Links() -> impl IntoView {
                     <input type="url"
                            name="link"
                            prop:value=move || reset_form.get()
-                           class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
+                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
                 </div>
                 <div>
-                    <button type="submit" class="bg-lime-500 hover:bg-lime-400 text-black px-2 py-1 w-60 my-5">"Valider"</button>
+                    <button type="submit" class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 w-60 my-5">"Valider"</button>
                 </div>
             </ActionForm>
             </div> }
@@ -68,7 +68,7 @@ pub fn Links() -> impl IntoView {
     };
 
     view! {
-        <ul class="flex gap-5 mt-5 justify-center">
+        <ul class="flex flex-wrap gap-5 mt-5 justify-center">
             <Suspense fallback=move || view! {<p>"Loading Comments from the article"</p> }>
                 <ErrorBoundary fallback=|_| {
                     view! { <p class="error-messages text-xs-center">"Something went wrong."</p>}
@@ -87,8 +87,11 @@ pub fn Links() -> impl IntoView {
             </Suspense>
         </ul>
 
-        <div>
+        <div class="flex justify-end m-5">
-            <button on:click=move |_| {set_show.set(true)}>"Add"</button>
+            <button on:click=move |_| {set_show.set(true)} class="bg-prim-light hover:bg-prim-lightest rounded-full px-5 py-3 text-second-dark hover:text-third transition-colors">"Ajouter un lien +"</button>
+        </div>
+
+        <div class="flex justify-center m-5">
             {form}
         </div>
     }
@@ -98,7 +101,7 @@ pub fn Links() -> impl IntoView {
 fn Link(link: RwSignal<crate::models::Link>) -> impl IntoView {
     view! {
         <li>
-            <a class="border border-lime-500 bg-lime-500 hover:bg-lime-400 text-black px-3 py-2 inline-block"
+            <a class="bg-prim-light hover:bg-prim-lightest text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 min-w-60 inline-block"
                 target="_blank"
                 href={move || link.with(|x| x.link.to_string())}>
                 {move || link.with(|x| x.name.to_string())}

src/routes/value.rs

@@ -29,13 +29,13 @@ pub fn FormValues() -> impl IntoView {
     );
 
     view! {
-        <div class="my-0 mx-auto w-72 text-center">
+        <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
-            <h2 class="p-6 text-4xl">"Formulaire"</h2>
+            <h2 class="pb-6 text-2xl text-center">"Formulaire"</h2>
 
-            <ActionForm action=value_action attr:class="border border-lime-500">
+            <ActionForm action=value_action attr:class="">
                 <div>
-                    <label class="block mt-5 mb-1">Capteur</label>
+                    <label class="block mt-3 mb-1">Capteur</label>
-                    <select name="device" class="w-60 dark:bg-slate-800 px-2 py-2">
+                    <select name="device" class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60">
                     {OPTIONS.into_iter()
                         .map(|option| view! { <option value={option.value} class="px-2 py-1">{option.name}</option>})
                         .collect::<Vec<_>>()}
@@ -46,10 +46,10 @@ pub fn FormValues() -> impl IntoView {
                     <input name="value"
                            type="number"
                            prop:value=move || reset_value.get()
-                           class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
+                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
                 </div>
                 <div>
-                    <button type="submit" class="bg-lime-500 hover:bg-lime-400 text-black px-2 py-1 w-60 my-5">Valider</button>
+                    <button type="submit" class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 w-60 my-5">Valider</button>
                 </div>
             </ActionForm>
         </div>

tailwind.config.js

@@ -4,7 +4,27 @@ module.exports = {
     files: ["*.html", "./src/**/*.rs"],
   },
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        prim: {
+          lightest: "#2E3235",
+          light: "#2B2F33",
+          DEFAULT: "#26292D",
+        },
+        second: {
+          DEFAULT: "#FEFEFE",
+          dark: "#929496",
+        },
+        third: {
+          light: "#FC443D",
+          DEFAULT: "#F74E49",
+        },
+        fourth: {
+          light: "#FFD885",
+          DEFAULT: "#FEBB2E",
+        },
+      },
+    },
   },
   plugins: [],
 };