Fix/Commons

* fix tools-sidebar padding * fix starts-preview * updated project-info * updated navbar * updated footer * updated audits-page * updated images (high-res) * fix hash-function-form * removed footer of tools-sidebar * fix creare2-address-form * updated og-meta --------- Co-authored-by: Yehor Podporinov <[email protected]>
dl-solarity · Sep 17, 2023 · 9ae8827 · 9ae8827
1 parent 59bc4b3
commit 9ae8827
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 217 deletions.
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -1,42 +1,23 @@
 <template>
   <div class="app-footer">
-    <app-button
-      v-for="(link, index) in links"
-      :key="`${link.text}-${index}`"
-      :text="link.text"
-      :href="link.href"
-      color="secondary"
-      modification="text"
-    />
+    <p class="app-footer__item">
+      {{ $t('app-footer.license') }}
+    </p>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { AppButton } from '#components'
-import { config } from '@/config'
-import { i18n } from '~/plugins/localization'
-
-const { t } = i18n.global
-
-// TODO: Rename text and change links
-const links = [
-  {
-    text: t('app-footer.link-text'),
-    href: config.GITHUB_URL,
-  },
-  {
-    text: t('app-footer.link-text'),
-    href: config.GITHUB_URL,
-  },
-]
-</script>
-
 <style lang="scss" scoped>
 .app-footer {
   display: flex;
   gap: toRem(24);
-  padding: toRem(24);
+  padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
   justify-content: center;
   border-top: toRem(1) solid var(--background-primary-light);
 }
+
+.app-footer__item {
+  color: var(--text-primary-main);
+
+  @include p-14-semi-bold;
+}
 </style>
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
@@ -3,40 +3,25 @@
     <app-logo />
     <nav class="app-navbar__nav">
       <app-button
-        v-for="(link, index) in links"
-        :key="`${link}-${index}`"
-        :text="link.text"
-        :href="link.href"
+        :text="$t('app-navbar.link-text')"
+        :href="config.COMPANY_URL"
         color="none"
-        size="large"
         modification="text"
+        size="large"
       />
     </nav>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { AppLogo, AppButton } from '#components'
+import { config } from '@/config'
 import { onUnmounted, ref, onMounted } from 'vue'
-import { i18n } from '~/plugins/localization'
 
-const { t } = i18n.global
 const isDarkenBg = ref(false)
 
-// TODO: Rename text and change links
-const links = [
-  {
-    text: t('app-navbar.link-text'),
-    href: 'https://github.com/dl-solidity-library/',
-  },
-  {
-    text: t('app-navbar.link-text'),
-    href: 'https://github.com/dl-solidity-library/',
-  },
-]
-
 const toggleColorHeader = () => {
-  isDarkenBg.value = window.pageYOffset >= 1
+  isDarkenBg.value = window.scrollY >= 1
 }
 
 onMounted(() => {

diff --git a/components/AuditsCard.vue b/components/AuditsCard.vue
@@ -5,18 +5,14 @@
       <div class="audits-card__title-wrp">
         <h3>{{ audit.title }}</h3>
         <div class="audits-card__circle" />
-        <p class="audits-card__title">
-          {{ audit.fileSize }}
-        </p>
+        <h3>{{ audit.fileSize }}</h3>
       </div>
-      <p class="audits-card__description">
-        {{ audit.description }}
-      </p>
       <app-button
         class="audits-card__btn"
         color="none"
         scheme="flat"
         modification="border-circle"
+        download
         :text="audit.btnText || $t('audits-card.download-btn')"
         :icon-right="$icons.download"
         :href="audit.fileLink"
@@ -48,11 +44,16 @@ defineProps<{
   aspect-ratio: 600 / 318;
   width: 100%;
   object-fit: cover;
+  border-radius: inherit;
 }
 
 .audits-card__content {
   display: flex;
-  flex-direction: column;
+  gap: toRem(12);
+
+  @include respond-to(xsmall) {
+    flex-direction: column;
+  }
 }
 
 .audits-card__title-wrp {
@@ -61,12 +62,6 @@ defineProps<{
   gap: toRem(8);
 }
 
-.audits-card__description {
-  margin-top: toRem(12);
-  margin-bottom: toRem(24);
-  color: var(--text-primary-main);
-}
-
 .audits-card__circle {
   width: toRem(5);
   height: toRem(5);
@@ -75,6 +70,6 @@ defineProps<{
 }
 
 .audits-card__btn {
-  align-self: end;
+  margin-left: auto;
 }
 </style>
diff --git a/components/ProjectsInfo.vue b/components/ProjectsInfo.vue
@@ -41,7 +41,7 @@ const cards = [
   {
     title: t('projects-info.solidity-tools-title'),
     message: t('projects-info.solidity-tools-message'),
-    route: ROUTE_PATH.abi,
+    route: ROUTE_PATH.abiEncoder,
     btnText: t('projects-info.visit-btn'),
   },
 ]

diff --git a/components/StatsPreview.vue b/components/StatsPreview.vue
@@ -2,57 +2,26 @@
   <div class="stats-preview">
     <div class="stats-preview__header">
       <h1 class="stats-preview__header-main-title">
-        {{ t('stats-preview.main-title') }}
+        {{ $t('stats-preview.main-title') }}
       </h1>
       <p class="stats-preview__header-secondary-title">
-        {{ t('stats-preview.secondary-title') }}
+        {{ $t('stats-preview.secondary-title') }}
       </p>
     </div>
-
-    <div class="stats-preview__cards">
-      <stats-preview-card
-        v-for="(card, idx) in cards"
-        :key="idx"
-        :title="card.title"
-        :message="card.message"
-      />
-    </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import StatsPreviewCard from './StatsPreviewCard.vue'
-import { i18n } from '~/plugins/localization'
-
-const { t } = i18n.global
-
-const cards = [
-  {
-    title: t('stats-preview.stats-card-1-title'),
-    message: t('stats-preview.stats-card-1-message'),
-  },
-  {
-    title: t('stats-preview.stats-card-2-title'),
-    message: t('stats-preview.stats-card-2-message'),
-  },
-  {
-    title: t('stats-preview.stats-card-3-title'),
-    message: t('stats-preview.stats-card-3-message'),
-  },
-]
-</script>
-
 <style lang="scss" scoped>
 .stats-preview {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   gap: toRem(60);
   background-image: url('/branding/bg.png');
   background-size: 100% 100%;
   width: 100%;
   min-height: vh(100);
-  padding: toRem(204) toRem(96) toRem(80);
+  padding: toRem(96) toRem(80);
 
   @include respond-to(tablet) {
     padding: var(--app-padding);
@@ -67,21 +36,11 @@ const cards = [
 }
 
 .stats-preview__header-main-title {
-  max-width: toRem(940);
+  max-width: toRem(800);
 }
 
 .stats-preview__header-secondary-title {
   max-width: toRem(440);
   color: var(--text-primary-main);
 }
-
-.stats-preview__cards {
-  display: flex;
-  gap: toRem(90);
-
-  @include respond-to(tablet) {
-    flex-direction: column;
-    gap: toRem(20);
-  }
-}
 </style>
diff --git a/components/StatsPreviewCard.vue b/components/StatsPreviewCard.vue
diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
@@ -32,17 +32,6 @@
             </li>
           </ul>
         </nav>
-
-        <div class="tools-sidebar__footer">
-          <app-button
-            v-for="(footerLink, index) in footerLinks"
-            :key="`${footerLink.text}-${index}`"
-            :text="footerLink.text"
-            :href="footerLink.href"
-            color="secondary"
-            modification="text"
-          />
-        </div>
       </aside>
     </div>
   </transition>
@@ -55,7 +44,6 @@ import { AppLogo, AppButton } from '#components'
 import { bus, BUS_EVENTS } from '@/helpers'
 import { useWindowSize } from '@vueuse/core'
 import { WINDOW_BREAKPOINTS, ICON_NAMES } from '@/enums'
-import { config } from '@/config'
 import { ROUTE_PATH } from '@/constants'
 import { i18n } from '~/plugins/localization'
 
@@ -90,17 +78,6 @@ const navLinks = computed(() => [
   },
 ])
 
-const footerLinks = [
-  {
-    text: t('tools-sidebar.company-link-text'),
-    href: config.COMPANY_URL,
-  },
-  {
-    text: t('tools-sidebar.github-link-text'),
-    href: config.GITHUB_URL,
-  },
-]
-
 const { width: windowWidth } = useWindowSize()
 const sidebarElement = ref<HTMLElement | null>(null)
 const isVisible = ref(false)
@@ -164,7 +141,7 @@ $aside-max-width: toRem(280);
   width: 100%;
   height: $aside-height;
   max-width: $aside-max-width;
-  padding: toRem(24);
+  padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
   background: var(--background-primary-main);
 
   @include respond-to(medium) {
@@ -179,7 +156,7 @@ $aside-max-width: toRem(280);
 .tools-sidebar__header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: toRem(64);
+  margin-bottom: toRem(96);
 }
 
 .tools-sidebar__nav-links-list {
@@ -202,14 +179,6 @@ $aside-max-width: toRem(280);
   }
 }
 
-.tools-sidebar__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: auto;
-  gap: toRem(12) toRem(24);
-}
-
 .tools-sidebar__transition-enter-active {
   animation: fade-unroll-right 0.2s ease-in-out;
 }