Skip to content

Commit

Permalink
svg's as assets instead of in html macros
Browse files Browse the repository at this point in the history
  • Loading branch information
@wyatt-avilla
wyatt-avilla committed Jun 21, 2024
1 parent 4ac468f commit cd7c4a0
Show file tree
Hide file tree
Showing 15 changed files with 74 additions and 99 deletions.
3 changes: 3 additions & 0 deletions frontend/src/components/assets/cake.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/components/assets/clock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions frontend/src/components/assets/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/components/assets/goodreads.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/components/assets/lastfm.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions frontend/src/components/assets/letterboxd.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions frontend/src/components/assets/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions frontend/src/components/assets/repo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 1 addition & 15 deletions frontend/src/components/github/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,14 @@ use yew::prelude::*;

#[styled_component]
pub fn Button() -> Html {
let icon_svg = html! {
<svg width="60px" height="60px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#fff">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">

</path>
</g>
</g>
</g>
</svg>
};

html! {
<a href={ SOCIAL.github } class={css!(r#"
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
"#)}>
{ icon_svg.clone() }
<img src="/assets/github.svg" alt="Github Icon" />
</a>
}
}
9 changes: 1 addition & 8 deletions frontend/src/components/github/row.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,6 @@ pub fn Row(props: &Commit) -> Html {
repository_link,
} = props;

let repo_svg = html! {
<svg fill="#89929b" width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 015.75 0h14.5a.75.75 0 01.75.75v20.5a.75.75 0 01-.75.75h-6a.75.75 0 010-1.5h5.25v-4H6A1.5 1.5 0 004.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 01-.6 1.374A3.25 3.25 0 013 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z"/>
<path d="M7 18.25a.25.25 0 01.25-.25h5a.25.25 0 01.25.25v5.01a.25.25 0 01-.397.201l-2.206-1.604a.25.25 0 00-.294 0L7.397 23.46a.25.25 0 01-.397-.2v-5.01z"/>
</svg>
};

html! {
<div class={css!(r#"
width: 100%;
Expand Down Expand Up @@ -58,7 +51,7 @@ pub fn Row(props: &Commit) -> Html {
"#)}>
{ repository_name }
</a>
{ repo_svg.clone() }
<img src="/assets/repo.svg" alt="Repo Icon" />
</div>
</div>
</div>
Expand Down
8 changes: 1 addition & 7 deletions frontend/src/components/goodreads/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,14 @@ use yew::prelude::*;

#[styled_component]
pub fn Button() -> Html {
let icon_svg = html! {
<svg fill="#382110" width="60px" height="60px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg">
<path d="M19.525 15.977V.49h-2.059v2.906h-.064c-.211-.455-.481-.891-.842-1.307-.36-.412-.767-.777-1.232-1.094-.466-.314-.962-.561-1.519-.736C13.256.09 12.669 0 12.038 0c-1.21 0-2.3.225-3.246.67-.947.447-1.743 1.057-2.385 1.83-.642.773-1.133 1.676-1.47 2.711-.336 1.037-.506 2.129-.506 3.283 0 1.199.141 2.326.425 3.382.286 1.057.737 1.976 1.368 2.762.631.78 1.412 1.397 2.375 1.833.961.436 2.119.661 3.471.661 1.248 0 2.33-.315 3.262-.946s1.638-1.473 2.119-2.525h.061v2.284c0 2.044-.421 3.607-1.264 4.705-.84 1.081-2.224 1.638-4.146 1.638-.572 0-1.128-.061-1.669-.181-.542-.12-1.036-.315-1.487-.57-.437-.271-.827-.601-1.143-1.038-.316-.435-.526-.961-.632-1.593H5.064c.067.887.315 1.654.737 2.3.424.646.961 1.172 1.602 1.593.641.406 1.367.706 2.172.902.811.194 1.639.3 2.494.3 1.383 0 2.541-.195 3.486-.555.947-.376 1.714-.902 2.301-1.608.601-.708 1.021-1.549 1.293-2.556.27-1.007.42-2.134.42-3.367l-.044.062zm-7.484-.557c-.955 0-1.784-.189-2.479-.571-.697-.38-1.277-.882-1.732-1.503-.467-.621-.797-1.332-1.022-2.139s-.332-1.633-.332-2.484c0-.871.105-1.725.301-2.563.21-.84.54-1.587.992-2.24.451-.652 1.037-1.182 1.728-1.584s1.533-.605 2.51-.605 1.803.209 2.495.621c.676.415 1.247.959 1.683 1.634.436.677.751 1.429.947 2.255.195.826.285 1.656.285 2.482 0 .852-.12 1.678-.345 2.484-.226.807-.572 1.518-1.038 2.139-.465.621-1.021 1.123-1.698 1.503-.676.382-1.458.571-2.359.571h.064z"/>
</svg>
};

html! {
<a href={ SOCIAL.goodreads } class={css!(r#"
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
"#)}>
{ icon_svg.clone() }
<img src="/assets/goodreads.svg" alt="Goodreads Icon" />
</a>
}
}
8 changes: 1 addition & 7 deletions frontend/src/components/lastfm/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,14 @@ use yew::prelude::*;

#[styled_component]
pub fn Button() -> Html {
let icon_svg = html! {
<svg fill="#BA0000" width="60px" height="60px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M14.131 22.948l-1.172-3.193c0 0-1.912 2.131-4.771 2.131-2.537 0-4.333-2.203-4.333-5.729 0-4.511 2.276-6.125 4.515-6.125 3.224 0 4.245 2.089 5.125 4.772l1.161 3.667c1.161 3.561 3.365 6.421 9.713 6.421 4.548 0 7.631-1.391 7.631-5.068 0-2.968-1.697-4.511-4.844-5.244l-2.344-0.511c-1.624-0.371-2.104-1.032-2.104-2.131 0-1.249 0.985-1.984 2.604-1.984 1.767 0 2.704 0.661 2.865 2.24l3.661-0.444c-0.297-3.301-2.584-4.656-6.323-4.656-3.308 0-6.532 1.251-6.532 5.245 0 2.5 1.204 4.077 4.245 4.807l2.484 0.589c1.865 0.443 2.484 1.224 2.484 2.287 0 1.359-1.323 1.921-3.828 1.921-3.703 0-5.244-1.943-6.124-4.625l-1.204-3.667c-1.541-4.765-4.005-6.531-8.891-6.531-5.287-0.016-8.151 3.385-8.151 9.192 0 5.573 2.864 8.595 8.005 8.595 4.14 0 6.125-1.943 6.125-1.943z"/>
</svg>
};

html! {
<a href={ SOCIAL.lastfm } class={css!(r#"
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
"#)}>
{ icon_svg.clone() }
<img src="/assets/lastfm.svg" alt="Lastfm Icon" />
</a>
}
}
15 changes: 1 addition & 14 deletions frontend/src/components/lastfm/row.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,6 @@ pub fn Row(props: &Song) -> Html {
url,
} = props;

let play_svg = html! {
<svg width="16px" height="16px" viewBox="-1 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-65.000000, -3803.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M18.074,3650.7335 L12.308,3654.6315 C10.903,3655.5815 9,3654.5835 9,3652.8985 L9,3645.1015 C9,3643.4155 10.903,3642.4185 12.308,3643.3685 L18.074,3647.2665 C19.306,3648.0995 19.306,3649.9005 18.074,3650.7335" id="play-[#1000]">
</path>
</g>
</g>
</g>
</svg>
};

html! {
<div class={css!(r#"
width: 100%;
Expand Down Expand Up @@ -74,7 +61,7 @@ pub fn Row(props: &Song) -> Html {
display: flex;
align-items: center;
"#)}>
{ play_svg.clone() }
<img src="/assets/play.svg" alt="Play Button Icon" />
</a>
</div>
</div>
Expand Down
35 changes: 1 addition & 34 deletions frontend/src/components/letterboxd/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,14 @@ use yew::prelude::*;

#[styled_component]
pub fn Button() -> Html {
let icon_svg = html! {
<svg width="60px" height="60px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="path-1" x="0" y="0" width="129.847328" height="141.389313"></rect>
<rect id="path-3" x="0" y="0" width="129.847328" height="141.389313"></rect>
</defs>
<g id="letterboxd-decal-dots-neg-rgb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Circle" fill="#202830" cx="250" cy="250" r="250"></circle>
<g id="dots-pos" transform="translate(61.000000, 180.000000)">
<g id="Dots">
<ellipse id="Green" fill="#00E054" cx="189" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
<g id="Blue" transform="translate(248.152672, 0.000000)">
<mask id="mask-2" fill="white">
<use href="#path-1"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="#40BCF4" mask="url(#mask-2)" cx="59.7686766" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
</g>
<g id="Orange">
<mask id="mask-4" fill="white">
<use href="#path-3"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="#FF8000" mask="url(#mask-4)" cx="70.0786517" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
</g>
<path d="M129.539326,107.022244 C122.810493,96.2781677 118.921348,83.5792213 118.921348,69.9732824 C118.921348,56.3673435 122.810493,43.6683972 129.539326,32.9243209 C136.268159,43.6683972 140.157303,56.3673435 140.157303,69.9732824 C140.157303,83.5792213 136.268159,96.2781677 129.539326,107.022244 Z" id="Overlap" fill="#556677"></path>
<path d="M248.460674,32.9243209 C255.189507,43.6683972 259.078652,56.3673435 259.078652,69.9732824 C259.078652,83.5792213 255.189507,96.2781677 248.460674,107.022244 C241.731841,96.2781677 237.842697,83.5792213 237.842697,69.9732824 C237.842697,56.3673435 241.731841,43.6683972 248.460674,32.9243209 Z" id="Overlap" fill="#556677"></path>
</g>
</g>
</g>
</svg>
};

html! {
<a href={ SOCIAL.letterboxd } class={css!(r#"
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
"#)}>
{ icon_svg.clone() }
<img src="/assets/letterboxd.svg" alt="Letterboxd Icon" />
</a>
}
}
Loading

0 comments on commit cd7c4a0

Please sign in to comment.