Threads + Bug Fixes

lib/selectors/selectorPlaceholders.scss

@@ -4184,6 +4184,9 @@ pre {
 .replyBar-1YLQ2F {
 	@extend %replyBar !optional;
 }
+.threadSuggestionBar-2ufK2Z{
+	@extend %replySuggestion !optional;
+}
 .mentionButton-3710-W {
 	@extend %replyMentionButton !optional;
 }
@@ -4480,4 +4483,52 @@ pre {
 }
 .icon-3pEw1v {
 	@extend %treadsPopoutIcon !optional;
-}
+}
+.icon-1zIRB4 {
+	@extend %threadsChatIcon !optional;
+}
+.jump-2-Xh5Z {
+	@extend %threadsJumpButton !optional;
+}
+.container-3hZ-gs {
+	@extend %threadsEmbed !optional;
+}
+.spine--Wla_O {
+	@extend %threadChannelConnector !optional;
+}
+.chatHeaderBar-4vZS1x {
+	@extend %threadHeaderBar !optional;
+}
+.popout-APcvZm {
+	@extend %channelThreadPopout !optional;
+}
+.row-1ImlrZ {
+	@extend %channelThreadPopoutEntry !optional;
+}
+.container-2I9Hud {
+	@extend %threadPreview !optional;
+}
+.modal-2DCYwU {
+	@extend %threadModal !optional;
+}
+.list-wek7hJ {
+	@extend %threadModalList !optional;
+}
+.tabBar-wS4pjJ {
+	@extend %threadModalTabBar !optional;
+}
+.tab-17bjMB {
+	@extend %threadModalTab !optional;
+}
+.active-3JUHqX {
+	@extend %threadModalTabActive !optional;
+}
+.previewMessage-1ZN7YG {
+	@extend %accessibilityMessagePreview !optional;
+}
+.hasThread-2k82W0 {
+	@extend %messageThread !optional;
+}
+.cozy-3raOZG {
+	@extend %cozy !optional;
+}

main.scss

@@ -65,6 +65,7 @@ $version: "6.1.1";
 @import "src/messages/attachment";
 @import "src/messages/blocked";
 @import "src/messages/textContainer";
+@import "src/messages/threads";
 
 // MEMBERS
 @import "src/members/members";
@@ -119,6 +120,8 @@ $version: "6.1.1";
 @import "src/popouts/gifPicker";
 @import "src/popouts/stickers";
 @import "src/popouts/messagesPopout";
+@import "src/popouts/threadPopout";
+
 
 // MODALS
 @import "src/modals/modal";
@@ -150,6 +153,7 @@ $version: "6.1.1";
 // TREADS
 @import "src/treads/createTread";
 @import "src/treads/treadsPopout";
+@import "src/treads/threadModal";
 
 // BETTERDISCORD
 @import "src/bd/sidebar";

src/channels/channels.scss

@@ -28,4 +28,7 @@
 		-webkit-mask: linear-gradient(to bottom, #000, transparent);
 		mask: linear-gradient(to bottom, #000, transparent);
 	}
+	%threadChannelConnector {
+		color: $main-color;
+	}
 }

src/chat/textArea.scss

@@ -78,7 +78,8 @@
 }
 
 // REPLY
-%replyBar {
+%replyBar,
+%replySuggestion {
     background: transparent;
 	border: 2px solid transparent;
 }

src/headerBar/headerBar.scss

@@ -6,6 +6,11 @@
 		box-shadow: 0 0 10px rgba(0, 0, 0, calc(#{cv("bg.app.shading")} * .6));
 		color: hsla(0, 0%, 100%, .5);
 	}
+	%threadHeaderBar {
+		background: rgba(0, 0, 0, calc(#{cv("bg.app.shading")} * .6));
+		box-shadow: 0 0 10px rgba(0, 0, 0, calc(#{cv("bg.app.shading")} * .6));
+		color: hsla(0, 0%, 100%, .5);
+	}
 }
 %headerBar {
 	%headerBarChildren {

src/messages/message.scss

@@ -98,6 +98,15 @@
 	}
 }
 
+// THREADS
+%cozy{
+	&%messageThread {
+		&:after {
+			border-color: $main-color;
+		}
+	}
+}
+
 // BUTTONS
 %messageButtonWrapper {
 	background-color: transparent;
@@ -127,4 +136,4 @@
 	&:before {
 		background-color: var(--main-color);
 	}
-}
+}

src/messages/threads.scss

@@ -0,0 +1,17 @@
+/* Threads in Messages */
+%threadsChatIcon {
+	color: $main-color;
+	filter: drop-shadow(0 0 3px);
+	width: 22px;
+}
+%threadsJumpButton{
+	background-color: var(--main-color);
+	color: #fff;
+	&:hover {
+		background-color: var(--hover-color);
+		color: #fff;
+	}
+}
+%threadsEmbed {
+	background-color: hsla(0, 0%, 0%, 0.30);
+}

src/modals/newServerModal.scss

@@ -1,19 +1,24 @@
 .theme-dark{	
 	.footer-2gL1pp {
-        .footerTitle-2CYZch {
-            color: #fff;
-        }
-        .button-38aScr {
-            color: #fff;
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
+	    .footerTitle-2CYZch {
+		color: #fff;
+	    }
+	    .button-38aScr {
+		color: #fff;
+		&:hover {
+		    text-decoration: underline;
+		}
+	    }
+    	}
+	.base-1x0h_U {
+		color: #fff;
+	}
 }
 
 .root-1gCeng {
-	.colorHeaderPrimary-26Jzh-,.colorHeaderSecondary-3Sp3Ft {
+	.colorHeaderPrimary-26Jzh-,
+	.colorHeaderSecondary-3Sp3Ft,
+	.container-1CE3eW .input-cIJ7To {
 		color: #fff;
 	}
 	.iconContainer-2B0ixr>svg>circle {
@@ -29,9 +34,8 @@
 .container-UC8Ug1 {
     background-color: $main-color;
     &:hover {
-        background-color: $hover-color;
+	background-color: $hover-color;
     }
-    .base-1x0h_U,
     .text-1FOLJS {
         color: #fff;
     }

src/popouts/threadPopout.scss

@@ -0,0 +1,9 @@
+/* THREAD HEADER POPOUT */
+%channelThreadPopout {
+    background-color: hsla(0, 0%, 0%, .8);
+    border-radius: 5px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    %channelThreadPopoutEntry:hover {
+        background-color: $hover-color;
+    }
+}

src/popouts/userPopout.scss

@@ -83,9 +83,10 @@
 	// FOOTER
 	%userPopoutFooter {
 		background: cv("bg.popout.overlay");
+		margin-top: 0px;
 	}
 	%userPopoutTip {
 		color: hsla(0, 0%, 100%, .5);
 		opacity: 1;
 	}
-}
+}

src/settings/userSettings.scss

@@ -107,6 +107,11 @@
 
 // HypeSquad
 
+// Accessibility Tab
+%accessibilityMessagePreview {
+    background-color: hsla(0, 0%, 0%, 0.00);
+}
+
 // Voice
 %themeDark {
     %userSettingsVoice {
@@ -193,4 +198,4 @@
             border: hsla(0, 0%, 100%, .07);
         }
     }
-}
+}

src/treads/threadModal.scss

@@ -0,0 +1,30 @@
+/* THREAD MODAL */
+%threadModal {
+    background-color: hsla(0, 0%, 0%, .6) !important;
+    animation: cv-menu-fold-y .2s cubic-bezier(.2, .6, .5, 1.1);
+	transform-origin: 50% 0;
+    border-radius: 5px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    &%treadsPopoutContainer {
+        background-color: transparent;
+    }
+}
+
+%themeDark %threadModalList %threadModalTabBar %threadModalTab {
+    color: #fff;
+    &%threadModalTabActive {
+	background-color: var(--main-color);
+    }
+    &:hover:not(%threadModalTabActive) {
+        background-color: hsla(0, 0%, 100%, .06);
+        color: #fff;
+    }
+}
+
+%threadPreview {
+    background-color: hsla(0, 0%, 0%, .3);
+	border: 2px solid var(--main-color);
+    &:hover {
+        border: 2px solid var(--hover-color);
+    }
+}

src/treads/treadsPopout.scss

@@ -1,11 +1,15 @@
 /* TREADS POPOUT */
 %treadsPopoutContainer {
-	background-color: hsla(0, 0%, 0%, .8);
+    background-color: transparent;
+}
+%popoutLayer %treadsPopoutContainer {
+    background-color: hsla(0, 0%, 0%, .8);
     animation: cv-menu-fold-y .2s cubic-bezier(.2, .6, .5, 1.1);
 	transform-origin: 50% 0;
     border-radius: 5px;
 	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
 }
+
 %treadsPopoutHeader {
 	background-color: transparent;
 }
@@ -23,4 +27,4 @@
         background-color: hsla(0, 0%, 100%, .06);
         color: #fff;
     }
-}
+}