From f7a04640ee4715ca187f38221cd87352dc11172a Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Fri, 15 Apr 2022 14:56:40 -0500
Subject: [PATCH] Use the relatively new svelte style directives when
 applicable

Svelte is able to optimize this directive better
---
 src/p4/Button.svelte   | 2 +-
 src/p4/Progress.svelte | 5 ++++-
 src/p4/Section.svelte  | 8 +++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/p4/Button.svelte b/src/p4/Button.svelte
index 7c3e8ad..3d1aba2 100644
--- a/src/p4/Button.svelte
+++ b/src/p4/Button.svelte
@@ -48,7 +48,7 @@
   }
 </style>
 
-<button on:click style={`background-color: ${getColor()}`}>
+<button on:click style:background-color={getColor()}>
   <div class="dimmer"></div>
   <div class="text">{text}</div>
 </button>
diff --git a/src/p4/Progress.svelte b/src/p4/Progress.svelte
index f649368..c834cf0 100644
--- a/src/p4/Progress.svelte
+++ b/src/p4/Progress.svelte
@@ -31,7 +31,10 @@
 
 <div class="progress">
   <div class="bar-outer">
-    <div class="bar-inner" style={`width:${progress*100}%`}></div>
+    <div
+      class="bar-inner"
+      style:width={`${progress * 100}%`}
+    ></div>
   </div>
   <div class="text">
     {text}
diff --git a/src/p4/Section.svelte b/src/p4/Section.svelte
index 8238f54..0cc4a85 100644
--- a/src/p4/Section.svelte
+++ b/src/p4/Section.svelte
@@ -42,7 +42,13 @@
   }
 </style>
 
-<div class="card" class:caption class:modal class:center={caption || center} style={accent ? `border-top: 6px solid ${accent}` : ''}>
+<div
+  class="card"
+  class:caption
+  class:modal
+  class:center={caption || center}
+  style:border-top={accent ? `6px solid ${accent}` : ''}
+>
   {#if reset}
     <div class="reset">
       <ResetButton on:click={reset} />