lots of css fixes around the app and updating webpack class names

renderer/src/builtins/addon-manager/styles/addon/_context-menu.scss

@@ -2,7 +2,7 @@
 
 .vz-addon-context-menu {
   &-header {
-    .groupLabel-2t5iuZ {
+    .groupLabel-16o1xl {
       margin-bottom: 10px;
       justify-content: flex-start;
     }

renderer/src/builtins/addon-manager/styles/commands/_manage.scss

@@ -47,7 +47,7 @@
     .vz-addons-list-empty {
       padding: 20px;
     }
-    .topPill-30KHOu {
+    .topPill-3DJJNV {
       display: none;
     }
   }

renderer/src/builtins/dashboard/styles/pages/docs/components/_icons.scss

@@ -4,7 +4,7 @@
    $base: &;
   &-icon-wrapper {
     display: flex;
-    margin: 2px;
+    margin: 4px;
     &:hover {
       #{$base}-icon:not([vz-active]) {
         background-color: var(--background-modifier-selected);
@@ -15,7 +15,7 @@
   &-icon {
     cursor: pointer;
     border-radius: 8px;
-    padding: 10px;
+    padding: 18px;
     overflow: visible;
     &[vz-active] {
       background: vz.color('blurple');
@@ -29,6 +29,10 @@
       max-width: 200px;
       padding: 0 40px;
       backface-visibility: hidden;
+      svg {
+        max-width: 200px;
+        max-height: 200px;
+      }
     }
     &-icon {
       overflow: visible;
@@ -37,6 +41,10 @@
     }
     &-icon-name {
       padding: 0 20px;
+      margin-bottom: 40px;
+      max-width: 280px;
+      text-align: center;
+      line-height: 1.5;
     }
   }
 }

renderer/src/builtins/dashboard/styles/parts/_content-sidebar.scss

@@ -78,7 +78,7 @@
       transform: rotate(-90deg);
     }
   }
-  .textBadge-1iylP6 {
+  .textBadge-1fdDPJ {
     display: inline;
     margin-left: 7px;
     font-size: 10px;

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

@@ -19,7 +19,7 @@
     &-icon-wrapper {
       &.vz-icon-wrapper {
         @include vz.size(24px);
-        margin-right: 10px;
+        margin-right: 12px;
         z-index: 1;
         color: var(--header-secondary);
       }

renderer/src/builtins/dashboard/styles/parts/_sidebar.scss

@@ -15,6 +15,9 @@
     }
   }
   &-item {
+    &[vz-selected]:hover {
+      color: #fff;
+    }
     &-icon-wrapper {
       @include vz.size(32px);
     }
@@ -81,7 +84,7 @@
       visibility: hidden;
       margin-left: 0;
     }
-    .content-66wMin {
+    .content-1U25dZ {
       display: none;
     }
     /**
@@ -99,7 +102,7 @@
      */
      .actionButtons-2vEOUh,
      .inner-llGtyq,
-     .button-1EGGcP:first-of-type {
+     .button-12Fmur:first-of-type {
        display: none;
      }
      .inner-llGtyq {
@@ -107,7 +110,7 @@
          margin: 0;
        }
       }
-     .connection-3KRENF {
+     .connection-3k9QeF {
        justify-content: center;
      }
     /**
@@ -129,9 +132,11 @@
   .panels-3wFtMD {
     width: var(--vz-dashboard-sidebar-width);
   }
-  // MacOs drag zone 
+  /**
+   * MacOs titlebar drag zone fix.
+   */
   .platform-osx &::before {
-    content: "";
+    content: '';
     position: fixed;
     top: 0;
     left: 0;

renderer/src/builtins/enhancements/styles/main.scss

@@ -7,41 +7,17 @@
 
 // Give label items with descriptions some breathing room
 // so they don't crowd directly under switches
-.note-1V3kyJ {
+.note-2C4pGr {
   padding-right: 60px;
 }
 
 // You can still click group labels in context menus, but you shouldn't be.
 // able to
-.groupLabel-2t5iuZ {
+.groupLabel-16o1xl {
   pointer-events: none;
 }
 
-/**
- * Image carousel model tempfix since Discord broke them
- */
-[vz-modal='image-carousel'] {
-  .inner-1ilYF7 {
-    pointer-events: none;
-  }
-  /**
-   * Image carousel modal inner wrapper
-   */
-  .wrapper-Dh-cqn {
-    /**
-     * -100px to account for the next/previous arrows
-     */
-    @include vz.size(calc(80vw - 100px), 80vh);
-    margin: auto;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: relative;
-  }
-}
-
-[vz-guild-icon] .label-22pbtT {
+[vz-guild-icon] .label-2gNW3x {
   display: flex;
   align-items: center;
   &::before {
@@ -57,7 +33,7 @@
 
 // Better spacing for SearchBar component
 // inside a context menu
-.item-1tOPte > .container-cMG81i {
+.item-1OdjEX > .container-2oNtJn {
   padding: 2px 6px;
 }
 

renderer/src/builtins/notifications/styles/_toasts.scss

@@ -153,7 +153,8 @@
     color: var(--header-primary);
     font-weight: 600;
     padding-right: 20px;
-    margin-top: -2px;
+    margin-bottom: 16px;
+    margin-top: 5px;
   }
   &-content {
     font-size: 14px;

renderer/src/builtins/settings/styles/main.scss

@@ -3,36 +3,46 @@
 /**
  * Vizality (Dashboard) Settings Context Menu
  */
-.vz-settings-context-menu-search {
-  [vz-addon-icon] .label-22pbtT {
-    display: flex;
-    align-items: center;
-    &::before {
-      @include vz.size(20px);
-      content: '';
-      background: var(--vz-addon-icon) no-repeat center / contain;
+.vz-settings-context-menu {
+  &-search {
+    [vz-addon-icon] .label-2gNW3x {
       display: flex;
-      border-radius: 4px;
-      margin-right: 12px;
+      align-items: center;
+      &::before {
+        @include vz.size(20px);
+        content: '';
+        background: var(--vz-addon-icon) no-repeat center / contain;
+        display: flex;
+        border-radius: 4px;
+        margin-right: 12px;
+      }
+    }
+    .groupLabel-16o1xl {
+      justify-content: flex-start;
+      background: none !important;
+      padding: 0;
+      > div {
+        pointer-events: all;
+        width: 100%;
+        padding: 3px 6px;
+      }
+      + .separator-1So4YB {
+        margin: 5px 0 10px;
+      }
     }
   }
-  .groupLabel-2t5iuZ {
-    justify-content: flex-start;
-    background: none !important;
-    padding: 0;
-    > div {
-      pointer-events: all;
-      width: 100%;
-      padding: 3px 6px;
+  &-no-results {
+    &-text {
+
     }
-    + .separator-2I32lJ {
-      margin: 5px 0 10px;
+    &-image {
+      
     }
   }
 }
 
-.menu-3sdvDG {
-  .textBadge-1iylP6 {
+.menu-1QACrS {
+  .textBadge-1fdDPJ {
     display: inline;
     margin-left: 6px;
     font-size: 10px;
@@ -92,7 +102,7 @@
       .vz-dashboard-sidebar-item-icon-wrapper {
         margin: 0;
       }
-      .content-3QAtGj {
+      .content-1U25dZ {
         display: none;
       }
     }
@@ -112,15 +122,32 @@
     z-index: 1;
     margin-top: -20px;
     padding-bottom: 20px;
-    + .dividerDefault-3rvLe- {
-      margin-top: 0;
-    }
   }
   &-search-wrapper {
     flex: 0 auto;
     background: var(--background-secondary-alt);
     border-radius: 8px;
     border: 1px solid transparent;
+    > div {
+      align-items: center;
+    }
+    input {
+      padding: 10px;
+      font-size: 16px;
+      + div {
+        margin: 0 10px;
+        width: 30px;
+        height: 30px;
+        > div {
+          width: 24px;
+          height: 24px;
+        }
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
     &:focus-within {
       border-color: var(--brand-experiment);
     }

renderer/src/styles/components/_component-preview.scss

@@ -118,7 +118,6 @@
   }
   &[vz-tab='code'] {
     #{$base}-content {
-      align-self: center;
       display: block;
     }
   }

renderer/src/styles/components/_icon.scss

@@ -1,5 +1,6 @@
 .vz-icon {
   display: flex;
+  height: auto;
   &-wrapper {
     display: inline-flex;
     width: fit-content;

renderer/src/styles/components/_sticky-element.scss

@@ -19,7 +19,7 @@
       border-radius: 0;
     }
   }
-  .topPill-30KHOu .selected-3s45Ha.item-PXvHYJ {
+  .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {
     background: var(--brand-experiment);
     &:hover {
       background: var(--brand-experiment);

renderer/src/styles/main.css

@@ -1070,7 +1070,6 @@
   opacity: 0.5;
 }
 .vz-component-preview[vz-tab=code] .vz-component-preview-content {
-  align-self: center;
   display: block;
 }
 .vz-component-preview .vz-code-block-code {
@@ -1117,7 +1116,7 @@
   left: 0;
   width: 100%;
 }
-.vz-error-boundary-scene .panningAnimation-38NjY9 {
+.vz-error-boundary-scene > div {
   bottom: 0;
 }
 
@@ -1128,6 +1127,7 @@
 }
 .vz-icon {
   display: flex;
+  height: auto;
 }
 .vz-icon-wrapper {
   display: inline-flex;
@@ -1263,7 +1263,7 @@
   height: auto !important;
   max-width: 100%;
   width: fit-content !important;
-  display: inline;
+  display: inline-block;
 }
 .vz-markdown-image img {
   height: auto !important;
@@ -1653,10 +1653,10 @@
   background: var(--background-primary);
   border-radius: 0;
 }
-.vz-sticky-element .topPill-30KHOu .selected-3s45Ha.item-PXvHYJ {
+.vz-sticky-element .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {
   background: var(--brand-experiment);
 }
-.vz-sticky-element .topPill-30KHOu .selected-3s45Ha.item-PXvHYJ:hover {
+.vz-sticky-element .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG:hover {
   background: var(--brand-experiment);
 }