sidebar improvements

.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=14067576-0092-48A3-A845-67512001791B

package.json

@@ -39,14 +39,18 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-pro": "^5.14.0",
         "@fortawesome/fontawesome-svg-core": "^1.2.27",
         "@fortawesome/free-brands-svg-icons": "^5.12.1",
         "@fortawesome/free-regular-svg-icons": "^5.12.1",
         "@fortawesome/free-solid-svg-icons": "^5.12.1",
+        "@fortawesome/pro-duotone-svg-icons": "^5.14.0",
+        "@fortawesome/pro-light-svg-icons": "^5.14.0",
+        "@fortawesome/pro-regular-svg-icons": "^5.14.0",
+        "@fortawesome/pro-solid-svg-icons": "^5.14.0",
         "@fortawesome/vue-fontawesome": "^0.1.9",
         "less": "^3.11.1",
         "vue-flash-message": "^0.7.2",
-        "vue-tailwind": "^0.4.2",
         "vuejs-smart-table": "0.0.5"
     }
-}
+}

resources/js/app.js

@@ -8,11 +8,6 @@ require("./bootstrap");
 require("vue-flash-message/dist/vue-flash-message.min.css");
 window.Vue = require("vue");
 
-// import tailwind globally
-import VueTailwind from "vue-tailwind";
-
-Vue.use(VueTailwind);
-
 import VueFlashMessage from "vue-flash-message";
 
 Vue.use(VueFlashMessage);
@@ -36,21 +31,22 @@ import {
     faUserCircle,
     faUserShield,
     faSignOutAlt,
+    faSignOut,
     faMinus,
     faPlus,
     faUndoAlt,
     faEye,
     faSpinner,
-    faChartLine,
     faInfoCircle,
     faChevronDown,
     faChevronRight,
     faChevronLeft,
     faMicrophone,
     faBug,
     faTrophy,
-    faSignInAlt
-} from "@fortawesome/free-solid-svg-icons";
+    faSignInAlt,
+    faSignIn
+} from "@fortawesome/pro-solid-svg-icons";
 import {
     faTwitch,
     faTwitter,
@@ -59,6 +55,17 @@ import {
     faReddit
 } from "@fortawesome/free-brands-svg-icons";
 
+import {
+    faArrowUp as faArrowUpDuo,
+    faArrowDown as faArrowDownDuo,
+    faChartLine,
+    faTrophyAlt,
+    faBinoculars,
+    faChartNetwork
+} from "@fortawesome/pro-duotone-svg-icons";
+
+import {} from "@fortawesome/pro-light-svg-icons";
+
 library.add(
     faStar,
     faArrowUp,
@@ -75,6 +82,7 @@ library.add(
     faUserCircle,
     faUserShield,
     faSignOutAlt,
+    faSignOut,
     faMinus,
     faPlus,
     faUndoAlt,
@@ -88,7 +96,13 @@ library.add(
     faMicrophone,
     faBug,
     faTrophy,
-    faSignInAlt
+    faTrophyAlt,
+    faSignInAlt,
+    faSignIn,
+    faArrowUpDuo,
+    faArrowDownDuo,
+    faBinoculars,
+    faChartNetwork
 );
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);

resources/js/components/dashboard/HoldingsCard.vue

@@ -1,83 +1,109 @@
 <template>
     <li class="card stockcard">
         <div class="hg-details">
-            <h4>{{ houseguest.nickname || houseguest.first_name | capitalize }}</h4>
-            <span v-if=" priceDifference.amount >= 0" class="price-change-wrap" v-bind:class="priceDifference.class.text">
-                <font-awesome-icon :icon="priceDifference.icon" class="price-diff-icon"/>
-                <span class="price-diff word small-price">{{ houseguest.current_price | currency}}</span>
+            <h4>
+                {{ houseguest.nickname || houseguest.first_name | capitalize }}
+            </h4>
+            <span
+                v-if="priceDifference.amount >= 0"
+                class="price-change-wrap"
+                v-bind:class="priceDifference.class.text"
+            >
+                <font-awesome-icon
+                    :icon="priceDifference.icon"
+                    class="price-diff-icon"
+                />
+                <span class="price-diff word small-price">{{
+                    houseguest.current_price | currency
+                }}</span>
             </span>
         </div>
-        <img :src="houseguestImage(houseguest)" :alt="houseguest.nickname" class="hg-img" height="85" width="85" />
+        <img
+            :src="houseguestImage(houseguest)"
+            :alt="houseguest.nickname"
+            class="hg-img"
+            height="75"
+            width="75"
+        />
         <div class="user-holdings">
             <div>
-                <span class="num">{{ stock.quantity }}</span><span class="word"> share{{(stock.quantity === 1 ? '' : 's')}}</span>
+                <span class="num">{{ stock.quantity }}</span
+                ><span class="word">
+                    share{{ stock.quantity === 1 ? "" : "s" }}</span
+                >
             </div>
             <div>
-                <span class="num">{{ stock.quantity*houseguest.current_price | currency}}</span>
+                <span class="num">{{
+                    (stock.quantity * houseguest.current_price) | currency
+                }}</span>
             </div>
         </div>
     </li>
 </template>
 
 <script>
-    export default {
-        props: {
-            houseguests: Array,
-            stock: Object,
-        },
-        data() {
-            return {
-                //
+export default {
+    props: {
+        houseguests: Array,
+        stock: Object
+    },
+    data() {
+        return {
+            //
+        };
+    },
+    methods: {
+        houseguestImage: function(houseguest) {
+            return "/storage" + houseguest.image;
+        }
+    },
+    computed: {
+        houseguest: function() {
+            let houseguest;
+            for (let hg of this.houseguests) {
+                if (hg.id === this.stock.houseguest_id) {
+                    houseguest = hg;
+                }
             }
+            return houseguest;
         },
-        methods: {
-            houseguestImage: function (houseguest) {
-                return '/storage' + houseguest.image;
-            },
-        },
-        computed: {
-            houseguest: function () {
-                let houseguest;
-                for (let hg of this.houseguests) {
-                    if (hg.id === this.stock.houseguest_id) {
-                        houseguest = hg;
-                    }
-                }
-                return houseguest;
-            },
-            priceDifference: function () {
-                if (this.houseguest.prices.length === 1) {
-                    return {
-                        amount: -1, //because we use abs(), we will never have a negative number. Thus we can use it as a check.
-                        icon: '',
-                        class: ''
-                    };
-                }
-
-                //find latest week and week before
-                let currentWeek;
-                let lastWeek;
-                this.houseguest.prices.forEach(week => {
-                    if (typeof currentWeek === 'undefined') {
-                        currentWeek = week;
-                    } else if (week.week > currentWeek.week) {
-                        lastWeek = currentWeek;
-                        currentWeek = week;
-                    }
-                });
-
-                let diff = currentWeek.price - lastWeek.price;
-                let isIncrease = (diff > 0);
-
+        priceDifference: function() {
+            if (this.houseguest.prices.length === 1) {
                 return {
-                    amount: Math.abs(diff),
-                    icon: (isIncrease | diff === 0? 'arrow-up' : 'arrow-down'),
-                    class: {
-                        background: (isIncrease ? 'green-bg' : (diff === 0 ? '' : 'red-bg')),
-                        text: (isIncrease ? 'green' : (diff === 0 ? '' : 'red'))
-                    }
+                    amount: -1, //because we use abs(), we will never have a negative number. Thus we can use it as a check.
+                    icon: "",
+                    class: ""
                 };
             }
+
+            //find latest week and week before
+            let currentWeek;
+            let lastWeek;
+            this.houseguest.prices.forEach(week => {
+                if (typeof currentWeek === "undefined") {
+                    currentWeek = week;
+                } else if (week.week > currentWeek.week) {
+                    lastWeek = currentWeek;
+                    currentWeek = week;
+                }
+            });
+
+            let diff = currentWeek.price - lastWeek.price;
+            let isIncrease = diff > 0;
+
+            return {
+                amount: Math.abs(diff),
+                icon: isIncrease | (diff === 0) ? "arrow-up" : "arrow-down",
+                class: {
+                    background: isIncrease
+                        ? "green-bg"
+                        : diff === 0
+                        ? ""
+                        : "red-bg",
+                    text: isIncrease ? "green" : diff === 0 ? "" : "red"
+                }
+            };
         }
     }
+};
 </script>