Added search styling, fixed home background

CHANGELOG.md

@@ -6,4 +6,10 @@
 
 ## v0.1.1
 ### Fixed
-- Pointed the CHANGELOG releases link to the correct page
+- Pointed the CHANGELOG releases link to the correct page
+
+## v0.2.0
+### Added
+- Search popout styling
+### Fixed
+- Resolved missing home background color

package.json

@@ -1,6 +1,6 @@
 {
   "name": "noctis-viola-discord-theme",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A Better Discord theme based on the Noctis Viola VSCode theme.",
   "main": "index.js",
   "scripts": {

src/styles/noctis-viola.theme.scss

@@ -5,6 +5,8 @@
 // Partials
 @import 'partials/chat';
 @import 'partials/guilds';
+@import 'partials/home';
+@import 'partials/search-popout';
 @import 'partials/scroller';
 @import 'partials/shaker';
 @import 'partials/theme';

src/styles/partials/_chat.scss

@@ -1,13 +1,8 @@
-// .da-chat {
-//   .da-chatContent {
-//     .da-scroller {
-//       background-color: transparent;
-//     }
-
-//     .da-form {
-//       &::before {
-//         display: none;
-//       }
-//     }
-//   }
-// }
+.da-chat {
+  .da-search {
+    .da-searchFilter,
+    .da-searchAnswer {
+      background-color: transparent !important;
+    }
+  }
+}

src/styles/partials/_home.scss

@@ -0,0 +1,5 @@
+.container-1D34oG {
+  .theme-dark & {
+    background: none;
+  }
+}

src/styles/partials/_search-popout.scss

@@ -0,0 +1,56 @@
+.theme-dark {
+  .container-3ayLPN {
+    background-color: var(--background-primary);
+  }
+
+  .da-queryContainer {
+    background-color: var(--background-secondary);
+  }
+
+  .da-option {
+    &::after {
+      background: none;
+    }
+
+    &.da-selected {
+      background-color: var(--background-tertiary);
+
+      &::after {
+        background: none;
+      }
+    }
+  }
+
+  .da-datePicker {
+    .da-calendarPicker {
+      .react-datepicker {
+        background-color: var(--background-primary);
+
+        &__header {
+          background-color: var(--background-primary);
+        }
+
+        &__day {
+          &:hover {
+            background-color: var(--interactive-hover);
+          }
+
+          &--outside-month,
+          &--disabled {
+            background-color: var(--background-tertiary) !important;
+          }
+        }
+      }
+    }
+
+    .da-datePickerHint {
+      .da-hintValue {
+        background-color: var(--interactive-normal);
+
+        &:hover {
+          background-color: var(--interactive-hover);
+        }
+      }
+    }
+  }
+}