From 77324dfa6217fed7cbdf04000e618d0522ad6d18 Mon Sep 17 00:00:00 2001
From: Erastus Amunwe <eneamunwe@gmail.com>
Date: Fri, 4 Dec 2020 14:08:49 +0200
Subject: [PATCH] Added/changed and applied themes, fixed responsive issues

---
 src/App.vue                  | 34 +++++++++++++++++++++++++---------
 src/components/NavBar.vue    |  2 +-
 src/components/Options.vue   | 13 +++++--------
 src/components/Search.vue    | 28 ++++++++++++++--------------
 src/components/Selection.vue | 14 +++++++-------
 src/components/Verses.vue    | 11 +++++++----
 6 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 65c7e17..ba51c2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
     </div>
   </div> -->
   <navbar/>
-  <div class="uk-container uk-animation-slide-bottom">
+  <div class="uk-container uk-animation-slide-bottom uk-margin-top">
     <selections/>
     <div class="uk-container uk-container-small">
       <verses/>
@@ -61,7 +61,9 @@ export default {
 @import "../node_modules/uikit/src/less/uikit.less";
 @import "../node_modules/uikit/src/less/uikit.theme.less";
 @global-link-color: #DA7D02;
-@global-background:  #f5f4f4;;
+@global-background:  #f5f4f4;
+@primary:#55828b;
+@secondary: #fed18c;
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -95,10 +97,15 @@ export default {
 }
 
 .primary {
-  background-color: #f9a03f !important;
-}
+  // background-color: #813405 !important;
+  // background-color: #55828b !important;
+  background-color: @primary !important;
+  }
 .secondary {
-  background-color: #813405 !important;
+  // background-color: #f9a03f !important;
+  // background-color: #87bba2 !important;
+  // background-color: #fed18c !important;
+  background-color: @secondary !important;
 }
 .tertiary {
   background-color: #d45113;
@@ -107,13 +114,22 @@ export default {
   background-color: rgba(224, 222, 221, 1);
 }
 .text-primary {
-  color: #f9a03f !important;
-}
+  // color: #813405 !important;
+  color: #55828b !important;
+  }
 .text-secondary {
-  color: #813405 !important;
-  // font: #813405 !important;
+  // color: #f9a03f !important;
+  // color: #87bba2 !important;
+  color: #fed18c !important;
 }
 .text-tertiary {
   color: #d45113;
 }
+.rounded {
+  border-radius: 10px;
+}
+.rounded-bottom {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c5fe053..80baaea 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -19,7 +19,7 @@
                 <a class="uk-navbar-item  uk-position-center-right primary text-secondary" href="#modal-sections" uk-toggle><span class="uk-icon-button primary text-secondary" uk-icon="icon: cog; ratio:2"></span></a>
 
                 <div id="modal-sections" uk-modal>
-                    <div class="uk-modal-dialog primary text-secondary">
+                    <div class="uk-modal-dialog primary text-secondary rounded-bottom">
                         <button class="uk-modal-close-default" type="button" uk-close></button>
                         <div class="uk-modal-header secondary ">
                             <h2 class="uk-modal-title text-primary">Settings</h2>
diff --git a/src/components/Options.vue b/src/components/Options.vue
index 782b627..79bd4f4 100644
--- a/src/components/Options.vue
+++ b/src/components/Options.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="uk-container">
         
-            <div class="uk-margin">
-                <ul class="uk-pagination">
-                    <li @click="prev"><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
-                    <li class="uk-margin-auto-left" @click="next"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
+            <div class="uk-margin" uk-margin>
+                <ul class="uk-pagination" v-if="chapter">
+                    <li @click="prev"><a class="text-primary" href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
+                    <li class="uk-margin-auto-left" @click="next"><a class="text-primary" href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
                 </ul>
             </div>
     </div>
@@ -131,9 +131,6 @@ export default {
                     });
                 }
             },
-            created(){
-              
-             
-            }
+
 }
 </script>
\ No newline at end of file
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 27cb105..76b8254 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -7,9 +7,9 @@
                     <div class="uk-margin">
                         <form class="uk-search uk-search-default" action="javascript:void(0)">
                                 <!-- <span uk-search-icon></span> -->
-                                <input class="uk-search-input text-primary" v-model="search" type="search" placeholder="Search Words...">
+                                <input class="uk-search-input text-secondary primary rounded" v-model="search" type="search" placeholder="Search Words...">
                                 <div class="uk-margin">
-                                    <button class="uk-button uk-button-default uk-button-small text-primary">Search</button>
+                                    <button class="uk-button uk-button-default uk-button-small text-secondary primary rounded">Search</button>
                                 </div>
                         </form>
 
@@ -18,30 +18,30 @@
                     <div class="uk-margin">
 
                         <div class="uk-margin">
-                            <div class="uk-button-group text-primary">
-                                <button class="uk-button uk-button-default uk-button-small text-primary uk-active">ALL WORDS</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">ANY WORDS</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">PHRASE</button>
+                            <div class="uk-button-group text-primary ">
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">ALL WORDS</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">ANY WORDS</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button>
                             </div>
                         </div>
                         <div class="uk-margin">
                             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-primary uk-active">BIBLE</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">OT</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">NT</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">CHAPTER</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">BIBLE</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">OT</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">NT</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">CHAPTER</button>
                             </div>
                         </div>
                         <div class="uk-margin">
                             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-primary uk-active">EXACT MATCH</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">PARTIAL MATCH</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">EXACT MATCH</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">PARTIAL MATCH</button>
                             </div>
                         </div>
                         <div class="uk-margin">
                             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-primary uk-active">CASE INSENSITIVE</button>
-                                <button class="uk-button uk-button-default uk-button-small text-primary">CASE SENSITIVE</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">CASE INSENSITIVE</button>
+                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">CASE SENSITIVE</button>
                             </div>
                         </div>
                     </div>
diff --git a/src/components/Selection.vue b/src/components/Selection.vue
index 2aea915..64371d5 100644
--- a/src/components/Selection.vue
+++ b/src/components/Selection.vue
@@ -1,15 +1,15 @@
 <template>
-    <div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body " uk-margin>
+    <div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded" uk-margin>
         <div class="" v-if="!saved_translations.length>0">No translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div>
         <div v-else>
 
     <ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
-        <li class="uk-parent uk-witdth-1-1"><a>Translation</a>
+        <li class="uk-parent uk-witdth-1-1"><a class="text-secondary">Translation</a>
             <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
 
             <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
                     <li
-                    class="uk-card uk-card-hover text-secondary"
+                    class="uk-card uk-card-hover text-secondary rounded"
                     v-for="(tr,i) in saved_translations" 
                     @click="set_translation(tr.abbreviation)"
                     :key="i"
@@ -18,7 +18,7 @@
             </ul>
         </li>
         <li class="uk-nav-divider uk-witdth-1-1"></li>
-        <li v-if="translation" class="uk-parent uk-witdth-1-1"><a>Books</a>
+        <li v-if="translation" class="uk-parent uk-witdth-1-1"><a class="text-secondary">Books</a>
             <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
 
             <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
@@ -26,12 +26,12 @@
                      v-for="(bk,i) in books" 
                      @click="set_book(bk['nr'])"
                     :key="i"
-                    ><a href="#">{{bk['name']}}</a></li>
+                    ><a href="#" class="text-secondary">{{bk['name']}}</a></li>
              <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
             </ul>
         </li>
         <li class="uk-nav-divider uk-witdth-1-1"></li>
-        <li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a>Chapters</a>
+        <li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a class="text-secondary">Chapters</a>
             <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
                 <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
                     <li
@@ -39,7 +39,7 @@
                      v-for="(ch,i) in chapters" 
                     @click="set_chapter(ch['chapter'])" 
                     :key="i"
-                    ><a href="#selection" uk-toggle>{{ch['chapter']}}</a></li>
+                    ><a href="#selection" class="text-secondary" uk-toggle>{{ch['chapter']}}</a></li>
                <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
             </ul>
         </li>
diff --git a/src/components/Verses.vue b/src/components/Verses.vue
index e185532..7ae51d1 100644
--- a/src/components/Verses.vue
+++ b/src/components/Verses.vue
@@ -1,8 +1,8 @@
 <template >
-    <div v-if="verses.length">
+    <div v-if="verses.length" >
         <!-- {{search.toLowerCase() + fverses.length}} -->
         <br />
-        <div class="uk-card uk-card-default primary uk-card-body uk-width-1-1">
+        <div class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded">
     <ul :dir="dir" 
      class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
         <li  v-for="(verse, i) in pverses" :key="i" 
@@ -11,11 +11,14 @@
             
             <h5  class=" uk-primary text-secondary">
               <span class="uk-heading-bullet">  {{book_name+' '}}  </span>
-                <span class="uk-badge secondary badge-light">
+                <span class="uk-badge secondary text-primary badge-light">
                     {{verse.chapter}}:{{verse.verse}}
                 </span>
             </h5>
-            {{verse.text}} <br/>
+            <span class="text-secondary">
+                {{verse.text}} 
+            </span>
+                <br/>
             <p></p>
         </li>
     </ul>