Dark mode and responsive fixes

Author: sanne-san

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file.
 - "Top referrers" and "Search terms" breakdowns are rendered side by side with other "Sources" tabs instead of replacing them
 - Improved top bar and top stats UI/styling
 - Moved graph interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar
+- Standardised and improved segment and filter modals styling
 
 ### Fixed
 

assets/js/dashboard/components/modal-layout.tsx

@@ -21,7 +21,7 @@ export function ModalLayout({
       allowScroll={allowScroll}
       onClose={onClose}
     >
-      <div className="flex flex-col gap-6 py-2">
+      <div className="flex flex-col gap-6 p-1 md:py-2 md:px-0">
         <div className="flex items-center justify-between gap-3">
           <h1 className="text-base font-bold leading-tight dark:text-gray-100">
             {title}

assets/js/dashboard/segments/segment-modals.tsx

@@ -27,7 +27,7 @@ import { Role, UserContextValue, useUserContext } from '../user-context'
 import { useSiteContext } from '../site-context'
 import { Button, buttonClassName } from '../components/button'
 
-const inModalPillClassName = '!shadow-none !bg-gray-100'
+const inModalPillClassName = '!shadow-none !bg-gray-100 dark:!bg-gray-750'
 
 const inModalSectionLabelClassName = 'text-sm font-semibold dark:text-gray-100'
 

assets/js/dashboard/stats/modals/filter-modal-group.js

@@ -39,7 +39,7 @@ export default function FilterModalGroup({
     <>
       <div>
         {showTitle && (
-          <div className="text-sm font-medium">
+          <div className="text-sm font-medium text-gray-800 dark:text-gray-200">
             {formattedFilters[filterGroup]}
           </div>
         )}

lib/plausible_web/components/generic.ex

@@ -44,7 +44,8 @@ defmodule PlausibleWeb.Components.Generic do
       "border border-gray-300 dark:border-gray-800 text-red-600 bg-white dark:bg-gray-800 hover:text-red-700 dark:hover:text-red-400 dark:text-red-500 active:text-red-800 disabled:text-red-700/40 disabled:hover:shadow-none dark:disabled:text-red-500/35 dark:disabled:bg-gray-800",
     "ghost" =>
       "border border-transparent text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-100 dark:hover:border-gray-800 disabled:text-gray-500 disabled:dark:text-gray-600 disabled:hover:bg-transparent disabled:hover:border-transparent",
-    "icon" => "border border-transparent text-gray-400 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+    "icon" =>
+      "border border-transparent text-gray-400 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
   }
 
   @button_base_class "whitespace-nowrap truncate inline-flex items-center justify-center gap-x-2 text-sm font-medium rounded-md cursor-pointer disabled:cursor-not-allowed"