threads, forums, events

ClearVision · Oct 29, 2023 · cae4135 · cae4135
1 parent 4069130
commit cae4135
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 123 deletions.
diff --git a/lib/selectors/selectorPlaceholders.scss b/lib/selectors/selectorPlaceholders.scss
@@ -3366,6 +3366,9 @@ pre {
 .upsellTooltipWrapper_df8272 {
   @extend %upsellTooltipText !optional;
 }
+.reactionTooltip__9384a {
+  @extend %reactionTooltip !optional;
+}
 .wrapper__93f27 {
   @extend %stickersUploadCard !optional;
 }
@@ -3510,21 +3513,12 @@ pre {
 .container__6604b {
   @extend %threadPreview !optional;
 }
-.modal-ZdazA8 {
+.modal__48b3d {
   @extend %threadModal !optional;
 }
-.list-1uSVgu {
+.list__19127 {
   @extend %threadModalList !optional;
 }
-.tabBar-3N44FC {
-  @extend %threadModalTabBar !optional;
-}
-.tab-1tp4jL {
-  @extend %threadModalTab !optional;
-}
-.active-3WMEyE {
-  @extend %threadModalTabActive !optional;
-}
 .hasThread__58ee2 {
   @extend %messageHasThread !optional;
 }
@@ -3621,13 +3615,13 @@ pre {
 .watchButton__0d283 {
   @extend %streamPopoutWatchButton !optional;
 }
-.header-1sd0RU {
+.header__7133e {
   @extend %eventHeader !optional;
 }
-.circle-2tR2Qh {
+.circle__2005c {
   @extend %eventIconCircle !optional;
 }
-.eventCard-2ZL9GD {
+.card__7865b {
   @extend %eventCard !optional;
 }
 .eventStatusBrand__948ce {
@@ -3636,57 +3630,36 @@ pre {
 .eventStatusLabel__4d7cc {
   @extend %eventStatusLabel !optional;
 }
-.eventStatusGreen_ca17ec {
-  @extend %eventStatusLabel !optional;
-}
-.previewCard-E137i2 {
-  @extend %eventStatusGreen !optional;
-}
 .rsvpCount__4657d {
   @extend %eventRSVPCount !optional;
 }
 .rsvpIcon_a79c28 {
   @extend %eventRSVPIcon !optional;
 }
-.container-3EBHNg {
+.container_f3270f {
   @extend %eventInfoHeader !optional;
 }
-.container-3eB5yh {
-  @extend %eventInfoContent !optional;
-}
-.contentContainer-BWAau5 {
+.contentContainer__3b585 {
   @extend %eventInfoContentContainer !optional;
 }
-.circle-1g-jMn {
+.circle_d71ba0 {
   @extend %eventInfoIconCircle !optional;
 }
-.iconBackground-3gHYPJ {
-  @extend %eventIconBackground !optional;
-}
-.progressBar-18rmp1 {
+.progressBar__0a392 {
   @extend %createEventProgressBar !optional;
 }
-.selectedProgressBar-11z5d9 {
+.selectedProgressBar__10383 {
   @extend %createEventProgressBarSelected !optional;
 }
-.container-1hz3gm {
-  @extend %createEventLocationContainer !optional;
-}
-.form-1ejeax {
-  @extend %createEventInfoForm !optional;
-}
-.container-3zZkKh {
+.container__52a36 {
   @extend %createEventCreateStageContainer !optional;
 }
-.textInput-3g8y92 {
+.textInput__210e5 {
   @extend %createEventTextInput !optional;
 }
-.previewCard-E137i2 {
+.previewCard_aef1ab {
   @extend %createEventPreviewCard !optional;
 }
-.iconContainer-36kI2p {
-  @extend %createEventIconContainer !optional;
-}
 .container_e4c233 {
   @extend %stickerSearchContainer !optional;
 }
@@ -3717,12 +3690,6 @@ pre {
 .unreadMentionsIndicatorTop_ada847 {
   @extend %guildUnreadMentionsTop !optional;
 }
-.css-3vaxre-menu {
-  @extend %pruneMemberMenu !optional;
-}
-.css-rzbxvl-option {
-  @extend %pruneMemberMenuDropdown !optional;
-}
 .authBox__7196a {
   @extend %loginAuthBox !optional;
 }
@@ -3841,14 +3808,47 @@ pre {
 .tagsDivider-3LhkLA {
   @extend %forumHeaderBorder !optional;
 }
-.container-2nXUah {
-  @extend %forumNoConversations !optional;
+.container__4abd7 {
+  @extend %forumEmpty !optional;
+}
+.cta__3ca11 {
+  @extend %forumEmptyCTA !optional;
+}
+.container_b634d9 {
+  @extend %forumExample !optional;
+}
+.tag__5bfc0 {
+  @extend %forumExampleTag !optional;
+}
+.post__13d06 {
+  @extend %forumExamplePost !optional;
+}
+.previewContainer__0f3c5 {
+  @extend %forumExamplePreviewContainer !optional;
+}
+.preview_c16c3b {
+  @extend %forumExamplePreview !optional;
+}
+.forumPostIcon__3d972 {
+  @extend %forumExamplePreviewPostIcon !optional;
+}
+.bottomSeparator__3e1ef {
+  @extend %forumExamplePreviewBottomSeparator !optional;
+}
+.chatInput__06d78 {
+  @extend %forumExamplePreviewInput !optional;
 }
 .sortDropdown_ec3016 {
-  @extend %forumSortDropdown !optional;
+  @extend %forumSortDropdownButton !optional;
+}
+.sortDropdownInner__2456c {
+  @extend %forumSortDropdownButtonInner !optional;
 }
 .sortDropdownText_e8ca8d {
-  @extend %forumSortDropdownText !optional;
+  @extend %forumSortDropdownButtonText !optional;
+}
+.container_dbdb0b {
+  @extend %forumSortDropdownContainer !optional;
 }
 .textContentFooter__5a630 {
   @extend %forumContentFooter !optional;
@@ -3874,12 +3874,6 @@ pre {
 .searchIcon-2Nw0OL {
   @extend %forumSearchIcon !optional;
 }
-.closeIcon-3xe5xL {
-  @extend %forumCloseIcon !optional;
-}
-.searchInput-3NGPfp {
-  @extend %forumSearchInput !optional;
-}
 .title__38892 {
   @extend %forumSearch !optional;
 }

diff --git a/src/general/tooltip.scss b/src/general/tooltip.scss
@@ -75,7 +75,7 @@
 }
 
 // REACTION
-.reactionTooltip-3IOBwg {
+%reactionTooltip {
   background: rgba(0, 0, 0, 0.9);
   padding: 5px 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

diff --git a/src/members/members.scss b/src/members/members.scss
@@ -10,9 +10,6 @@
 %members {
   width: cv('members-width');
   background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
-  > div {
-    background-color: transparent;
-  }
 }
 %membersNotices {
   width: var(--members-width);
@@ -210,7 +207,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $main-color;
+  color: $main-color !important;
   font-size: 11px;
   font-weight: 700;
   text-align: center;

diff --git a/src/modals/eventModal.scss b/src/modals/eventModal.scss
@@ -23,9 +23,6 @@
     color: #fff;
   }
 }
-.card-8UsK4b:hover {
-  background-color: $hover-color;
-}
 
 // EVENT INFO
 %eventInfoHeader {
@@ -52,19 +49,13 @@
   &%createEventProgressBarSelected {
     background-color: $main-color;
   }
-  + .colorMuted-20987_ {
+  + .colorMuted_ae2200 {
     color: hsla(0, 0%, 100%, 0.3);
   }
-  + .colorBrand-21Le_q {
+  + .colorBrand_be5f58 {
     color: $main-color;
   }
 }
-%createEventLocationContainer,
-%createEventInfoForm {
-  margin-left: 2px;
-  margin-right: 2px;
-  margin-bottom: 2px;
-}
 %createEventCreateStageContainer {
   background-color: transparent;
 }

diff --git a/src/modals/threadModal.scss b/src/modals/threadModal.scss
@@ -1,6 +1,6 @@
 /* THREAD MODAL */
 %threadModal {
-  background-color: hsla(0, 0%, 0%, 0.6) !important;
+  background-color: hsla(0, 0%, 0%, 0.5) !important;
   &%threadsPopoutContainer {
     background-color: transparent;
   }
@@ -12,7 +12,7 @@
     background-color: $main-color;
   }
   &:hover:not(%threadModalTabActive) {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.07);
     color: #fff;
   }
 }

diff --git a/src/pages/forums.scss b/src/pages/forums.scss
@@ -62,7 +62,8 @@
 %forumCardName {
   color: #fff !important;
 }
-// tag
+
+// TAGS
 %themeDark %forumTag,
 %themeDark %forumIncreasedTag {
   background: rgba(0, 0, 0, .6);
@@ -82,19 +83,7 @@
   text-align: center;
   padding: 0 10px;
 }
-// icons
-%forumPencilIcon,
-%forumSearchIcon,
-%forumCloseIcon {
-  color: rgba(255, 255, 255, 0.9);
-  width: 20px;
-  height: 20px;
-  left: 10px;
-  top: 10px;
-  &:hover {
-    color: #fff;
-  }
-}
+
 %forumSearch {
   font-family: var(--main-font);
   font-weight: 300;
@@ -121,13 +110,16 @@
 %forumTagCount {
   background-color: $main-color;
 }
-%forumSortDropdown {
+%forumSortDropdownButton {
   background-color: $main-color;
-  > *,
-  %forumSortDropdownText {
+  %forumSortDropdownButtonInner,
+  %forumSortDropdownButtonText {
     color: #fff !important;
   }
 }
+%forumSortDropdownContainer {
+  background-color: transparent;
+}
 %forumTagButton {
   background-color: rgba(0, 0, 0, 0.3);
   %forumTagButtonInner {
@@ -217,10 +209,32 @@
   }
 }
 
-// event no messages in forum yet
-%forumNoConversations {
-  background: hsla(0, 0%, 0%, 0.3);
+// EMPTY FORUM
+%forumEmpty {
+  background-color: transparent;
 }
+%forumEmptyCTA {
+  color: $main-color;
+}
+
+// EXAMPLE
+%forumExample,
+%forumExamplePreviewContainer {
+  background-color: transparent;
+}
+%forumExampleTag,
+%forumExamplePost,
+%forumExamplePreview {
+  background-color: hsla(0, 0%, 100%, 0.09);
+}
+%forumExamplePreviewPostIcon,
+%forumExamplePreviewBottomSeparator {
+  background-color: transparent;
+}
+%forumExamplePreviewInput {
+ background-color: hsla(0, 0%, 0%, 0.4);
+}
+
 // new posts button
 %forumNewPosts {
   background: rgba(0,0,0,.2);

diff --git a/src/popouts/threadPopout.scss b/src/popouts/threadPopout.scss
@@ -1,28 +1,15 @@
 /* THREADS POPOUT */
-%threadsPopoutContainer,
-%threadsPopoutHeader {
-  background-color: hsla(0, 0%, 0%, 0.8);
-}
 %popoutLayer %threadsPopoutContainer {
   background-color: hsla(0, 0%, 0%, 0.8);
   animation: cv-menu-fold-y 0.2s cubic-bezier(0.2, 0.6, 0.5, 1.1);
   transform-origin: 50% 0;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
-
+%threadsPopoutHeader {
+  background-color: transparent;
+}
 %threadsPopoutIcon {
   background-color: $main-color;
   color: #fff;
 }
-
-%themeDark %threadsPopoutHeader %threadsPopoutTabBar %threadsPopoutTab {
-  color: #fff;
-  &%threadsPopoutTabActive {
-    background-color: $main-color;
-  }
-  &:hover:not(%threadsPopoutTabActive) {
-    background-color: hsla(0, 0%, 100%, 0.06);
-    color: #fff;
-  }
-}