diff --git a/packages/commons/src/icons/components/TeaIcon.tsx b/packages/commons/src/icons/components/TeaIcon.tsx
index 18af371147131ed00645f4275bdb41c6bfca24d1..d189bb65e159eebb27066603a1c9d971c80a4d78 100644
--- a/packages/commons/src/icons/components/TeaIcon.tsx
+++ b/packages/commons/src/icons/components/TeaIcon.tsx
@@ -7,6 +7,8 @@ interface IconProps {
size?: number;
}
+// Not a tea icon anymore, since this is the Love Coding Branding, Heart Emoji Icon from OpenMoji, authored by Laura Humpfer, licensed under CC-BY SA 4.0
+// (https://creativecommons.org/licenses/by-sa/4.0/)
export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => {
return (
<SvgIcon
@@ -15,45 +17,17 @@ export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => {
height={24 * size}
sx={{ transform: `scale(${size})` }}
>
- <g>
- <path
- d="M16.3,8.3H4.4c-0.6,0-1,0.4-1,1c0.1,1.7,0.2,5.3,0.7,7.4c0.8,3.3,2.3,5.4,3,6.1c0.2,0.2,0.4,0.3,0.7,0.3h5.1
- c0.3,0,0.6-0.1,0.8-0.4c0.6-0.8,1.8-2.9,2.9-6.1c0.7-2.1,0.8-5.8,0.8-7.5C17.3,8.7,16.9,8.3,16.3,8.3z"
- stroke={color}
- strokeWidth={1 + size / 24}
- ></path>
- <path
- d="M17.3,11.5c0,0,2.7-1.5,3.2,1c0.3,1.5-0.6,3-1.7,3.7c-1.3,0.8-2,0.6-2,0.6"
- stroke={color}
- strokeWidth={1 + size / 24}
- ></path>
- <path
- id="teabag"
- fill={color}
- fillRule="evenodd"
- clipRule="evenodd"
- strokeWidth={1 + size / 24}
- d="M10.8,12.2v-4h-1v4h-1c-0.8,0-1.5,0.7-1.5,1.5v3c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5
- v-3c0-0.8-0.7-1.5-1.5-1.5H10.8z M8.4,13.7c0-0.3,0.2-0.5,0.5-0.5h3c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-3
- c-0.3,0-0.5-0.2-0.5-0.5V13.7z"
- ></path>
- <path
- id="steamL"
- d="M11.3,0.3c0,0,0,1.7-1.5,2.7S8.4,5.8,8.4,5.8"
- strokeWidth={1 + size / 24}
- strokeLinecap="round"
- strokeLinejoin="round"
- stroke={color}
- ></path>
- <path
- id="steamR"
- d="M13.3,2.8c0,0,0,1.1-1,1.7c-1,0.6-1,1.7-1,1.7"
- stroke={color}
- strokeWidth={1 + size / 24}
- strokeLinecap="round"
- strokeLinejoin="round"
- ></path>
- </g>
+ <svg id="heart" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+ <g id="color">
+ <path fill="#EA5A47" d="M59.5,25c0-6.9036-5.5964-12.5-12.5-12.5c-4.7533,0-8.8861,2.6536-11,6.5598 C33.8861,15.1536,29.7533,12.5,25,12.5c-6.9036,0-12.5,5.5964-12.5,12.5c0,2.9699,1.0403,5.6942,2.7703,7.8387l-0.0043,0.0034 L36,58.5397l20.7339-25.6975l-0.0043-0.0034C58.4597,30.6942,59.5,27.9699,59.5,25z"/>
+ </g>
+ <g id="hair"/>
+ <g id="skin"/>
+ <g id="skin-shadow"/>
+ <g id="line">
+ <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M59.5,25 c0-6.9036-5.5964-12.5-12.5-12.5c-4.7533,0-8.8861,2.6536-11,6.5598C33.8861,15.1536,29.7533,12.5,25,12.5 c-6.9036,0-12.5,5.5964-12.5,12.5c0,2.9699,1.0403,5.6942,2.7703,7.8387l-0.0043,0.0034L36,58.5397l20.7339-25.6975l-0.0043-0.0034 C58.4597,30.6942,59.5,27.9699,59.5,25z"/>
+ </g>
+</svg>
</SvgIcon>
);
};
diff --git a/packages/commons/src/icons/components/css/tea.css b/packages/commons/src/icons/components/css/tea.css
index 156d05668483e1eefa0024ee3c0bc09952cdf329..2af079f967b7bef844826e8bd1d1159d9d67d40d 100644
--- a/packages/commons/src/icons/components/css/tea.css
+++ b/packages/commons/src/icons/components/css/tea.css
@@ -2,160 +2,76 @@ svg.tea {
fill: none
}
-svg.tea #teabag {
+svg.tea #heart {
transform-origin: top center;
transform: rotate(3deg);
animation: swing 2s infinite;
}
-svg.tea #steamL {
- stroke-dasharray: 13;
- stroke-dashoffset: 13;
- animation: steamLarge 2s infinite;
+svg.tea #heart {
+ animation: pulse 2s infinite;
}
-svg.tea #steamR {
- stroke-dasharray: 9;
- stroke-dashoffset: 9;
- animation: steamSmall 2s infinite;
-}
-
-@-moz-keyframes swing {
- 50% {
- transform: rotate(-3deg);
- }
-}
-
-@-webkit-keyframes swing {
- 50% {
- transform: rotate(-3deg);
- }
-}
-
-@-o-keyframes swing {
- 50% {
- transform: rotate(-3deg);
- }
-}
-
-@keyframes swing {
- 50% {
- transform: rotate(-3deg);
- }
-}
-
-@-moz-keyframes steamLarge {
+@-moz-keyframes pulse {
0% {
- stroke-dashoffset: 13;
opacity: 0.6;
}
100% {
- stroke-dashoffset: 39;
opacity: 0;
}
}
-@-webkit-keyframes steamLarge {
+@-webkit-keyframes pulse {
0% {
- stroke-dashoffset: 13;
opacity: 0.6;
}
100% {
- stroke-dashoffset: 39;
opacity: 0;
}
}
-@-o-keyframes steamLarge {
+@-o-keyframes pulse {
0% {
- stroke-dashoffset: 13;
opacity: 0.6;
}
100% {
- stroke-dashoffset: 39;
opacity: 0;
}
}
-@keyframes steamLarge {
+@keyframes pulse {
0% {
- stroke-dashoffset: 13;
opacity: 0.6;
}
100% {
- stroke-dashoffset: 39;
opacity: 0;
}
}
-@-moz-keyframes steamSmall {
- 10% {
- stroke-dashoffset: 9;
- opacity: 0.6;
- }
-
- 80% {
- stroke-dashoffset: 27;
- opacity: 0;
- }
-
- 100% {
- stroke-dashoffset: 27;
- opacity: 0;
+@-moz-keyframes swing {
+ 50% {
+ transform: rotate(-3deg);
}
}
-@-webkit-keyframes steamSmall {
- 10% {
- stroke-dashoffset: 9;
- opacity: 0.6;
- }
-
- 80% {
- stroke-dashoffset: 27;
- opacity: 0;
- }
-
- 100% {
- stroke-dashoffset: 27;
- opacity: 0;
+@-webkit-keyframes swing {
+ 50% {
+ transform: rotate(-3deg);
}
}
-@-o-keyframes steamSmall {
- 10% {
- stroke-dashoffset: 9;
- opacity: 0.6;
- }
-
- 80% {
- stroke-dashoffset: 27;
- opacity: 0;
- }
-
- 100% {
- stroke-dashoffset: 27;
- opacity: 0;
+@-o-keyframes swing {
+ 50% {
+ transform: rotate(-3deg);
}
}
-@keyframes steamSmall {
- 10% {
- stroke-dashoffset: 9;
- opacity: 0.6;
- }
-
- 80% {
- stroke-dashoffset: 27;
- opacity: 0;
- }
-
- 100% {
- stroke-dashoffset: 27;
- opacity: 0;
+@keyframes swing {
+ 50% {
+ transform: rotate(-3deg);
}
}
\ No newline at end of file