From 115728fe58330642fe42d200f8e700194df0501e Mon Sep 17 00:00:00 2001
From: Mahesh Asolkar <mahesh@mahesha.com>
Date: Sat, 29 Mar 2025 19:31:53 -0700
Subject: [PATCH] Redesigned buttons

Using CSS icons instead of text
---
 Workout.js |  4 ++--
 style.css  | 45 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/Workout.js b/Workout.js
index 479b633..9ad2ace 100644
--- a/Workout.js
+++ b/Workout.js
@@ -401,10 +401,10 @@ render_fab() {
     const fab_wrapper = document.createElement("div");
     fab_wrapper.setAttribute("id", "fab-wrapper");
 
-    const fab_regress = this.text_element("button", "<< Regress");
+    const fab_regress = this.text_element("button", " ");
     fab_regress.classList.add("fab-button");
     fab_regress.setAttribute("id", "fab-regress");
-    const fab_advance = this.text_element("button", "Advance >>");
+    const fab_advance = this.text_element("button", " ");
     fab_advance.classList.add("fab-button");
     fab_advance.setAttribute("id", "fab-advance");
 
diff --git a/style.css b/style.css
index 1ef1c78..72f767c 100644
--- a/style.css
+++ b/style.css
@@ -152,19 +152,54 @@ html {
 #fab-wrapper {
     position: fixed;
     bottom: 20px;
-    right: 20px;
+    left: 50%;
+    transform: translateX(-50%);
     z-index: 1000;
 }
 
 #fab-wrapper .fab-button {
     display: inline-block;
     white-space: pre-wrap;
-    border: thin solid gray;
-    border-radius: 0.5em;
+    border-radius: 50%;
     font-size: 1em;
     text-align: center;
     vertical-align: middle;
-    margin: 0.5em;
-    padding: 0.5em;
+    margin: 0;
+    padding: 0;
     cursor: pointer;
 }
+
+#fab-wrapper #fab-regress {
+    border: 0.4em solid gray;
+    width: 3em;
+    height: 3em;
+}
+#fab-wrapper #fab-regress:after {
+    content: '';
+    display: inline-block;
+    width: 0.8em;
+    height: 0.8em;
+    margin-top: 0.2em;
+    margin-left: 0.2em;
+    border-top: 0.4em solid gray;
+    border-right: 0.4em solid gray;
+    transform: rotate(-135deg);
+}
+
+#fab-wrapper #fab-advance {
+    border: 0.4em solid gray;
+    width: 4em;
+    height: 4em;
+    margin-left: 1em;
+}
+#fab-wrapper #fab-advance:after {
+    content: '';
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    margin-bottom: -0.2em;
+    margin-right: 0.6em;
+    border-top: 0.4em solid gray;
+    border-right: 0.4em solid gray;
+    transform: rotate(45deg);
+}