Merge branch 'master' into UC-36

src/components/LoggedInLayout.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+.flex.flex-col.w-full.h-full.gap-y-2
+    the-header
+    .flex.flex-auto
+      the-sidebar
+      router-view
+</template>
+
+<script>
+import TheHeader from "@/components/TheHeader";
+import TheSidebar from "@/components/TheSidebar";
+
+export default {
+  name: "LoggedInLayout",
+  components: { TheHeader, TheSidebar },
+};
+</script>

src/components/TheHeader.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-  .header-wrapper.flex.justify-center.box-border.py-2.px-6
+  .header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
     .flex.items-center.box-border.cursor-pointer.mr-auto
-      img.logo-img.mr-16(src="@/assets/images/logo.svg" alt="Logo")
+      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg" alt="Logo")
       header-inputs
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")

src/components/TheSidebar.vue

@@ -19,8 +19,8 @@ export default {
       pageSettings: [
         {
           id: "calendar",
-          path: "#/",
-          active: false,
+          path: "#/calendar",
+          active: true,
           icon: "icon-calendar-2",
         },
         {

src/components/base/BaseSelect.vue

@@ -1,38 +1,40 @@
 <template lang="pug">
-  .flex.box-border.w-full.container.items-center.cursor-pointer(
+  .flex.box-border.container.items-center.cursor-pointer.relative(
     @click="openSelect"
     :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
-    :style="{ minWidth : widthSelect + 'px'}"
     )
-    .relative.flex.flex-col
-      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks" :class="{default:!isSelectedOption}") {{isSelectedOption || !defaultOption ? optionData : defaultOption}}
-        .absolute.options(
-          v-show="isSelectOpen"
-          :id="id"
-          class="left-[-18px]"
-          :style="{ minWidth : widthSelect + 'px'}"
-          )
-          .not-italic.option.pl-4.py-1(
-            v-for="responsible in listData"
-            @click="(e) => selectOption(e)"
-            :key="responsible"
-            :id="responsible"
-            ) {{responsible}}
-      .flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
+    .flex.mr-2
+      input.text-base.select.cursor-pointer(
+          :size="sizeInput"
+          v-if="!forNetworks"
+          v-model="optionData"
+          :placeholder="placeholder"
+          disabled
+        ) 
+    .absolute.options.top-12.left-0(
+      v-show="isSelectOpen"
+      :id="id"
+      )
+      .option.px-4.py-1(
+        v-for="responsible in listData"
+        @click="(e) => chooseOption(e)"
+        :key="responsible"
+        :id="responsible"
+        ) {{responsible}}
+      .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
         .absolute.options.top-5(
           v-show="isSelectOpen"
           class="left-[-11px]"
-          :id="id"
-          :style="{ minWidth : widthSelect + 'px'}")
-          .flex.not-italic.option.justify-center.py-1.text-xl(
+          :id="id")
+          .flex.option.justify-center.py-1.text-xl(
             v-for="responsible in listData"
             @click="(e) => chooseOption(e)"
             :key="responsible.network"
             :id="responsible.network"
             :class="responsible.icon"
             )
-    .select-form-separator.cursor-pointer(v-if="withSeparator")
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -44,14 +46,16 @@ export default {
     styleBorder: {
       default: false,
     },
-    widthSelect: Number,
-    withSeparator: {
-      default: false,
-    },
+    separator: Boolean,
     optionData: String,
     listData: Array,
     chooseOption: Function,
     forNetworks: Boolean,
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    sizeInput: Number,
   },
   data() {
     return {
@@ -75,6 +79,7 @@ export default {
 .container
   border-radius: 4px
   width: fit-content
+  color: var(--font-dark-blue-color)
   background-color: var(--bg-ligth-blue-color)
   &.border
     background-color: var(--default-white)
@@ -92,18 +97,19 @@ export default {
     -webkit-appearance: none
   &.networks
     color: var(--font-dark-blue-color)
+  &::placeholder
+    color: var(--font-black-color-1)
 .options
   z-index: 3
-  width: max-content
   background-color: var(--default-white)
-  border: 2px solid var(--border-light-grey-color)
-  border-top: none
-  border-radius: 0 0 4px 4px
+  border-radius: 4px
+  box-shadow: var(--default-shadow)
+  width: 100%
 .option
   color: var(--font-black-color)
-  border-bottom: 1px solid var(--border-light-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
+    color: var(--default-white)
 .select-form-separator
   background-color: var(--btn-blue-color-3)
   height: 24px
@@ -111,8 +117,6 @@ export default {
   border-radius: 1px
 .icon
   color: var(--font-dark-blue-color)
-  &:hover
-    color: var(--btn-blue-color)
   &.open
     transform: rotate(180deg)
 </style>