build(deps-dev): bump vite from 5.4.11 to 5.4.12

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.23",
+    "@appquality/unguess-design-system": "4.0.26",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@sentry/react": "^8.32.0",
@@ -104,7 +104,7 @@
     "playwright-i18next-fixture": "^1.0.0",
     "prettier": "^2.6.2",
     "ts-node": "^10.9.2",
-    "vite": "^5.2.13",
+    "vite": "^5.4.12",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "config": {

src/common/Pages.tsx

@@ -19,6 +19,7 @@ import LoginPage from 'src/pages/LoginPage';
 import NotFound from 'src/pages/NotFound/NotFound';
 import MediaNotFound from 'src/pages/NotFound/MediaNotFound';
 import Service from 'src/pages/Service';
+import Template from 'src/pages/Template';
 import Catalog from 'src/pages/Services';
 import Manual from 'src/pages/Manual';
 import Videos from 'src/pages/Videos';
@@ -85,6 +86,10 @@ const Pages = () => {
                     path={`/${langPrefix}/services/:templateId`}
                     element={<Service />}
                   />
+                  <Route
+                    path={`/${langPrefix}/templates/:templateId`}
+                    element={<Template />}
+                  />
                   <Route
                     path={`/${langPrefix}/campaigns/:campaignId/videos`}
                     element={<Videos />}

src/common/components/BugDetail/BugDuplicates/index.tsx

@@ -1,7 +1,6 @@
-import { Accordion, LG, Button } from '@appquality/unguess-design-system';
+import { Button, AccordionNew } from '@appquality/unguess-design-system';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
 import { useBugPreviewContext } from 'src/pages/Bugs/Content/context/BugPreviewContext';
 import { useSiblings } from './useSiblings';
 import { BugDuplicatesList } from './BugDuplicatesList';
@@ -31,29 +30,20 @@ export const BugDuplicates = ({
   };
 
   return (
-    <Accordion
+    <AccordionNew
       level={3}
-      style={{ padding: 0 }}
       key={`duplicates_accordion_${isAccordionOpen}`}
       defaultExpandedSections={isAccordionOpen ? [0, 1] : []}
       id="bug-preview-duplicates"
       onChange={handleAccordionChange}
     >
-      <Accordion.Section>
-        <Accordion.Header>
-          <Accordion.Label style={{ padding: 0 }}>
-            <LG isBold>
-              <LinkIcon
-                style={{
-                  color: appTheme.palette.grey[600],
-                  marginRight: appTheme.space.xs,
-                }}
-              />
-              {t('__BUGS_PAGE_BUG_DETAIL_DUPLICATES_ACCORDION_TITLE')}
-            </LG>
-          </Accordion.Label>
-        </Accordion.Header>
-        <Accordion.Panel style={{ padding: 0, paddingTop: appTheme.space.sm }}>
+      <AccordionNew.Section>
+        <AccordionNew.Header icon={<LinkIcon />}>
+          <AccordionNew.Label
+            label={t('__BUGS_PAGE_BUG_DETAIL_DUPLICATES_ACCORDION_TITLE')}
+          />
+        </AccordionNew.Header>
+        <AccordionNew.Panel>
           <BugFather cid={cid} bugId={bugId} />
           <BugDuplicatesList
             maxSiblingSize={MAX_SIBLING_SIZE}
@@ -71,8 +61,8 @@ export const BugDuplicates = ({
               </Trans>
             </Button>
           ) : null}
-        </Accordion.Panel>
-      </Accordion.Section>
-    </Accordion>
+        </AccordionNew.Panel>
+      </AccordionNew.Section>
+    </AccordionNew>
   );
 };

src/common/components/BugDetail/Details.tsx

@@ -1,8 +1,7 @@
-import { Accordion, LG } from '@appquality/unguess-design-system';
+import { AccordionNew } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { Bug, BugAdditionalField } from 'src/features/api';
 import styled from 'styled-components';
-import { appTheme } from 'src/app/theme';
 import { ReactComponent as DetailsIcon } from 'src/assets/icons/details-icon.svg';
 import { useBugPreviewContext } from 'src/pages/Bugs/Content/context/BugPreviewContext';
 import DetailsItems from './DetailsItems';
@@ -12,15 +11,6 @@ const Container = styled.div`
   width: 100%;
   margin-bottom: ${({ theme }) => theme.space.lg};
 `;
-const Title = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  > svg {
-    fill: ${({ theme }) => theme.palette.grey[600]};
-  }
-`;
 
 export default ({
   bug,
@@ -47,32 +37,23 @@ export default ({
 
   return (
     <Container id="bug-preview-details">
-      <Accordion
+      <AccordionNew
         level={3}
-        style={{ padding: 0 }}
         key={`details_accordion_${isOpen}`}
         defaultExpandedSections={isOpen ? [0, 1] : []}
         onChange={handleAccordionChange}
       >
-        <Accordion.Section>
-          <Accordion.Header>
-            <Accordion.Label style={{ padding: 0 }}>
-              <Title>
-                <DetailsIcon
-                  style={{
-                    marginRight: appTheme.space.base * 3,
-                    color: appTheme.palette.grey[600],
-                  }}
-                />
-                <LG isBold>{t('__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL')}</LG>
-              </Title>
-            </Accordion.Label>
-          </Accordion.Header>
-          <Accordion.Panel style={{ padding: 0 }}>
+        <AccordionNew.Section>
+          <AccordionNew.Header icon={<DetailsIcon />}>
+            <AccordionNew.Label
+              label={t('__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL')}
+            />
+          </AccordionNew.Header>
+          <AccordionNew.Panel>
             <DetailsItems bug={bug} />
-          </Accordion.Panel>
-        </Accordion.Section>
-      </Accordion>
+          </AccordionNew.Panel>
+        </AccordionNew.Section>
+      </AccordionNew>
     </Container>
   );
 };

src/common/components/LayoutWrapper.tsx

@@ -1,17 +1,18 @@
+import React from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div<{
   isNotBoxed?: boolean;
 }>`
   width: 100%;
   box-sizing: border-box;
-  padding: 0 ${({ theme }) => theme.space.xxl};
+  padding: 0 ${({ theme }) => theme.space.md};
   margin: 0 auto;
   max-width: ${({ theme, isNotBoxed }) =>
     isNotBoxed ? '100%' : theme.breakpoints.xxl};
 
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    padding: 0 ${({ theme }) => theme.space.md};
+  @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    padding: 0 ${({ theme }) => theme.space.xxl};
   }
 `;