From cd2bac6d1b0b404b33ba5335aeab4ba7a27c6f92 Mon Sep 17 00:00:00 2001 From: andrew Date: Sat, 17 Feb 2024 14:50:42 -0500 Subject: [PATCH] update icons --- .../src/components/styles/Comment.css | 1 - .../devblog/client/src/components/comment.rs | 2 +- .../client/src/components/comment_add.rs | 7 +-- .../client/src/components/comment_delete.rs | 12 ++--- .../client/src/components/comment_edit.rs | 19 +++----- .../devblog/client/src/components/pager.rs | 8 +++- .../client/src/components/post_delete.rs | 12 ++--- .../client/src/components/styles/comment.css | 1 - .../src/components/styles/commentDelete.css | 15 ++++-- .../src/components/styles/commentEdit.css | 11 +++-- .../client/src/components/styles/pager.css | 1 + .../src/components/styles/postDelete.css | 14 ++++-- .../client/src/components/styles/vote.css | 5 +- devblog/devblog/client/src/components/vote.rs | 8 +++- devblog/devblog/client/src/helpers.rs | 12 +++-- devblog/devblog/client/src/icons/icons.rs | 46 +++++++++++++++++++ devblog/devblog/client/src/icons/mod.rs | 1 + devblog/devblog/client/src/main.rs | 1 + devblog/devblog/client/src/pages/account.rs | 7 +-- devblog/devblog/client/src/pages/insights.rs | 10 ++-- devblog/devblog/client/src/pages/post_add.rs | 18 +++----- devblog/devblog/client/src/pages/posts.rs | 2 +- .../devblog/client/src/pages/styles/home.css | 2 +- .../client/src/pages/styles/insights.css | 10 ++++ devblog/devblog/client/src/theme.css | 4 ++ 25 files changed, 151 insertions(+), 78 deletions(-) create mode 100644 devblog/devblog/client/src/icons/icons.rs create mode 100644 devblog/devblog/client/src/icons/mod.rs diff --git a/devblog/devblog/ClientApp/src/components/styles/Comment.css b/devblog/devblog/ClientApp/src/components/styles/Comment.css index e6afb1fe..fbb2a877 100644 --- 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 index ea4beeb1..78a75dfc 100644 --- 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! { -
+
// USERNAME diff --git a/devblog/devblog/client/src/components/comment_add.rs b/devblog/devblog/client/src/components/comment_add.rs index 095b773d..cdaf328f 100644 --- 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 index 53f4c71b..5cf4ced6 100644 --- 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! { - + + + } } diff --git a/devblog/devblog/client/src/components/comment_edit.rs b/devblog/devblog/client/src/components/comment_edit.rs index 45b0d488..16c7e1ac 100644 --- 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! {
if !props.is_editing { - + + + } if props.is_editing { diff --git a/devblog/devblog/client/src/components/pager.rs b/devblog/devblog/client/src/components/pager.rs index f16e08f6..dfd13c0c 100644 --- 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 {
// PAGE LEFT if props.page_num > 1 { - {"back"} + } + // {props.page_num} + // PAGE RIGHT if props.page_num < props.total_pages { - {"next"} + }
diff --git a/devblog/devblog/client/src/components/post_delete.rs b/devblog/devblog/client/src/components/post_delete.rs index f986befe..1629d6b2 100644 --- 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 { - + + + } } diff --git a/devblog/devblog/client/src/components/styles/comment.css b/devblog/devblog/client/src/components/styles/comment.css index e6afb1fe..fbb2a877 100644 --- 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 index ee10c166..412b90a3 100644 --- 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; } \ No newline at end of file diff --git a/devblog/devblog/client/src/components/styles/commentEdit.css b/devblog/devblog/client/src/components/styles/commentEdit.css index 900ef388..be114c19 100644 --- 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 index 2b8b430c..d83a74f7 100644 --- 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 index e02a956f..b00ba145 100644 --- 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; } \ No newline at end of file diff --git a/devblog/devblog/client/src/components/styles/vote.css b/devblog/devblog/client/src/components/styles/vote.css index bca24ca3..0c8ea6be 100644 --- 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 index 82bc1c61..1fcc38af 100644 --- 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! {
- {"Up"}{props.up_votes} - {"Down"}{props.down_votes} + + {props.up_votes} + + + {props.down_votes}
} diff --git a/devblog/devblog/client/src/helpers.rs b/devblog/devblog/client/src/helpers.rs index 20a8669c..7a975524 100644 --- 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 new file mode 100644 index 00000000..9d28125b --- /dev/null +++ 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! {} +} + +#[function_component(DownVoteIcon)] +pub fn downvote() -> Html { + html! {} +} + +#[function_component(TrashIcon)] +pub fn trash() -> Html { + html! { + + + + + } +} + +#[function_component(EditIcon)] +pub fn edit() -> Html { + html! { + + + + + + + + + + } +} + +#[function_component(ArrowRight)] +pub fn arrow_right() -> Html { + html! {} +} + +#[function_component(ArrowLeft)] +pub fn arrow_left() -> Html { + html! {} +} diff --git a/devblog/devblog/client/src/icons/mod.rs b/devblog/devblog/client/src/icons/mod.rs new file mode 100644 index 00000000..b8ebe8ab --- /dev/null +++ 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 index fe797977..5b00b2fa 100644 --- 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 index 2f898a00..3bdf2522 100644 --- 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; diff --git a/devblog/devblog/client/src/pages/insights.rs b/devblog/devblog/client/src/pages/insights.rs index efd2a0a3..0d00698e 100644 --- a/devblog/devblog/client/src/pages/insights.rs +++ b/devblog/devblog/client/src/pages/insights.rs @@ -1,9 +1,10 @@ use crate::{ helpers::{self, CustomCallback}, + icons::icons::TrashIcon, store::Store, Api, User, }; -use gloo_net::http::{Headers, Method}; +use gloo_net::http::Method; use std::{ops::Deref, rc::Rc}; use stylist::Style; use yew::prelude::*; @@ -22,10 +23,7 @@ pub fn insights() -> Html { let token = store.token.clone(); use_effect_with((), move |_| { 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::GetUsers.fetch(Some(hdrs), None, Method::GET).await; helpers::emit(&users_cb, res.unwrap()).await; }); @@ -69,7 +67,7 @@ pub fn insights() -> Html { {&user.username} {&user.email} {if user.subscribed {"yes"} else {"no"}} - + } })} diff --git a/devblog/devblog/client/src/pages/post_add.rs b/devblog/devblog/client/src/pages/post_add.rs index fd0a7a5c..83c9bf10 100644 --- a/devblog/devblog/client/src/pages/post_add.rs +++ b/devblog/devblog/client/src/pages/post_add.rs @@ -1,11 +1,10 @@ use std::{fs::File, ops::Deref}; -use crate::{store::Store, Api}; -use gloo::console::log; -use gloo_net::http::{Headers, Method}; +use crate::{helpers, store::Store, Api}; +use gloo_net::http::Method; // use gloo::file::File; use stylist::{css, Style}; -use web_sys::{HtmlElement, HtmlTextAreaElement}; +use web_sys::HtmlTextAreaElement; use yew::prelude::*; use yewdux::use_store_value; @@ -36,17 +35,14 @@ pub fn add_post() -> Html { }); let onsubmit = { - let store = store.clone(); + let token = store.token.clone(); let discord = *discord.clone(); let mastodon = *mastodon.clone(); let devblog = *devblog.clone(); Callback::from(move |e: SubmitEvent| { e.prevent_default(); loading.set(true); - 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(&token); wasm_bindgen_futures::spawn_local(async move { let response = Api::AddPost.fetch(Some(hdrs), None, Method::POST).await; @@ -88,8 +84,8 @@ pub fn add_post() -> Html { }; let update_checkbox = { - Callback::from(move |e: ChangeData| { - let input = e.target_dyn_into::().unwrap(); + Callback::from(move |e| { + // let input = e.target_dyn_into::().unwrap(); }) }; diff --git a/devblog/devblog/client/src/pages/posts.rs b/devblog/devblog/client/src/pages/posts.rs index 5baf38b2..4c9cd45d 100644 --- a/devblog/devblog/client/src/pages/posts.rs +++ b/devblog/devblog/client/src/pages/posts.rs @@ -82,7 +82,7 @@ pub fn posts() -> Html { if store.admin { - to={Route::AddPost}>{"Create Post"}> + to={Route::AddPost}>{"Create Post"}> } // ALL POSTS diff --git a/devblog/devblog/client/src/pages/styles/home.css b/devblog/devblog/client/src/pages/styles/home.css index 085f9885..3da31a12 100644 --- a/devblog/devblog/client/src/pages/styles/home.css +++ b/devblog/devblog/client/src/pages/styles/home.css @@ -1,4 +1,4 @@ -.home { +section:root { align-items: center; display: flex; flex-direction: column; diff --git a/devblog/devblog/client/src/pages/styles/insights.css b/devblog/devblog/client/src/pages/styles/insights.css index f3addff2..b3ef7d21 100644 --- a/devblog/devblog/client/src/pages/styles/insights.css +++ b/devblog/devblog/client/src/pages/styles/insights.css @@ -18,4 +18,14 @@ .insights>table>tbody tr:nth-child(odd) { background-color: rgb(26, 32, 41); + +} + +.insights svg { + height: 10; +} + +.insights svg:hover { + cursor: pointer; + fill: red; } \ No newline at end of file diff --git a/devblog/devblog/client/src/theme.css b/devblog/devblog/client/src/theme.css index 37758bdf..78cf269d 100644 --- a/devblog/devblog/client/src/theme.css +++ b/devblog/devblog/client/src/theme.css @@ -29,6 +29,10 @@ button { color: white; } +svg { + fill: white; +} + button, .signup-prompt { text-decoration: none;