Merge pull request #308 from pratikb64/fix-css-styling

fix: css styling

Author: pratikb64

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
@@ -440,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;
   }
@@ -577,7 +610,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;
 }
 

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;
@@ -657,8 +668,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 +682,10 @@ body.dark {
   }
 }
 
+.dropdown-menu.show {
+  top: 4px !important;
+}
+
 // main-content
 .main-column {
   background-color: var(--background-color);
@@ -816,7 +832,7 @@ h6:hover .feather-link {
   width: 25rem;
 
   .form-control:focus {
-    border: none;
+    border: 1px solid var(--background-color);
   }
 
   .rating-options-buttons {

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>
+</div>