Fix/Сommons

app.vue

@@ -2,8 +2,24 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <div id="app-modals" />
 </template>
 
 <script lang="ts" setup>
+import { useViewportSizes } from '@/composables'
+import { debounce } from 'lodash-es'
+import { onBeforeUnmount, onMounted } from 'vue'
 import 'virtual:svg-icons-register'
+
+const { assignVhCssVariable } = useViewportSizes()
+
+const assignVhCssVariableDebounced = debounce(assignVhCssVariable, 300)
+
+onMounted(() => {
+  window.addEventListener('resize', assignVhCssVariableDebounced)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', assignVhCssVariableDebounced)
+})
 </script>

assets/styles/_app-colors.scss

@@ -49,3 +49,6 @@ $text-primary-invert-dark: #0F141E;
 $border-primary-light: #FCFCFC;
 $border-primary-main: #595758;
 $border-primary-dark: #2E2E2E;
+
+/* backdrop colors */
+$backdrop-modal: rgba(#000000, 0.5);

assets/styles/_global.scss

@@ -8,6 +8,7 @@ html {
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   min-height: vh(100);
+  min-width: toRem(375);
   display: flex;
   flex-direction: column;
 }
@@ -19,7 +20,6 @@ body, #__nuxt {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 100vw;
   background: var(--background-primary-dark);
 }
 
@@ -101,6 +101,11 @@ a {
   @include p-16-regular;
 }
 
+main {
+  margin-top: var(--app-height-header);
+  padding: var(--app-padding);
+}
+
 h1 {
   font-family: var(--app-font-family-main);
   font-size: toRem(56);
@@ -115,6 +120,11 @@ h2 {
   font-weight: 500;
   line-height: toRem(48);
   letter-spacing: 0;
+
+  @include respond-to(medium) {
+    font-size: toRem(26);
+    line-height: toRem(32);
+  }
 }
 
 h3 {
@@ -123,43 +133,9 @@ h3 {
   font-weight: 500;
   line-height: toRem(32);
   letter-spacing: 0;
-}
-
-.fade-enter-active {
-  animation: fade-in 0.25s;
-}
-
-.fade-leave-active {
-  animation: fade-in 0.25s reverse;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
 
-  100% {
-    opacity: 1;
+  @include respond-to(medium) {
+    font-size: toRem(20);
+    line-height: toRem(28);
   }
 }
-
-.layout-wrapper {
-  max-width: toRem(1800);
-  margin: 0 auto;
-}
-
-.block {
-  display: flex;
-  flex-direction: column;
-  min-height: toRem(400);
-  width: 100%;
-  border-radius: var(--border-radius-main);
-  background: var(--background-primary-main);
-}
-
-.content {
-  display: flex;
-  padding: toRem(40);
-  height: 100%;
-  flex-direction: column;
-}

assets/styles/_mixins.scss

@@ -97,7 +97,6 @@ $media-breakpoints: (
   letter-spacing: var(--field-error-letter-spacing);
   color: var(--field-error);
   margin-top: var(--field-error-margin-top);
-  padding-left: var(--field-padding-left);
   transition: var(--field-transition-duration) ease;
   transition-property: opacity, color, font-size, transform;
 }
@@ -129,6 +128,51 @@ $media-breakpoints: (
   }
 }
 
+@mixin solidity-tools-page-base {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(32);
+
+  @include respond-to(medium) {
+    gap: toRem(24);
+  }
+}
+
+@mixin solidity-tools-page-content {
+  display: flex;
+  flex-direction: column;
+  padding: toRem(40);
+  border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
+  background: var(--background-primary-main);
+
+  @include respond-to(medium) {
+    padding: toRem(24) toRem(16) toRem(24) toRem(16);
+  }
+}
+
+@mixin solidity-tools-form {
+  display: grid;
+  grid-gap: toRem(40);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-part {
+  display: grid;
+  grid-gap: toRem(20);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-divider {
+  height: toRem(1);
+  background: var(--border-primary-main);
+}
+
 @mixin page-msg {
   max-width: toRem(420);
   width: 100%;

assets/styles/_variables.scss

@@ -56,6 +56,9 @@
   --border-primary-main: #{$border-primary-main};
   --border-primary-dark: #{$border-primary-dark};
 
+  /* common colors */
+  --backdrop-modal: #{$backdrop-modal};
+
   /* border radii */
   --border-radius-main: #{toRem(8)};
 
@@ -66,19 +69,14 @@
   --app-padding-left: #{toRem(32)};
   --app-padding-top: #{toRem(48)};
   --app-padding-bottom: #{toRem(48)};
+  --app-height-header: #{toRem(80)};
 
-  @include respond-to(xmedium) {
-    --app-padding-right: #{toRem(24)};
-    --app-padding-left: #{toRem(24)};
-    --app-padding-top: #{toRem(32)};
-    --app-padding-bottom: #{toRem(32)};
-  }
-
-  @include respond-to(small) {
-    --app-padding-right: #{toRem(12)};
-    --app-padding-left: #{toRem(12)};
+  @include respond-to(medium) {
+    --app-padding-right: #{toRem(16)};
+    --app-padding-left: #{toRem(16)};
     --app-padding-top: #{toRem(24)};
     --app-padding-bottom: #{toRem(24)};
+    --app-height-header: #{toRem(70)};
   }
 
   --app-padding:

assets/styles/flatpickr.scss

@@ -16,6 +16,10 @@ $z-index-arrow: 1;
   background: var(--primary-main);
   padding: var(--field-padding-top) var(--field-padding-right)
     toRem(8) var(--field-padding-left);
+
+  @include respond-to(small) {
+    padding: toRem(8) toRem(4) toRem(4);
+  }
 }
 
 .flatpickr-month {
@@ -169,6 +173,10 @@ $z-index-arrow: 1;
 .dayContainer {
   padding: toRem(8) var(--field-padding-right)
     toRem(8) var(--field-padding-left);
+
+  @include respond-to(small) {
+    padding: toRem(4);
+  }
 }
 
 .flatpickr-weekdaycontainer {
@@ -259,6 +267,10 @@ $z-index-arrow: 1;
       }
     }
   }
+
+  @include respond-to(small) {
+    margin: 0 toRem(4) toRem(4);
+  }
 }
 
 .flatpickr-hour,

components/AppFooter.vue

@@ -11,7 +11,12 @@
   display: flex;
   gap: toRem(24);
   padding: toRem(24) toRem(80);
-  border-top: toRem(1) solid var(--background-primary-light);
+  box-shadow: 0 toRem(-1) var(--background-primary-light);
+
+  @include respond-to(medium) {
+    padding: toRem(16) var(--app-padding-right) toRem(16)
+      var(--app-padding-left);
+  }
 }
 
 .app-footer__item {

components/AppModal.vue

@@ -0,0 +1,90 @@
+<template>
+  <teleport to="#app-modals">
+    <transition name="app-modal" appear>
+      <div
+        v-if="isResettable ? isShown : true"
+        v-show="!isResettable ? isShown : true"
+        class="app-modal"
+        tabindex="0"
+        role="button"
+        ref="modalBackdropElement"
+        @click="onBackdropClick"
+      >
+        <div class="app-modal__pane" v-bind="$attrs">
+          <slot :close="closeModal" />
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (event: 'update:is-shown', value: boolean): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    isShown?: boolean
+    isCloseByClickOutside?: boolean
+    isResettable?: boolean
+  }>(),
+  {
+    isShown: false,
+    isCloseByClickOutside: true,
+    isResettable: true,
+  },
+)
+
+const modalBackdropElement = ref<HTMLDivElement | undefined>()
+
+const closeModal = () => {
+  emit('update:is-shown', false)
+}
+
+const onBackdropClick = (event: Event) => {
+  if (
+    props.isCloseByClickOutside &&
+    event.target === modalBackdropElement.value
+  ) {
+    closeModal()
+    event.preventDefault()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$z-index: 1300;
+
+.app-modal {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  z-index: $z-index;
+  height: vh(100);
+  width: 100%;
+  background: var(--backdrop-modal);
+  overflow-y: auto;
+  padding: var(--app-padding);
+
+  &-enter-active,
+  &-leave-active {
+    transition: var(--field-transition-duration) ease-in-out;
+    transition-property: opacity, transform;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+}
+
+.app-modal__pane {
+  position: relative;
+  margin: auto;
+  flex-shrink: 0;
+}
+</style>