Merge pull request #16 from suraneti/feature/styled-component

Fixed libra icon is blur and update components style.
kulapio · Nov 13, 2019 · 4789a11 · 4789a11
2 parents 08087bd + d15f9fb
commit 4789a11
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 5 deletions.
diff --git a/src/assets/img/libra/icon-libra.png b/src/assets/img/libra/icon-libra.png
diff --git a/src/assets/img/libra/[email protected] b/src/assets/img/libra/[email protected]
diff --git a/src/assets/img/libra/[email protected] b/src/assets/img/libra/[email protected]
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
diff --git a/src/components/Bill.vue b/src/components/Bill.vue
@@ -45,7 +45,7 @@
             Total
           </div>
           <div class="column total">
-            <img :src="require('@/assets/img/libra/icon-libra.png')">
+            <img :src="require('@/assets/img/libra/icon-libra@3x.png')" style="width: 25px; height: 25px;">
             <span>{{ total | numberWithCommas }}</span>
           </div>
         </div>

diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
@@ -16,7 +16,7 @@
           <img :src="require(`../assets/img/${item.image}`)">
         </div>
         <div class="price">
-          <img :src="require('@/assets/img/libra/icon-libra.png')">
+          <img :src="require('@/assets/img/libra/icon-libra@3x.png')">
           <span>{{ item.price | numberWithCommas }}</span>
         </div>
       </div>

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -73,30 +73,35 @@ export default {
 <style lang="scss" scoped>
 .sidebar-ctn {
   width: 100%;
-  padding: 20px;
+  padding: 20px 10px;
   height: 100vh;
   box-shadow: 2px 2px 14px 0 rgba(0, 0, 0, 0.5);
   background-color: #ffffff;
   text-align: center;
   position: relative;
 }
+
 .logo {
   width: 150px;
 }
+
 .libra-logo {
   width: 120px;
   float: right;
   margin-bottom: 10px;
 }
+
 .divider {
   width: 100%;
   height: 1px;
   float: left;
   background-color: #dedede;
 }
+
 .mg-bt-40px {
   margin-bottom: 20px;
 }
+
 .menu-item {
   cursor: pointer;
   float: left;
@@ -113,22 +118,24 @@ export default {
     margin-right: 10px;
   }
 }
+
 .menu-item:hover {
   opacity: 0.5;
 }
+
 .is-active {
   border-bottom: solid 5px #512da8;
   padding-right: 20px;
 }
+
 .footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0;
   text-align: center;
-  margin-bottom: 15px;
-  padding: 0 5px;
+  padding: 15px 5px;
 
   .kulap {
     img {