feat: added new icons/skills (#132)

* feat: added new icons/files

* feat: changed concentration to speciality

* feat: added support for specialities

* fix: import

* fix: server support for updates

* fix: docker

* fix: prettier

* feat: added isActive for badge

* fix: added todos for backend

* fix: final adjustments

* fix: mocks, user entity, etc

* fix: fallback

.github/workflows/docker-e2e.yml

@@ -7,7 +7,7 @@ on:
     paths:
       - "server/**"
   pull_request:
-    branches: [develop, master, refactor/backend]
+    branches: [develop, master]
     paths:
       - "server/**"
 
@@ -19,4 +19,4 @@ jobs:
       - uses: actions/checkout@v4
       - name: Run e2e tests
         working-directory: ./server
-        run: cp ./env-example .env && /bin/bash ./sh-scripts/compose.sh type=ci stage=virtual
+        run: docker compose -f docker-compose.ci.yaml --env-file env-example -p ci up --build --exit-code-from api

client/package.json

@@ -25,7 +25,7 @@
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "beta",
-    "@teameights/types": "^1.1.19",
+    "@teameights/types": "^1.1.24",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",

client/src/app/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Typography } from '@/shared/ui';
+import { BadgeIcon, Typography } from '@/shared/ui';
 import {
   generateMockTeam,
   generateMockUser,
@@ -15,6 +15,8 @@ export default function Home() {
   useEffect(() => {
     setUser(generateMockUser());
 
+    console.log(generateMockUser());
+
     console.log(generateTeamInvitationNotification());
     console.log(generateMockTeam());
     console.log(generateSystemNotification());
@@ -28,6 +30,9 @@ export default function Home() {
 
       <Typography>Hello, {user?.username}!</Typography>
 
+      <BadgeIcon data='Assembly' />
+      <BadgeIcon data='C++' isActive />
+
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>

client/src/shared/assets/icons/designer-tool/3ds-max.tsx

@@ -0,0 +1,38 @@
+import { FC, SVGProps } from 'react';
+export const ThreeDsMax: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M2.80469 9.55452L3.66012 8.27136C4.14894 8.76018 4.75997 9.1268 5.4321 9.1268C6.22643 9.1268 6.77635 8.76018 6.77635 8.08805C6.77635 7.29371 6.34863 6.86598 4.57666 6.86598V5.46062C6.04312 5.46062 6.53194 4.97179 6.53194 4.29966C6.53194 3.68863 6.16533 3.32201 5.5543 3.32201C5.00438 3.32201 4.51556 3.62752 4.02674 4.11635L3.0491 2.89429C3.78233 2.22215 4.63776 1.79443 5.6154 1.79443C7.32627 1.79443 8.42612 2.64988 8.42612 4.17745C8.42612 5.094 7.9373 5.70503 7.08186 6.13275V6.19385C7.9984 6.49937 8.67053 7.1715 8.67053 8.33246C8.67053 9.92114 7.26517 10.8988 5.6154 10.8988C4.33225 10.7766 3.41571 10.2878 2.80469 9.55452Z'
+        fill='white'
+      />
+      <path
+        d='M9.40308 7.23251C9.40308 5.0328 10.6862 3.68853 12.0305 3.68853C12.7637 3.68853 13.1303 3.93294 13.6192 4.42177L13.558 3.38302V1H15.4522V10.5932H13.9247L13.8025 9.92104H13.7414C13.3136 10.4099 12.6415 10.7765 12.0305 10.7765C10.4418 10.7765 9.40308 9.43222 9.40308 7.23251ZM13.558 8.51567V5.70493C13.1914 5.39942 12.8248 5.27721 12.5193 5.27721C11.9083 5.27721 11.3584 5.88824 11.3584 7.17141C11.3584 8.51567 11.7861 9.1267 12.5193 9.1267C12.947 9.1267 13.2525 8.94339 13.558 8.51567Z'
+        fill='white'
+      />
+      <path
+        d='M16.1853 9.86L17.0407 8.57684C17.5907 9.06567 18.1406 9.31008 18.6905 9.31008C19.2404 9.31008 19.4848 9.06566 19.4848 8.76015C19.4848 8.33243 18.8127 8.08802 18.2017 7.8436C17.4074 7.53809 16.4908 6.98816 16.4908 5.8272C16.4908 4.54404 17.4685 3.6886 18.9349 3.6886C19.9126 3.6886 20.6458 4.11632 21.1957 4.54404L20.3403 5.7661C19.8515 5.39948 19.4237 5.21617 18.996 5.21617C18.5072 5.21617 18.2628 5.39948 18.2628 5.7661C18.2628 6.19382 18.8738 6.37713 19.4848 6.62154C20.2792 6.92706 21.1957 7.41588 21.1957 8.63794C21.1957 9.86 20.2792 10.8377 18.5683 10.8377C17.774 10.7765 16.7963 10.4099 16.1853 9.86Z'
+        fill='white'
+      />
+      <path
+        d='M1.39868 14.8987H3.47617L4.82042 18.8704C5.00373 19.4203 5.12594 19.9702 5.30924 20.5202H5.37035C5.55365 19.9702 5.67586 19.4203 5.85917 18.8704L7.20342 14.8987H9.28091V23.8197H7.57004V20.5202C7.57004 19.6647 7.75334 18.3205 7.81445 17.465H7.75335L7.08122 19.6036L5.85917 23.0254H4.82042L3.59837 19.6036L2.92624 17.465H2.86514C2.92625 18.3205 3.10955 19.6036 3.10955 20.5202V23.8197H1.39868V14.8987Z'
+        fill='white'
+      />
+      <path
+        d='M10.3196 21.9255C10.3196 20.5201 11.3583 19.7258 13.9246 19.4203C13.8635 18.8092 13.6191 18.4426 12.947 18.4426C12.3971 18.4426 11.9082 18.687 11.2361 19.0537L10.564 17.7094C11.3583 17.1595 12.2749 16.7928 13.3136 16.7928C14.9634 16.7928 15.8188 17.7705 15.8188 19.848V23.7586H14.2912L14.169 23.0865H14.1079C13.558 23.5753 13.0081 23.9419 12.2749 23.9419C11.0528 24.003 10.3196 23.0865 10.3196 21.9255ZM13.9246 21.8644V20.6423C12.5804 20.8256 12.1527 21.2534 12.1527 21.7422C12.1527 22.1699 12.4582 22.4143 12.8859 22.4143C13.3136 22.4143 13.558 22.231 13.9246 21.8644Z'
+        fill='white'
+      />
+      <path
+        d='M18.3242 20.2757L16.4911 17.0372H18.5075L19.0574 18.1371C19.2407 18.5037 19.424 18.9314 19.6073 19.298H19.6684C19.7906 18.9314 19.9739 18.5037 20.0961 18.1371L20.5239 17.0372H22.4791L20.6461 20.5201L22.6014 23.8197H20.585L19.9739 22.7198C19.7906 22.3532 19.5462 21.9255 19.3629 21.5589H19.3018C19.1185 21.9255 18.9963 22.3532 18.813 22.7198L18.3242 23.8197H16.3689L18.3242 20.2757Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/after-effects.tsx

@@ -0,0 +1,22 @@
+import { FC, SVGProps } from 'react';
+export const AfterEffects: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='28'
+      height='18'
+      viewBox='0 0 28 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M10.7221 12.8072H4.99114L3.51133 17.5427C3.49339 17.6862 3.4037 17.7579 3.24227 17.7579H0.551694C0.372322 17.7579 0.309542 17.6682 0.363354 17.4889L5.55617 1.64126C5.68173 1.30045 5.75347 0.807178 5.77141 0.161435C5.77141 0.0538117 5.82522 0 5.93285 0H9.69965C9.80728 0 9.87006 0.0448432 9.88799 0.13453L15.6996 17.5158C15.7535 17.6772 15.7086 17.7579 15.5651 17.7579H12.5517C12.4261 17.7579 12.3364 17.7041 12.2826 17.5965L10.7221 12.8072ZM5.63688 10.2512H10.1032C9.99562 9.87448 9.7714 9.13905 9.4306 8.04487C9.08979 6.9507 8.77589 5.92827 8.48889 4.9776C8.2019 4.02692 7.98665 3.27355 7.84316 2.7175H7.81625C7.61894 3.65024 6.89249 6.16146 5.63688 10.2512Z'
+        fill='white'
+      />
+      <path
+        d='M24.588 11.7848H19.6642C19.6822 12.9328 20.0051 13.8386 20.6329 14.5023C21.2607 15.166 22.2024 15.4978 23.458 15.4978C24.6059 15.4978 25.6284 15.3005 26.5252 14.9059C26.6328 14.8341 26.6866 14.87 26.6866 15.0135V16.9776C26.6866 17.1032 26.6328 17.2108 26.5252 17.3005C25.5028 17.7669 24.2472 18.0001 22.7584 18.0001C20.5521 18.0001 18.9288 17.3723 17.8885 16.1166C16.866 14.8431 16.3548 13.2557 16.3548 11.3543C16.3548 9.3812 16.893 7.73097 17.9692 6.40361C19.0454 5.07625 20.5163 4.41257 22.3817 4.41257C24.1575 4.41257 25.4759 4.95966 26.3369 6.05383C27.2158 7.14801 27.6553 8.43052 27.6553 9.90138C27.6553 10.6368 27.6194 11.157 27.5476 11.4619C27.5297 11.5875 27.4579 11.6592 27.3324 11.6772C26.866 11.7489 25.9512 11.7848 24.588 11.7848ZM19.6642 9.71304H23.2158C23.9871 9.71304 24.4266 9.6951 24.5342 9.65923C24.5521 9.58748 24.5611 9.46192 24.5611 9.28254C24.5611 8.60093 24.3817 7.99106 24.023 7.45294C23.6642 6.91482 23.0813 6.64576 22.2741 6.64576C21.4849 6.64576 20.875 6.93276 20.4445 7.50675C20.014 8.08075 19.7539 8.81618 19.6642 9.71304Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/animate.tsx

@@ -0,0 +1,22 @@
+import { FC, SVGProps } from 'react';
+export const Animate: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='26'
+      height='24'
+      viewBox='0 0 26 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M9.67637 15.969H4.292L3.18624 19.3665C3.17131 19.4286 3.1352 19.4835 3.08414 19.5218C3.03308 19.5601 2.97026 19.5794 2.90651 19.5763H0.179369C0.0238468 19.5763 -0.030541 19.4909 0.0162054 19.3199L4.69739 5.96148C4.74405 5.82165 4.79063 5.69701 4.83729 5.51816C4.89826 5.20717 4.92948 4.89109 4.93052 4.57418C4.92736 4.55201 4.9294 4.52942 4.93648 4.50818C4.94356 4.48694 4.95549 4.46764 4.97132 4.45181C4.98715 4.43597 5.00645 4.42404 5.02769 4.41696C5.04893 4.40987 5.07152 4.40783 5.09369 4.41099H8.79977C8.90835 4.41099 8.97051 4.44985 8.98625 4.52756L14.258 19.3432C14.3046 19.4987 14.258 19.5764 14.1181 19.5763H11.0879C11.0359 19.5821 10.9835 19.5687 10.9406 19.5387C10.8977 19.5086 10.8673 19.464 10.8549 19.4132L9.67637 15.969ZM5.14027 13.0941H8.8231C8.72985 12.7834 8.62108 12.4338 8.49678 12.0451C8.37222 11.6569 8.24015 11.2412 8.10056 10.7981C7.96066 10.3552 7.82078 9.91237 7.68093 9.46948C7.5411 9.02663 7.41291 8.5993 7.29637 8.18749C7.1798 7.77595 7.07491 7.39913 6.98172 7.05702H6.95839C6.82717 7.68653 6.6638 8.30892 6.46892 8.92172C6.25112 9.62101 6.02967 10.3358 5.80456 11.0662C5.57913 11.7968 5.3577 12.4727 5.14027 13.0941Z'
+        fill='white'
+      />
+      <path
+        d='M15.8898 19.3545V10.7631C15.8898 10.4991 15.8859 10.2038 15.8782 9.87738C15.8701 9.55107 15.8585 9.24029 15.8432 8.94503C15.8275 8.65 15.8119 8.37598 15.7966 8.20479C15.7875 8.18155 15.7849 8.15628 15.789 8.13166C15.7931 8.10703 15.8038 8.08398 15.8199 8.06493C15.8389 8.04823 15.8611 8.03551 15.8851 8.02751C15.9091 8.0195 15.9345 8.01637 15.9598 8.01831H18.2865C18.3668 8.01567 18.4466 8.03163 18.5197 8.06493C18.5507 8.08092 18.5774 8.10406 18.5976 8.13243C18.6179 8.16081 18.6311 8.1936 18.6362 8.22809C18.6671 8.32133 18.7021 8.42623 18.7411 8.54277C18.784 8.69704 18.8113 8.85522 18.8227 9.01495C19.2733 8.62016 19.7956 8.31551 20.3611 8.11755C20.9233 7.92291 21.5143 7.82441 22.1093 7.8262C22.5726 7.82832 23.0327 7.90304 23.4728 8.04764C23.981 8.2101 24.4444 8.48837 24.8267 8.8605C25.2089 9.23264 25.4995 9.68847 25.6755 10.1921C25.9086 10.7904 26 11.5636 26 12.5113V19.3545C26 19.4943 25.9379 19.5642 25.8135 19.5642L23.0899 19.5884C23.0582 19.5929 23.0259 19.59 22.9956 19.5799C22.9652 19.5698 22.9377 19.5527 22.915 19.5301C22.8924 19.5075 22.8754 19.4799 22.8653 19.4496C22.8552 19.4192 22.8523 19.3869 22.8568 19.3553V12.8626C22.8493 12.4278 22.7535 11.999 22.5754 11.6023C22.4504 11.3096 22.2441 11.0588 21.981 10.8797C21.6837 10.6977 21.3388 10.6084 20.9904 10.6233C20.6159 10.618 20.2439 10.6852 19.8949 10.8214C19.5759 10.9488 19.2834 11.1346 19.0325 11.3692V19.3545C19.0325 19.4943 18.9703 19.5642 18.846 19.5642H16.0996C16.0711 19.5683 16.042 19.5657 16.0147 19.5566C15.9874 19.5475 15.9626 19.5321 15.9423 19.5118C15.9219 19.4914 15.9066 19.4666 15.8975 19.4393C15.8883 19.412 15.8857 19.383 15.8898 19.3545Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/aseprite.tsx

@@ -0,0 +1,18 @@
+import { FC, SVGProps } from 'react';
+export const Aseprite: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M4.00608 0V1.6H19.9941V0H4.00608ZM19.9941 1.6V3.2H21.5941V1.6H19.9941ZM21.5941 3.2V17.6H19.9941V19.2H4.00608V17.6H2.40608V3.2H0.809082V20.8H2.40808V22.4H4.00708V24H19.9951V22.4H21.5951V20.8H23.1931V3.2H21.5941ZM2.40708 3.2H4.00608V1.6H2.40608L2.40708 3.2ZM7.20308 6.4V12.8H8.80308V6.4H7.20308ZM15.1981 6.4V12.8H16.7971V6.4H15.1981Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/blender.tsx

@@ -0,0 +1,18 @@
+import { FC, SVGProps } from 'react';
+export const Blender: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='20'
+      viewBox='0 0 24 20'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M12.51 11.2139C12.556 10.4139 12.948 9.70794 13.54 9.20794C14.1611 8.69203 14.9445 8.41223 15.752 8.41794C16.602 8.41794 17.383 8.71794 17.963 9.20794C18.555 9.70794 18.946 10.4139 18.991 11.2129C19.036 12.0359 18.706 12.7989 18.126 13.3659C17.4871 13.9761 16.6353 14.3126 15.752 14.3039C14.868 14.3127 14.0155 13.9762 13.376 13.3659C12.796 12.7989 12.465 12.0359 12.51 11.2139ZM7.34997 12.8309C7.35597 13.1449 7.45597 13.7529 7.60597 14.2289C7.92979 15.253 8.47347 16.194 9.19897 16.9859C9.97702 17.8414 10.9267 18.5232 11.986 18.9869C13.1388 19.4952 14.3861 19.7541 15.646 19.7469C16.9057 19.7494 18.1518 19.4864 19.303 18.9749C20.3615 18.5068 21.3102 17.8221 22.088 16.9649C22.8123 16.1703 23.3554 15.228 23.68 14.2029C23.992 13.2098 24.0774 12.1594 23.93 11.1289C23.7896 10.1417 23.4434 9.19495 22.914 8.34994C22.4235 7.56389 21.7963 6.87198 21.062 6.30694H21.064L13.566 0.549943L13.546 0.534943C13.054 0.156943 12.227 0.158943 11.686 0.536943C11.139 0.918943 11.077 1.55194 11.563 1.95194L11.562 1.95294L14.688 4.49594L5.15797 4.50594H5.14497C4.35697 4.50694 3.59997 5.02394 3.44997 5.67794C3.29597 6.34294 3.82997 6.89494 4.64997 6.89794V6.89994L9.47997 6.88994L0.859967 13.5069L0.825967 13.5319C0.0129669 14.1539 -0.249033 15.1899 0.262967 15.8449C0.782967 16.5119 1.88797 16.5129 2.70997 15.8489L7.41397 11.9999C7.41397 11.9999 7.34397 12.5199 7.34997 12.8309ZM19.44 14.5719C18.47 15.5599 17.114 16.1199 15.645 16.1219C14.175 16.1259 12.818 15.5699 11.848 14.5839C11.3899 14.1241 11.0366 13.5709 10.812 12.9619C10.6061 12.389 10.5248 11.7788 10.5734 11.172C10.6221 10.5652 10.7995 9.97575 11.094 9.44294C11.3869 8.91628 11.7783 8.45083 12.247 8.07194C13.189 7.30394 14.388 6.88894 15.643 6.88694C16.899 6.88494 18.098 7.29694 19.041 8.06194C19.521 8.45294 19.911 8.91594 20.193 9.42894C20.4849 9.95463 20.6627 10.5359 20.715 11.1349C20.768 11.7488 20.6864 12.3668 20.476 12.9459C20.2513 13.5558 19.8974 14.1103 19.44 14.5719Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/cinema-4d.tsx

@@ -0,0 +1,18 @@
+import { FC, SVGProps } from 'react';
+export const CinemaFourD: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M12.0221 5.12701C8.7861 5.71301 6.6771 6.91701 5.3001 8.04701C5.1281 8.71201 5.0271 9.40301 5.0271 10.119C5.0271 14.913 9.1201 18.799 14.1681 18.799C14.9211 18.799 15.6351 18.701 16.3141 18.535C17.7721 16.687 18.9651 13.47 19.2691 10.807C19.5881 8.02101 20.2221 7.17701 21.0111 6.62701C21.2911 6.43201 21.5851 6.28301 21.8961 6.21201C21.0091 4.31501 19.4571 2.82401 17.4521 2.04401C17.4571 2.06601 17.4661 2.08401 17.4711 2.10601C17.8521 3.73501 16.1151 4.38601 12.0221 5.12701ZM23.1791 7.89801C23.1471 7.83501 23.1151 7.76401 23.0821 7.68401C22.4881 6.22901 21.0601 7.17201 20.6831 8.02801C19.9411 9.71401 20.0501 10.45 19.7491 12.159C19.4481 13.868 18.4121 17.158 16.9211 18.847C14.7911 21.259 12.4611 22.331 9.1941 22.019C5.9271 21.707 3.4091 18.937 2.4771 16.929C1.6951 15.244 1.5771 13.333 2.5021 10.856C3.4271 8.37901 6.2021 6.36501 8.7391 5.39701C11.2761 4.42901 13.2841 4.33401 14.6991 3.92201C16.1141 3.50901 16.9481 2.82901 16.8961 2.25001C16.8311 1.53201 16.1391 1.15001 15.7481 0.990006C14.5681 0.611006 13.3071 0.406006 11.9971 0.406006C5.3861 0.406006 0.0270996 5.62401 0.0270996 12.061C0.0270996 18.498 5.3861 23.716 11.9971 23.716C18.6081 23.716 23.9671 18.498 23.9671 12.061C23.9661 10.594 23.6871 9.19101 23.1791 7.89801Z'
+        fill='white'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/figma.tsx

@@ -0,0 +1,41 @@
+import { FC, SVGProps } from 'react';
+export const Figma: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g clipPath='url(#clip0_3690_58133)'>
+        <path
+          d='M11.4782 -0.00012207H7.826C5.80896 -0.00012207 4.17383 1.63501 4.17383 3.65205C4.17383 5.6691 5.80896 7.30423 7.826 7.30423H11.4782V-0.00012207Z'
+          fill='white'
+        />
+        <path
+          d='M12.5217 0H16.1739C18.1909 0 19.8261 1.63513 19.8261 3.65217C19.8261 5.66922 18.1909 7.30435 16.1739 7.30435H12.5217V0Z'
+          fill='white'
+        />
+        <path
+          d='M11.4782 8.34778H7.826C5.80896 8.34778 4.17383 9.98291 4.17383 12C4.17383 14.017 5.80896 15.6521 7.826 15.6521H11.4782V8.34778Z'
+          fill='white'
+        />
+        <path
+          d='M11.4782 16.6957H7.826C5.80896 16.6957 4.17383 18.3308 4.17383 20.3479C4.17383 22.3649 5.80896 24 7.826 24C9.84305 24 11.4782 22.3649 11.4782 20.3479V16.6957Z'
+          fill='white'
+        />
+        <path
+          d='M16.1739 15.6521C18.1909 15.6521 19.8261 14.017 19.8261 12C19.8261 9.98291 18.1909 8.34778 16.1739 8.34778C14.1569 8.34778 12.5217 9.98291 12.5217 12C12.5217 14.017 14.1569 15.6521 16.1739 15.6521Z'
+          fill='white'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_3690_58133'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/framer.tsx

@@ -0,0 +1,15 @@
+import { FC, SVGProps } from 'react';
+export const Framer: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='16'
+      height='24'
+      viewBox='0 0 16 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M0 0H16V8H8L0 0ZM0 8H8L16 16H0V8ZM0 16H8V24L0 16Z' fill='white' />
+    </svg>
+  );
+};

client/src/shared/assets/icons/designer-tool/houdini.tsx

@@ -0,0 +1,33 @@
+import { FC, SVGProps } from 'react';
+export const Houdini: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g clipPath='url(#clip0_5655_49901)'>
+        <path
+          d='M0 19.6323V23.997H3.82355C2.08526 23.0248 0.734973 21.4834 0 19.6323Z'
+          fill='white'
+        />
+        <path
+          d='M16.0424 15.0784C16.0424 11.0419 12.7895 7.15925 7.93099 6.99069C4.48299 6.87241 1.80088 8.1351 0 10.004V14.212C1.22425 10.6634 4.59536 9.05476 7.41941 9.08433C10.9502 9.12573 13.6708 11.7871 13.6944 14.8034C13.6944 17.6807 12.5116 19.795 9.25873 20.3184C7.48446 20.6142 4.71069 19.5644 4.82306 16.8852C4.88811 15.5042 5.96155 14.7236 7.18875 14.7797C5.98225 16.3973 7.57909 17.5801 8.70871 17.3406C9.27505 17.215 9.78042 16.8972 10.1389 16.4411C10.4974 15.985 10.6869 15.4189 10.6752 14.8389C10.6752 13.8216 9.71709 12.1775 7.34252 12.2396C4.4061 12.3076 2.55791 14.4219 2.49285 17.036C2.42188 20.3155 5.50024 22.4919 8.66731 22.5185C13.2982 22.5777 16.0601 19.5348 16.0424 15.0784Z'
+          fill='white'
+        />
+        <path
+          d='M0 0V6.90488C2.27962 5.17687 5.0707 4.259 7.93099 4.2967C14.7324 4.2967 19.0645 9.05766 19.0616 15.0606C19.0616 19.2302 17.1158 22.3677 14.067 23.997H24V0H0Z'
+          fill='white'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_5655_49901'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};