Make visual tweaks to the dashboard (#5726)

* Make visual tweaks to the dashboard

- Reduce shadow and increased border radius on cards, to be consistent with the rest of the app
- Reduce logo size
- Align horizontal and vertical spacing between cards
- Reduce line width of the main graph
- Fix horizontal alignment on tables
- Reduce border radius on sites overview for consistency with dashboard
- Add transition to hover effect on sites overview cards

* Remove negative margin from logo to ensure vertical centering

- The negative margin on the logo caused misalignment with the rest of the header

assets/css/app.css

@@ -208,33 +208,6 @@ blockquote {
   background-color: rgb(26 32 44);
 }
 
-.stats-item {
-  min-height: 436px;
-}
-
-@screen md {
-  .stats-item {
-    margin-left: 6px;
-    margin-right: 6px;
-    width: calc(50% - 6px);
-    position: relative;
-    min-height: initial;
-    height: 27.25rem;
-  }
-
-  .stats-item-header {
-    height: inherit;
-  }
-}
-
-.stats-item:first-child {
-  margin-left: 0;
-}
-
-.stats-item:last-child {
-  margin-right: 0;
-}
-
 .fade-enter {
   opacity: 0;
 }

assets/js/dashboard/index.tsx

@@ -17,7 +17,7 @@ function DashboardStats({
   updateImportedDataInView?: (v: boolean) => void
 }) {
   const statsBoxClass =
-    'stats-item relative w-full mt-6 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded'
+    'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-825 shadow rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0'
 
   return (
     <>
@@ -57,7 +57,7 @@ function Dashboard() {
   const [importedDataInView, setImportedDataInView] = useState(false)
 
   return (
-    <div className="mb-12">
+    <div className="mb-16">
       <TopBar showCurrentVisitors={!isRealTimeDashboard} />
       <DashboardStats
         importedDataInView={

assets/js/dashboard/stats/behaviours/index.js

@@ -347,7 +347,7 @@ export default function Behaviours({ importedDataInView }) {
 
   return (
     <div className="items-start justify-between block w-full mt-6 md:flex relative">
-      <div className="w-full p-4 bg-white rounded shadow-xl dark:bg-gray-825">
+      <div className="w-full p-4 bg-white rounded-md shadow dark:bg-gray-825">
         <div className="flex justify-between w-full">
           <div className="flex gap-x-1">
             <h3 className="font-bold dark:text-gray-100">

assets/js/dashboard/stats/graph/graph-util.js

@@ -86,9 +86,9 @@ export const buildDataSet = (
 
   const defaultOptions = {
     label,
-    borderWidth: 3,
+    borderWidth: 2,
     pointBorderColor: 'transparent',
-    pointHoverRadius: 4,
+    pointHoverRadius: 3,
     backgroundColor: gradient,
     fill: true
   }

assets/js/dashboard/stats/graph/visitor-graph.js

@@ -168,7 +168,7 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   return (
     <div
       className={
-        'relative w-full mt-2 bg-white rounded shadow-xl dark:bg-gray-825'
+        'relative w-full mt-2 bg-white rounded-md shadow dark:bg-gray-825'
       }
     >
       {(topStatsLoading || graphLoading) && renderLoader()}

assets/js/dashboard/stats/reports/list.tsx

@@ -246,7 +246,10 @@ export default function ListReport<
   function renderRow(listItem: TListItem) {
     return (
       <div key={listItem.name} style={{ minHeight: ROW_HEIGHT }}>
-        <div className="flex w-full" style={{ marginTop: ROW_GAP_HEIGHT }}>
+        <div
+          className="flex w-full items-center"
+          style={{ marginTop: ROW_GAP_HEIGHT }}
+        >
           {renderBarFor(listItem)}
           {renderMetricValuesFor(listItem)}
         </div>

assets/tailwind.config.js

@@ -21,7 +21,7 @@ module.exports = {
     },
     extend: {
       colors: {
-        yellow: colors.amber, // We started usign `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
+        yellow: colors.amber, // We started using `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
         gray: colors.slate,
         'gray-950': 'rgb(13, 18, 30)',
         'gray-850': 'rgb(26, 32, 44)',

lib/plausible_web/live/sites.ex

@@ -186,7 +186,7 @@ defmodule PlausibleWeb.Live.Sites do
       data-domain={@site.domain}
       x-on:click={"invitationOpen = true; selectedInvitation = invitations['#{@invitation.invitation_id}']"}
     >
-      <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow p-4 group-hover:shadow-lg cursor-pointer">
+      <div class="col-span-1 bg-white dark:bg-gray-800 rounded-md shadow p-4 group-hover:shadow-lg cursor-pointer transition duration-100">
         <div class="w-full flex items-center justify-between space-x-4">
           <img
             src={"/favicon/sources/#{@site.domain}"}
@@ -232,7 +232,7 @@ defmodule PlausibleWeb.Live.Sites do
       }
     >
       <.unstyled_link href={"/#{URI.encode_www_form(@site.domain)}"}>
-        <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow p-4 group-hover:shadow-lg cursor-pointer">
+        <div class="col-span-1 bg-white dark:bg-gray-800 rounded-md shadow p-4 group-hover:shadow-lg cursor-pointer transition duration-100">
           <div class="w-full flex items-center justify-between space-x-4">
             <.favicon domain={@site.domain} />
             <div class="flex-1 -mt-px w-full">

lib/plausible_web/templates/layout/_header.html.heex

@@ -10,7 +10,7 @@
                 logo_path("logo_dark.svg")
               )
             }
-            class="w-44 -mt-2 hidden dark:inline"
+            class="w-32 hidden dark:inline"
             alt="Plausible logo"
             loading="lazy"
           />
@@ -21,7 +21,7 @@
                 logo_path("logo_light.svg")
               )
             }
-            class="w-44 -mt-2 inline dark:hidden"
+            class="w-32 inline dark:hidden"
             alt="Plausible logo"
             loading="lazy"
           />