Update TailwindCSS to 2.0

plausible · Nov 19, 2020 · 4f81b71 · 4f81b71
1 parent f8d3f08
commit 4f81b71
Show file tree

Hide file tree

Showing 21 changed files with 725 additions and 295 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -7,19 +7,7 @@
 @import "tooltip.css";
 
 .button {
-  @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-all duration-150 ease-in-out;
-}
-
-.button:hover {
-  @apply bg-gray-700;
-}
-
-.button:focus {
-  @apply outline-none border-gray-900 shadow-outline-gray;
-}
-
-.button:active {
-  @apply bg-gray-900;
+  @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 {

diff --git a/assets/js/dashboard/datepicker.js b/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') }

diff --git a/assets/js/dashboard/site-switcher.js b/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>

diff --git a/assets/js/dashboard/stats/modals/sources.js b/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>