latest wave of cards - im messy lol

Author: Joe

package-lock.json

@@ -8,13 +8,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "apexcharts": "^3.18.1",
     "chartist-plugin-fill-donut": "^0.1.4",
     "core-js": "^3.6.4",
     "leaflet": "^1.6.0",
     "vue": "^2.6.11",
     "vue-agile": "^1.0.12",
     "vue-apexcharts": "^1.5.3",
+    "vue-carousel": "^0.18.0",
     "vue-chartist": "^2.2.1",
     "vue-router": "^3.1.6",
     "vue-styled-components": "^1.4.14",

package.json

@@ -1,20 +1,34 @@
 <template>
-  <Content>
-    <router-view />
-  </Content>
+  <StyledWrapper>
+    <Topbar />
+    <Content>
+      <router-view />
+    </Content>
+  </StyledWrapper>
 </template>
 
 <script>
+import styled from "vue-styled-components";
 import Content from "./components/layout/Content";
+import Topbar from "./components/layout/Topbar";
 
 require("./assets/css/bootstrap.css");
 require("./assets/css/tonicons.css");
 require("chartist/dist/chartist.min.css");
 
+const StyledWrapper = styled.div`
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
 export default {
   name: "App",
   components: {
-    Content
+    StyledWrapper,
+    Content,
+    Topbar
   }
 };
 </script>
@@ -37,9 +51,20 @@ html {
 * {
   box-sizing: border-box;
   line-height: 1;
+  cursor: default;
 }
 
-button {
+button,
+input {
   font-family: "Alata", Helvetica, Arial, sans-serif;
 }
+
+button,
+a,
+input {
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
 </style>