From: Adam Dullage <redacted>
Date: Sun, 7 Aug 2022 20:04:38 +0000 (+0100)
Subject: Button styling
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=f614380c575a3f402218aed2a9615f8af0315f49;p=flatnotes.git

Button styling
---

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 015d77d..f591e82 100644
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -29,10 +29,10 @@
           noteLoadFailed == false
         "
         type="button"
-        class="btn btn-sm btn-outline-warning mx-1"
+        class="bttn"
         @click="toggleEditMode"
       >
-        Edit
+        <b-icon icon="pencil-square"></b-icon> Edit
       </button>
 
       <!-- Delete -->
@@ -43,30 +43,30 @@
           noteLoadFailed == false
         "
         type="button"
-        class="btn btn-sm btn-outline-danger mx-1"
+        class="bttn"
         @click="deleteNote"
       >
-        Delete
+        <b-icon icon="trash"></b-icon> Delete
       </button>
 
       <!-- Cancel -->
       <button
         v-if="currentView == views.note && editMode == true"
         type="button"
-        class="btn btn-sm btn-outline-secondary mx-1"
+        class="bttn"
         @click="cancelNote"
       >
-        Cancel
+        <b-icon icon="arrow-return-left"></b-icon> Cancel
       </button>
 
       <!-- Save -->
       <button
         v-if="currentView == views.note && editMode == true"
         type="button"
-        class="btn btn-sm btn-outline-success mx-1"
+        class="bttn"
         @click="saveNote"
       >
-        Save
+        <b-icon icon="check-square"></b-icon> Save
       </button>
     </div>
 
diff --git a/flatnotes/src/components/Login.vue b/flatnotes/src/components/Login.vue
index 4e759a3..918a988 100644
--- a/flatnotes/src/components/Login.vue
+++ b/flatnotes/src/components/Login.vue
@@ -1,6 +1,12 @@
 <template>
   <div
-    class="d-flex flex-column justify-content-center align-items-center flex-grow-1"
+    class="
+      d-flex
+      flex-column
+      justify-content-center
+      align-items-center
+      flex-grow-1
+    "
   >
     <!-- Logo -->
     <div class="mb-3">
@@ -50,7 +56,9 @@
       </div>
 
       <!-- Button -->
-      <button type="submit" class="btn btn-primary">Log In</button>
+      <button type="submit" class="bttn">
+        <b-icon icon="box-arrow-in-right"></b-icon> Log In
+      </button>
     </form>
   </div>
 </template>
diff --git a/flatnotes/src/components/NavBar.vue b/flatnotes/src/components/NavBar.vue
index 9586d5c..41e896b 100644
--- a/flatnotes/src/components/NavBar.vue
+++ b/flatnotes/src/components/NavBar.vue
@@ -11,33 +11,25 @@
     </div>
     <div>
       <!-- New Note -->
-      <button
-        type="button"
-        class="btn btn-sm btn-outline-primary mx-1"
-        @click="$emit('new-note')"
-      >
-        New Note
+      <button type="button" class="bttn" @click="$emit('new-note')">
+        <b-icon icon="plus-circle"></b-icon> New Note
       </button>
 
       <!-- Log Out -->
-      <button
-        type="button"
-        class="btn btn-sm btn-outline-dark mx-1"
-        @click="$emit('logout')"
-      >
-        Log Out
+      <button type="button" class="bttn" @click="$emit('logout')">
+        <b-icon icon="box-arrow-right"></b-icon> Log Out
       </button>
 
       <!-- Search -->
       <button
         type="button"
         id="search-button"
-        class="btn btn-sm btn-outline-dark mx-1"
+        class="bttn"
         @click="$emit('search')"
         v-b-tooltip.hover
         title="Keyboard Shortcut: /"
       >
-        <BIconSearch />
+        <b-icon icon="search"></b-icon>
       </button>
     </div>
   </div>
@@ -55,13 +47,7 @@
 </style>
 
 <script>
-import { BIconSearch } from "bootstrap-vue";
-
 export default {
-  components: {
-    BIconSearch,
-  },
-
   props: {
     showLogo: {
       type: Boolean,
diff --git a/flatnotes/src/components/SearchInput.vue b/flatnotes/src/components/SearchInput.vue
index 9e32967..2e82583 100644
--- a/flatnotes/src/components/SearchInput.vue
+++ b/flatnotes/src/components/SearchInput.vue
@@ -11,7 +11,7 @@
       />
       <div class="input-group-append">
         <button class="btn" type="submit">
-          <BIconSearch />
+          <b-icon icon="search"></b-icon>
         </button>
       </div>
     </div>
@@ -44,13 +44,8 @@
 <script>
 import EventBus from "../eventBus";
 import * as constants from "../constants";
-import { BIconSearch } from "bootstrap-vue";
 
 export default {
-  components: {
-    BIconSearch,
-  },
-
   data: function () {
     return {
       searchTermInput: null,
diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 1a26aed..1ab9539 100644
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -75,6 +75,21 @@ body {
   min-height: 190px;
 }
 
+.bttn {
+  border: 0;
+  background-color: transparent;
+  border-radius: 4px;
+  padding: 4px 10px;
+  color: #6c757d;
+
+  svg {
+    margin-right: 4px;;
+  }
+}
+.bttn:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
 // Toast UI Overrides
 .toastui-editor-contents {
   font-family: "Inter", sans-serif;