Tooltips, modals, bfredux support additions

ChaseIngebritson · Jun 20, 2020 · dcb5ce3 · dcb5ce3
1 parent 7e17503
commit dcb5ce3
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,4 +20,14 @@
 ### Fixed
 - Missing guild BD pub style
 - Missing calendar picker selected accent
-- Resolved a few missing variable styles
+- Resolved a few missing variable styles
+
+## v0.4.0
+### Added
+- Support for the Better Formatting Redux plugin
+- Tooltip styles
+- Modal styles
+- Checkbox styles
+### Fixed
+- Incorrect user popout background selector
+- Incorrectly selected guild icon svg
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "noctis-viola-discord-theme",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Better Discord theme based on the Noctis Viola VSCode theme.",
   "main": "index.js",
   "scripts": {

diff --git a/src/styles/noctis-viola.theme.scss b/src/styles/noctis-viola.theme.scss
@@ -3,12 +3,17 @@
 @import 'modules/mixins';
 
 // Partials
+@import 'partials/better-formatting-popout';
 @import 'partials/chat';
+@import 'partials/checkbox';
 @import 'partials/guilds';
 @import 'partials/home';
+@import 'partials/modal';
 @import 'partials/search-popout';
 @import 'partials/scroller';
 @import 'partials/shaker';
 @import 'partials/theme';
+@import 'partials/tooltip';
+@import 'partials/upload-modal';
 @import 'partials/user-popout';
 @import 'partials/user-settings';
diff --git a/src/styles/partials/_better-formatting-popout.scss b/src/styles/partials/_better-formatting-popout.scss
@@ -0,0 +1,6 @@
+#bfredux {
+  &::before {
+    background-color: var(--background-tertiary);
+    border-radius: 4;
+  }
+}
diff --git a/src/styles/partials/_checkbox.scss b/src/styles/partials/_checkbox.scss
@@ -0,0 +1,14 @@
+.theme-dark {
+  .da-checkbox {
+    border-color: var(--interactive-normal);
+
+    &.da-checked {
+      border-color: var(--interactive-active) !important;
+      background-color: var(--interactive-active);
+
+      polyline {
+        stroke: var(--background-primary);
+      }
+    }
+  }
+}
diff --git a/src/styles/partials/_guilds.scss b/src/styles/partials/_guilds.scss
@@ -1,18 +1,39 @@
 .guilds-1SWlCJ {
-  .da-tutorialContainer {
+  .da-tutorialContainer:first-of-type {
     svg {
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: var(--elevation-stroke), var(--elevation-high);
+
       a.da-wrapper {
         &::before {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
-          width: 48px;
-          height: 48px;
+          width: 100%;
+          height: 100%;
           background-image: url("#{$header-image}");
           background-size: cover;
           background-color: #{$dark-purple-color};
-          transition: all 0.3s ease;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 125%;
+          width: 35%;
+          height: 100%;
+          z-index: 999;
+          background: rgba(255, 255, 255, 0.3);
+          transform: skew(30deg);
+          transition: all 0s ease;
+        }
+
+        &:hover::after {
+          left: -50%;
+          transition: all 0.5s ease;
         }
       }
     }

diff --git a/src/styles/partials/_modal.scss b/src/styles/partials/_modal.scss
@@ -0,0 +1,9 @@
+.theme-dark {
+  .root-1gCeng {
+    background-color: var(--background-tertiary);
+
+    .da-footer {
+      background-color: var(--background-primary);
+    }
+  }
+}
diff --git a/src/styles/partials/_scroller.scss b/src/styles/partials/_scroller.scss
@@ -1,7 +1,7 @@
 .da-scrollerWrap {
   .da-scroller {
     &::-webkit-scrollbar-thumb {
-      background-color: #{$darker-purple-color} !important;
+      background-color: var(--background-secondary) !important;
     }
 
     &::-webkit-scrollbar-track-piece {

diff --git a/src/styles/partials/_tooltip.scss b/src/styles/partials/_tooltip.scss
@@ -0,0 +1,10 @@
+.theme-dark {
+  .da-tooltip {
+    background-color: var(--background-secondary);
+    color: var(--interactive-normal);
+
+    .da-tooltipPointer {
+      border-top-color: var(--background-secondary);
+    }
+  }
+}
diff --git a/src/styles/partials/_upload-modal.scss b/src/styles/partials/_upload-modal.scss
@@ -0,0 +1,9 @@
+.theme-dark {
+  .da-uploadModal {
+    background-color: var(--background-primary);
+
+    .da-footer {
+      background-color: var(--background-tertiary);
+    }
+  }
+}
diff --git a/src/styles/partials/_user-popout.scss b/src/styles/partials/_user-popout.scss
@@ -5,7 +5,7 @@
     background-color: var(--background-tertiary);
   }
 
-  .da-bodyInner {
+  .da-body {
     background-color: var(--background-secondary);
 
     .da-bodyTitle,