fix: stop changing the appearance of the administration dashboard

cookiex-io · Dec 6, 2024 · 7582a58 · 7582a58
1 parent 68699be
commit 7582a58
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 70 deletions.
diff --git a/resources/admin/index.html b/resources/admin/index.html
@@ -26,7 +26,7 @@
     <title>CookieX CMP Development</title>
 </head>
 <body>
-    <div id="cookiex-root"></div>
+    <div id="cookiex-root" class="cookiex-cmp-admin"></div>
     <script type="module" src="cookiex-cmp-admin.js"></script>
 </body>
 </html>
diff --git a/resources/admin/scss/app.scss b/resources/admin/scss/app.scss
@@ -1,69 +1,58 @@
-body {
-	margin: 0;
-	background: #fff;
-}
-
-.ck-flex-container {
-	display: flex;
-}
-
-.ck-side-bar {
-	top: 60px; /* the height of the header (60px) + its bottom margin (20px) */
-	padding: 20px 0px 20px;
-	width: 300px;
-	height: 100vh;
-	border-right: 1px solid #eaeaea;
-	background: #fff;
-}
-
-.ck-main {
-	flex-grow: 1;
-}
-
-.ck-main-content {
-	top: 100px; /* the height of the header (60px) + its bottom margin (20px) */
-	padding: 20px;
-	margin-bottom: 20px;
-}
-
-.cookiex-admin-header {
-	padding: 0 var(--mantine-spacing-xl);
-	color: lightdark(var(--mantine-color-white), var(--mantine-color-dark));
-	gap: var(--mantine-spacing-md);
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	height: 80px;
-	justify-content: space-between;
-	border-bottom: 1px solid #eaeaea;
-}
-
-.ck-navbar-links {
-	flex: 1;
-	padding: var(--mantine-spacing-sm);
-}
-
-.ck-navbar-linksInner {
-	padding-top: var(--mantine-spacing-xs);
-	padding-bottom: var(--mantine-spacing-xs);
-	margin-top: var(--mantine-spacing-xs);
-	cursor: pointer;
-	padding-left: 8px;
-}
-
-.ckActive,
-.ck-navbar-linksInner:hover,
-.ck-navbar-linksInner:active {
-	color: #fff;
-	border-radius: 5px;
-	background: #0078b4;
-}
-
-.mantine-Accordion-label {
-	color: #0078b4 !important;
-}
-
-#wpfooter {
-    position: relative !important;
-    top: 300px !important;
+.cookiex-cmp-admin {
+    .cookiex-content {
+        background: #fff;
+        margin: 0;
+    }
+
+    .ck-flex-container {
+        display: flex;
+        margin-left: -20px;
+    }
+
+    .ck-side-bar {
+        width: 300px;
+        background: #fff;
+        border-right: 1px solid #eaeaea;
+        padding: 20px;
+    }
+
+    .ck-main {
+        flex-grow: 1;
+        padding: 20px;
+    }
+
+    .ck-main-content {
+        padding: 20px;
+        margin-bottom: 20px;
+    }
+
+    .cookiex-admin-header {
+        padding: 0 20px;
+        background: #fff;
+        color: lightdark(var(--mantine-color-white), var(--mantine-color-dark));
+        gap: var(--mantine-spacing-md);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 60px;
+        justify-content: space-between;
+        border-bottom: 1px solid #eaeaea;
+    }
+
+    .ck-navbar-links {
+        .ck-navbar-linksInner {
+            padding: 12px 16px;
+            cursor: pointer;
+            border-radius: 4px;
+            margin-bottom: 8px;
+
+            &:hover {
+                background: #f5f5f5;
+            }
+
+            &.ckActive {
+                background: #f0f0f0;
+            }
+        }
+    }
 }
diff --git a/src/Admin_Menu.php b/src/Admin_Menu.php
@@ -37,6 +37,6 @@ public static function add_menu_pages(): void {
 	 */
 	public static function render_dashboard_page(): void {
 		$nonce = wp_create_nonce( 'cookiex_cmp_nonce' );
-		echo '<div id="cookiex-root" data-nonce="' . esc_attr( $nonce ) . '"></div>';
+		echo '<div id="cookiex-root" class="cookiex-cmp-admin" data-nonce="' . esc_attr( $nonce ) . '"></div>';
 	}
 }