diff --git a/devblog/devblog/ClientApp/src/components/styles/Comment.css b/devblog/devblog/ClientApp/src/components/styles/Comment.css index e6afb1f..fbb2a87 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 ea4beeb..78a75df 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 095b773..cdaf328 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 53f4c71..5cf4ced 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 45b0d48..16c7e1a 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 f16e08f..dfd13c0 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 f986bef..1629d6b 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 e6afb1f..fbb2a87 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 ee10c16..412b90a 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 900ef38..be114c1 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 2b8b430..d83a74f 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 e02a956..b00ba14 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 bca24ca..0c8ea6b 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 82bc1c6..1fcc38a 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 20a8669..7a97552 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 0000000..9d28125 --- /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 0000000..b8ebe8a --- /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 fe79797..5b00b2f 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 2f898a0..3bdf252 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 efd2a0a..0d00698 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 fd0a7a5..83c9bf1 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 5baf38b..4c9cd45 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 085f988..3da31a1 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 f3addff..b3ef7d2 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 37758bd..78cf269 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;