Settings design

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable changes to this project will be documented in this file.
 - Display domain's favicon on the home page
 - Ignore consecutive pageviews on same pathname plausible/analytics#417
 - Validate domain format on site creation plausible/analytics#427
+- Improve settings UX and design plausible/analytics#412
 
 ### Fixed
 - Do not error when activating an already activated account plausible/analytics#370

assets/css/app.css

@@ -7,15 +7,7 @@
 @import "tooltip.css";
 
 .button {
-  @apply inline-block bg-indigo-600 text-white text-center font-bold tracking-wide py-2 px-5 rounded no-underline;
-}
-
-.button:hover {
-  @apply shadow;
-}
-
-.button:focus {
-  @apply outline-none;
+  @apply bg-indigo-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
 }
 
 .button-outline {

assets/js/app.js

@@ -3,6 +3,7 @@ import "flatpickr/dist/flatpickr.min.css"
 import "./polyfills/closest"
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import "phoenix_html"
+import 'alpinejs'
 
 const triggers = document.querySelectorAll('[data-dropdown-trigger]')
 
@@ -33,14 +34,6 @@ if (triggers.length > 0) {
   })
 }
 
-const flash = document.getElementById('flash')
-
-if (flash) {
-  setTimeout(function() {
-    flash.style.display = 'none'
-  }, 2500)
-}
-
 const registerForm = document.getElementById('register-form')
 
 if (registerForm) {

assets/js/dashboard/datepicker.js

@@ -182,7 +182,7 @@ class DatePicker extends React.Component {
     if (this.state.mode === 'menu') {
       return (
         <div className="absolute mt-2 rounded shadow-md z-10" style={{width: '235px', right: '-14px'}}>
-          <div className="rounded bg-white shadow-xs font-medium text-gray-800">
+          <div className="rounded bg-white ring-1 ring-black ring-opacity-5 font-medium text-gray-800">
             <div className="py-1">
               { this.renderLink('day', 'Today') }
               { this.renderLink('realtime', 'Realtime') }

assets/js/dashboard/site-switcher.js

@@ -88,7 +88,7 @@ export default class SiteSwitcher extends React.Component {
   }
 
   render() {
-    const hoverClass = this.props.loggedIn ? 'hover:text-gray-500 focus:border-blue-300 focus:shadow-outline-blue ' : 'cursor-default'
+    const hoverClass = this.props.loggedIn ? 'hover:text-gray-500 focus:border-blue-300 focus:ring ' : 'cursor-default'
 
     return (
       <div className="relative inline-block text-left z-10 mr-8">
@@ -109,7 +109,7 @@ export default class SiteSwitcher extends React.Component {
           leaveTo="opacity-0 scale-95"
         >
         <div className="origin-top-left absolute left-0 mt-2 w-64 rounded-md shadow-lg" ref={node => this.dropDownNode = node} >
-          <div className="rounded-md bg-white shadow-xs">
+          <div className="rounded-md bg-white ring-1 ring-black ring-opacity-5">
             { this.renderDropdown() }
           </div>
         </div>

assets/js/dashboard/stats/modals/sources.js

@@ -106,7 +106,7 @@ class SourcesModal extends React.Component {
     } else if (this.state.moreResultsAvailable) {
       return (
         <div className="w-full text-center my-4">
-          <button onClick={this.loadMore.bind(this)} type="button" className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+          <button onClick={this.loadMore.bind(this)} type="button" className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150">
             Load more
           </button>
         </div>