bug: Fix UI x-axis display (PROJQUAY-7467) (quay#3066)

* bug: Fix UI x-axis display (PROJQUAY-7467)
Several fixes were made:

- We weren't properly displaying the `x` axis. This change increases the border padding to properly display the axis at the bottom.
- We weren't properly setting the legend font colors which made it impossible to see it when dark mode was turned on. We now properly apply them.
- If loaded logs were empty, the graph would not render properly. We check if any data should be rendered, if not, we display a message instead of rendering the graph.

* bug: Correct padding on graph rendering (PROJQUAY-7467)
The previous changes were not sufficient when only one action was recorded. We now set fixed padding on the bottom to `50px` instead of dynamically allocating it to resolve the problem.

web/src/routes/UsageLogs/UsageLogsGraph.tsx

@@ -118,7 +118,7 @@ export default function UsageLogsGraph(props: UsageLogsGraphProps) {
             }
             name="usage-logs-graph"
             padding={{
-              bottom: 20 * getLegendData().length,
+              bottom: 50,
               left: 80,
               right: 500, // Adjusted to accommodate legend
               top: 50,