router update + status renamed + added fonts/styles + vuex changes

Pe4enable · Mar 8, 2022 · 26e8a62 · 26e8a62
1 parent 7eb86a8
commit 26e8a62
Show file tree

Hide file tree

Showing 34 changed files with 3,320 additions and 374 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,10 +23,8 @@
   "dependencies": {
     "axios": "^0.26.0",
     "cids": "^1.1.9",
-    "core-js": "~3.12.1",
     "ipfs-core": "^0.12.0",
     "near-api-js": "~0.43.1",
-    "sass-loader": "^8.0.2",
     "vue": "~2.6.11",
     "vue-notification": "^1.3.20",
     "vue-router": "^3.5.3",
@@ -43,6 +41,7 @@
     "near-cli": "~2.1.1",
     "nodemon": "~2.0.4",
     "sass": "^1.49.9",
+    "sass-loader": "^8.0.2",
     "shelljs": "~0.8.4",
     "vue-template-compiler": "~2.6.11"
   },

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -2,7 +2,10 @@
   <div id="root">
     <notifications group="foo" />
     <nav-bar v-if="isSignedIn" />
-    <router-view />
+
+    <div class="container">
+      <router-view />
+    </div>
   </div>
 </template>
 
@@ -57,35 +60,6 @@ export default {
 }
 </script>
 
-<style>
-@import "./global.css";
-</style>
-
-
 <style lang="scss">
-.vue-notification-group {
-  width: 370px!important;
-  top: 20px!important;
-}
-
-.vue-notification-group .vue-notification {
-  padding: 10px;
-  margin: 0 5px 5px;
-  font-size: 18px;
-  color: #ffffff;
-  background: #44A4FC;
-  border-left: 5px solid #187FE7;
-  &.warn {
-    background: #ffb648;
-    border-left-color: #f48a06;
-  }
-  &.error {
-    background: #E54D42;
-    border-left-color: #B82E24;
-  }
-  &.success {
-    background: #68CD86;
-    border-left-color: #42A85F;
-  }
-}
+@import "./styles/app.scss";
 </style>
diff --git a/frontend/src/components/Spinner/SpinnerDots.vue b/frontend/src/components/Spinner/SpinnerDots.vue
@@ -54,11 +54,11 @@ $animationDuration: 1s;
 }
 
 .spinner-dots .bounce1 {
-  animation-delay: -($animationDuration/3);
+  animation-delay: -(calc($animationDuration / 3));
 }
 
 .spinner-dots .bounce2 {
-  animation-delay: -($animationDuration/6);
+  animation-delay: -(calc($animationDuration / 6));
 }
 
 @-webkit-keyframes sk-bouncedelay {

diff --git a/frontend/src/components/Spinner/SpinnerFadingCircle.vue b/frontend/src/components/Spinner/SpinnerFadingCircle.vue
@@ -52,16 +52,16 @@ $spinkit-size: 36px;
     height: $width;
     overflow: hidden;
     background-color: currentColor;
-    border-radius: ($width / 2);
+    border-radius: calc($width / 2);
     animation: sk-circleFadeDelay $animation-duration infinite ease-in-out both;
   }
 
   @for $i from 1 through $circle-count {
     .sk-circle#{$i} {
-      transform: rotate(360deg / $circle-count * ($i - 1));
+      transform: rotate(360deg / calc($circle-count * ($i - 1)));
 
       &::before {
-        $a: -$animation-duration + ($i - 1) * $animation-duration/$circle-count;
+        $a: -$animation-duration + calc(($i - 1) * $animation-duration/$circle-count);
         animation-delay: $a;
       }
     }

diff --git a/frontend/src/global.css b/frontend/src/global.css
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -12,8 +12,8 @@ Vue.use(Notifications)
 window.nearInitPromise = initContract()
   .then(() => {
     new Vue({
-      router,
       store,
+      router,
       render: h => h(App),
     }).$mount("#app")