From 83248e803f3d93748182e3c4c2213ce7ab13d927 Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Wed, 16 Aug 2023 13:54:20 +0200
Subject: [PATCH] styling: update button styling

adding proper primary and secondary button styles.
---
 src/index.html      | 10 +++++-----
 src/styles/form.css | 16 ++++++++++------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/index.html b/src/index.html
index ae2c206..dd0e1c0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,8 +24,8 @@
                 <legend>write a new note</legend>
                 <textarea name="message" rows="1"></textarea>
                 <div class="buttons">
-                  <button type="submit" id="publish" disabled>send</button>
-                  <button type="button" name="back">back</button>
+                  <button type="submit" id="publish" class="primary" disabled>send</button>
+                  <button type="button" name="back" class="primary">back</button>
                 </div>
                 <small id="sendstatus" class="form-status"></small>
               </fieldset>
@@ -42,7 +42,7 @@
                 <input type="url" name="picture" id="profile_picture" placeholder="https://your.domain/image.png">
                 <div class="buttons">
                   <small id="profilestatus" class="form-status" hidden></small>
-                  <button type="submit" name="publish" tabindex="0" disabled>publish</button>
+                  <button type="submit" name="publish" class="primary" tabindex="0" disabled>publish</button>
                 </div>
               </form>
               <form action="#" name="options">
@@ -86,8 +86,8 @@
                 <input type="password" id="privatekey" autocomplete="off">
                 <div class="buttons">
                   <small id="keystatus" class="form-status" hidden></small>
-                  <button type="button" name="generate" tabindex="0">new</button>
-                  <button type="button" name="import" tabindex="0" disabled>save</button>
+                  <button type="button" name="generate" class="primary" tabindex="0">new</button>
+                  <button type="button" name="import" class="primary" tabindex="0" disabled>save</button>
                 </div>
               </form>
               <footer class="text">
diff --git a/src/styles/form.css b/src/styles/form.css
index fd5edf5..6ca6828 100644
--- a/src/styles/form.css
+++ b/src/styles/form.css
@@ -117,16 +117,15 @@ form .buttons,
 .buttons img,
 .buttons small,
 .buttons span {
+  font-weight: normal;
   vertical-align: middle;
 }
 
 button {
-  --bg-color: var(--bgcolor-accent);
-  --border-color: var(--bgcolor-accent);
-  background-color: var(--bg-color);
-  border: 0.2rem solid var(--border-color);
-  border-radius: .2rem;
+  background-color: transparent;
+  border: none;
   cursor: pointer;
+  font-weight: bold;
   outline-offset: 1px;
   word-break: normal;
 }
@@ -137,7 +136,12 @@ button:active {
 
 .primary,
 .secondary {
-  padding: .8rem 2.4rem;
+  border: 0.2rem solid var(--bgcolor-accent);
+  border-radius: .2rem;
+  padding: .9rem 2rem .7rem 2rem;
+}
+.primary {
+  background-color: var(--bgcolor-accent);
 }
 .secondary {
   background-color: transparent;