From e05cff8f7f0b542e6ab6f94b61f4d9dd7dae0fd3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 16 Sep 2024 19:12:10 +0200
Subject: [PATCH] fix: last minute fixes

---
 .../components/progressbar/ProgressBar.svelte |  87 ++++++++++----
 .../components/progressbar/_progressbar.scss  | 111 ------------------
 src/lib/components/progressbar/index.ts       |   4 +-
 .../usage/[[invoice]]/+page.svelte            |   2 +-
 .../settings/usage/[[invoice]]/+page.svelte   |   2 +-
 5 files changed, 69 insertions(+), 137 deletions(-)
 delete mode 100644 src/lib/components/progressbar/_progressbar.scss

diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 2d6ea3ede..575c782c0 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
     import type { ProgressbarData, ProgressbarProps } from '$lib/components';
 
     type $$Props = ProgressbarProps;
@@ -8,42 +9,84 @@
      */
     export let maxSize: $$Props['maxSize'];
 
+    /**
+     * The data for the progressbar
+     */
+    export let data: $$Props['data'];
+
     /**
      * The remaining value of the progressbar
      */
-    let remainder = $$props.data.reduce(
-        (sum: number, item: ProgressbarData) => sum - item.size,
-        maxSize
-    );
+    $: remainder = data.reduce((sum: number, item: ProgressbarData) => sum - item.size, maxSize);
 </script>
 
 <section class="progressbar__container">
     {#each $$props.data as item}
         <div
             class="progressbar__content"
-            style="background-color:{item.color}; width: {(item.size / maxSize) * 100}%;">
-            {#if item.tooltip}
-                <div
-                    class="progressbar__content-tooltip"
-                    class:progressbar__content-tooltip--has-link={item.tooltip.linkPath &&
-                        item.tooltip.linkTitle}>
-                    <div>
-                        <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
-                        <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
-                    </div>
-                    {#if item.tooltip.linkPath && item.tooltip.linkTitle}
-                        <a href={item.tooltip.linkPath}>{item.tooltip.linkTitle}</a>
-                    {/if}
-                </div>
-            {/if}
+            style:background-color={item.color}
+            style:width={`${(item.size / maxSize) * 100}%`}
+            use:tooltip={{
+                disabled: !item.tooltip,
+                allowHTML: true,
+                content: `<span class="u-bold">${item.tooltip.title}</span> ${item.tooltip.label}`
+            }}>
         </div>
     {/each}
     {#if remainder > 0}
-        <div class="progressbar__content" style="width: {(remainder / maxSize) * 100}%;" />
+        <div class="progressbar__content" style:width={`${(remainder / maxSize) * 100}%`} />
     {/if}
 </section>
 
 <style lang="scss">
-    @use './progressbar';
-    @include progressbar.base;
+    :root {
+        --progressbar-border-radius: 0.25rem;
+        --progressbar-tooltip-label-color: #818186;
+        --progressbar-tooltip-link-color: #6c6c71;
+    }
+
+    :global(.theme-dark) {
+        --progressbar-background-color: var(--neutral-800, #2d2d31);
+        --progressbar-tooltip-background-color: var(--neutral-800, #2d2d31);
+        --progressbar-tooltip-border-color: var(--neutral-80, #424248);
+    }
+    :global(.theme-light) {
+        --progressbar-background-color: var(--neutral-40, #f4f4f7);
+        --progressbar-tooltip-background-color: #ffffff;
+        --progressbar-tooltip-border-color: #ededf0;
+    }
+
+    .progressbar {
+        &__container {
+            height: 0.5rem;
+            background-color: var(--progressbar-background-color);
+            border-radius: var(--progressbar-border-radius);
+            display: flex;
+            flex-direction: row;
+            gap: 2px;
+        }
+
+        &__content {
+            height: 100%;
+            min-width: 4px;
+            display: flex;
+            justify-content: center;
+
+            &::before {
+                content: '';
+                height: 2.5rem;
+                margin-top: -1.25rem;
+                width: 100%;
+            }
+
+            &:first-child {
+                border-top-left-radius: var(--progressbar-border-radius);
+                border-bottom-left-radius: var(--progressbar-border-radius);
+            }
+            &:last-child {
+                border-top-right-radius: var(--progressbar-border-radius);
+                border-bottom-right-radius: var(--progressbar-border-radius);
+            }
+        }
+    }
 </style>
diff --git a/src/lib/components/progressbar/_progressbar.scss b/src/lib/components/progressbar/_progressbar.scss
deleted file mode 100644
index 04863c790..000000000
--- a/src/lib/components/progressbar/_progressbar.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@mixin base {
-    :root {
-        --progressbar-border-radius: 0.25rem;
-        --progressbar-tooltip-label-color: #818186;
-        --progressbar-tooltip-link-color: #6c6c71;
-    }
-
-    :global(.theme-dark) {
-        --progressbar-background-color: var(--neutral-800, #2d2d31);
-        --progressbar-tooltip-background-color: var(--neutral-800, #2d2d31);
-        --progressbar-tooltip-border-color: var(--neutral-80, #424248);
-    }
-    :global(.theme-light) {
-        --progressbar-background-color: var(--neutral-40, #f4f4f7);
-        --progressbar-tooltip-background-color: #ffffff;
-        --progressbar-tooltip-border-color: #ededf0;
-    }
-
-    .progressbar {
-        &__container {
-            height: 0.5rem;
-            background-color: var(--progressbar-background-color);
-            border-radius: var(--progressbar-border-radius);
-            display: flex;
-            flex-direction: row;
-            gap: 2px;
-        }
-
-        &__content {
-            height: 100%;
-            display: flex;
-            justify-content: center;
-
-            &::before {
-                content: '';
-                height: 2.5rem;
-                margin-top: -1.25rem;
-                width: 100%;
-            }
-
-            &:first-child {
-                border-top-left-radius: var(--progressbar-border-radius);
-                border-bottom-left-radius: var(--progressbar-border-radius);
-            }
-            &:last-child {
-                border-top-right-radius: var(--progressbar-border-radius);
-                border-bottom-right-radius: var(--progressbar-border-radius);
-            }
-
-            &-tooltip {
-                display: none;
-                position: absolute;
-                background-color: var(--progressbar-tooltip-background-color);
-                padding: 0.75rem;
-                margin-top: -3.75rem;
-                border: 1px solid var(--progressbar-tooltip-border-color);
-                border-radius: 0.5rem;
-                flex-direction: column;
-                gap: 0.25rem;
-
-                &--has-link {
-                    margin-top: -5.25rem;
-                }
-
-                &::before,
-                &::after {
-                    top: 100%;
-                    left: 50%;
-                    border: solid transparent;
-                    content: '';
-                    height: 0;
-                    width: 0;
-                    position: absolute;
-                    pointer-events: none;
-                }
-                &::after {
-                    border-top-color: var(--progressbar-tooltip-background-color);
-                    border-width: 10px;
-                    margin-left: -10px;
-                }
-                &::before {
-                    border-top-color: var(--progressbar-tooltip-border-color);
-                    border-width: 11px;
-                    margin-left: -11px;
-                }
-                &:hover {
-                    display: flex;
-                }
-
-                &-title {
-                    font-weight: 600;
-                    margin-right: 0.5rem;
-                }
-                &-label {
-                    color: var(--progressbar-tooltip-label-color);
-                }
-
-                a {
-                    color: var(--progressbar-tooltip-link-color);
-                    text-decoration: underline;
-                }
-            }
-
-            &:hover {
-                .progressbar__content-tooltip {
-                    display: flex;
-                }
-            }
-        }
-    }
-}
diff --git a/src/lib/components/progressbar/index.ts b/src/lib/components/progressbar/index.ts
index a7ec1ba01..48c2711b8 100644
--- a/src/lib/components/progressbar/index.ts
+++ b/src/lib/components/progressbar/index.ts
@@ -4,8 +4,8 @@ export type ProgressbarData = {
     tooltip?: {
         title: string;
         label: string;
-        linkTitle?: string;
-        linkPath?: string;
+        // linkTitle?: string;
+        // linkPath?: string;
     };
 };
 
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 769987f32..8a220599e 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -287,7 +287,7 @@
                         size: bytesToSize(data.organizationUsage.filesStorageTotal, 'GB'),
                         color: '#85DBD8',
                         tooltip: {
-                            title: 'File storage total',
+                            title: 'File storage',
                             label: `${Math.round(bytesToSize(data.organizationUsage.filesStorageTotal, 'GB') * 100) / 100}GB`
                         }
                     },
diff --git a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index 76b7f6df5..828c5d019 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -279,7 +279,7 @@
                         size: bytesToSize(data.usage.filesStorageTotal, 'MB'),
                         color: '#85DBD8',
                         tooltip: {
-                            title: 'File storage total',
+                            title: 'File storage',
                             label: `${Math.round(bytesToSize(data.usage.filesStorageTotal, 'MB') * 100) / 100}MB`
                         }
                     },