Merge pull request #324 from gobitfly/NOBIDS/MinorFooterAndPricingFixes

Nobids/minor footer and pricing fixes
gobitfly · May 22, 2024 · e56d474 · e56d474
2 parents 99bfc6a + 1cd5445
commit e56d474
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/frontend/components/bc/footer/MainFooter.vue b/frontend/components/bc/footer/MainFooter.vue
@@ -3,60 +3,63 @@
 </script>
 
 <template>
-  <div id="main-footer">
-    <div id="links">
+  <div class="main-footer">
+    <div class="links">
       <BcFooterLinkList />
     </div>
-    <div id="very-last-line">
+    <div class="very-last-line">
       <BcFooterCopyrightAndVersion />&nbsp;|&nbsp;<BcFooterColorThemeToggle />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-#main-footer {
+.main-footer {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  left: 0;
-  right: 0;
+  gap: var(--padding-large);
+  padding-top: var(--padding-large);
+  margin-top: 64px;
+  background-color: var(--container-background);
+
   @media (min-width: 600px) { // large screen
     justify-content: center;
   }
+
   @media (max-width: 599.9px) { // mobile
     justify-content: flex-start;
-    width: 100%;
+    padding-left: var(--padding-large);
   }
-  >div{
-    padding-top: 4px;
-    padding-bottom: 13px;
-    padding-left: 10px;
+
+  .links {
+    display: flex;
+
+    @media (min-width: 600px) { // large screen
+      justify-content: center;
+      flex-direction: row;
+      gap: 130px;
+    }
+
+    @media (max-width: 599.9px) { // mobile
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-direction: column;
+    }
   }
-}
 
-#links {
-  display: flex;
-  @media (min-width: 600px) { // large screen
-    justify-content: center;
+  .very-last-line {
+    display: flex;
     flex-direction: row;
-    gap: 130px;
-  }
-  @media (max-width: 599.9px) { // mobile
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 0px;
-  }
-}
+    padding-bottom: 13px;
 
-#very-last-line {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
-  @media (min-width: 600px) { // large screen
-    justify-content: center;
-  }
-  @media (max-width: 599.9px) { // mobile
-    justify-content: flex-start;
+    @media (min-width: 600px) { // large screen
+      justify-content: center;
+    }
+
+    @media (max-width: 599.9px) { // mobile
+      justify-content: flex-start;
+    }
   }
 }
 </style>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
@@ -547,7 +547,7 @@
     "all_networks": "All"
   },
   "pricing": {
-    "premium": "Beaconcha.in Premium",
+    "premium": "beaconcha.in Premium",
     "API_keys": "API Keys",
     "subtitle": "Monitoring without limits on web and mobile.",
     "monthly": "Monthly",