From 305da8ea0872ec48e81c239a5244f32421bd9672 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 28 Jan 2022 01:58:27 -0800
Subject: [PATCH] improvements to md-btn, added &.md-btn-icon

---
 src/renderer/style.less                     | 33 +++++++++++++++------
 src/renderer/views/pages/cider-playlist.ejs | 16 +++++-----
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 614eeeaf..45636582 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2140,12 +2140,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .md-btn {
   background: rgba(100, 100, 100, 0.5);
-  padding: 6px 12px;
-  border-radius: 4px;
-  font-size: 16px;
-  border: 1px solid rgb(100 100 100 / 35%);
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  border: 1px solid rgba(100, 100, 100, 0.35);
+  border-top: 1px solid rgba(100, 100, 100, 0.5);
   color: #eee;
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
   transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
 
   &.md-btn-block {
@@ -2174,6 +2174,21 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     transform: scale(0.98);
     transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
   }
+
+  &.md-btn-icon {
+    display: inline-flex;
+    vertical-align: middle;
+    justify-content: center;
+
+    > img {
+      margin: 0px 16px 0px 0px;
+      pointer-events: none;
+    }
+
+    > .md-btn-text {
+      margin: 0px;
+    }
+  }
 }
 
 .md-ico-play {
@@ -2186,8 +2201,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .md-ico-shuffle {
   content:url("./assets/shuffle.svg");
-  width: 17px;
-  height: 17px; 
+  width: 1em;
+  height: 1em;
   margin-right: 1px;
   margin-bottom: -2px;
   align-self: center;
@@ -2204,8 +2219,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .md-ico-add {
   content:url("./assets/feather/plus-circle-white.svg");
-  width: 16px;
-  height: 16px; 
+  width: 1em;
+  height: 1em;
   margin-right: 1px;
   margin-bottom: -1.5px;
   align-self: center;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 0749b16c..acdeb392 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -62,19 +62,19 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
-                                <button class="md-btn" style="min-width: 100px;"
+                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                         {{app.getLz('term.play')}}
                                 </button>
-                                <button class="md-btn" style="min-width: 100px;"
+                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                         {{app.getLz('term.shuffle')}}
                                 </button>
-                                <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
+                                <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
                                         @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                     {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
                                 </button>
-                                <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
+                                <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
                                         @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                         {{app.getLz('term.confirm')}}
                                 </button>
@@ -98,19 +98,19 @@
                     </div>
                     <div class="col-auto flex-center">
                         <div>
-                            <button class="md-btn" style="min-width: 100px;"
+                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                     {{app.getLz('term.play')}}
                             </button>
-                            <button class="md-btn" style="min-width: 100px;"
+                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                     {{app.getLz('term.shuffle')}}
                             </button>
-                            <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
+                            <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
                                     @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                 {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
                             </button>
-                            <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
+                            <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
                                     @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                     {{app.getLz('term.confirm')}}
                             </button>