@eturnity/eturnity_reusable_components 8.10.3 → 8.13.0

package/src/components/modals/modal/index.vue

@@ -8,11 +8,12 @@
   >
     <ModalContainer
       v-if="isOpen"
+      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer :visible="!isLoading">
+      <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
       <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
@@ -62,7 +63,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String }
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -74,8 +75,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: 100px;
-    min-height: 100px;
+    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
+    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
 
     ::-webkit-scrollbar {
       width: 0.3em;

package/src/components/projectMarker/index.vue

@@ -59,7 +59,8 @@
           <MainButton :text="$gettext('Delete')" @click="onDelete" />
           <MainButton
             :text="$gettext('Cancel')"
-            type="cancel"
+            type="primary"
+            variant="cancel"
             @click="closeDeleteModal"
           />
         </CtaContainer>

package/src/components/sideMenu/index.vue

@@ -9,34 +9,54 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
+          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer
-            :is-active="activeTab === item.key || activeParentTab === item.key"
-          >
-            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
+          <IconContainer :is-active="activeTab === item.key">
+            <Icon
+              :color="
+                activeTab === item.key ? theme.semanticColors.purple[500] : ''
+              "
+              cursor="pointer"
+              :fill-type="item.fillType"
+              :name="item.icon"
+              size="18px"
+            />
           </IconContainer>
-          <ListText>{{ $gettext(item.label) }}</ListText>
+          <ListText :is-active="activeTab === item.key">{{
+            $gettext(item.label)
+          }}</ListText>
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
+            :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
             <IconContainer :is-active="activeParentTab === item.key">
               <Icon
-                color="#fff"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : ''
+                "
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText>{{ $gettext(item.label) }}</ListText>
+            <ListText :is-active="activeTab === item.key">{{
+              $gettext(item.label)
+            }}</ListText>
             <ArrowContainer>
               <Icon
-                color="white"
-                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                :color="theme.semanticColors.grey[800]"
+                :name="
+                  activeDropdown === item.key
+                    ? 'arrow_up_unfilled'
+                    : 'arrow_down_unfilled'
+                "
                 size="10px"
               />
             </ArrowContainer>
@@ -68,7 +88,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          color="#fff"
+          :color="theme.semanticColors.teal[800]"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -83,11 +103,11 @@
   import styled from 'vue3-styled-components'
   import Icon from '../icon'
   import Spinner from '../spinner'
+  import theme from '@/assets/theme.js'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) =>
-      props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+    background-color: ${(props) => props.theme.semanticColors.grey[100]};
     padding: 14px 12px;
     min-width: 220px;
     display: flex;
@@ -100,7 +120,7 @@
     grid-gap: 6px;
   `
 
-  const IconAttrs = { isActive: Boolean, isButton: Boolean }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
 
   const ListItem = styled('div', IconAttrs)`
     display: grid;
@@ -109,19 +129,28 @@
     grid-gap: 20px;
     cursor: pointer;
     padding: 4px;
-    border-radius: 6px;
+    border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
 
     :hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        ${(props) => props.fillType}: ${(props) =>
+          props.theme.semanticColors.purple[500]};
+      }
     }
   `
 
-  const ListText = styled.div`
-    font-size: 16px;
-    font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
+  const ListTextAttrs = { isActive: Boolean }
+  const ListText = styled('div', ListTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -130,18 +159,16 @@
     justify-items: center;
     width: 32px;
     height: 32px;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
     border-radius: 6px;
 
     ${({ isButton = false }) =>
       isButton &&
       `
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  `}
+        cursor: pointer;
+        &:hover {
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
+        `}
   `
 
   const SpinnerContainer = styled.div`
@@ -161,7 +188,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.semanticColors.teal[800]};
     margin-right: 6px;
   `
 
@@ -174,30 +201,46 @@
     cursor: pointer;
     margin-left: 65px;
     padding: 8px;
-    border-radius: 6px;
-    color: ${(props) => props.theme.colors.white};
-    font-weight: 700;
-    ${({ isActive }) =>
-      isActive &&
-      `
-    background: rgba(255, 255, 255, 0.1);
-  `}
+    border-radius: 4px;
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
+    font-weight: 400;
+    font-size: 14px;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
 
-  const CollapseContainer = styled.div`
+  const CollapseContainerAttrs = { isActive: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-gap: 20px;
     padding: 4px;
+    padding-right: 13px;
     border-radius: 6px;
     align-items: center;
     cursor: pointer;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+
+    div {
+      color: ${(props) =>
+        props.isActive ? props.theme.semanticColors.purple[500] : ''};
+    }
+
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        fill: ${(props) => props.theme.semanticColors.purple[500]};
+      }
     }
   `
 
@@ -254,17 +297,9 @@
     data() {
       return {
         activeDropdown: null,
+        theme,
       }
     },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
-      },
-    },
     watch: {
       activeTab: {
         // once active tab is received, check if any parent
@@ -277,5 +312,14 @@
         once: true,
       },
     },
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
+      },
+    },
   }
 </script>

package/src/components/spinner/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-test-id="spinner_full_container"
+    :size="size"
+  >
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <SpinnerSvg
-          :class="{ white: isWhite }"
-          data-test-id="spinner_full_icon"
-          :style="{ width: size, height: size }"
-        />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
+        <SpinnerCircle :is-white="isWhite" :size="size" />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,21 +15,14 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <SpinnerSvg
-        :class="{ white: isWhite }"
-        data-test-id="spinner_icon"
-        :style="{ width: size, height: size }"
-      />
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
+      <SpinnerCircle :is-white="isWhite" :size="size" />
     </SpinnerWrapper>
   </Container>
 </template>
 
 <script>
-  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-  // <spinner size="30px" />
   import styled from 'vue3-styled-components'
-  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
 
   const SpinnerContainer = styled.div`
     position: fixed;
@@ -43,35 +36,80 @@
     justify-items: center;
     z-index: 100;
   `
+
   const containerAttrs = { limitedToModal: Boolean }
   const Container = styled('div', containerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
   `
 
-  const SpinnerWrapper = styled.div`
-    width: ${(props) => (props.size ? props.size : '60px')};
-    height: auto;
+  const wrapperAttrs = { size: String }
+  const SpinnerWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) => getSpinnerSize(props.size)};
+    height: ${(props) => getSpinnerSize(props.size)};
+  `
 
-    .white {
-      filter: brightness(0) invert(1);
+  const getSpinnerSize = (size) => {
+    switch (size) {
+      case 'small':
+        return '24px'
+      case 'large':
+        return '56px'
+      case 'medium':
+      default:
+        return '40px'
+    }
+  }
+
+  const circleAttrs = { size: String, isWhite: Boolean }
+  const SpinnerCircle = styled('div', circleAttrs)`
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    border: ${(props) => (props.size === 'large' ? '4px' : '2px')} solid
+      ${(props) =>
+        props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
+    border-top-color: ${(props) =>
+      props.isWhite
+        ? props.theme.colors.white
+        : props.theme.semanticColors.purple[500]};
+    border-right-color: ${(props) =>
+      props.isWhite
+        ? props.theme.colors.white
+        : props.theme.semanticColors.purple[500]};
+    border-bottom-color: ${(props) =>
+      props.isWhite
+        ? props.theme.colors.white
+        : props.theme.semanticColors.purple[500]};
+    animation: spin 1s linear infinite;
+    transform: rotate(90deg);
+
+    @keyframes spin {
+      to {
+        transform: rotate(450deg);
+      }
     }
   `
 
   export default {
-    name: 'SpinnerComponent',
+    name: 'NewSpinner',
     components: {
+      SpinnerContainer,
+      SpinnerCircle,
       Container,
       SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
     },
     props: {
-      fullWidth: {
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,
@@ -81,12 +119,7 @@
         default: false,
         type: Boolean,
       },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,

package/src/components/tableDropdown/index.vue

@@ -25,18 +25,22 @@
                 item.type === 'template')
             "
           />
-          <TemplateButton
+          <TableItem
             v-if="
               item.type &&
               item.type === 'template' &&
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            :show-archived="showArchived"
-            @click.stop="onTemplateClick(item.row)"
           >
-            {{ $gettext('Use template...') }}
-          </TemplateButton>
+            <MainButton
+              button-size="small"
+              :text="$gettext('Use template...')"
+              type="secondary"
+              :variant="showArchived ? 'cancel' : 'main'"
+              @click.stop="onTemplateClick(item.row)"
+            />
+          </TableItem>
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -68,7 +72,7 @@
               class="input-placeholder"
               :show-archived="showArchived"
             >
-              <span> {{ item.value }}</span>
+              <TableItem> {{ item.value }}</TableItem>
             </TextContainer>
             <InputText
               v-else
@@ -89,7 +93,7 @@
             "
             :show-archived="showArchived"
           >
-            <span> {{ item.value }}</span>
+            <TableItem> {{ item.value }}</TableItem>
           </TextContainer>
         </NestedContainer>
       </ComponentItem>
@@ -121,7 +125,7 @@
                 @on-change="onSearch($event)"
               />
             </SearchContainer>
-            <Spinner v-if="optionsLoading" />
+            <Spinner v-if="optionsLoading" size="small" />
             <EmptyText v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
             </EmptyText>
@@ -136,15 +140,19 @@
               @keyup.enter="onItemClick(item)"
             >
               <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <span v-if="option !== 'template'">
+                <TableItem v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
-                </span>
-                <TemplateButton
+                </TableItem>
+                <TableItem
                   v-else-if="option === 'template' && item.has_template"
-                  @click.stop="onTemplateClick(item)"
                 >
-                  {{ $gettext('Use template...') }}
-                </TemplateButton>
+                  <MainButton
+                    button-size="small"
+                    :text="$gettext('Use template...')"
+                    type="secondary"
+                    @click.stop="onTemplateClick(item)"
+                  />
+                </TableItem>
                 <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
@@ -198,6 +206,7 @@
   import Icon from '../icon'
   import theme from '@/assets/theme.js'
   import InfoText from '../infoText'
+  import MainButton from '../buttons/mainButton'
 
   const rowAttrs = { disabled: Boolean, isOpen: Boolean }
   const DropdownRow = styled('div', rowAttrs)`
@@ -234,13 +243,13 @@
           padding: 8px 0 10px 0 !important;
         }
       }
-
-      span {
-        padding-left: 15px;
-      }
     }
   `
 
+  const TableItem = styled.span`
+    padding-left: 15px;
+  `
+
   const containerAttrs = { colSpan: Number, width: String }
   const ComponentContainer = styled('div', containerAttrs)`
     display: contents;
@@ -356,17 +365,6 @@
   `
 
   const templateAttrs = { showArchived: Boolean }
-  const TemplateButton = styled('div', templateAttrs)`
-    cursor: pointer;
-    background-color: #263238;
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
-    padding: 4px 10px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    margin-left: 15px;
-  `
 
   const NoTemplate = styled('div', templateAttrs)`
     color: ${(props) =>
@@ -466,7 +464,7 @@
       OptionsWrapper,
       OptionsItem,
       SearchContainer,
-      TemplateButton,
+      MainButton,
       NoTemplate,
       TemplateLink,
       InputText,
@@ -481,6 +479,7 @@
       Icon,
       InfoText,
       InfoWrapper,
+      TableItem,
     },
     props: {
       colSpan: {

package/src/components/tables/mainTable/index.vue

@@ -86,12 +86,13 @@
     }
 
     ::-webkit-scrollbar-track {
-      background: ${(props) => props.theme.colors.grey2};
+      background: ${(props) => props.theme.semanticColors.grey[50]};
       border-radius: 4px;
     }
 
     ::-webkit-scrollbar-thumb {
-      border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
+      border-bottom: 10px solid
+        ${(props) => props.theme.semanticColors.grey[500]}; // width of the actual scrollbar
       border-radius: 4px;
     }
   `
@@ -154,9 +155,12 @@
 
     th {
       padding: 11px 15px;
-      background-color: ${(props) => props.theme.colors.blue1};
+      background-color: ${(props) => props.theme.semanticColors.grey[100]};
+      border-bottom: 1px solid
+        ${(props) => props.theme.semanticColors.teal[100]};
       cursor: auto;
       height: 40px;
+      font-weight: 500;
 
       .ordering {
         display: grid;
@@ -168,13 +172,14 @@
     td {
       padding: ${(props) =>
         props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
-      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+      border-bottom: 1px solid
+        ${(props) => props.theme.semanticColors.grey[200]};
 
       &.empty {
         height: 100px;
         text-align: center;
         cursor: default;
-        background-color: #fff !important;
+        background-color: ${(props) => props.theme.colors.white} !important;
       }
 
       &.no-border {
@@ -251,7 +256,6 @@
       &.footer {
         td {
           background-color: ${(props) => props.theme.colors.grey5};
-          /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
         }
 
         .text {
@@ -261,7 +265,7 @@
 
       .text {
         padding: 10px 15px 10px 15px;
-        color: ${(props) => props.theme.colors.black};
+        color: ${(props) => props.theme.semanticColors.teal[800]};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
       }
 
@@ -274,7 +278,7 @@
         width: 1%; // necessary so it doesn't take up too much white space
         display: table-cell;
         flex-wrap: nowrap;
-        background-color: #fff;
+        background-color: ${(props) => props.theme.colors.white};
         vertical-align: middle;
       }
 
@@ -283,7 +287,6 @@
         vertical-align: middle;
         cursor: ${(props) =>
           props.tableCursor ? props.tableCursor : 'pointer'};
-        border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
       }
 
       &.container-row td {

package/src/assets/svgIcons/inverter-1.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.72271 6.43179V8.55952H4.48362V9.85441H1.72271V12.0278H5.27082V13.3683H0V5.09127H5.27082V6.43179H1.72271Z" fill="white"/>
-<path d="M8.27381 6.43179V8.71924H11.2515V10.0655H8.27381V13.3683H6.55109V5.09127H11.8219V6.43179H8.27381Z" fill="white"/>
-<path d="M17.441 6.67708C17.3877 6.76455 17.3326 6.8292 17.2755 6.87103C17.2223 6.90906 17.152 6.92807 17.0645 6.92807C16.9808 6.92807 16.8896 6.89955 16.7907 6.84251C16.6956 6.78166 16.5834 6.71701 16.4541 6.64856C16.3248 6.58011 16.1765 6.51736 16.0092 6.46031C15.8419 6.39947 15.646 6.36905 15.4216 6.36905C15.0261 6.36905 14.7295 6.45841 14.5318 6.63715C14.334 6.81208 14.2351 7.04216 14.2351 7.32738C14.2351 7.50992 14.2884 7.66203 14.3948 7.78372C14.5051 7.90161 14.6477 8.00429 14.8227 8.09176C15.0014 8.17923 15.203 8.25719 15.4273 8.32564C15.6517 8.39409 15.8818 8.47015 16.1176 8.55381C16.3533 8.63367 16.5834 8.72875 16.8078 8.83903C17.0322 8.94931 17.2318 9.08812 17.4067 9.25545C17.5855 9.42278 17.7281 9.62813 17.8346 9.87152C17.9449 10.1111 18 10.4039 18 10.75C18 11.1265 17.9334 11.4801 17.8003 11.811C17.671 12.138 17.4828 12.4252 17.2356 12.6724C16.9884 12.9157 16.6823 13.1078 16.3172 13.2485C15.9559 13.3892 15.5452 13.4596 15.0851 13.4596C14.8227 13.4596 14.5603 13.4329 14.2979 13.3797C14.0393 13.3265 13.7883 13.2523 13.5449 13.1572C13.3053 13.0622 13.079 12.9481 12.8661 12.815C12.6531 12.6819 12.4668 12.5336 12.3071 12.37L12.809 11.56C12.8509 11.4992 12.906 11.4497 12.9745 11.4117C13.0429 11.3699 13.1152 11.3489 13.1912 11.3489C13.2939 11.3489 13.4023 11.387 13.5164 11.463C13.6305 11.5391 13.7617 11.6228 13.91 11.714C14.0583 11.8053 14.2294 11.889 14.4234 11.965C14.6211 12.0411 14.8569 12.0791 15.1307 12.0791C15.53 12.0791 15.838 11.9878 16.0548 11.8053C16.2754 11.6228 16.3857 11.3508 16.3857 10.9896C16.3857 10.7804 16.3305 10.6112 16.2202 10.4819C16.1138 10.3526 15.9731 10.2442 15.7981 10.1567C15.6232 10.0693 15.4235 9.99511 15.1992 9.93427C14.9748 9.86962 14.7447 9.79926 14.5089 9.72321C14.2732 9.64715 14.0431 9.55588 13.8187 9.4494C13.5943 9.34292 13.3947 9.20221 13.2198 9.02727C13.0448 8.85234 12.9022 8.63558 12.7919 8.37698C12.6854 8.11838 12.6322 7.79704 12.6322 7.41294C12.6322 7.10491 12.693 6.80638 12.8147 6.51736C12.9364 6.22834 13.1152 5.97164 13.351 5.74727C13.5867 5.5229 13.8758 5.34226 14.218 5.20536C14.5641 5.06845 14.9596 5 15.4045 5C15.9027 5 16.3629 5.07796 16.785 5.23388C17.2109 5.38599 17.5703 5.59896 17.8631 5.87277L17.441 6.67708Z" fill="white"/>
-</svg>