feat: improve reuse of components and theme

witnet · May 14, 2024 · 523cdf8 · 523cdf8
1 parent d4f9b0f
commit 523cdf8
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 73 deletions.
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -8,23 +8,3 @@ html {
   color: $white;
   background-color: $black;
 }
-
-// h1 {
-//   font-family: 'Outfit';
-// }
-
-// h2 {
-//   font-family: 'Outfit';
-// }
-
-// h3 {
-//   margin: 0;
-//   font-family: 'Outfit';
-// }
-
-// body {
-//   font-family: 'Poppins';
-//   height: 100%;
-//   margin: 0;
-//   padding: 0;
-// }
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
@@ -24,4 +24,10 @@
     @apply cursor-not-allowed font-semibold rounded-full shadow-md bg-wit-blue-500 text-black-950 bg-opacity-80;
   }
   /* Navbar */
+  .navbar-links {
+    @apply bg-black-950;
+  }
+  .nav-link {
+    @apply text-white-50 hover:text-gray-500;
+  }
 }
diff --git a/components/IconExternalLink.vue b/components/IconExternalLink.vue
@@ -4,15 +4,13 @@
   </a>
 </template>
 <script setup lang="ts">
-import type { PropType } from 'vue'
-
 defineProps({
   url: {
     type: String,
     required: true,
   },
   icon: {
-    type: Object as PropType<String>,
+    type: Object,
     required: true,
   },
 })

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -1,30 +1,18 @@
 <template>
   <header class="navbar">
-    <NuxtLink class="logo-link" to="/" rel="home"
-      ><WitnetLogo class="logo"
-    /></NuxtLink>
+    <div class="logo-link">
+      <slot class="logo-link" name="logo"></slot>
+    </div>
     <input id="side-menu" ref="checkbox" class="checkbox" type="checkbox" />
     <nav class="navbar-tabs">
       <ul class="navbar-links animated zoomIn">
         <div class="close-menu-container" @click="closeMenu">
           <CloseNavIcon />
         </div>
-        <li class="yellow">
-          <NuxtLink class="link yellow" to="/build" rel="about">{{
-            $t('build')
-          }}</NuxtLink>
+        <li v-for="link in navLinks" :key="link.key" class="nav-link">
+          <slot :name="link.key" />
         </li>
-        <li>
-          <NuxtLink class="link" to="/buy" rel="contact">{{
-            $t('buy')
-          }}</NuxtLink>
-        </li>
-        <li class="yellow">
-          <NuxtLink class="link" to="/stake" rel="contact">{{
-            $t('stake')
-          }}</NuxtLink>
-        </li>
-        <li class="link language-select">
+        <li class="nav-link language-select">
           <LanguageSwitcher />
         </li>
       </ul>
@@ -35,16 +23,22 @@
   </header>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends any">
 import { ref } from 'vue'
-import WitnetLogo from '@/assets/svg/witnet-logo.svg'
-import HamburgerIcon from '@/assets/svg/hamburguer.svg'
-import CloseNavIcon from '@/assets/svg/close-nav.svg'
+import HamburgerIcon from '@/assets/svg/hamburguer.svg?component'
+import CloseNavIcon from '@/assets/svg/close-nav.svg?component'
 const menu = ref()
 const checkbox = ref()
 const route = useRoute()
 const routePath = computed(() => route.path)
 
+defineProps({
+  navLinks: {
+    type: Object as PropType<Array<{ key: string }>>,
+    required: true,
+  },
+})
+
 function closeMenu() {
   menu.value.click()
 }
@@ -60,20 +54,23 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .navbar {
   background-color: transparent;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   top: -16px;
   z-index: 500;
+
   .logo-link {
-    color: $white;
-    text-decoration: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .logo {
+    a {
+      text-decoration: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    svg {
       width: 200px;
       height: auto;
     }
@@ -89,17 +86,13 @@ watch(
     grid-template-columns: repeat(4, max-content);
     align-items: flex-start;
     justify-content: space-between;
-    .link {
+    .nav-link {
       padding: 0 16px;
       text-decoration: none;
       font-size: 16px;
       text-decoration: none;
       width: max-content;
       display: block;
-      color: $white;
-      &:hover {
-        color: $grey;
-      }
       &.language-select {
         padding: 16px;
         justify-self: flex-end;
@@ -158,9 +151,6 @@ watch(
       justify-content: center;
       align-items: center;
     }
-    .yellow {
-      background-color: $blue;
-    }
     .navbar-links {
       padding: 0;
       display: grid;
@@ -173,8 +163,7 @@ watch(
       left: 0;
       bottom: 0;
       gap: 0;
-      background-color: $black;
-      .link {
+      .nav-link {
         padding: 8px 16px 8px 16px;
         width: 100%;
         &.language-select {

diff --git a/components/SocialLinks.vue b/components/SocialLinks.vue
@@ -7,9 +7,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import Twitter from '@/assets/svg/socials/twitter.svg'
-import Telegram from '@/assets/svg/socials/telegram.svg'
-import Discord from '@/assets/svg/socials/discord.svg'
-import Github from '@/assets/svg/socials/github.svg'
+import Twitter from '@/assets/svg/socials/twitter.svg?component'
+import Telegram from '@/assets/svg/socials/telegram.svg?component'
+import Discord from '@/assets/svg/socials/discord.svg?component'
+import Github from '@/assets/svg/socials/github.svg?component'
 import { URLS } from '@/constants'
 </script>
diff --git a/components/ThemeSwitch.vue b/components/ThemeSwitch.vue
@@ -31,7 +31,6 @@ const toggleMode = () => {
 
 <style scoped lang="scss">
 .mode-icon {
-  color: var(--icon-color);
   font-size: 20px;
   width: 20px;
   height: 20px;
@@ -41,7 +40,6 @@ const toggleMode = () => {
 }
 .icon-container {
   cursor: pointer;
-  background-color: var(--icon-background);
   width: 40px;
   height: 40px;
   display: flex;

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -2,7 +2,23 @@
   <div
     class="p-6 w-full grid grid-rows-[max-content_1fr_max-content] bg-black-950 text-white-50 dark:text-wit-blue-500 min-h-screen"
   >
-    <NavBar />
+    <NavBar :nav-links="navLinks">
+      <template #logo>
+        <NuxtLink to="/" rel="home">
+          <WitnetLogo />
+        </NuxtLink>
+      </template>
+      <template #build>
+        <NuxtLink to="/build" rel="about">{{ $t('build') }}</NuxtLink>
+      </template>
+      <template #buy>
+        <NuxtLink to="/buy" rel="contact">{{ $t('buy') }}</NuxtLink>
+      </template>
+      <template #stake>
+        <NuxtLink to="/stake" rel="contact">{{ $t('stake') }}</NuxtLink>
+      </template>
+    </NavBar>
+    <!-- <Compoennt /> -->
     <client-only>
       <ThemeSwitch class="theme-switch" />
     </client-only>
@@ -12,3 +28,19 @@
     <FooterSection />
   </div>
 </template>
+
+<script lang="ts" setup>
+import WitnetLogo from '@/assets/svg/witnet-logo.svg?component'
+
+const navLinks: Array<{ key: string }> = [
+  {
+    key: 'build',
+  },
+  {
+    key: 'buy',
+  },
+  {
+    key: 'stake',
+  },
+]
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,10 +12,8 @@ export default {
   safelist: ['btn-primary', 'btn-secondary', 'btn-disabled'],
   theme: {
     screens: {
-      sm: '480px',
-      md: '768px',
-      lg: '976px',
-      xl: '1440px',
+      sm: { min: '0px', max: '706px' },
+      md: '706px',
     },
     extend: {
       fontFamily: {