chore: UXCG redesign

src/api/tags.ts

@@ -3,11 +3,13 @@ import type { TagType } from '@local-types/data';
 const tags = [
   {
     id: 1,
-    styles: { backgroundColor: '#5396D3' },
+    styles: { backgroundColor: '#0071DA' },
+    backgroundUrl: '/assets/uxcg/team-bg.png',
+    iconName: 'team',
     title: {
-      en: 'Team',
-      ru: 'Команда',
-      hy: 'Թիմ',
+      en: 'Team Assembly',
+      ru: 'Сбор команды',
+      hy: 'Թիմի կազմավորում',
     },
     tooltip: {
       en: 'Questions related to in-house team members cooperation (product, development teams and others).',
@@ -18,6 +20,8 @@ const tags = [
   {
     id: 2,
     styles: { backgroundColor: '#77A34B' },
+    iconName: 'development',
+    backgroundUrl: '/assets/uxcg/development-bg.png',
     title: {
       en: 'Development',
       ru: 'Разработка',
@@ -31,11 +35,13 @@ const tags = [
   },
   {
     id: 3,
-    styles: { backgroundColor: '#A36AA4' },
+    styles: { backgroundColor: '#7D4BA3' },
+    iconName: 'marketing',
+    backgroundUrl: '/assets/uxcg/marketing-bg.png',
     title: {
-      en: 'Pre-SignUp',
-      ru: 'Предрегистрация',
-      hy: 'Մինչ գրանցում',
+      en: 'Marketing/BD',
+      ru: 'Маркетинг/Бизнес развитие',
+      hy: 'Մարքեթինգ/ԲԶ',
     },
     tooltip: {
       en: 'Questions related to sales, marketing funnels, prospects and leads communication, and overall product packaging.',
@@ -45,11 +51,13 @@ const tags = [
   },
   {
     id: 4,
-    styles: { backgroundColor: '#D3666D' },
+    styles: { backgroundColor: '#C5A800' },
+    iconName: 'released',
+    backgroundUrl: '/assets/uxcg/released-bg.png',
     title: {
-      en: 'Post-SignUp',
-      ru: 'Пост-регистрация',
-      hy: 'Գրանցումից հետո',
+      en: 'Released',
+      ru: 'Выпущенный',
+      hy: 'Թողարկված',
     },
     tooltip: {
       en: 'Questions related to user interaction with actual product and its features.',
@@ -59,11 +67,13 @@ const tags = [
   },
   {
     id: 5,
-    styles: { backgroundColor: '#E19F3B' },
+    styles: { backgroundColor: '#C55C00' },
+    iconName: 'monitoring',
+    backgroundUrl: '/assets/uxcg/monitoring-bg.png',
     title: {
-      en: 'Analytics',
-      ru: 'Аналитика',
-      hy: 'Վերլուծություն',
+      en: 'Monitoring',
+      ru: 'Мониторинг',
+      hy: 'Մոնիթորինգ',
     },
     tooltip: {
       en: 'Questions related to product analytical data analysis.',

src/assets/icons/uxcgIcons/Development.tsx

@@ -0,0 +1,30 @@
+export const Development = () => (
+  <svg
+    width="90"
+    height="105"
+    viewBox="0 0 90 105"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M25 12.6547L44.919 1.15466L64.837 12.6547M25 12.6547L44.919 24.1547M25 12.6547V37.1547L44.919 48.6547M64.837 12.6547L44.919 24.1547M64.837 12.6547V37.1547L44.919 48.6547M44.919 24.1547V48.6547M44.919 48.6547V59.6547M44.919 59.6547V75.6547M44.919 59.6547H13V75.6547M44.919 59.6547H76.837V75.6547"
+      stroke="#669E77"
+      stroke-width="2"
+    />
+    <path
+      d="M1 81.9337L13 75.1547L25 81.9337M1 81.9337L13 88.7127M1 81.9337V96.3757L13 103.155M25 81.9337L13 88.7127M25 81.9337V96.3757L13 103.155M13 88.7127V103.155"
+      stroke="#669E77"
+      stroke-width="2"
+    />
+    <path
+      d="M33 81.9337L45 75.1547L57 81.9337M33 81.9337L45 88.7127M33 81.9337V96.3757L45 103.155M57 81.9337L45 88.7127M57 81.9337V96.3757L45 103.155M45 88.7127V103.155"
+      stroke="#669E77"
+      stroke-width="2"
+    />
+    <path
+      d="M65 81.9337L77 75.1547L89 81.9337M65 81.9337L77 88.7127M65 81.9337V96.3757L77 103.155M89 81.9337L77 88.7127M89 81.9337V96.3757L77 103.155M77 88.7127V103.155"
+      stroke="#669E77"
+      stroke-width="2"
+    />
+  </svg>
+);

src/assets/icons/uxcgIcons/Marketing.tsx

@@ -0,0 +1,32 @@
+export const Marketing = () => (
+  <svg
+    width="84"
+    height="109"
+    viewBox="0 0 84 109"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M55.5 34.5V16C55.5 7.7157 48.784 1 40.5 1C32.216 1 25.5 7.7157 25.5 16V34.5"
+      stroke="#E5CCEE"
+      stroke-width="2"
+    />
+    <path
+      d="M25.5 38.5C26.6046 38.5 27.5 37.6046 27.5 36.5C27.5 35.3954 26.6046 34.5 25.5 34.5C24.3954 34.5 23.5 35.3954 23.5 36.5C23.5 37.6046 24.3954 38.5 25.5 38.5Z"
+      stroke="#E5CCEE"
+      stroke-width="2"
+    />
+    <path
+      d="M55.5 38.5C56.6046 38.5 57.5 37.6046 57.5 36.5C57.5 35.3954 56.6046 34.5 55.5 34.5C54.3954 34.5 53.5 35.3954 53.5 36.5C53.5 37.6046 54.3954 38.5 55.5 38.5Z"
+      stroke="#E5CCEE"
+      stroke-width="2"
+    />
+    <path d="M1 26V108H83V26H1Z" stroke="#E5CCEE" stroke-width="2" />
+    <path
+      d="M25.5 50.5V53.5C25.5 55.709 27.291 57.5 29.5 57.5H51.5C53.709 57.5 55.5 55.709 55.5 53.5V50.5C55.5 48.291 53.709 46.5 51.5 46.5H29.5C27.291 46.5 25.5 48.291 25.5 50.5Z"
+      stroke="#E5CCEE"
+      stroke-width="2"
+    />
+    <path d="M1 94H83" stroke="#E5CCEE" stroke-width="2" />
+  </svg>
+);

src/assets/icons/uxcgIcons/Monitoring.tsx

@@ -0,0 +1,15 @@
+export const Monitoring = () => (
+  <svg
+    width="95"
+    height="95"
+    viewBox="0 0 95 95"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 35.875V24.25V6C1 3.2386 3.239 1 6 1H89C91.761 1 94 3.2386 94 6V89C94 91.761 91.761 94 89 94H6C3.239 94 1 91.761 1 89V47.5H18.691C19.048 47.5 19.378 47.309 19.557 47L24.006 39.293C24.421 38.575 25.479 38.645 25.796 39.411L38.571 70.309C38.927 71.169 40.161 71.12 40.447 70.234L54.768 25.804C55.073 24.856 56.425 24.888 56.685 25.849L63.907 52.573C64.025 53.01 64.421 53.312 64.873 53.312H83.205"
+      stroke="#FFD9B9"
+      stroke-width="2"
+    />
+  </svg>
+);

src/assets/icons/uxcgIcons/Released.tsx

@@ -0,0 +1,16 @@
+export const Released = () => (
+  <svg
+    width="88"
+    height="116"
+    viewBox="0 0 88 116"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M32 46.1917L1 80.1917V90.6917L34.643 83.6917M34.643 83.6917C35.291 89.2657 35.962 94.1687 36.5 97.6917L28 106.192V111.692L39.5 109.192L44 114.192L48.5 109.192L60 111.692V106.192L51.5 97.6917C52.038 94.1687 52.709 89.2657 53.357 83.6917M34.643 83.6917C33.083 70.2837 31.652 52.9937 32.5 41.6917C33.7 25.6917 40.667 8.69165 44 2.19165C47.333 8.69165 54.3 25.6917 55.5 41.6917C56.348 52.9937 54.917 70.2837 53.357 83.6917M53.357 83.6917L87 90.6917V80.1917L56 46.1917M48 27.1917C48 28.2967 46.209 29.1917 44 29.1917C41.791 29.1917 40 28.2967 40 27.1917C40 26.0867 41.791 25.1917 44 25.1917C46.209 25.1917 48 26.0867 48 27.1917Z"
+      stroke="#FFF2AE"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+);

src/assets/icons/uxcgIcons/TeamAssembly.tsx

@@ -0,0 +1,52 @@
+export const TeamAssemblyIcon = () => (
+  <svg
+    width="93"
+    height="103"
+    viewBox="0 0 93 103"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="21.042"
+      cy="66.5688"
+      r="10.4526"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <circle
+      cx="71.1472"
+      cy="66.5688"
+      r="10.4526"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <circle
+      cx="46.0949"
+      cy="13.6"
+      r="12.6"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <path
+      d="M21.0424 52.6108C21.0424 49.8379 21.6904 47.0921 22.9494 44.5302C24.2084 41.9683 26.0538 39.6405 28.3802 37.6797C30.7065 35.7189 33.4683 34.1635 36.5078 33.1024C39.5474 32.0412 42.8051 31.495 46.0951 31.495C49.385 31.495 52.6428 32.0412 55.6823 33.1024C58.7218 34.1636 61.4836 35.7189 63.81 37.6797C66.1363 39.6405 67.9817 41.9683 69.2407 44.5302C70.4997 47.0921 71.1477 49.8379 71.1477 52.6108"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <path
+      d="M0.999987 102C0.999987 99.2275 1.51839 96.4817 2.5256 93.9198C3.53282 91.3579 5.00911 89.0301 6.87019 87.0694C8.73127 85.1086 10.9407 83.5532 13.3723 82.492C15.8039 81.4309 18.4101 80.8847 21.0421 80.8847C23.6741 80.8847 26.2803 81.4309 28.7119 82.492C31.1435 83.5532 33.3529 85.1086 35.214 87.0694C37.0751 89.0301 38.5514 91.3579 39.5586 93.9198C40.5658 96.4817 41.0842 99.2275 41.0842 102"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <path
+      d="M51.1057 102C51.1057 99.2275 51.6241 96.4817 52.6313 93.9198C53.6385 91.3579 55.1148 89.0301 56.9759 87.0694C58.837 85.1086 61.0464 83.5532 63.478 82.492C65.9097 81.4309 68.5159 80.8847 71.1478 80.8847C73.7798 80.8847 76.386 81.4309 78.8176 82.492C81.2492 83.5532 83.4587 85.1086 85.3197 87.0694C87.1808 89.0301 88.6571 91.3579 89.6643 93.9198C90.6715 96.4817 91.1899 99.2275 91.1899 102"
+      stroke="#6087AB"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+);

src/components/Table/Table.tsx

@@ -17,6 +17,7 @@ import styles from './Table.module.scss';
 
 type TableProps = {
   data: QuestionType[];
+  setStageName?: (value: string) => void;
   tags: TagType[];
   activeFilter: string;
   withSearch?: boolean;
@@ -53,6 +54,7 @@ const Table: FC<TableProps> = ({
   isUXCoreModal,
   setSearchValue,
   setIsQuestionHovered,
+  setStageName,
 }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
@@ -190,16 +192,18 @@ const Table: FC<TableProps> = ({
             </div>
             <Tag
               dataId="all"
-              styles={{ backgroundColor: '#617181' }}
+              styles={{ backgroundColor: '#282828' }}
               isActive={activeFilter === 'all'}
               title={allQuestionsButtonLabel}
               type="button"
               onClick={handleTagFilterClick}
               large
+              setStageName={setStageName}
               className={styles.AllQuestionsButton}
             />
             {tags.map((tag, index) => (
               <Tag
+                setStageName={setStageName}
                 dataId={String(tag.id)}
                 key={index}
                 {...tag}
@@ -228,6 +232,7 @@ const Table: FC<TableProps> = ({
             const answerIndex = findAnswerIndexByBiasNumber(biasNumber, index);
             const name = formatName(attributes.number, attributes.title);
 
+            // GET BACK TO IT LATER: fix damn loop issue
             const isHidden =
               activeFilter !== 'all' &&
               !itemTags.includes(Number(activeFilter));

src/components/Tag/Tag.module.scss

@@ -1,15 +1,15 @@
 .Tag {
   color: #fff;
   font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 60px;
+  padding: 3px 17px;
+  border-radius: 2px;
   display: inline-block;
   border: none;
 
   &.Large {
     font-size: 14px;
     height: 32px;
-    padding: 8px 15px;
+    padding: 3px 17px;
   }
 
   &Button {

src/components/Tag/Tag.tsx

@@ -28,6 +28,7 @@ export type TTag = {
   className?: string;
   isUxEducation?: boolean;
   dataCy?: string;
+  setStageName?: (value: TitlesType | string) => void;
 };
 
 const Tag: FC<TTag> = ({
@@ -42,6 +43,7 @@ const Tag: FC<TTag> = ({
   onClick = () => {},
   className,
   isUxEducation,
+  setStageName,
   dataCy,
 }: TTag) => {
   const { isMobile } = useMobile()[1];
@@ -70,7 +72,16 @@ const Tag: FC<TTag> = ({
           [styles.TagButtonActive]: isActive,
           [className]: !!className,
         })}
-        onClick={type === 'button' ? onClick : () => {}}
+        onClick={
+          type === 'button'
+            ? e => {
+                onClick?.(e);
+                !!setStageName && dataId === 'all'
+                  ? setStageName('all')
+                  : setStageName(title);
+              }
+            : () => {}
+        }
         style={incomingStyles}
       >
         {displayTitle}