change font to inter, scale down fonts, improve rounding/filter elements

resources/js/Components/Common/Reporting/ReportingChart.vue

@@ -127,7 +127,7 @@ const option = computed(() => ({
             fontWeight: 600,
             color: labelColor.value,
             margin: 16,
-            fontFamily: 'Outfit, sans-serif',
+            fontFamily: 'Inter, sans-serif',
         },
         axisTick: {
             lineStyle: {
@@ -139,7 +139,7 @@ const option = computed(() => ({
         type: 'value',
         axisLabel: {
             color: labelColor.value,
-            fontFamily: 'Outfit, sans-serif',
+            fontFamily: 'Inter, sans-serif',
         },
         splitLine: {
             lineStyle: {

resources/js/Components/Common/Reporting/ReportingFilterBadge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Badge from '@/packages/ui/src/Badge.vue';
+import { Button } from '@/Components/ui/button';
 
 const props = defineProps<{
     icon: Component;
@@ -12,32 +12,39 @@ import { twMerge } from 'tailwind-merge';
 
 const activeClass = computed(() => {
     if (props.active) {
-        return 'border-accent-300/50 bg-accent-300/10 hover:bg-accent-300/20';
+        return 'border-accent-300/50 bg-accent-50 hover:bg-accent-100 dark:border-accent-300/50 dark:bg-accent-300/5 dark:hover:bg-accent-300/10';
     }
     return '';
 });
+
+const iconClass = computed(() => {
+    return twMerge(
+        '-ml-0.5 h-4 w-4',
+        props.active ? 'dark:text-accent-300/80 text-accent-400/80' : 'text-text-quaternary'
+    );
+});
 </script>
 
 <template>
-    <Badge
-        size="large"
-        tag="button"
+    <Button
+        variant="outline"
+        size="sm"
         :class="
             twMerge(
-                'cursor-pointer bg-input-background hover:bg-card-background transition flex',
                 activeClass
             )
         ">
         <component
             :is="icon"
-            class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
+            :class="iconClass"
+        ></component>
         <span class="text-nowrap"> {{ title }} </span>
         <div
             v-if="count"
             class="bg-accent-300/20 w-5 h-5 font-medium rounded flex items-center transition justify-center">
             {{ count }}
         </div>
-    </Badge>
+    </Button>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -319,7 +319,7 @@ const tableData = computed(() => {
     <div class="py-2.5 w-full border-b border-default-background-separator">
         <MainContainer class="sm:flex space-y-4 sm:space-y-0 justify-between">
             <div
-                class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
+                class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-3">
                 <div class="text-sm font-medium">Filters</div>
                 <MemberMultiselectDropdown
                     v-model="selectedMembers"

resources/js/Components/Common/Reporting/ReportingRoundingControls.vue

@@ -19,6 +19,7 @@ import {
 } from '@/Components/ui/number-field';
 import { ArrowsUpDownIcon } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
+import { twMerge } from 'tailwind-merge';
 // TimeEntryRoundingType definition
 const TimeEntryRoundingType = {
     Up: 'up' as const,
@@ -120,6 +121,21 @@ watch(() => props.minutes, (newMinutes) => {
 watch(currentInterval, () => {
     initializeSelectedInterval();
 });
+
+// Active styling similar to ReportingFilterBadge
+const activeClass = computed(() => {
+    if (props.enabled) {
+        return 'border-accent-300/50 bg-accent-50 hover:bg-accent-100 dark:border-accent-300/50 dark:bg-accent-300/5 dark:hover:bg-accent-300/10';
+    }
+    return '';
+});
+
+const iconClass = computed(() => {
+    return twMerge(
+        'w-4 h-4',
+        props.enabled ? 'dark:text-accent-300/80 text-accent-400/80' : 'text-muted-foreground opacity-50'
+    );
+});
 </script>
 
 <template>
@@ -128,14 +144,15 @@ watch(currentInterval, () => {
             <Button 
                 variant="outline" 
                 size="sm"
-                class="text-sm">
-                <ArrowsUpDownIcon class="w-4 h-4" :class="enabled ? 'text-primary' : 'text-muted-foreground opacity-50'" />
+                :class="twMerge(activeClass)">
+                <ArrowsUpDownIcon :class="iconClass" />
                 Rounding {{ enabled ? 'on' : 'off' }}
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-72 p-4">
             <div class="space-y-4">
-                <div class="flex items-center justify-between">
+                <div>
+                    <div class="flex items-center justify-between">
                     <InputLabel for="enable-rounding" value="Enable Rounding" />
                     <Switch 
                         id="enable-rounding"
@@ -143,7 +160,12 @@ watch(currentInterval, () => {
                         class="data-[state=checked]:bg-accent-500"
                         @update:model-value="updateEnabled" />
                 </div>
-                
+                <div class="mb-3 pb-2 pt-1 text-xs text-muted-foreground border-b border-border-secondary text-text-tertiary">
+                Rounding is applied to each individual time entry, not to the accumulated total.
+                </div>
+
+                </div>
+
                 <div>
                     <InputLabel for="rounding-type" value="Rounding Type" class="mb-2" />
                     <Select