@nyris/nyris-webapp 0.3.54 → 0.3.56

package/src/index.tsx

@@ -34,18 +34,16 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
-  <React.StrictMode>
-    <Fragment>
-      <Toaster />
-      <Provider store={store}>
-        <AuthProvider>
-          <MuiThemeProvider theme={theme}>
-            <BrowserRouter>
-              <Router />
-            </BrowserRouter>
-          </MuiThemeProvider>
-        </AuthProvider>
-      </Provider>
-    </Fragment>
-  </React.StrictMode>,
+  <Fragment>
+    <Toaster />
+    <Provider store={store}>
+      <AuthProvider>
+        <MuiThemeProvider theme={theme}>
+          <BrowserRouter>
+            <Router />
+          </BrowserRouter>
+        </MuiThemeProvider>
+      </AuthProvider>
+    </Provider>
+  </Fragment>,
 );

package/src/page/landingPage/AppMobile.tsx

@@ -1,19 +1,13 @@
 import CameraCustom from 'components/drawer/cameraCustom';
-import React, { useEffect, useState } from 'react';
-import { reset } from 'Store/search/Search';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
+import React, { useState } from 'react';
+import { useAppSelector } from 'Store/Store';
 import { ReactComponent as CameraIcon } from 'common/assets/icons/take_photo.svg';
-import ExperienceVisualSearch from "../../components/Experience-visual-search/ExperienceVisualSearch";
+import ExperienceVisualSearch from '../../components/Experience-visual-search/ExperienceVisualSearch';
 
 function AppMobile(): JSX.Element {
-  const dispatch = useAppDispatch();
   const { settings } = useAppSelector(state => state);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
-  useEffect(() => {
-    dispatch(reset(''));
-  }, [dispatch]);
-
   return (
     <div
       style={{

package/src/page/landingPage/common.scss

@@ -2,7 +2,7 @@
 * {
   margin: 0;
   padding: 0;
-  font-family: 'Source Sans 3' !important;
+  font-family: 'Source Sans 3', sans-serif !important;
 }
 .w-100 {
   width: 100% !important;
@@ -84,19 +84,19 @@ button {
 }
 
 .text-f10 {
-  font-family: 'Source Sans 3';
+  font-family: 'Source Sans 3', sans-serif;
   font-size: 10px !important;
   line-height: 10px !important;
 }
 
 .text-f22 {
-  font-family: 'Source Sans 3';
+  font-family: 'Source Sans 3', sans-serif;
   font-size: 22px !important;
   line-height: 20px !important;
 }
 
 .text-btn-small {
-  font-family: 'Source Sans 3';
+  font-family: 'Source Sans 3', sans-serif;;
   font-weight: 500 !important;
   font-size: 11px !important;
   line-height: 14px !important;
@@ -110,14 +110,14 @@ button {
 }
 
 .text-f8 {
-  font-family: 'Source Sans 3' !important;
+  font-family: 'Source Sans 3', sans-serif !important;
   font-weight: 500 !important;
   font-size: 11px !important;
   line-height: 14px !important;
 }
 
 .text-f9 {
-  font-family: 'Source Sans 3';
+  font-family: 'Source Sans 3', sans-serif;
   font-size: 11px !important;
   line-height: 14px !important;
 }
@@ -174,10 +174,10 @@ button {
 .btn-ct {
   border-right: 1px solid #e9e9ec;
   font-weight: 500;
-  font-size: 11 !important;
+  font-size: 11px !important;
   line-height: 14px !important;
   color: #2b2c46 !important;
-  font-family: 'Source Sans 3' !important;
+  font-family: 'Source Sans 3', sans-serif !important;
   padding: 0 10px;
   &::before,
   &::after {
@@ -480,6 +480,34 @@ button {
       }
     }
   }
+  .info-container {
+    padding: 16px 0 0 0;
+    .info-sku {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 25.63px;
+      padding-left: 4px;
+    }
+    .info-marking {
+      width: max-content;
+      background: #E9E9EC;
+      border-radius: 2px;
+      padding: 4px;
+      word-break: break-all;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 12px;
+      letter-spacing: 0.22857144474983215px;
+      text-align: left;
+    }
+    .info-description {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 22.78px;
+      letter-spacing: 0.22857144474983215px;
+      padding: 8px 0 0 4px;
+    }
+  }
 }
 .contact-support:hover {
   cursor: pointer;
@@ -520,7 +548,7 @@ button {
       right: 6px;
       position: absolute;
       border-radius: 100%;
-      background-color: #F3F3F5;
+      background-color: rgba(243, 243, 245, 0.4);
       display: block;
       overflow: hidden;
       z-index: 11;
@@ -682,7 +710,7 @@ button {
 
       .title-box {
         font-size: 11px;
-        font-family: 'Source Sans 3' !important;
+        font-family: 'Source Sans 3', sans-serif !important;
         line-height: 21px;
         color: #fff !important;
         text-align: center;
@@ -703,10 +731,10 @@ button {
     line-height: 21px;
     color: #ffffff;
     font-weight: 300;
-    font-family: 'Source Sans 3';
+    font-family: 'Source Sans 3', sans-serif;
   }
   .text-drop-file {
-    font-family: 'Source Sans 3';
+    font-family: 'Source Sans 3', sans-serif;
     font-weight: 700;
     font-size: 32px;
     line-height: 21px;
@@ -743,7 +771,7 @@ button {
     .box-bottom {
       margin-top: 26px;
       .text-bottom {
-        font-family: 'Source Sans 3';
+        font-family: 'Source Sans 3', sans-serif;
         font-weight: 600;
         font-size: 11px;
         line-height: 14px;
@@ -879,7 +907,7 @@ button {
   font-style: normal;
 }
 .text-f20 {
-  font-family: 'Source Sans 3';
+  font-family: 'Source Sans 3', sans-serif;
   font-size: 16px;
   line-height: 21px;
 }
@@ -926,6 +954,37 @@ button {
     // overflow: auto;
     position: relative;
 
+    .go-back-mobile-container {
+      width: 390px;
+      margin: 0 auto 12px;
+    }
+    
+    .go-back-button {
+      margin-left: 24px;
+      margin-bottom: 24px;
+      padding: 8px;
+      border-radius: 20px;
+      width: max-content;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      font-family: 'Source Sans 3', sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      svg {
+        margin-right: 8px;
+      }
+      &:hover {
+        background: #F3F3F5;
+      }
+      &.mobile-view {
+        background: #F3F3F5;
+        margin: 0;
+      }
+    }
+
     .col-left {
       width: 100%;
       height: fit-content;
@@ -1017,7 +1076,40 @@ button {
           border-radius: 4px;
           overflow: hidden;
           height: 100%;
-        } &:first-child {
+          .info-container {
+            flex-direction: column;
+            background-color: #FAFAFA;
+            flex-grow: 1;
+            z-index: 100;
+            display: flex;
+            padding: 8px;
+            .info-sku {
+              font-size: 16px;
+              font-weight: 700;
+              line-height: 19.94px;
+              padding-left: 2px;
+            }
+            .info-marking {
+              max-width: max-content;
+              padding: 2px 4px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 14px;
+              background: #E9E9EC;
+              border-radius: 2px;
+              word-break: break-all;
+            }
+            .info-description {
+              margin-top: 8px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 19.94px;
+              letter-spacing: 0.22857144474983215px;
+              padding-left: 2px;
+            }
+          }
+        }
+        &:first-child {
           margin-top: 0px !important;
         }
         ul {
@@ -1078,7 +1170,7 @@ button {
     }
     .box-change-hit-items {
       z-index: 500;
-      font-family: 'Source Sans 3';
+      font-family: 'Source Sans 3', sans-serif;
       font-style: normal;
       font-weight: 500;
       font-size: 12px;
@@ -1326,7 +1418,7 @@ button {
   }
 }
 .wrap-input-search {
-  width: 512px;
+  width: 427px;
   .box-input-search {
     justify-content: space-between;
     box-shadow: 0px 2px 12px rgba(43, 44, 70, 0.13);;
@@ -1722,14 +1814,32 @@ button {
     align-items: center;
     li {
       list-style-type: none;
-      margin-bottom: 0px;
-      padding: 0px;
-      background: #f3f3f5;
-      border: 1px solid #e0e0e0;
-      border-radius: 1px;
+      margin-bottom: 0;
+      padding: 4px 8px;
+      background: #F3F3F5;
+      border: 1px solid #E0E0E0;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: default;
+      &:hover {
+        background: rgb(233 233 235);
+      }
+      svg {
+        margin-left: 10px;
+      }
+
       &:last-child {
-        border: 0px;
         background: initial;
+        border: none;
+        button {
+          span {
+            color: #E31B5D;
+          }
+        }
       }
       button {
         padding: 2px 5px;
@@ -1772,7 +1882,7 @@ button {
       position: relative;
       padding: 0;
       a {
-        font-family: 'Source Sans 3';
+        font-family: 'Source Sans 3', sans-serif;;
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
@@ -1843,7 +1953,7 @@ button {
         align-items: center;
         span {
           font-size: 14px;
-          font-family: 'Source Sans 3';
+          font-family: 'Source Sans 3', sans-serif;;
           font-style: normal;
           em {
             font-style: initial !important;
@@ -1857,7 +1967,7 @@ button {
 .box-switch-apply-fillter {
   span.MuiFormControlLabel-label {
     color: #aaabb5;
-    font-family: 'Source Sans 3';
+    font-family: 'Source Sans 3', sans-serif;;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -1912,7 +2022,7 @@ button {
           background-color: #f3f3f5;
           border-radius: 21px;
           height: 40px;
-          .icon-search{
+          .icon-search {
             margin-left: 11px;
           }
           .input-search-filter {
@@ -1929,6 +2039,11 @@ button {
               width: 512px;
             }
           }
+          .btn-clear-text {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+          }
         }
       }
       .box-bottom {
@@ -2038,17 +2153,33 @@ button {
 
 
 .wrap-input-search-field {
-  width: 512px;
-  height: 48px;
+  width: 426px;
+  height: 40px;
+  &.active {
+    .box-input-search {
+      background-color: #fff;
+      .input-wrapper {
+        .box-inp {
+          input {
+            background-color: #fff;
+          }
+          .pre-filter-icon {
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
   .box-input-search {
     justify-content: space-between;
     box-shadow: 0px 2px 12px rgba(43, 44, 70, 0.13);;
-    background-color: #fff;
+    background-color: #E9E9EC;
     border-radius: 24px;
     padding: 0px !important;
-    height: 48px;
+    height: 40px;
     overflow: hidden;
     padding-right: 12px !important;
+    border: 1px solid #CACAD1;
     .input-wrapper {
       width: 100%;
       display: flex;
@@ -2056,16 +2187,16 @@ button {
       align-items: center;
       .box-inp {
         input {
-          background-color: #fff;
+          background-color: #E9E9EC;
         }
         .pre-filter-icon {
           display: flex;
-          min-width: 56px;
+          min-width: 40px;
           height: 100%;
           justify-content: center;
           align-items: center;
-          border-right: 1px solid rgb(224, 224, 224);
-          background: rgb(250, 250, 250);
+          border-right: 1px solid #CACAD1;
+          background: #E9E9EC;
           cursor: pointer;
         }
         .box-key-filter {
@@ -2137,18 +2268,6 @@ button {
       border-radius: 100%;
       z-index: 10;
       cursor: pointer !important;
-      margin-right: 8px;
-
-      &:after {
-        content: "";
-        font-size: 39px;
-        position: absolute;
-        right: -3px;
-        font-weight: 100;
-        background-color: #E0E0E0;
-        width: 1px;
-        height: 35px;
-      }
     }
   }
 }
@@ -2160,6 +2279,9 @@ button {
   &:hover {
     background-color: #0000000a;
   }
+  &.desktop {
+    padding: 9px;
+  }
 
 }
 
@@ -2186,4 +2308,4 @@ button {
   @media screen and (min-width: 2047px) {
     max-width: 1300px;
   }
-}
+}