Upgrade foundation to 6.5.3

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -42,7 +42,6 @@
 //  37. Top Bar
 
 @import "~foundation-sites/scss/util/util";
-
 // 1. Global
 // ---------
 
@@ -567,7 +566,7 @@ $switch-paddle-transition: all 0.15s ease-out;
 
 $table-background: transparent;
 $table-color-scale: 5%;
-$table-border: 1px solid smart-scale($color-heading, $table-color-scale);
+$table-border: 1px solid transparent;
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
@@ -647,3 +646,10 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
+
+
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
+$menu-items-padding: $space-one;
+$xy-grid: false;

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -99,7 +99,7 @@
 }
 
 @mixin flex-shrink() {
-  flex: flex-grid-column(shrink);
+  flex: 0 0 auto;
   max-width: 100%;
 }
 

app/javascript/dashboard/assets/scss/app.scss

@@ -1,13 +1,14 @@
 @import 'variables';
 
-@import '~bourbon/core/bourbon';
 @import '~spinkit/scss/spinners/7-three-bounce';
 @import '~ionicons/scss/ionicons';
 
-@import 'foundation-settings';
 @import 'mixins';
+@import 'foundation-settings';
 @import 'helper-classes';
+@import 'foundation-sites/scss/foundation';
+@import '~bourbon/core/bourbon';
 
-@import '~foundation-sites/assets/foundation-flex';
+@include foundation-everything($flex: true);
 
 @import 'woot';

app/javascript/dashboard/assets/scss/widgets/_billing.scss

@@ -23,7 +23,6 @@
   }
 
   .account-row {
-    @include flex-grid-column(3, $space-medium);
     @include padding($space-normal);
     @include flex;
     flex-direction: column;

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -1,6 +1,7 @@
 .side-menu {
   i {
-    min-width: 2rem;
+    min-width: $space-two;
+    margin-right: $space-smaller;
   }
 }
 
@@ -43,8 +44,9 @@
     @include elegant-card;
     @include border-light;
     left: 18%;
-    top: -160%;
+    top: -110%;
     visibility: visible;
+    display: block;
     width: 80%;
     z-index: 999;
 

app/javascript/dashboard/assets/scss/widgets/_status-bar.scss

@@ -21,7 +21,19 @@
     background: lighten($alert-color, 30%);
 
     .button {
-      @include button-style($alert-color, darken($alert-color, 7%), $color-white);
+      // Default and disabled states
+      &,
+      &.disabled, &[disabled],
+      &.disabled:hover, &[disabled]:hover,
+      &.disabled:focus, &[disabled]:focus {
+        background-color: $alert-color;
+        color: $color-white;
+      }
+
+      &:hover, &:focus {
+        background-color: darken($alert-color, 7%);
+        color: $color-white;
+      }
     }
   }
 

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -1,38 +1,42 @@
 <template>
   <div class="column content-box billing">
     <woot-loading-state v-if="fetchStatus" :message="$t('BILLING.LOADING')" />
-    <div class="row" v-if="billingDetails">
+    <div v-if="billingDetails" class="row">
       <div class="small-12 columns billing__stats">
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.ACCOUNT_STATE') }}</span>
           <span class="value">{{ billingDetails.state }} </span>
         </div>
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.AGENT_COUNT') }}</span>
           <span class="value">{{ billingDetails.agents_count }} </span>
         </div>
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.PER_AGENT_COST') }}</span>
           <span class="value">${{ billingDetails.per_agent_cost }} </span>
         </div>
 
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.TOTAL_COST') }}</span>
           <span class="value">${{ billingDetails.total_cost }} </span>
         </div>
       </div>
       <div class="small-12 columns billing__form">
-        <iframe :src="billingDetails.iframe_url" v-if="iframeUrl && !isShowEmptyState"></iframe>
+        <iframe
+          v-if="iframeUrl && !isShowEmptyState"
+          :src="billingDetails.iframe_url"
+        ></iframe>
         <div v-if="isShowEmptyState">
           <empty-state :title="emptyStateTitle" :message="emptyStateMessage">
             <div class="medium-12 columns text-center">
-              <button class="button success nice" @click="billingButtonClick()">{{buttonText}}</button>
+              <button class="button success nice" @click="billingButtonClick()">
+                {{ buttonText }}
+              </button>
             </div>
           </empty-state>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -44,6 +48,9 @@ import { mapGetters } from 'vuex';
 import EmptyState from '../../../../components/widgets/EmptyState';
 
 export default {
+  components: {
+    EmptyState,
+  },
   props: ['state'],
 
   data() {
@@ -52,10 +59,6 @@ export default {
     };
   },
 
-  components: {
-    EmptyState,
-  },
-
   computed: {
     ...mapGetters({
       billingDetails: 'getBillingDetails',
@@ -85,7 +88,9 @@ export default {
     },
     buttonText() {
       if (this.billingDetails !== null) {
-        return this.billingDetails.payment_source_added ? this.$t('BILLING.BUTTON.EDIT') : this.$t('BILLING.BUTTON.ADD');
+        return this.billingDetails.payment_source_added
+          ? this.$t('BILLING.BUTTON.EDIT')
+          : this.$t('BILLING.BUTTON.ADD');
       }
       return this.$t('BILLING.BUTTON.ADD');
     },
@@ -115,6 +120,5 @@ export default {
       this.is_adding_source = true;
     },
   },
-
 };
 </script>

package.json

@@ -23,7 +23,7 @@
     "chart.js": "~2.5.0",
     "dotenv": "^8.0.0",
     "emojione": "~2.2.7",
-    "foundation-sites": "6.3.0",
+    "foundation-sites": "~6.5.3",
     "highlight.js": "^9.15.10",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",

yarn.lock

@@ -4291,13 +4291,10 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
-foundation-sites@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/foundation-sites/-/foundation-sites-6.3.0.tgz#19b2d6e5edced8418a4a7b4a1d65287ee1c8d512"
-  integrity sha1-GbLW5e3O2EGKSntKHWUofuHI1RI=
-  dependencies:
-    jquery "^2.2.0"
-    what-input "^4.0.3"
+foundation-sites@~6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/foundation-sites/-/foundation-sites-6.5.3.tgz#85373aaed72233ca0d16fdfcb034e976cc6943c9"
+  integrity sha512-ZwI0idjHHjezh6jRjpPxkczvmtUuJ1uGatZHpyloX0MvsFHfM0BFoxrqdXryXugGPdmb+yJi3JYMnz6+5t3K1A==
 
 fragment-cache@^0.2.1:
   version "0.2.1"
@@ -5834,11 +5831,6 @@ jest@^24.8.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-jquery@^2.2.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"
-  integrity sha1-LInWiJterFIqfuoywUUhVZxsvwI=
-
 js-base64@^2.1.8:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
@@ -10461,11 +10453,6 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
-what-input@^4.0.3:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/what-input/-/what-input-4.3.1.tgz#b8ea7554ba1d9171887c4c6addf28185fec3d31d"
-  integrity sha512-7KD71RWNRWI9M08shZ8+n/2UjO5amwsG9PMSXWz0iIlH8H2DVbHE8Z2tW1RqQa0kIwdeqdUIffFz7crDfkcbAw==
-
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"