update styles

src/app/[locale]/pages/marking-photo/page.tsx

@@ -31,11 +31,6 @@ const data = [
 		checks: 5,
 		violations: 4
 	},
-	{
-		name: 'File F',
-		checks: 5,
-		violations: 3
-	}
 ];
 
 export default async function Page() {

src/app/components/PieChartComponent.tsx

@@ -31,7 +31,7 @@ export const PieChartComponent = ({ data }: {
 						data={data}
 						cx="50%"
 						cy="50%"
-						innerRadius={75}
+						innerRadius={65}
 						outerRadius={100}
 						paddingAngle={0}
 						dataKey="value"

src/app/components/StackedBarChart.tsx

@@ -149,7 +149,7 @@ export const StackedBarChart = ({ data }: Files) => {
 
 	return (
 		<>
-			<div className="protection-stat relative">
+			<div className="stacked-bar-chart-wrapper">
 				<div className="stacked-bar-chart">
 					<BarChart
 						style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}

src/app/styles/pages-styles.scss

@@ -19,7 +19,7 @@
 
 .protection-overview {
 	--text-color: v.$text-p;
-/* 	background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
+	/* 	background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
 	color: v.$white; */
 	color: var(--text-color);
 	border-radius: 20px;
@@ -75,10 +75,7 @@
 
 	.protection-stat {
 		padding: 15px;
-		/* background: rgba(255, 255, 255, 0.1); */
+		border: 1px solid v.$b-color-2;
-		/* background-color: v.$b-color-1; */
-		/* background-color: v.$bg-light; */
-		box-shadow: 0 4px 20px v.$shadow-1;
 		border-radius: 12px;
 		display: flex;
 		flex-direction: column;
@@ -123,6 +120,7 @@
 			font-size: 28px;
 			font-weight: 700;
 			margin-bottom: 5px;
+			color: v.$p-color;
 
 			&.btn {
 				user-select: none;
@@ -143,22 +141,12 @@
 		}
 
 		&-total-info {
-			position: absolute;
-			top: 10;
-			left: 10;
-			/* background-color: #1f293718; */
-			box-shadow: 0 4px 20px v.$shadow-1;
 			padding: 10px;
 			border-radius: 10;
 			font-size: 15px;
-		}
-
-		.stacked-bar-chart {
-			border-radius: 10;
-			width: 100%;
-			padding: 0 20px;
 			display: flex;
 			justify-content: center;
+			gap: 20px;
 		}
 
 		&-drop-down-list {
@@ -193,10 +181,20 @@
 			}
 		}
 
-		&:has(.stacked-bar-chart) {
+	}
-			height: 100%;
+
-			padding-left: 100px;
+	.stacked-bar-chart-wrapper {
-		}
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.stacked-bar-chart {
+		border-radius: 10;
+		width: 100%;
+		padding: 0 20px;
+		display: flex;
+		justify-content: center;
 	}
 
 	&-switch {