Ui fix/maker dai

CHANGELOG.md

@@ -20,6 +20,7 @@
 
 ### Bug
 
+- Ui fix maker dai [#1787](https://github.com/MyEtherWallet/MyEtherWallet/pull/1787)
 - Catch error when cryptokitties api 500s [#1775](https://github.com/MyEtherWallet/MyEtherWallet/pull/1775)
 - Fix resolver when currency is ethereum token [#1774](https://github.com/MyEtherWallet/MyEtherWallet/pull/1774)
 - Might be a fix to that intermittent error after logging out [#1773](https://github.com/MyEtherWallet/MyEtherWallet/pull/1773)

src/components/Card1/Card1.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="card">
+    <div v-if="loading" class="loading-sign">
+      <b-spinner
+        style="width: 4rem; height: 4rem;"
+        variant="primary"
+      ></b-spinner>
+      <div class="font-weight-bolder mt-3">
+        {{ loadingMsg }}
+      </div>
+    </div>
+    <b-card
+      :title="title"
+      class="the-card"
+      :class="loading ? 'card-disabled' : ''"
+    >
+      <b-card-text class="mb-3">
+        {{ text }}
+      </b-card-text>
+      <div class="flex-grow-1" />
+      <b-button
+        class="font-weight-bold"
+        variant="primary"
+        block
+        @click="click"
+        >{{ button }}</b-button
+      >
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    button: {
+      type: String,
+      default: ''
+    },
+    click: {
+      type: Function,
+      default: function() {}
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingMsg: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/scss/GlobalVariables';
+
+.btn {
+  background-color: $mew-green;
+  border-color: $mew-green;
+}
+
+.card {
+  position: relative;
+  height: 100%;
+}
+
+.the-card {
+  height: 100%;
+}
+
+.card-disabled {
+  opacity: 0.2;
+  pointer-events: none;
+  user-select: none;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-title {
+  font-size: 21px;
+  font-weight: 500;
+  line-height: 27px;
+}
+
+.loading-sign {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+}
+</style>

src/components/Card1/index.js

@@ -0,0 +1 @@
+export { default } from './Card1';

src/containers/FaqsContainer/FaqsContainer.vue

@@ -32,12 +32,6 @@
                     <div class="bar bar1"></div>
                     <div class="bar bar2"></div>
                   </div>
-                  <span
-                    v-if="false"
-                    :class="faqs[prop].open ? 'show-less' : 'show-more'"
-                  >
-                    {{ faqs[prop].open ? '-' : '+' }}
-                  </span>
                 </div>
               </div>
               <div

src/dapps/MakerDai/MakerDai.scss

@@ -21,12 +21,7 @@ $confirmation-modal-mobile-width: 500px;
     align-items: center;
     position: absolute;
     top: 16px;
-    right: 100px;
-
-    @media all and (max-width: 600px) {
-      top: 79px;
-      left: 8px;
-    }
+    right: 16px;
 
     .inner-container {
       display: flex;
@@ -145,31 +140,9 @@ $confirmation-modal-mobile-width: 500px;
 }
 
 .buttons-container {
-  display: grid;
-  grid-column-gap: 5px;
-  grid-row-gap: 5px;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding: 10px;
-
-  @media all and (max-width: $dapps-container-mobile-width) {
-    > * {
-      margin-bottom: 10px;
-    }
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  // Tablet
-  @media all and (min-width: calc(#{$mobile-width} + 1px)) and (max-width: $tablet-width) {
-    padding: 20px;
-  }
-
-  @media all and (max-width: $dapps-container-mobile-width) {
-    display: block;
-    padding: 10px;
-  }
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 %send-form-base {

src/dapps/MakerDai/MakerDai.vue

@@ -68,6 +68,7 @@
       @checkForProxy="checkIfDestAddressHasProxy"
     >
     </move-cdp-modal>
+
     <back-button :path="backPath()">
       <div class="back-bar-container">
         <div v-if="showMoveOrClose" class="header-buttons-container">
@@ -79,71 +80,79 @@
         </div>
       </div>
     </back-button>
+
     <div
-      v-show="makerActive && listCdps && showManageable"
-      class="buttons-container"
+      v-if="makerActive && listCdps && showManageable"
+      class="px-5 pt-3 pb-5"
     >
-      <div v-for="(value, idx) in cdps" :key="idx + value">
-        <div
-          :class="[
-            'dapps-button',
-            activeValues.cdpId === value ? 'active' : ''
-          ]"
-        >
-          <div @click="openManage(value)">
-            <h4>{{ $t('dappsMaker.vault-id') }} #{{ value }}</h4>
-          </div>
+      <h3 class="mb-3">Select your vault to see details.</h3>
+      <div class="buttons-container">
+        <div v-for="(value, idx) in cdps" :key="idx + value">
+          <b-button
+            variant="primary"
+            class="mr-2 mb-1"
+            @click="openManage(value)"
+          >
+            <b>{{ $t('dappsMaker.vault-id') }}</b>
+            <b-badge variant="light" class="ml-2" style="font-size: 15px;"
+              ># {{ value }}</b-badge
+            >
+          </b-button>
         </div>
       </div>
     </div>
 
-    <router-view
-      :active-cdp-id="activeCdpId"
-      :loading-state="curentlyLoading"
-      :build-empty="buildEmpty"
-      :maker-active="makerActive"
-      :eth-price="ethPrice"
-      :liquidation-penalty="liquidationPenalty"
-      :stability-fee="stabilityFee"
-      :liquidation-ratio="liquidationRatio"
-      :price-service="priceService"
-      :cdp-service="cdpService"
-      :proxy-service="proxyService"
-      :cdps="cdps"
-      :cdps-without-proxy="cdpsWithoutProxy"
-      :cdp-details-loaded="cdpDetailsLoaded"
-      :tokens-with-balance="tokensWithBalance"
-      :migration-in-progress="migrationInProgress"
-      :open-close-modal="openCloseModal"
-      :open-move-modal="openMoveModal"
-      :values-updated="valuesUpdated"
-      :values="activeValues"
-      :get-collateral-options="getCollateralOptions"
-      :get-value-or-function="getValueOrFunction"
-      :get-cdp="getCdp"
-      :has-cdp="hasCdp"
-      @activeCdpId="setupCdpManageFunc"
-      @cdpOpened="addCdp"
-      @cdpClosed="removeCdp"
-      @modalHidden="modalHidden"
-      @managerUpdate="doUpdate"
-      @showWithdraw="showWithdraw"
-      @showPayback="showPayback"
-      @showGenerate="showGenerate"
-      @showDeposit="showDeposit"
-      @migrateCdp="migrateCdpExternal"
-      @proceedtoCreateOrManage="proceedtoCreateOrManage"
-      @approveCurrency="approveCurrency"
-      @setActiveCdpId="setActiveCdpId"
-      @setAfterLoadPage="setAfterLoadPage"
-    >
-    </router-view>
+    <div class="px-5 py-3">
+      <router-view
+        :active-cdp-id="activeCdpId"
+        :loading-state="curentlyLoading"
+        :build-empty="buildEmpty"
+        :maker-active="makerActive"
+        :eth-price="ethPrice"
+        :liquidation-penalty="liquidationPenalty"
+        :stability-fee="stabilityFee"
+        :liquidation-ratio="liquidationRatio"
+        :price-service="priceService"
+        :cdp-service="cdpService"
+        :proxy-service="proxyService"
+        :cdps="cdps"
+        :cdps-without-proxy="cdpsWithoutProxy"
+        :cdp-details-loaded="cdpDetailsLoaded"
+        :tokens-with-balance="tokensWithBalance"
+        :migration-in-progress="migrationInProgress"
+        :open-close-modal="openCloseModal"
+        :open-move-modal="openMoveModal"
+        :values-updated="valuesUpdated"
+        :values="activeValues"
+        :get-collateral-options="getCollateralOptions"
+        :get-value-or-function="getValueOrFunction"
+        :get-cdp="getCdp"
+        :has-cdp="hasCdp"
+        @activeCdpId="setupCdpManageFunc"
+        @cdpOpened="addCdp"
+        @cdpClosed="removeCdp"
+        @modalHidden="modalHidden"
+        @managerUpdate="doUpdate"
+        @showWithdraw="showWithdraw"
+        @showPayback="showPayback"
+        @showGenerate="showGenerate"
+        @showDeposit="showDeposit"
+        @migrateCdp="migrateCdpExternal"
+        @proceedtoCreateOrManage="proceedtoCreateOrManage"
+        @approveCurrency="approveCurrency"
+        @setActiveCdpId="setActiveCdpId"
+        @setAfterLoadPage="setAfterLoadPage"
+      >
+      </router-view>
+    </div>
+    <interface-footer />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import BackButton from '@/layouts/InterfaceLayout/components/BackButton';
+import InterfaceContainerFooter from '@/layouts/InterfaceLayout/components/InterfaceContainerFooter';
 import MoveCdpModal from './components/MoveCdpModal';
 import GenerateModal from './components/GenerateModal';
 import DepositModal from './components/DepositModal';
@@ -202,6 +211,7 @@ export default {
     'withdraw-modal': WithdrawModal,
     'payback-modal': PaybackModal,
     'back-button': BackButton,
+    'interface-footer': InterfaceContainerFooter,
     'move-cdp-modal': MoveCdpModal
   },
   props: {

src/dapps/MakerDai/containers/CreateCDP/CreateCDP.scss

@@ -104,11 +104,6 @@ $this-page-mobile-width: 700px;
   overflow: hidden;
 
   .manage-container {
-    padding: 40px;
-    @media all and (max-width: $this-page-mobile-width) {
-      padding: 20px;
-    }
-
     .currency-label {
       margin-bottom: 15px;
     }

src/dapps/MakerDai/containers/CreateCDP/CreateCDP.vue

@@ -18,8 +18,8 @@
       :loadingmessage="$t('dappsMaker.creating-message')"
     />
     <div class="manage-container">
-      <p class="top-title">{{ $t('dappsMaker.maker_title') }}</p>
-      <p class="top-title-sub">{{ $t('dappsMaker.create-instruct') }}</p>
+      <h3 class="mb-3 ">{{ $t('dappsMaker.maker_title') }}</h3>
+      <div class="mb-5">{{ $t('dappsMaker.create-instruct') }}</div>
 
       <div class="currency-ops-new">
         <div class="currency-picker-container">