diff --git a/src/components/SummaryIcon.tsx b/src/components/SummaryIcon.tsx index 514c8ae..c36096a 100644 --- a/src/components/SummaryIcon.tsx +++ b/src/components/SummaryIcon.tsx @@ -9,7 +9,6 @@ import icon_visual from "../assets/icon-visual.svg"; * Another hilariously overengineered solution. Just how I like them. */ export default function Icon(props: { source: string }): JSX.Element { - console.log(props.source); let icon: string; let paths: string[] = props.source.split("/"); let target: string = paths[2].slice( diff --git a/src/components/SummaryProgessbars.tsx b/src/components/SummaryProgessbars.tsx index e35ae8e..d42db0b 100644 --- a/src/components/SummaryProgessbars.tsx +++ b/src/components/SummaryProgessbars.tsx @@ -10,16 +10,29 @@ type ProgressbarProps = { i: number; }; -const Graph = styled.div<{ $color: string }>` +const Graph = styled.div<{ $color: string; $value: number }>` display: flex; + position: relative; gap: 0.1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; margin-block: 1rem; - background-color: ${(props) => changeAlpha(props.$color, 5)}; + background-color: ${(props) => changeAlpha(props.$color, 3)}; + &::before { + content: ""; + background-color: ${(props) => changeAlpha(props.$color, 10)}; + height: 100%; + width: ${(props) => props.$value}%; + position: absolute; + top: 0; + left: 0; + z-index: 0; + border-radius: inherit; + } > div { display: flex; + z-index: 1; } .category { flex-grow: 1; @@ -58,7 +71,7 @@ export default function Progressbar({ let color: string = getBarColor(i); return ( - +
{category} diff --git a/src/index.css b/src/index.css index f023a7d..f587144 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap"); -* { +*, +*::before, +*::after { box-sizing: border-box; margin: 0; padding: 0; @@ -11,6 +13,7 @@ line-height: 1.5; font-size: 18px; font-weight: 500; + -webkit-user-select: none; user-select: none; font-synthesis: none;