From b8733b8d4df35ffae32b9399c8ee440901963fcc Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Thu, 26 Dec 2024 17:39:53 +0530
Subject: [PATCH 1/2] fix: css styling

---
 wiki/public/scss/edit_wiki.scss               |  7 ++++-
 wiki/public/scss/wiki.scss                    | 11 +++++--
 .../doctype/wiki_page/templates/editor.html   | 31 ++++---------------
 3 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss
index 1d9a5cd9..436bcae6 100644
--- a/wiki/public/scss/edit_wiki.scss
+++ b/wiki/public/scss/edit_wiki.scss
@@ -6,12 +6,16 @@ body {
   --editor-line-no-bg-color: var(--gray-100);
 
   --editor-background-color: #f3f3f3;
+
+  --button-background-color: #383838;
 }
 
 body.dark {
   --editor-line-no-bg-color: var(--gray-800);
   --control-bg-on-gray: var(--gray-700);
   --editor-background-color: #333c44;
+  
+  --button-background-color: #383838;
 
   .draft-wiki-page {
     background: var(--gray-700);
@@ -21,6 +25,7 @@ body.dark {
 
 .form-control {
   background-color: white;
+  border: 1px solid var(--background-color);
 }
 
 // edit page
@@ -577,7 +582,7 @@ $font-sizes-mobile: (
 
 .btn.btn-primary:hover {
   color: #fff;
-  background-color: var(--editor-background-color);
+  background-color: var(--button-background-color);
   border-color: #383838;
 }
 
diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss
index 59faa3b3..6c8ed905 100644
--- a/wiki/public/scss/wiki.scss
+++ b/wiki/public/scss/wiki.scss
@@ -657,8 +657,9 @@ body.dark {
 }
 
 .dropdown-menu {
-  background-color: var(--background-color);
-
+  background-color: var(--editor-background-color);
+  border-color: var(--editor-background-color);
+  
   .dropdown-item {
     color: var(--text-color);
 
@@ -670,6 +671,10 @@ body.dark {
   }
 }
 
+.dropdown-menu.show {
+  top: 4px !important;
+}
+
 // main-content
 .main-column {
   background-color: var(--background-color);
@@ -816,7 +821,7 @@ h6:hover .feather-link {
   width: 25rem;
 
   .form-control:focus {
-    border: none;
+    border: 1px solid var(--background-color);
   }
 
   .rating-options-buttons {
diff --git a/wiki/wiki/doctype/wiki_page/templates/editor.html b/wiki/wiki/doctype/wiki_page/templates/editor.html
index b1348a32..822414ba 100644
--- a/wiki/wiki/doctype/wiki_page/templates/editor.html
+++ b/wiki/wiki/doctype/wiki_page/templates/editor.html
@@ -7,29 +7,15 @@
       Discard
     </div>
     <div class="btn-group">
-      <div
-        type="button"
-        class="btn btn-group btn-primary save-wiki-page-btn btn-sm"
-        data-wiki-button="saveWikiPage"
-      >
+      <div type="button" class="btn btn-group btn-primary save-wiki-page-btn btn-sm" data-wiki-button="saveWikiPage">
         Save
       </div>
-      <div
-        type="button"
-        class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
+      <div type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+        aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
       </div>
       <div class="dropdown-menu" aria-labelledby="saveDropdownMenuButton">
-        <a
-          href="#"
-          class="dropdown-item text-sm"
-          data-wiki-button="draftWikiPage"
-          >Draft</a
-        >
+        <a href="#" class="dropdown-item text-sm" data-wiki-button="draftWikiPage">Draft</a>
       </div>
     </div>
   </div>
@@ -39,13 +25,8 @@
 <div class="wiki-editor-container">
   <div class="wiki-title-container">
     <label class="text-sm">Title</label>
-    <input
-      type="text"
-      class="form-control wiki-title-input"
-      value=""
-      placeholder="What's the Wiki Title?"
-    />
+    <input type="text" class="form-control wiki-title-input" value="" placeholder="What's the Wiki Title?" />
   </div>
   <label class="text-sm">Content</label>
   <div id="wiki-editor"></div>
-</div>
\ No newline at end of file
+</div>

From 113bb57f8d3f91913422358539e67622054a42fe Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Fri, 27 Dec 2024 13:36:21 +0530
Subject: [PATCH 2/2] fix css variables

---
 wiki/public/scss/edit_wiki.scss | 28 ++++++++++++++++++++++++++++
 wiki/public/scss/wiki.scss      | 25 ++++++++++++++++++-------
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss
index 436bcae6..37112f03 100644
--- a/wiki/public/scss/edit_wiki.scss
+++ b/wiki/public/scss/edit_wiki.scss
@@ -445,6 +445,34 @@ $font-sizes-mobile: (
     width: fit-content;
   }
 
+  .btn-primary {
+    color: var(--btn-primary-color) !important;
+    background-color: var(--btn-primary-bg-color) !important;
+  }
+  
+  .btn-primary:hover {
+    background-color: var(--btn-primary-hover-bg-color) !important;
+  }
+  
+  .btn-primary:active {
+    color: var(--btn-primary-color) !important;
+    background-color: var(--btn-primary-active-bg-color) !important;
+  }
+  
+  .btn-secondary {
+    color: var(--btn-secondary-color) !important;
+    background-color: var(--btn-secondary-bg-color) !important;
+  }
+  
+  .btn-secondary:hover {
+    background-color: var(--btn-secondary-hover-bg-color) !important;
+  }
+  
+  .btn-secondary:active {
+    background-color: var(--btn-secondary-active-bg-color) !important;
+  }
+
+
   a.btn-primary-light {
     background-color: var(--btn-secondary-color) !important;
   }
diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss
index 6c8ed905..8caf57ea 100644
--- a/wiki/public/scss/wiki.scss
+++ b/wiki/public/scss/wiki.scss
@@ -11,10 +11,16 @@ body {
   --sidebar-bg-color: #f8f8f8;
   --sidebar-hover-color: #ebebe9;
   --toc-hover-text-color: var(--gray-900);
+  
+  --btn-primary-color: #fff;
+  --btn-primary-bg-color: #171717;
+  --btn-primary-hover-bg-color: #383838;
+  --btn-primary-active-bg-color: #525252;
 
-  --btn-text-color: var(--gray-900);
-  --btn-secondary-color: #f4f5f6;
-  --btn-secondary-hover-color: var(--gray-300);
+  --btn-secondary-color: #383838;
+  --btn-secondary-bg-color: #f3f3f3;
+  --btn-secondary-hover-bg-color: #ededed;
+  --btn-secondary-active-bg-color: #e2e2e2;
 
   --active-item-color: #f1f1f0;
   --active-item-text-color: var(--primary);
@@ -61,10 +67,15 @@ body.dark {
   --sidebar-hover-color: #242a30;
   --toc-hover-text-color: var(--gray-500);
 
-  --btn-text-color: var(--blue-500);
-  --btn-color: #4c5a67;
-  --btn-secondary-color: var(--btn-color);
-  --btn-secondary-hover-color: var(--gray-500);
+  --btn-primary-color: #000;
+  --btn-primary-bg-color: #fff;
+  --btn-primary-hover-bg-color: #d4d4d4;
+  --btn-primary-active-bg-color: #afafaf;
+
+  --btn-secondary-color: #d4d4d4;
+  --btn-secondary-bg-color: #333c44;
+  --btn-secondary-hover-bg-color: #313a41;
+  --btn-secondary-active-bg-color: #2b3339;
 
   --active-item-color: var(--gray-700);
   --searchbar-color: #242a30;