fix: replace some old classes with newer on discord

datsfilipe · Mar 3, 2024 · 10773e9 · 10773e9
1 parent e5d0f72
commit 10773e9
Show file tree

Hide file tree

Showing 12 changed files with 270 additions and 203 deletions.
diff --git a/src/scss/components/_buttons-and-items.scss b/src/scss/components/_buttons-and-items.scss
@@ -15,118 +15,109 @@ button {
 }
 
 .theme-dark, .theme-light {
-  /**----------------
-   * lookFilled ones
-  -----------------*/
-  // colorBrand
-  .lookFilled-yCfaCM.colorBrand-I6CyqQ {
+  /* colorBrand */
+  [class*="lookFilled"][class*="colorBrand"]:not([class*="colorWhite"]) {
     color: tc.$text-alt;
     background-color: gc.$color11;
     transition: filter 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorBrand-I6CyqQ:hover {
+  [class*="lookFilled"][class*="colorBrand"]:not([class*="colorWhite"]):hover {
     color: tc.$text-alt;
     background-color: gc.$color11;
     filter: brightness(0.8);
   }
 
-  // colorGrey
-  .lookFilled-yCfaCM.colorGrey-2iAG-B {
+  /* colorGrey */
+  [class*="lookFilled"][class*="colorGrey"] {
     color: tc.$text-alt;
     background-color: gc.$color7;
     transition: filter 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorGrey-2iAG-B:hover {
+  [class*="lookFilled"][class*="colorGrey"]:hover {
     color: tc.$text-alt;
     background-color: gc.$color7;
     filter: brightness(0.8);
   }
 
-  // colorRed
-  .lookFilled-yCfaCM.colorRed-rQXKgM {
+  /* colorRed */
+  [class*="lookFilled"][class*="colorRed"] {
     color: tc.$text-alt;
     background-color: gc.$color3;
     transition: background-color 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorRed-rQXKgM:hover {
+  [class*="lookFilled"][class*="colorRed"]:hover {
     color: tc.$text-alt;
     background-color: gc.$color4;
   }
 
-  // colorPrimary
-  .lookFilled-yCfaCM.colorPrimary-2AuQVo {
+  /* colorPrimary */
+  [class*="lookFilled"][class*="colorPrimary"] {
     color: tc.$text-alt;
     background-color: gc.$color7;
     transition: filter 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorPrimary-2AuQVo:hover {
+  [class*="lookFilled"][class*="colorPrimary"]:hover {
     color: tc.$text-alt;
     background-color: gc.$color7;
     filter: brightness(0.8);
   }
 
-  // colorWhite
-  .lookFilled-yCfaCM.colorWhite-1H92hK, .lookFilled-yCfaCM.colorWhite-1H92hK * {
+  /* colorWhite */
+  [class*="lookFilled"][class*="colorWhite"]:not(.colorWhite-1H92hK), [class*="lookFilled"][class*="colorWhite"]:not(.colorWhite-1H92hK) * {
     color: tc.$text-alt;
     background-color: gc.$color7;
     transition: filter 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorWhite-1H92hK:active {
+  [class*="lookFilled"][class*="colorWhite"]:not(.colorWhite-1H92hK):active {
     filter: brightness(0.8);
   }
 
-  /**----------------
-   * lookInverted ones
-  -----------------*/
-  // colorBrand
-  .lookInverted-2mDUMi.colorBrand-I6CyqQ {
+  /* lookInverted */
+  [class*="lookInverted"][class*="colorBrand"] {
     color: tc.$text-alt;
     background-color: gc.$color7;
     transition: filter 0.3s;
   }
-  
-  .lookInverted-2mDUMi.colorBrand-I6CyqQ:hover  {
+
+  [class*="lookInverted"][class*="colorBrand"]:hover  {
     filter: brightness(0.9);
   }
 
-  // colorGreen
-  .lookFilled-yCfaCM.colorGreen-3y-Z79 {
+  /* colorGreen */
+  [class*="lookFilled"][class*="colorGreen"] {
     color: tc.$text-alt;
     background-color: gc.$color11;
     transition: filter 0.3s;
   }
 
-  .lookFilled-yCfaCM.colorGreen-3y-Z79:hover  {
+  [class*="lookFilled"][class*="colorGreen"]:hover  {
     filter: brightness(0.8);
   }
 
-  /**----------------
-   * lookOutlined ones
-  -----------------*/
-  // colorBrand
-  .lookOutlined-3yKVGo.colorRed-rQXKgM {
+  /* lookOutlined */
+  [class*="lookOutlined"][class*="colorRed"] {
     color: gc.$color3;
     border-color: gc.$color3;
     transition: all 0.3s;
   }
 
-  .lookOutlined-3yKVGo.colorRed-rQXKgM:hover {
+  [class*="lookOutlined"][class*="colorRed"]:hover {
     color: gc.$color4;
     background-color: transparent;
     border-color: gc.$color4;
   }
 
-  // colorPrimary
-  .lookOutlined-3yKVGo.colorPrimary-2AuQVo {
+  /* colorPrimary */
+  [class*="lookOutlined"][class*="colorPrimary"] {
     transition: border-color 0.3s;
   }
 
-  .lookOutlined-3yKVGo.colorPrimary-2AuQVo:hover {
+  [class*="lookOutlined"][class*="colorPrimary"]:hover {
     border-color: tc.$background-secondary-alt;
   }
 }

diff --git a/src/scss/components/_channel-message-input.scss b/src/scss/components/_channel-message-input.scss
@@ -1,7 +1,7 @@
 @use '../abstracts/theme-colors' as tc;
 @use '../abstracts/measurements' as ms;
 
-.form-3gdLxP {
+.form-3gdLxP, .form__13a2c {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr minmax(min-content, max-content);
@@ -12,55 +12,55 @@
   margin-left: 10px;
 
   // some other container types like "follow the channel"
-  .wrapper-2SplAX {
+  .wrapper_fbbb73 {
     border-radius: ms.$big-radius;
-    max-width: 100%;
+    max-width: calc(100% - 10px);
     margin-right: 0;
     margin-top: 10px;
     margin-bottom: auto;
   }
 
+  .applicationCommandEducation-1stoia {
+    display: none;
+  }
+}
 
-  // spacing channel input
-  .channelTextArea-1FufC0.channelTextArea-1VQBuV {
-    background-color: transparent;
+// spacing channel input
+.channelTextArea__2e60f, .channelTextArea__56a36 {
+  background-color: transparent;
+  border-radius: ms.$big-radius;
+  max-width: calc(100% - 10px);
+  margin-top: 10px;
+  margin-bottom: auto;
+  .attachedBars-2BCP3l {
+    background-color: tc.$background-secondary-alt;
+    border-bottom: tc.$dark-border;
+  }
+  .scrollableContainer__33e06 {
+    padding: 4px 0 4px 0;
     border-radius: ms.$big-radius;
-    max-width: calc(100% - 10px);
-    margin-top: 10px;
-    margin-bottom: auto;
-    .attachedBars-2BCP3l {
-      background-color: tc.$background-secondary-alt;
-      border-bottom: tc.$dark-border;
-    }
-    .scrollableContainer-15eg7h {
-      padding: 4px 0 4px 0;
-      border-radius: ms.$big-radius;
-      &.hasConnectedBar-1vN2JH {
-        border-radius: 0px 0px ms.$big-radius ms.$big-radius;
-      }
+    &.hasConnectedBar-1vN2JH {
+      border-radius: 0px 0px ms.$big-radius ms.$big-radius;
     }
   }
-
-  .applicationCommandEducation-1stoia {
-    display: none;
-  }
 }
 
 // remove tips below channel input message
-.form-3gdLxP::before { 
+.form__13a2c::before { 
   display: none;
 }
 
 // typing section
-.typing-2J1mQU {
+.typing__6fd1d {
+  max-width: calc(100% - 25px);
   position: relative;
   margin: 6px 0 -4px 4px;
   height: 1rem;
   left: 0;
 
   color: tc.$text-muted;
 
-  .dots-1BwzZQ.themed-3T-OPr {
+  .typingDots_d92d42 {
     color: tc.$text-muted;
   }
 }
diff --git a/src/scss/components/_home-section.scss b/src/scss/components/_home-section.scss
@@ -2,21 +2,51 @@
 @use '../abstracts/measurements' as ms;
 
 // discover servers
-.pageWrapper-2PwDoS {
-  background-color: tc.$background-primary!important;
+.pageWrapper_fef757 {
+  background-color: tc.$background-spacing!important;
+}
+
+.sidebar_ded4b5 {
+  .categoryItem_b1be5c {
+    position: relative;
+    overflow: hidden;
+    border-radius: ms.$big-radius;
+  }
+
+  .categoryItem_b1be5c.selected__9800b {
+    color: tc.$text-alt;
+  }
+
+  .categoryItem_b1be5c::before {
+    border-radius: 50%;
+    background-color: rgba(55,55,55, 0.6);
+    content:'';
+    position: absolute;
+    top: 50%; left: 50%;
+    width:0; height:0;
+    transition: all 0.5s ease-out;
+    opacity:0;
+  }
+
+  .categoryItem_b1be5c.selected__9800b::before {
+    width:230px;
+    height:230px;
+    animation: ripple-effect-for-channels 0.350s;
+    animation-iteration-count: 1;
+  }
 }
 
 // server cards
-.card-2TuZPZ {
+.card__86773 {
   padding-top: 40px;
   justify-content: center;
   height: auto;
   min-height: 200px;
   border-radius: ms.$medium-radius;
-  .cardHeader-1kPMOm {
+  .cardHeader__889e1 {
     height: auto;
   }
-  .cardHeader-1kPMOm .splash-1VADA3 {
+  .cardHeader__889e1 .splash_c32fae {
     display: none;
   }
 }