From e0a57ec6330675886c9322f9f4f76a89d10bf896 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <info@wuda.io>
Date: Thu, 26 Sep 2024 19:15:35 +0200
Subject: [PATCH] fix: make action buttons more visible

---
 css-transitions.html   |  4 +++-
 feature-discovery.html |  4 ++--
 grid.html              |  2 +-
 modals.html            |  8 ++++++--
 parallax.html          |  5 ++++-
 pushpin.html           |  2 +-
 sidenav.html           |  2 +-
 toasts.html            | 16 ++++++++--------
 tooltips.html          |  8 ++++----
 9 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/css-transitions.html b/css-transitions.html
index 351a9d5..6882c39 100644
--- a/css-transitions.html
+++ b/css-transitions.html
@@ -23,7 +23,9 @@ <h5>Scale</h5>
                 <code class="language-html">scale-in</code> to scale the element up until it is shown.
               </p>
               <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a>
-              <a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>
+
+              <a id="scale-demo-trigger" href="#!" class="btn tonal">Toggle Scale</a>
+
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
diff --git a/feature-discovery.html b/feature-discovery.html
index 201efe7..8e6be9f 100644
--- a/feature-discovery.html
+++ b/feature-discovery.html
@@ -18,8 +18,8 @@
                 wrong time, they can be intrusive and annoying.
               </p>
 
-              <a class="waves-effect waves-light btn" id="open-taptarget">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
-              <a class="waves-effect waves-light btn" id="close-taptarget">Close tap target</a>
+              <a class="waves-effect waves-light btn tonal" id="open-taptarget">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
+              <a class="waves-effect waves-light btn tonal" id="close-taptarget">Close tap target</a>
 
               <div class="fixed-action-btn" style="bottom: 45px; right: 24px">
                 <a class="btn btn-floating btn-large" id="menu">
diff --git a/grid.html b/grid.html
index d444c9c..611b116 100644
--- a/grid.html
+++ b/grid.html
@@ -154,7 +154,7 @@ <h3 class="header">Container</h3>
 
                 <h5>Demo</h5>
                 <p>Try the button below to see what the page looks like without containers.</p>
-                <a id="container-toggle-button" class="btn waves-effect waves-light">Turn off Containers</a>
+                <a id="container-toggle-button" class="btn tonal waves-effect waves-light">Turn off Containers</a>
 
                 <!-- Container Visual Demo -->
                 <div class="row">
diff --git a/modals.html b/modals.html
index 4146275..6064ec5 100644
--- a/modals.html
+++ b/modals.html
@@ -16,7 +16,9 @@
                 of the trigger. To add a close button, just add the class
                 <code class="language-css">.modal-close</code> to your button.
               </p>
-              <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
+
+              <a class="waves-effect waves-light btn tonal modal-trigger" href="#modal1">Show Modal</a>
+
               <div id="modal1" class="modal">
                 <div class="modal-content">
                   <h4>Modal Header</h4>
@@ -340,7 +342,9 @@ <h4>Modal Header</h4>
 
             <div id="bottom-sheet" class="scrollspy section">
               <h3 class="header">Bottom Sheet Modals</h3>
-              <a class="waves-effect waves-light btn modal-trigger" href="#modal3">Modal Bottom Sheet Style</a>
+
+              <a class="waves-effect waves-light btn tonal modal-trigger" href="#modal3">Show BottomSheet Modal</a>
+
               <p>Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.</p>
               <pre><code class="language-html">
 <xmp>
diff --git a/parallax.html b/parallax.html
index d3c1803..18ec125 100644
--- a/parallax.html
+++ b/parallax.html
@@ -16,7 +16,10 @@
                 Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the
                 demo to get a better idea of it.
               </p>
-              <a href="parallax-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>
+
+              <a href="parallax-demo.html" target="_blank" class="btn tonal waves-effect waves-light">Open Parallax Demo</a>
+
+              <p>Exlore an example website with the parallax effect applied.</p>
             </div>
             <pre><code class="language-html">
 <xmp>
diff --git a/pushpin.html b/pushpin.html
index 25d8d6f..6d61333 100644
--- a/pushpin.html
+++ b/pushpin.html
@@ -16,7 +16,7 @@
                 contents on the right.
               </p>
 
-              <a href="pushpin-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>
+              <a href="pushpin-demo.html" target="_blank" class="btn tonal waves-effect waves-light">Open Pushpin Demo</a>
 
               <h5>Demo Code</h5>
               <pre><code class="language-javascript">
diff --git a/sidenav.html b/sidenav.html
index 63f6f66..d4dd8b8 100644
--- a/sidenav.html
+++ b/sidenav.html
@@ -20,7 +20,7 @@
           <strong>Please note that the sidenav HTML should not be contained within the navbar HTML.</strong>
         </p>
 
-        <a href="#" data-target="slide-out" class="sidenav-trigger btn">Side nav demo</a>
+        <a href="#" data-target="slide-out" class="sidenav-trigger btn tonal">Toggle Sidenav</a>
 
         <ul id="slide-out" class="sidenav">
           <li>
diff --git a/toasts.html b/toasts.html
index 1f9c6f2..6c82dc3 100644
--- a/toasts.html
+++ b/toasts.html
@@ -15,7 +15,7 @@
                 Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by
                 clicking the button below on different device sizes.
               </p>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast', classes: 'primary'})">Toast!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({text: 'I am a toast', classes: 'primary'})">Show Toast</button>
               <p>To do this, call the M.toast() function programmatically in JavaScript.</p>
               <pre><code class="language-javascript">
   M.toast({text: 'I am a toast!'})
@@ -23,7 +23,7 @@
               <p>One way to add this into your application is to add this as an onclick event to a button.</p>
               <pre><code class="language-html">
 <xmp>
-<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn">Toast!</button>
+<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn tonal">Show Toast</button>
 </xmp>
         </code></pre>
             </div>
@@ -135,18 +135,18 @@ <h3 class="header">Properties</h3>
             <div id="custom-html" class="section scrollspy">
               <h3 class="header">Custom HTML</h3>
               <p>You can pass in an toastId as the argument as well. This toastId should refer to some template in the HTML that will be used as toast content.</p>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({toastId: 'my-toast-1'})">Show Toast 1</button>
               <template id="my-toast-1">
                 <div>
                   This is toast nº1 with a
                   <a href="https://github.com/materializecss"> link </a>
                 </div>
               </template>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-2', classes: 'primary'})">Toast 2!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({toastId: 'my-toast-2', classes: 'primary'})">Show Toast 2</button>
               <div id="my-toast-2" style="display: none">This is toast nº2 with a <i class="material-icons icon-demo">insert_chart</i></div>
               <pre><code class="language-html">
 <xmp>
-<button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+<button type="button" class="btn tonal" onclick="M.toast({toastId: 'my-toast-1'})">Show Toast 1</button>
 <template id="my-toast-1">
   <div>
     This is toast nº1 with a  <a href="https://github.com/materializecss"> link </a>
@@ -158,9 +158,9 @@ <h3 class="header">Custom HTML</h3>
             <div id="callback" class="scrollspy section">
               <h3 class="header">Callback</h3>
               <p>You can have the toast callback a function when it has been dismissed.</p>
-              <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+              <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
               <pre><code class="language-html">
-  <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+  <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
         </code></pre>
             </div>
 
@@ -171,7 +171,7 @@ <h3 class="header">Styling Toasts</h3>
                 you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.
               </p>
 
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Round Toast!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Show round Toast</button>
 
               <pre><code class="language-javascript">
   // 'rounded' is the class I'm applying to the toast
diff --git a/tooltips.html b/tooltips.html
index 7d88cb6..1f6a58a 100644
--- a/tooltips.html
+++ b/tooltips.html
@@ -18,17 +18,17 @@
               </p>
 
               <div>
-                <a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
+                <a href="#" class="btn tonal tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
                 <div id="tooltip-content" style="display: grid; align-content: center">
                   This is a tooltip with a
                   <a href="https://github.com/materializecss">link</a> and a
                   <i class="material-icons icon-demo">insert_chart</i>
                 </div>
-                <a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
-                <a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
+                <a href="#" class="btn tonal tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
+                <a href="#" class="btn tonal tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
                 <a
                   href="#"
-                  class="btn tooltipped"
+                  class="btn tonal tooltipped"
                   data-position="right"
                   data-tooltip="I am a right tooltip. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus possimus quidem voluptatem soluta ex dignissimos, itaque magnam aspernatur eum deleniti delectus, vitae rerum, distinctio quam? Quas sapiente sunt blanditiis?"
                 >