update icons

The-DevBlog · Feb 17, 2024 · cd2bac6 · cd2bac6
1 parent cac062c
commit cd2bac6
Show file tree

Hide file tree

Showing 25 changed files with 151 additions and 78 deletions.
diff --git a/devblog/devblog/ClientApp/src/components/styles/Comment.css b/devblog/devblog/ClientApp/src/components/styles/Comment.css
@@ -1,5 +1,4 @@
 .comment {
-    border: .15em solid rgb(70, 68, 60);
     border-radius: .5em;
     display: "flex";
     margin-bottom: .25em;

diff --git a/devblog/devblog/client/src/components/comment.rs b/devblog/devblog/client/src/components/comment.rs
@@ -41,7 +41,7 @@ pub fn comment(props: &Props) -> Html {
     };
 
     html! {
-        <div class={style}>
+        <div class={{style}}>
             <div class="comment">
                 <div class="comment-info">
                     // USERNAME

diff --git a/devblog/devblog/client/src/components/comment_add.rs b/devblog/devblog/client/src/components/comment_add.rs
@@ -1,6 +1,6 @@
 use crate::{helpers, store::Store, Api, CommentModel};
 use gloo::console::log;
-use gloo_net::http::{Headers, Method};
+use gloo_net::http::Method;
 use std::ops::Deref;
 use stylist::Style;
 use web_sys::{Event, HtmlTextAreaElement, SubmitEvent};
@@ -40,10 +40,7 @@ pub fn add_comment(props: &Props) -> Html {
         let store = store.clone();
         Callback::from(move |e: SubmitEvent| {
             e.prevent_default();
-            let auth = format!("Bearer {}", store.token);
-            let hdrs = Headers::new();
-            hdrs.append("Authorization", &auth);
-            hdrs.append("content-type", "application/json");
+            let hdrs = helpers::create_auth_header(&store.token);
 
             let new_comment = CommentModel::new(
                 post_id,

diff --git a/devblog/devblog/client/src/components/comment_delete.rs b/devblog/devblog/client/src/components/comment_delete.rs
@@ -1,5 +1,5 @@
-use crate::{store::Store, Api};
-use gloo_net::http::{Headers, Method};
+use crate::{helpers, icons::icons::TrashIcon, store::Store, Api};
+use gloo_net::http::Method;
 use stylist::Style;
 use yew::{function_component, html, Callback, Html, Properties};
 use yewdux::use_store_value;
@@ -21,9 +21,7 @@ pub fn delete_comment(props: &Props) -> Html {
         let id = props.id.clone();
         let callback = props.on_comment_delete.clone();
         Callback::from(move |_| {
-            let auth = format!("Bearer {}", store.token.clone());
-            let hdrs = Headers::new();
-            hdrs.append("Authorization", &auth);
+            let hdrs = helpers::create_auth_header(&store.token);
             let callback = callback.clone();
 
             wasm_bindgen_futures::spawn_local(async move {
@@ -44,7 +42,9 @@ pub fn delete_comment(props: &Props) -> Html {
 
     html! {
         <span class={style}>
-            <button class="delete-comment-btn" onclick={delete}>{"X"}</button>
+            <span class="delete-comment-btn" onclick={delete}>
+                <TrashIcon />
+            </span>
         </span>
     }
 }
diff --git a/devblog/devblog/client/src/components/comment_edit.rs b/devblog/devblog/client/src/components/comment_edit.rs
@@ -1,15 +1,11 @@
-use gloo::console::log;
-use gloo_net::http::{Headers, Method};
+use crate::{helpers, icons::icons::EditIcon, store::Store, Api};
+use gloo_net::http::Method;
 use std::ops::Deref;
 use stylist::Style;
 use web_sys::{Event, HtmlTextAreaElement};
-use yew::{
-    function_component, html, use_effect_with, use_state, Callback, Html, Properties, TargetCast,
-};
+use yew::{function_component, html, use_state, Callback, Html, Properties, TargetCast};
 use yewdux::use_store_value;
 
-use crate::{helpers, store::Store, Api};
-
 const STYLE: &str = include_str!("styles/commentEdit.css");
 
 #[derive(Properties, PartialEq)]
@@ -53,11 +49,8 @@ pub fn edit_comment(props: &Props) -> Html {
             on_is_editing.emit(false);
             let content = content.clone();
             let on_save = on_save.clone();
-            let auth = format!("Bearer {}", store.deref().token);
-            let hdrs = Headers::new();
-            hdrs.append("Authorization", &auth);
-            hdrs.append("content-type", "application/json");
             let body = Some(helpers::to_jsvalue(content.deref().clone()));
+            let hdrs = helpers::create_auth_header(&store.token);
 
             wasm_bindgen_futures::spawn_local(async move {
                 let response = Api::EditComment(id)
@@ -81,7 +74,9 @@ pub fn edit_comment(props: &Props) -> Html {
     html! {
         <div class={style}>
             if !props.is_editing {
-                <button class="edit-comment-btn" onclick={edit}>{"*"}</button>
+                <span class="edit-comment-btn" onclick={edit}>
+                    <EditIcon />
+                </span>
             }
 
             if props.is_editing {

diff --git a/devblog/devblog/client/src/components/pager.rs b/devblog/devblog/client/src/components/pager.rs
@@ -1,5 +1,7 @@
 use stylist::Style;
 use yew::{function_component, html, Callback, Html, Properties};
+
+use crate::icons::icons::{ArrowLeft, ArrowRight};
 // use gloo::console::log;
 
 const STYLE: &str = include_str!("styles/pager.css");
@@ -29,12 +31,14 @@ pub fn pager(props: &Props) -> Html {
             <div class="pager">
                 // PAGE LEFT
                 if props.page_num > 1 {
-                    <span onclick={page(-1)}>{"back"}</span>
+                    <span onclick={page(-1)}><ArrowLeft /></span>
                 }
 
+                // <span>{props.page_num}</span>
+
                 // PAGE RIGHT
                 if props.page_num < props.total_pages {
-                    <span onclick={page(1)}>{"next"}</span>
+                    <span onclick={page(1)}><ArrowRight /></span>
                 }
             </div>
         </div>

diff --git a/devblog/devblog/client/src/components/post_delete.rs b/devblog/devblog/client/src/components/post_delete.rs
@@ -1,5 +1,5 @@
-use crate::{store::Store, Api};
-use gloo_net::http::{Headers, Method};
+use crate::{helpers, icons::icons::TrashIcon, store::Store, Api};
+use gloo_net::http::Method;
 use stylist::Style;
 use yew::{function_component, html, Callback, Html, Properties};
 use yewdux::use_store_value;
@@ -22,9 +22,7 @@ pub fn delete_post(props: &Props) -> Html {
         let token = store.token.clone();
         let callback = props.on_post_delete.clone();
         Callback::from(move |_| {
-            let auth = format!("Bearer {}", token);
-            let hdrs = Headers::new();
-            hdrs.append("Authorization", &auth);
+            let hdrs = helpers::create_auth_header(&token);
             let callback = callback.clone();
 
             wasm_bindgen_futures::spawn_local(async move {
@@ -46,7 +44,9 @@ pub fn delete_post(props: &Props) -> Html {
     html! {
         if store.admin {
             <span class={style}>
-                <button onclick={delete} class="delete-post-btn">{"X"}</button>
+                <span onclick={delete} class="delete-post-btn">
+                    <TrashIcon />
+                </span>
             </span>
         }
     }

diff --git a/devblog/devblog/client/src/components/styles/comment.css b/devblog/devblog/client/src/components/styles/comment.css
@@ -1,5 +1,4 @@
 .comment {
-    border: .15em solid rgb(70, 68, 60);
     border-radius: .5em;
     display: "flex";
     margin-bottom: .25em;

diff --git a/devblog/devblog/client/src/components/styles/commentDelete.css b/devblog/devblog/client/src/components/styles/commentDelete.css
@@ -1,8 +1,13 @@
-.delete-comment-btn:hover {
-    color: red;
-    cursor: pointer;
-}
-
 .delete-comment-btn {
     padding: 0px 5px;
+}
+
+.delete-comment-btn>svg {
+    height: 12;
+
+}
+
+.delete-comment-btn>svg:hover {
+    cursor: pointer;
+    fill: red;
 }
diff --git a/devblog/devblog/client/src/components/styles/commentEdit.css b/devblog/devblog/client/src/components/styles/commentEdit.css
@@ -1,6 +1,11 @@
-.edit-comment-btn:hover {
-    color: greenyellow;
+.edit-comment-btn svg:hover {
     cursor: pointer;
+    fill: greenyellow;
+}
+
+.edit-comment-btn svg {
+    fill: white;
+    height: 12;
 }
 
 .edit-comment-btn {
@@ -9,8 +14,8 @@
 
 .edit-comment textarea,
 .edit-comment button {
-    padding: 8px;
     margin-right: 5px;
+    padding: 8px;
 }
 
 .edit-comment div {

diff --git a/devblog/devblog/client/src/components/styles/pager.css b/devblog/devblog/client/src/components/styles/pager.css
@@ -20,6 +20,7 @@
 
 .pager svg {
     font-size: 35px;
+    height: 30;
     opacity: 0.7;
 }
 

diff --git a/devblog/devblog/client/src/components/styles/postDelete.css b/devblog/devblog/client/src/components/styles/postDelete.css
@@ -1,8 +1,12 @@
-.delete-post-btn:hover {
-    color: red;
-    cursor: pointer;
+span:root {
+    margin-left: 10;
+}
+
+.delete-post-btn>svg {
+    height: 13;
 }
 
-.delete-post-btn {
-    margin-left: 10px;
+.delete-post-btn svg:hover {
+    cursor: pointer;
+    fill: red;
 }
diff --git a/devblog/devblog/client/src/components/styles/vote.css b/devblog/devblog/client/src/components/styles/vote.css
@@ -7,18 +7,19 @@
 }
 
 .up-vote:hover {
-    color: yellow;
+    fill: yellow;
     cursor: pointer;
 }
 
 .down-vote:hover {
-    color: red;
+    fill: red;
     cursor: pointer;
 }
 
 .up-vote,
 .down-vote {
     padding: 5px;
+    height: 30;
 }
 
 @media (max-width: 800px) {

diff --git a/devblog/devblog/client/src/components/vote.rs b/devblog/devblog/client/src/components/vote.rs
@@ -1,3 +1,4 @@
+use crate::icons::icons::{DownVoteIcon, UpVoteIcon};
 use stylist::Style;
 use yew::{function_component, html, Html, Properties};
 
@@ -16,8 +17,11 @@ pub fn vote(props: &Props) -> Html {
     html! {
         <div class={style}>
             <div class="votes">
-                <span>{"Up"}{props.up_votes}</span>
-                <span>{"Down"}{props.down_votes}</span>
+                <UpVoteIcon />
+                <span>{props.up_votes}</span>
+
+                <DownVoteIcon />
+                <span>{props.down_votes}</span>
             </div>
         </div>
     }

diff --git a/devblog/devblog/client/src/helpers.rs b/devblog/devblog/client/src/helpers.rs
@@ -35,9 +35,7 @@ pub fn on_click(
 ) {
     let method = method.clone();
     let navigator = navigator.clone();
-    let auth = format!("Bearer {}", token);
-    let hdrs = Headers::new();
-    hdrs.append("Authorization", &auth);
+    let hdrs = helpers::create_auth_header(&token);
     let api = Rc::clone(&api);
     let dispatch = dispatch.clone();
 
@@ -106,6 +104,14 @@ where
     parsed_body
 }
 
+pub fn create_auth_header(token: &String) -> Headers {
+    let auth = format!("Bearer {}", token);
+    let hdrs = Headers::new();
+    hdrs.append("Authorization", &auth);
+    hdrs.append("content-type", "application/json");
+    hdrs
+}
+
 pub struct CustomCallback;
 
 impl CustomCallback {

diff --git a/devblog/devblog/client/src/icons/icons.rs b/devblog/devblog/client/src/icons/icons.rs
@@ -0,0 +1,46 @@
+use yew::{function_component, html, Html};
+
+#[function_component(UpVoteIcon)]
+pub fn upvote() -> Html {
+    html! {<svg class={"up-vote"} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260ZM312-520l44-42 42 42 42-42-84-86-86 86 42 42Zm250 0 42-42 44 42 42-42-86-86-84 86 42 42ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>}
+}
+
+#[function_component(DownVoteIcon)]
+pub fn downvote() -> Html {
+    html! {<svg class={"down-vote"} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-420q-68 0-123.5 38.5T276-280h408q-25-63-80.5-101.5T480-420Zm-168-60 44-42 42 42 42-42-42-42 42-44-42-42-42 42-44-42-42 42 42 44-42 42 42 42Zm250 0 42-42 44 42 42-42-42-42 42-44-42-42-44 42-42-42-42 42 42 44-42 42 42 42ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>}
+}
+
+#[function_component(TrashIcon)]
+pub fn trash() -> Html {
+    html! {
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"/>
+            <path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"/>
+        </svg>
+    }
+}
+
+#[function_component(EditIcon)]
+pub fn edit() -> Html {
+    html! {
+        <svg viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g  stroke-width="1">
+                <g id="Dribbble-Light-Preview" transform="translate(-59.000000, -400.000000)">
+                    <g transform="translate(56.000000, 160.000000)">
+                        <path d="M3,260 L24,260 L24,258.010742 L3,258.010742 L3,260 Z M13.3341,254.032226 L9.3,254.032226 L9.3,249.950269 L19.63095,240 L24,244.115775 L13.3341,254.032226 Z"></path>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    }
+}
+
+#[function_component(ArrowRight)]
+pub fn arrow_right() -> Html {
+    html! {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>}
+}
+
+#[function_component(ArrowLeft)]
+pub fn arrow_left() -> Html {
+    html! {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>}
+}
diff --git a/devblog/devblog/client/src/icons/mod.rs b/devblog/devblog/client/src/icons/mod.rs
@@ -0,0 +1 @@
+pub mod icons;
diff --git a/devblog/devblog/client/src/main.rs b/devblog/devblog/client/src/main.rs
@@ -1,6 +1,7 @@
 mod api;
 mod components;
 mod helpers;
+mod icons;
 mod models;
 mod pages;
 mod router;

diff --git a/devblog/devblog/client/src/pages/account.rs b/devblog/devblog/client/src/pages/account.rs
@@ -3,7 +3,7 @@ use crate::{
     store::Store,
     Api, User,
 };
-use gloo_net::http::{Headers, Method};
+use gloo_net::http::Method;
 use std::rc::Rc;
 use stylist::Style;
 use yew::prelude::*;
@@ -25,10 +25,7 @@ pub fn account() -> Html {
     let token = store.token.clone();
     use_effect_with((), |_| {
         wasm_bindgen_futures::spawn_local(async move {
-            let hdrs = Headers::new();
-            let auth = format!("Bearer {}", token);
-            hdrs.append("Authorization", &auth);
-
+            let hdrs = helpers::create_auth_header(&token);
             let res = Api::GetCurrentUser
                 .fetch(Some(hdrs), None, Method::GET)
                 .await;