feat(ui): basic dark mode, better day overview chart

src/pages/dm/dm-messages-per-date.tsx

@@ -21,6 +21,8 @@ export const DmMessagesPerDate: Component<{
             label: "Total",
             data: currentDmMessagesValues.map((row) => row.totalMessages),
             borderWidth: 2,
+            pointRadius: 0,
+            pointHitRadius: 6,
           },
           ...currentRecipients.map((recipient) => {
             return {
@@ -28,6 +30,8 @@ export const DmMessagesPerDate: Component<{
               label: recipient.name.toString(),
               data: currentDmMessagesValues.map((date) => date[recipient.recipientId]),
               borderWidth: 2,
+              pointRadius: 0,
+              pointHitRadius: 6,
             };
           }),
         ],
@@ -41,7 +45,7 @@ export const DmMessagesPerDate: Component<{
         <LineChart
           options={{
             normalized: true,
-            aspectRatio: 3,
+            responsive: true,
             plugins: {
               zoom: {
                 pan: {
@@ -61,6 +65,7 @@ export const DmMessagesPerDate: Component<{
             },
           }}
           data={currentDateChartData()}
+          class="max-h-96"
         />
       )}
     </Show>

src/pages/dm/dm-overview.tsx

@@ -23,7 +23,7 @@ export const DmOverview: Component<{
   };
 
   return (
-    <Grid cols={1} colsMd={2} class="my-12 min-w-[35rem] gap-y-8 text-sm">
+    <Grid cols={1} colsMd={2} class="my-12 w-full gap-y-8 text-sm md:min-w-[35rem]">
       <Flex flexDirection="row" justifyContent="evenly" class="bg-amber-200 p-2 text-amber-900">
         <Flex alignItems="center" justifyContent="center" class="min-w-16">
           <CalendarArrowDown class="h-8 w-8" />

src/pages/home.tsx

@@ -122,16 +122,16 @@ export const Home: Component<RouteSectionProps> = () => {
         </Flex>
       </Portal>
       <Title>Signal stats</Title>
-      <form class="flex flex-col gap-y-8 p-8" onSubmit={onSubmit}>
+      <form class="mx-auto flex w-full flex-col gap-y-8 p-8 md:w-fit" onSubmit={onSubmit}>
         <TextField onChange={(value) => setPassphrase(value)}>
           <TextFieldLabel>Passphrase</TextFieldLabel>
-          <TextFieldInput type="password" class="max-w-md" />
+          <TextFieldInput type="password" class="w-full md:w-sm" />
         </TextField>
         <Flex
           ref={dropzone.setRef}
           justifyContent="center"
           alignItems="center"
-          class="relative min-h-32 min-w-96 max-w-xl rounded-lg border-4 border-border border-dashed"
+          class="relative min-h-40 w-full rounded-lg border-4 border-border border-dashed md:w-xl"
           classList={{
             "border-ring": dropzone.isDragging(),
           }}
@@ -154,7 +154,7 @@ export const Home: Component<RouteSectionProps> = () => {
             {backupFile() ? backupFile()?.name : "or drop the file here"}
           </span>
         </Flex>
-        <Button type="submit" class="max-w-72">
+        <Button type="submit" class="max-w-72 self-end md:w-sm">
           Decrypt and load backup
         </Button>
       </form>