Fix the logo corners to ensure no gaps appear (#187)

FuturePortal · Dec 8, 2022 · d6a27a2 · d6a27a2
1 parent e3e1e1f
commit d6a27a2
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/frontend/App/Toolbar/Toolbar.style.tsx b/frontend/App/Toolbar/Toolbar.style.tsx
@@ -86,19 +86,21 @@ export const Brand = styled.div`
 		bottom: 0;
 		position: absolute;
 		content: '';
-		box-shadow: 0 0 0 50px #fff;
-		clip: rect(0, ${radius}rem, ${radius}rem, 0);
 		display: block;
 	}
 
 	&::after {
 		right: -${radius}rem;
-		border-bottom-left-radius: 100%;
+		background-image: radial-gradient(
+			circle at ${radius}rem 0,
+			rgba(204, 0, 0, 0) ${radius}rem,
+			white ${radius + 0.1}rem
+		);
 	}
 
 	&::before {
 		left: -${radius}rem;
-		border-bottom-right-radius: 100%;
+		background-image: radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) ${radius}rem, white ${radius + 0.1}rem);
 	}
 
 	svg {