Merge pull request #1124 from aeternity/feature/drop-bootstrap

refactor: drop bootstrap
aeternity · Jul 6, 2021 · 9aeca0d · 9aeca0d
2 parents 082eb37 + 7b8dd14
commit 9aeca0d
Show file tree

Hide file tree

Showing 37 changed files with 213 additions and 233 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "autosize": "^5.0.0",
     "axios": "^0.21.1",
     "bignumber.js": "^9.0.1",
-    "bootstrap": "^4.5.3",
     "chart.js": "^2.9.4",
     "chartjs-plugin-annotation": "^0.5.7",
     "core-js": "^3.15.1",
@@ -34,6 +33,7 @@
     "is-fqdn": "^2.0.1",
     "jitsi-iframe-api": "^1.0.0",
     "lodash-es": "^4.17.21",
+    "normalize.css": "^8.0.1",
     "sophia-bonding-curve": "github:aeternity/BondingCurve#1.0.0-alpha.2",
     "soundcloud-widget": "^0.2.1",
     "tipping-contract": "github:aeternity/tipping-contract#v5.0.0-alpha1",

diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,7 @@
     :class="$route.meta.layoutClass"
   >
     <MobileNavigation v-if="!$route.meta.fullScreen" />
-    <div class="not-bootstrap-row">
+    <div class="row">
       <div
         v-if="!$route.meta.fullScreen"
         class="sidebar-sticky"
@@ -140,7 +140,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .not-bootstrap-row {
+  .row {
     flex-grow: 1;
     display: flex;
     flex-wrap: nowrap;

diff --git a/src/components/ActivityRibbon.vue b/src/components/ActivityRibbon.vue
@@ -6,11 +6,7 @@
       :class="{ active: value === tab.activity }"
       @click="updateValue(tab.activity)"
     >
-      <Component :is="tab.icon" />
-
-      <span class="text">
-        {{ tab.text }}
-      </span>
+      <Component :is="tab.icon" /> <span>{{ tab.text }}</span>
     </FilterButton>
     <slot name="left" />
     <div class="separator" />
@@ -45,8 +41,11 @@ export default {
   display: flex;
   align-items: center;
 
-  .text {
-    padding-left: 0.15rem;
+  .filter-button {
+    svg,
+    span {
+      vertical-align: middle;
+    }
   }
 
   .separator {

diff --git a/src/components/AeInputAmount.vue b/src/components/AeInputAmount.vue
@@ -160,7 +160,7 @@ export default {
       height: 2.1rem;
     }
 
-    .not-bootstrap-modal-content {
+    .modal-content {
       margin-top: 0.25rem;
     }
   }

diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
@@ -103,6 +103,7 @@ export default {
     color: $standard_font_color;
     box-shadow: inset 0 0 0.1rem $article_content_color;
     border-radius: unset;
+    white-space: nowrap;
 
     &:first-child {
       border-radius: 0.15rem 0.15rem 0 0;
@@ -121,7 +122,7 @@ export default {
     padding: 0;
   }
 
-  &::v-deep .not-bootstrap-modal-content {
+  &::v-deep .modal-content {
     max-height: 10rem;
     overflow-y: auto;
     scrollbar-width: none;
@@ -132,7 +133,7 @@ export default {
     }
   }
 
-  &.right::v-deep .not-bootstrap-modal-content {
+  &.right::v-deep .modal-content {
     right: 0;
   }
 

diff --git a/src/components/FilterButton.vue b/src/components/FilterButton.vue
@@ -21,7 +21,7 @@ export default {
   border-radius: 50px;
   font-size: 16px;
   font-weight: 700;
-  line-height: 18px;
+  line-height: 22px;
   padding: 8px 16px;
   color: $tip_note_color;
   height: 40px;

diff --git a/src/components/Input.vue b/src/components/Input.vue
@@ -22,6 +22,8 @@
   padding: 8.5px 16px;
 
   &:focus {
+    transition: 0.3s;
+    transition-property: background-color, border-color;
     border-color: $secondary_color;
     background-color: $actions_ribbon_background_color;
   }

diff --git a/src/components/Loader.vue b/src/components/Loader.vue
@@ -53,6 +53,8 @@ export default {
   .svg {
     width: 56px;
     height: 56px;
+    display: block;
+    margin: 0 auto;
   }
 
   &.lg .svg {

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="not-bootstrap-modal">
+  <div class="modal">
     <div
       class="overlay"
       @click.stop="$emit('close')"
     />
-    <div class="not-bootstrap-modal-content">
+    <div class="modal-content">
       <slot />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.not-bootstrap-modal {
+.modal {
   .overlay {
     bottom: 0;
     left: 0;
@@ -21,7 +21,7 @@
     z-index: 90;
   }
 
-  .not-bootstrap-modal-content {
+  .modal-content {
     position: absolute;
     z-index: 90;
   }

diff --git a/src/components/TabBarButton.vue b/src/components/TabBarButton.vue
@@ -38,5 +38,12 @@ export default {
       border-color: $custom_links_color;
       color: $custom_links_color;
     }
+
+    ::v-deep {
+      svg,
+      span {
+        vertical-align: middle;
+      }
+    }
   }
 </style>
diff --git a/src/components/ThreeDotsMenu.vue b/src/components/ThreeDotsMenu.vue
@@ -44,7 +44,7 @@ export default {
     color: #fff;
   }
 
-  ::v-deep .not-bootstrap-modal-content {
+  ::v-deep .modal-content {
     font-size: 0.75rem;
     border-radius: 0.25rem;
     border: 0.05rem solid $article_content_color;

diff --git a/src/components/TipInput.vue b/src/components/TipInput.vue
@@ -46,7 +46,7 @@
           maxlength="280"
           :placeholder="$t('addMessage')"
         />
-        <div class="not-bootstrap-row">
+        <div class="row">
           <AeInputAmount
             v-model="inputValue"
             :select-token-f="token => (inputToken = token)"
@@ -275,7 +275,7 @@ export default {
     }
   }
 
-  .not-bootstrap-modal > ::v-deep .not-bootstrap-modal-content {
+  .modal > ::v-deep .modal-content {
     background-color: $article_content_color;
     border-radius: 0.25rem;
     margin-top: 0.25rem;
@@ -288,7 +288,7 @@ export default {
     }
   }
 
-  .not-bootstrap-modal .not-bootstrap-modal-content {
+  .modal .modal-content {
     .error {
       text-align: center;
       font-size: 12px;
@@ -301,7 +301,7 @@ export default {
       margin-bottom: 0.5rem;
     }
 
-    .not-bootstrap-row {
+    .row {
       display: flex;
 
       .ae-button {

diff --git a/src/components/TopicList.vue b/src/components/TopicList.vue
@@ -3,7 +3,7 @@
     <div
       v-for="[topic, data] in topics"
       :key="topic"
-      class="not-bootstrap-row"
+      class="row"
     >
       <Topic
         class="text-ellipsis"
@@ -30,7 +30,7 @@ export default {
 
 <style lang="scss" scoped>
 .topic-list {
-  .not-bootstrap-row {
+  .row {
     display: flex;
     align-items: center;
     margin: 0.5rem 0;

diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
@@ -640,6 +640,10 @@ input[type="file"] {
   color: $lighter_font_color;
   font-size: 0.7rem;
   vertical-align: middle;
+
+  img {
+    vertical-align: middle;
+  }
 }
 
 .profile-section {
@@ -775,6 +779,7 @@ input[type="file"] {
       height: 0.9rem;
       margin-bottom: 0.2rem;
       margin-right: 0.2rem;
+      vertical-align: middle;
     }
   }
 

diff --git a/src/components/VoteCard.vue b/src/components/VoteCard.vue
@@ -58,23 +58,12 @@
         </OutlinedButton>
       </div>
 
-      <label
-        v-if="vote.showVoteOption"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Amount') }}
-      </label>
-      <label
-        v-if="vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Staked') }}
-      </label>
-      <label
-        v-if="!vote.showVoteOption && !vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.NotParticipate') }}
+      <label class="stake-label">
+        {{
+          vote.showVoteOption && $t('components.VoteCard.Amount')
+          || vote.accountHasVoted && $t('components.VoteCard.Staked')
+          || $t('components.VoteCard.NotParticipate')
+        }}
       </label>
 
       <div class="input-bar">
@@ -354,6 +343,7 @@ export default {
       svg {
         height: 16px;
         width: auto;
+        vertical-align: middle;
       }
 
       time {
@@ -385,10 +375,6 @@ export default {
   &:active,
   &:hover {
     background-color: $card_hover_color;
-
-    ::v-deep .form-control {
-      background-color: $super_dark;
-    }
   }
 
   .vote-progress-bar {
@@ -460,23 +446,6 @@ export default {
     }
   }
 
-  .input-group {
-    width: 50%;
-    height: 100%;
-
-    .input-group-append > span.append__ae {
-      font-size: 0.62rem;
-    }
-
-    .form-control {
-      height: 100%;
-    }
-
-    @include mobile {
-      width: 100%;
-    }
-  }
-
   ::v-deep .ae-button {
     font-weight: bold;
     font-size: 0.8rem;

diff --git a/src/components/WordBuySellButtons.vue b/src/components/WordBuySellButtons.vue
@@ -368,12 +368,12 @@ export default {
   }
 }
 
-::v-deep.not-bootstrap-modal {
+::v-deep.modal {
   .overlay {
     z-index: 1;
   }
 
-  .not-bootstrap-modal-content {
+  .modal-content {
     background-color: $actions_ribbon_background_color;
     border: 1px solid $background_color;
     box-sizing: border-box;
@@ -412,11 +412,6 @@ export default {
   }
 }
 
-.input-group {
-  width: 228px;
-  margin-bottom: 24px;
-}
-
 .return-amount {
   display: flex;
   flex-direction: row;

diff --git a/src/components/WordInfo.vue b/src/components/WordInfo.vue
@@ -424,6 +424,10 @@ export default {
         }
       }
     }
+
+    figure {
+      margin: 0 0 1rem;
+    }
   }
 
   .legend {
-Original file line number
+Diff line change
@@ Expand Up / @@ -424,6 +424,10 @@ export default { @@
             }
           }
         }
+        figure {
+          margin: 0 0 1rem;
+        }
       }
       .legend {
@@ Expand Down @@