make some style adjustments due to Discord changes

src/core/builtins/dashboard/styles/parts/_content.scss

@@ -31,5 +31,6 @@
     font-weight: 500;
     line-height: 1.4;
     font-size: 18px;
+    opacity: .8;
   }
 }

src/core/builtins/dashboard/styles/parts/_section.scss

@@ -22,6 +22,7 @@
       font-family: var(--font-primary);
       font-weight: 500;
       font-size: 18px;
+      opacity: .8;
     }
     &-icon-wrapper {
       @include vz.size(24px);

src/core/builtins/updater/styles/main.scss

@@ -233,6 +233,7 @@
       white-space: pre-wrap;
       font-family: inherit;
       font-size: 12px;
+      width: 100%;
     }
     b {
       align-items: center;

src/core/modules/components/addon/AddonsList/List.jsx

@@ -158,6 +158,7 @@ const StickyBar = memo(({ query, type, tab, resetSearchOptions, handleTabChange,
           {Messages.VIZALITY_INSTALLED}
         </__TabBar.NavItem>
         <__TabBar.NavItem
+          disabled
           route={`/vizality/${toPlural(type)}/discover`}
         >
           {Messages.DISCOVER}

src/core/modules/components/dashboard/Content.jsx

@@ -9,7 +9,6 @@ import React, { memo } from 'react';
  */
 export default memo(({ icon, header, description, separator = true, className, children, ...other }) => {
   const { marginBottom20 } = getModule('marginBottom20');
-  const { headerSubtext } = getModule('headerSubtext');
   const { content } = getModule('wrappedLayout');
   const { h1 } = getModule('h1', 'h2', 'h3');
   const { base } = getModule('base');
@@ -40,7 +39,7 @@ export default memo(({ icon, header, description, separator = true, className, c
           </div>
           {description && (
             <>
-              <h4 className={joinClassNames('vz-dashboard-content-description', h1, headerSubtext)}>
+              <h4 className={joinClassNames('vz-dashboard-content-description', h1)}>
                 {description}
               </h4>
               {separator && (

src/core/modules/components/dashboard/Section.jsx

@@ -11,7 +11,6 @@ import React, { memo } from 'react';
  * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
  */
 export const Header = memo(({ icon, header, description, separator, collapsible }) => {
-  const { headerSubtext } = getModule('headerSubtext');
   const { marginBottom40 } = getModule('marginBottom40');
   const { content } = getModule('wrappedLayout');
   const { h1 } = getModule('h1', 'h2', 'h3');
@@ -33,7 +32,7 @@ export const Header = memo(({ icon, header, description, separator, collapsible
         </h2>
       </div>
       {description && (
-        <h4 className={joinClassNames('vz-dashboard-section-header-description', h1, headerSubtext)}>
+        <h4 className={joinClassNames('vz-dashboard-section-header-description', h1)}>
           {description}
         </h4>
       )}

src/core/modules/components/settings/Category.jsx

@@ -13,7 +13,7 @@ import { Icon } from '..';
  */
 export default memo(({ title, description, icon, children, opened, className, ...other }) => {
   const [ collapsed, toggleCollapsed ] = useToggle(opened === undefined ? !opened : true);
-  const { container, icon: _icon, description: _description, label } = getModule('icon', 'container', 'description');
+  const { container, description: _description, label } = getModule('icon', 'container', 'description');
   const { size12, size16 } = getModule('size10', 'size12', 'size16');
   const ref = useRef(null);
   const bounds = useMeasure(ref);
@@ -46,7 +46,7 @@ export default memo(({ title, description, icon, children, opened, className, ..
         {icon && typeof icon === 'string' && (
           <Icon
             name={icon}
-            className={joinClassNames('vz-settings-category-icon-wrapper', _icon)}
+            className='vz-settings-category-icon-wrapper'
             iconClassName='vz-settings-category-icon'
           />
         )}

src/core/styles/components/settings/_category.scss

@@ -6,9 +6,6 @@
   padding: 0;
   border-radius: 8px;
   flex-direction: column;
-  &:hover {
-    background-color: var(--background-secondary);
-  }
   /**
    * Targetting any elements after a category that aren't another category.
    */
@@ -25,6 +22,9 @@
     flex: 0 auto;
     padding: 4px;
   }
+  &-icon {
+    @include vz.size(100%);
+  }
   &-title-wrapper {
     display: flex;
     flex: 1;
@@ -32,7 +32,13 @@
     width: 100%;
     padding: 16px 24px 16px 16px;
     box-sizing: border-box;
-    border-radius: 8px 8px 0 0;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: var(--background-secondary);
+    transition: background .2s;
+    &:hover {
+      background-color: var(--background-secondary-alt);
+    }
   }
   &-title-icon-wrapper {
     transition: transform 0.2s;
@@ -41,6 +47,7 @@
     #{$base}-title-wrapper {
       background: var(--background-secondary-alt);
       color: var(--interactive-hover);
+      border-radius: 8px 8px 0 0;
     }
     #{$base}-title-icon-wrapper {
       transform: rotate3d(0, 0, 1, 90deg);
@@ -53,6 +60,7 @@
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
+    background: var(--background-secondary);
     > div:last-of-type {
       margin-bottom: 0;
       .divider-3573oO {

src/core/styles/main.css

@@ -1545,13 +1545,13 @@
   position: relative;
 }
 .vz-code-block-code.vz-has-line-numbers {
-  padding-left: calc(35px + .5em);
+  padding-left: calc(35px + 0.5em);
 }
 .vz-code-block-code.vz-has-header {
-  padding-top: calc(20px + .5em);
+  padding-top: calc(20px + 0.5em);
 }
 .vz-code-block-code.vz-has-header .vz-code-block-line-numbers::after {
-  top: calc(20px + .5em);
+  top: calc(20px + 0.5em);
 }
 .vz-code-block-code:hover .vz-code-block-copy-button {
   opacity: 1;
@@ -1685,9 +1685,6 @@
    * Targetting any elements after a category that aren't another category.
    */
 }
-.vz-settings-category:hover {
-  background-color: var(--background-secondary);
-}
 .vz-settings-category + *:not(.vz-settings-category) {
   margin-top: 20px;
 }
@@ -1702,6 +1699,10 @@
   flex: 0 auto;
   padding: 4px;
 }
+.vz-settings-category-icon {
+  width: 100%;
+  height: 100%;
+}
 .vz-settings-category-title-wrapper {
   display: flex;
   flex: 1;
@@ -1709,7 +1710,13 @@
   width: 100%;
   padding: 16px 24px 16px 16px;
   box-sizing: border-box;
-  border-radius: 8px 8px 0 0;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: var(--background-secondary);
+  transition: background 0.2s;
+}
+.vz-settings-category-title-wrapper:hover {
+  background-color: var(--background-secondary-alt);
 }
 .vz-settings-category-title-icon-wrapper {
   transition: transform 0.2s;
@@ -1717,6 +1724,7 @@
 .vz-settings-category[vz-expanded] .vz-settings-category-title-wrapper {
   background: var(--background-secondary-alt);
   color: var(--interactive-hover);
+  border-radius: 8px 8px 0 0;
 }
 .vz-settings-category[vz-expanded] .vz-settings-category-title-icon-wrapper {
   transform: rotate3d(0, 0, 1, 90deg);
@@ -1728,6 +1736,7 @@
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
+  background: var(--background-secondary);
 }
 .vz-settings-category-inner > div:last-of-type {
   margin-bottom: 0;