Criação da tela de porte do pet - Issue 107

src/home/index.js

@@ -3,6 +3,7 @@ import Navigation from './components/Navigation';
 import NoPetRegirestedPage from './components/NoPetRegirestedPage';
 import SideMenu from './components/SideMenu';
 import initializeScrollable from './utils/scrollable-sidemenu';
+import GeneralSize from './pages/generalSize';
 import './index.scss';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -19,12 +20,15 @@ document.addEventListener('DOMContentLoaded', () => {
   navigation.mount($navigation);
 
   const $content = selected.get('content');
-  const noPetRegirestedPage = new NoPetRegirestedPage();
-  noPetRegirestedPage.mount($content);
+  // const noPetRegirestedPage = new NoPetRegirestedPage();
+  // noPetRegirestedPage.mount($content);
 
   const $hamburgerMenu = navigation.selected.get('hamburger-menu');
   const $exitMenu = sideMenu.selected.get('exitMenu');
   const $itemsMenu = sideMenu.selected.get('menuitens').querySelectorAll('li');
 
   initializeScrollable($hamburgerMenu, $exitMenu, $itemsMenu, $home);
+
+  const generalSize = new GeneralSize();
+  generalSize.mount($content);
 });

src/home/index.scss

@@ -48,8 +48,8 @@
 
     background-color: colors.$appContentColor;
 
-    padding-inline: 2rem;
-    padding-block: 3.2rem;
+    // padding-inline: 2rem;
+    // padding-block: 3.2rem;
   }
 }
 

src/home/pages/generalSize/index.js

@@ -0,0 +1,46 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '../../../components/Button';
+import UploadImage from '../../../components/UploadImage';
+import './index.scss';
+
+const html = `
+  <div class="general-size" data-select="general-size">
+    <div class="general-size__general-size-container">
+      <div class="general-size__upload-image-container">
+        <div class="general-size__upload-image" data-select="upload-image"></div>
+      </div>
+      <div class="general-size__texts">
+        <div class="general-size__title">Qual é o tamanho do seu animal de estimação?</div>
+        <div class="general-size__text">Ajuste de acordo com a realidade</div>
+      </div>
+      <div class="general-size__slider" data-select="slider"></div>
+    </div>
+    <div class="general-size__container-button">
+      <div class="general-size__button" data-select="button"></div>
+    </div>
+  </div>
+`;
+
+export default function GeneralSize() {
+  Component.call(this, { html });
+
+  const $uploadImage = this.selected.get('upload-image');
+  const $button = this.selected.get('button');
+  let valor = null;
+
+  this.uploadImage = new UploadImage();
+  this.uploadImage.mount($uploadImage);
+
+  this.button = new Button({
+    text: 'Continuar',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  this.button.mount($button);
+}
+
+GeneralSize.prototype = Object.assign(
+  GeneralSize.prototype,
+  Component.prototype,
+);

src/home/pages/generalSize/index.scss

@@ -0,0 +1,87 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.general-size {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__general-size-container {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    gap: 2.4rem;
+    padding-inline: 2rem;
+    padding-block: 3.2rem;
+  }
+
+  &__upload-image-container {
+    padding: 3rem;
+  }
+
+  &__upload-image {
+  }
+
+  &__texts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    align-items: center;
+  }
+
+  &__title {
+    font-family: fonts.$primaryFont;
+    font-weight: fonts.$medium;
+    font-style: fonts.$normal;
+    font-size: fonts.$xs;
+    color: colors.$gray800;
+    line-height: 2rem;
+  }
+
+  &__text {
+    font-family: fonts.$tertiaryFont;
+    font-weight: fonts.$regular;
+    font-style: fonts.$normal;
+    font-size: fonts.$xxs;
+    color: colors.$gray700;
+    line-height: 2rem;
+  }
+
+  &__slider {
+    height: 20rem;
+  }
+
+  &__container-button {
+    border-radius: 7px;
+    box-shadow: 0 -0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2.4rem;
+  }
+
+  &__button {
+    width: 42rem;
+  }
+}
+
+@include breakpoints.from1024 {
+  .general-size {
+    &__title {
+      font-size: 1.8rem;
+      line-height: 2.6rem;
+      font-weight: fonts.$medium;
+    }
+    &__text {
+      line-height: 2.2rem;
+      font-style: fonts.$normal;
+    }
+    &__container-button {
+      border-radius: none;
+      box-shadow: none;
+    }
+  }
+}

src/styles/colors.scss

@@ -5,6 +5,7 @@ $grey150: rgb(236, 239, 242);
 $gray200: rgb(217, 223, 230);
 $gray800: rgb(57, 67, 79);
 $gray600: rgb(128, 139, 154);
+$gray700: rgba(96, 104, 115, 1);
 $blue500: rgb(27, 133, 243);
 $blue600: rgb(18, 104, 204);
 $yellow500: rgb(255, 197, 66);

src/styles/fonts.scss

@@ -1,6 +1,8 @@
 $primaryFont: 'Montserrat', sans-serif;
 $secondaryFont: 'Wix Madefor Display', sans-serif;
+$tertiaryFont: 'Noto Sans';
 
+$xxs: 1.2rem;
 $xs: 1.4rem;
 $sm: 1.6rem;
 $md: 2rem;