0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix lint issue when running on CI

Browse source 
> cast
    $ /home/runner/work/ente/ente/web/node_modules/.bin/tsc
    Error: src/components/FilledCircleCheck/index.tsx(2,20): error TS2307: Cannot find module './FilledCircleCheck.module.scss' or its corresponding type declarations.
This commit is contained in:
Manav Rathi 2024-04-05 21:56:46 +05:30
parent e16834e52e
commit 6a31331ac4
No known key found for this signature in database
3 changed files with 64 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
web/apps/cast/src/components/FilledCircleCheck.tsx Normal file
View file

@ -0,0 +1,64 @@
import { styled } from "@mui/material";
const FilledCircleCheck = () => {
return (
<Container>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle cx="26" cy="26" r="25" fill="green" />
<path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
</Container>
);
};
export default FilledCircleCheck;
const Container = styled("div")`
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
animation: scaleIn 0.3s ease-in-out forwards;
@keyframes scaleIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
svg {
width: 100px;
height: 100px;
circle {
fill: green;
}
path {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s
forwards;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
}
@keyframes strokeCheck {
100% {
stroke-dashoffset: 0;
}
}
`;

51
web/apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss
View file

@ -1,51 +0,0 @@
.circle {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
&.animate {
animation: scaleIn 0.3s ease-in-out forwards;
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.checkmark {
width: 100px;
height: 100px;
&__circle {
fill: green;
}
&__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
}
@keyframes strokeCheck {
100% {
stroke-dashoffset: 0;
}
}

35
web/apps/cast/src/components/FilledCircleCheck/index.tsx
View file

@ -1,35 +0,0 @@
import { useEffect, useState } from "react";
import styles from "./FilledCircleCheck.module.scss"; // Import our CSS module
const FilledCircleCheck = () => {
const [animate, setAnimate] = useState(false);
useEffect(() => {
setAnimate(true);
}, []);
return (
<div className={`${styles.circle} ${animate ? styles.animate : ""}`}>
<svg
className={styles.checkmark}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
>
<circle
className={styles.checkmark__circle}
cx="26"
cy="26"
r="25"
fill="green"
/>
<path
className={styles.checkmark__check}
fill="none"
d="M14.1 27.2l7.1 7.2 16.7-16.8"
/>
</svg>
</div>
);
};
export default FilledCircleCheck;