Rewrites minimal mode, fixes various light mode issues, cleans up css, improves consistency in public servers and settings modals. (#490)

* hoping i didnt fuck things up

* more stuff

* fix social icon in light mode

src/styles/blankslates/emptyimage.css

@@ -16,6 +16,5 @@
 
 .bd-empty-image-container .bd-button {
     margin-top: 10px;
-    font-size: 16px;
     padding: 10px 16px;
 }

src/styles/builtins/minimalmode.css

@@ -1,233 +1,252 @@
-/* Messages */
+/* Sidebars */
-.bd-minimal .divider-32i8lo {
+
+.bd-minimal .sidebar-2K8pFh,
+.bd-minimal .members-1998pB,
+.bd-minimal .membersWrap-2h-GB4,
+.bd-minimal .nowPlayingColumn-2sl4cE,
+.bd-minimal .bannerImage-1jOskm {
+    width: 200px;
+    min-width: auto;
+}
+
+/* User Container */
+
+.bd-minimal .container-3baos1 .noWrap-3jynv6 {
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bd-minimal .container-3baos1:hover .noWrap-3jynv6 {
+    display: flex;
+    opacity: 1;
+    pointer-events: all;
+}
+
+.bd-minimal .container-3baos1 {
+    height: 45px;
+}
+
+/* Header container heights */
+
+.bd-minimal .container-1r6BKw,
+.bd-minimal .header-2o-2hj,
+.bd-minimal .searchBar-6Kv8R2 {
+    height: 40px;
+}
+
+.bd-minimal .libraryHeader-3g95kE::before {
+    top: 40px;
+}
+
+/* Settings */
+
+.bd-minimal .sidebarRegion-VFTUkN {
+    flex: 0;
+}
+
+.bd-minimal .contentColumn-2hrIYH,
+.bd-minimal .customColumn-Rb6toI {
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+.bd-minimal .customScroller-26gWhv > div,
+.bd-minimal .sidebarScrollable-1qPI87 + .content-1rPSz4 {
+    max-width: unset;
+}
+
+.bd-minimal .bd-addon-list .bd-addon-card {
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.bd-minimal .bd-addon-list.bd-grid-view {
+    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
+}
+
+/* Friends (https://tropix126.github.io/BetterDiscordStuff/midnight/css/base.css) */
+
+@keyframes slide-out-enable {
+    0% {
+        pointer-events: none;
+    }
+
+    100% {
+        pointer-events: all;
+    }
+}
+
+.bd-minimal .nowPlayingColumn-2sl4cE {
+    min-width: unset;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 300px;
+    transform: translateX(250px);
+    background: var(--background-secondary-alt);
+    transition: 250ms cubic-bezier(0.52, 0, 0.74, 0);
+    z-index: 1;
+}
+
+.bd-minimal .nowPlayingColumn-2sl4cE::after {
+    content: '|||';
+    color: var(--header-primary);
+    font-size: 12px;
+    position: absolute;
+    left: 25px;
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    transition: 250ms ease;
+}
+
+.bd-minimal .nowPlayingColumn-2sl4cE:hover::after {
     opacity: 0;
 }
 
-/* message avatars */
+.bd-minimal .nowPlayingColumn-2sl4cE:hover {
-.bd-minimal .large-3ChYtB {
+    transform: none;
-    max-width: 20px;
-    max-height: 20px;
-    background-size: 100%;
-    margin-right: 2px;
-    margin-top: 0;
-    border-radius: 0;
 }
 
-/* message content */
+.bd-minimal .peopleColumn-29fq28 {
-.bd-minimal .content-3dzVd8 {
+    margin-right: 50px;
-    border-left: 2px solid #ebebeb;
-    padding-left: 2px;
 }
 
-.bd-minimal .theme-dark .content-3dzVd8 {
+@media (max-width: 1200px) {
-    border-left: 2px solid #303030;
+    .bd-minimal .peopleColumn-29fq28 {
+        margin-right: 0;
+    }
 }
 
-/* message username */
+.bd-minimal .nowPlayingColumn-2sl4cE .nowPlayingScroller-2XrVUt {
-.bd-minimal .username-_4ZSMR {
+    pointer-events: none;
-    font-size: small;
+    opacity: 0;
+    transform: scale(0.95);
+    transition: 250ms cubic-bezier(0.52, 0, 0.74, 0);
 }
 
-/* message group */
+.bd-minimal .nowPlayingColumn-2sl4cE:hover .nowPlayingScroller-2XrVUt {
-.bd-minimal .container-1YxwTf {
+    opacity: 1;
-    padding: 5px;
+    transform: none;
 }
 
-/* message embed */
+.bd-minimal .nowPlayingColumn-2sl4cE:hover .itemCard-v9viV7 {
-.bd-minimal .embed-IeVjo6 {
+    animation: slide-out-enable 450ms linear forwards;
-    padding: 2px;
 }
 
-/* Member List */
+/* Context menus (status picker) */
-.bd-minimal .membersWrap-2h-GB4 {
+
-    min-width: 0;
+.bd-minimal .item-1tOPte {
+    min-height: 18px;
 }
 
-/* member list avatars */
+.bd-minimal .styleFixed-sX-yHV {
-.bd-minimal .members-1998pB .small-5Os1Bb {
+    width: 180px;
-    max-width: 15px;
-    max-height: 15px;
-    background-size: 15px 15px;
 }
 
-/* member list avatars */
+.bd-minimal .description-2L932D {
-.bd-minimal .members-1998pB .small-5Os1Bb .status-oxiHuE {
-    height: 5px;
-    width: 5px;
-}
-
-/* member list list item */
-.bd-minimal .members-1998pB .member-3W1lQa {
-    padding: 5px;
-}
-
-/* member list item inner */
-.bd-minimal .members-1998pB .memberInner-2CPc3V {
-    transform: scale(0.9);
-}
-
-/* member list role label */
-.bd-minimal .members-1998pB .membersGroup-v9BXpm {
-    margin-top: 3px;
-    transform: scale(0.9);
-}
-
-/* channel list */
-.bd-minimal .channels-Ie2l6A {
-    width: 160px;
-}
-
-/* Channel List */
-.bd-minimal.bd-minimal-chan .channels-Ie2l6A {
     display: none;
 }
 
-/* channel list guild name */
+/* Tooltips */
-.bd-minimal .channels-Ie2l6A header span {
+
-    font-size: 12px;
+.bd-minimal .tooltip-2QfLtc {
+    border-radius: 4px;
 }
 
-/* channel item */
+.bd-minimal .tooltipContent-bqVLWK {
-.bd-minimal .containerDefault-3GGEv_ {
+    padding: 4px 8px;
-    transform: scale(0.9);
+    font-size: 13px;
 }
 
-/* channel name */
+/* Chat input */
-.bd-minimal .content-3at_AU {
+
-    transform: scale(0.9);
+.bd-minimal .form-2fGMdU {
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
-/* channel icon */
+/* Guilds */
-.bd-minimal .icon-1_QxNX {
+
-    width: 14px;
+.bd-minimal .base-3dtUhz {
-    height: 14px;
+    left: 55px;
 }
 
-/* Guild List */
+.bd-minimal .wrapper-1Rf91z {
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh {
+    width: 55px;
-    width: 20px;
+}
+
+.bd-minimal .wrapper-1Rf91z .wrapper-sa6paO {
+    height: 35px;
+}
+
+.bd-minimal .wrapper-1Rf91z .item-2hkk8m {
+    max-height: 20px;
+}
+
+.bd-minimal .wrapper-1Rf91z div[style*="height: 56px"],
+.bd-minimal .wrapper-1Rf91z [role=group] {
+    height: auto !important;
+}
+
+.bd-minimal .wrapper-1Rf91z .listItem-2P_4kh,
+.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorBottom-BXS58x,
+.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorTop-gA6RCh,
+.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc {
+    width: 100%;
+}
+
+.bd-minimal .wrapper-1Rf91z .guildsError-b7zR5H,
+.bd-minimal .wrapper-1Rf91z .svg-1X37T1,
+.bd-minimal .wrapper-1Rf91z .wrapper-25eVIn,
+.bd-minimal .wrapper-1Rf91z .placeholderMask-3K9THS {
+    width: 35px;
+    height: 35px;
+}
+
+.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folder-21wGz3,
+.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folderIconWrapper-226oVY {
+    background: transparent;
+}
+
+.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .expandedFolderBackground-2sPsd- {
+    left: 10px;
+    width: 35px;
+}
+
+.bd-minimal .wrapper-1Rf91z #bd-pub-button {
     height: 20px;
-    background-size: 100%;
-    font-size: 15px;
     line-height: 20px;
-    margin: 0 12.5px 8px;
+    font-size: 10px;
 }
 
-/* guild link and icon */
+/* Private channels horizontal icons */
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .wrapper-25eVIn a,
+
-.bd-minimal .listItem-2P_4kh .wrapper-25eVIn .icon-27yU2q {
+.bd-minimal .channel-2QD9_O[href="/channels/@me"],
-    width: 20px;
+.bd-minimal .channel-2QD9_O[href="/library"],
-    height: 20px;
+.bd-minimal .channel-2QD9_O[href="/store"] {
-    background-size: 100%;
+    width: calc(33% - 8px);
-    font-size: 15px;
+    margin-left: 8px;
-    line-height: 20px;
+    padding: 0;
+    display: inline-block;
 }
 
-/* guild inner */
+.bd-minimal .channel-2QD9_O[href="/channels/@me"] .content-3QAtGj,
-.bd-minimal .listItem-2P_4kh .wrapper-25eVIn {
+.bd-minimal .channel-2QD9_O[href="/library"] .content-3QAtGj,
-    width: 20px;
+.bd-minimal .channel-2QD9_O[href="/store"] .content-3QAtGj,
-    height: 20px;
+.bd-minimal .channel-2QD9_O[href="/channels/@me"] .children-gzQq2t,
-    background-size: 100%;
+.bd-minimal .channel-2QD9_O[href="/library"] .children-gzQq2t,
-    font-size: 15px;
+.bd-minimal .channel-2QD9_O[href="/store"] .children-gzQq2t {
-    line-height: 20px;
+    display: none;
 }
 
-.bd-minimal .listItem-2P_4kh svg,
+.bd-minimal .channel-2QD9_O[href="/channels/@me"] .avatar-3uk_u9,
-.bd-minimal .listItem-2P_4kh foreignObject[mask] {
+.bd-minimal .channel-2QD9_O[href="/library"] .avatar-3uk_u9,
-    mask: none;
+.bd-minimal .channel-2QD9_O[href="/store"] .avatar-3uk_u9 {
+    margin: 0;
+    flex-grow: 1;
 }
 
-/* home icon */
+.bd-minimal .layout-2DM8Md {
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .homeIcon-tEMBK1 {
+    justify-content: center;
-    width: 10px;
+}
-    height: 10px;
-    background-size: 100%;
-    font-size: 15px;
-    line-height: 20px;
-}
-
-/* add and search */
-.bd-minimal .circleIconButton-jET_ig {
-    height: 20px;
-    width: 20px;
-}
-
-.bd-minimal .circleIconButton-jET_ig svg {
-    height: 14px;
-    width: 14px;
-}
-
-/* friends online */
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .friendsOnline-_wi_fM {
-    margin-left: -15px;
-    font-size: 7px;
-}
-
-/* public servers button */
-.bd-minimal #bd-pub-li {
-    height: 16px;
-}
-
-.bd-minimal #bd-pub-button {
-    font-size: 8px;
-    line-height: 16px;
-    height: 16px;
-}
-
-/* guild list */
-.bd-minimal .wrapper-1Rf91z,
-.bd-minimal .wrapper-1Rf91z .scrollerWrap-1IAIlv,
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG {
-    width: 45px;
-}
-
-/* separator */
-.bd-minimal .wrapper-1Rf91z .guildSeparator-3s64Iy {
-    margin-left: -15px;
-}
-
-/* unread icon */
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh .wrapper-sa6paO {
-    height: 20px;
-    margin-top: 0;
-    margin-left: -12.5px;
-}
-
-/* audio/video */
-.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .iconBadge-2wi9r4 {
-    width: 12px;
-    height: 12px;
-    background-size: 12px;
-}
-
-/* Account Container */
-.bd-minimal .container-2Thooq .avatarSmall-3ACRaI {
-    width: 15px;
-    height: 15px;
-    background-size: 15px 15px;
-}
-
-/* status */
-.bd-minimal .container-2Thooq .avatarSmall-3ACRaI .status-oxiHuE {
-    height: 5px;
-    width: 5px;
-}
-
-/* username and discrim */
-.bd-minimal .container-2Thooq .accountDetails-3k9g4n {
-    transform: scale(0.8);
-}
-
-/* 3 buttons */
-.bd-minimal .container-2Thooq .button-2b6hmh {
-    height: 14px;
-    width: 14px;
-    background-size: 14px 14px;
-    margin-left: 3px;
-}
-
-/* 3 buttons icons */
-.bd-minimal .container-2Thooq .button-2b6hmh svg {
-    height: 14px;
-    width: 14px;
-}

src/styles/builtins/publicservers.css

@@ -1,6 +1,19 @@
+@keyframes bd-placeholder-card-pulse {
+    0% {
+        opacity: 0.6;
+    }
+
+    50% {
+        opacity: 0.8;
+    }
+
+    to {
+        opacity: 0.6;
+    }
+}
+
 #bd-pub-li {
     height: 24px;
-    margin-bottom: 10px;
     overflow: hidden;
 }
 
@@ -66,6 +79,16 @@
     background-color: var(--background-secondary-alt);
 }
 
+.bd-placeholder-card {
+    background-color: var(--background-secondary-alt);
+    animation: bd-placeholder-card-pulse 1.8s ease-in-out infinite;
+    height: 320px;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 8px;
+    position: relative;
+}
+
 .bd-server-card:hover {
     background-color: var(--background-tertiary);
     transform: translateY(-1px);
@@ -230,8 +253,10 @@
     padding: 0;
 }
 
-.bd-pagination button:hover {
+.bd-pagination button:hover,
+.bd-pagination button:active {
     opacity: 1;
+    background: transparent;
 }
 
 .bd-pagination button svg {

src/styles/index.css

@@ -19,13 +19,10 @@
     margin-left: 4px;
 }
 
-.bd-changelog-modal {
-    width: 650px;
-}
-
 .bd-changelog-modal video {
     width: 100%;
-    border-radius: 20px;
+    border-radius: 5px;
+    outline: none;
 }
 
 .bd-link {

src/styles/spinner.css

@@ -1,15 +1,14 @@
 .bd-spinner {
-    margin: 100px auto;
+    width: 32px;
-    width: 57px;
+    height: 32px;
-    height: 57px;
     position: relative;
 }
 
 .bd-cube1,
 .bd-cube2 {
     background-color: #3e82e5;
-    width: 15px;
+    width: 10px;
-    height: 15px;
+    height: 10px;
     position: absolute;
     top: 0;
     left: 0;
@@ -22,19 +21,19 @@
 
 @keyframes bd-sk-cubemove {
     25% {
-        transform: translateX(42px) rotate(-90deg) scale(0.5);
+        transform: translateX(22px) rotate(-90deg) scale(0.5);
     }
 
     50% {
-        transform: translateX(42px) translateY(42px) rotate(-179deg);
+        transform: translateX(22px) translateY(22px) rotate(-179deg);
     }
 
     50.1% {
-        transform: translateX(42px) translateY(42px) rotate(-180deg);
+        transform: translateX(22px) translateY(22px) rotate(-180deg);
     }
 
     75% {
-        transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
+        transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5);
     }
 
     100% {

src/styles/ui/addonlist.css

@@ -113,33 +113,6 @@
     border-radius: 0 3px 3px 0;
 }
 
-.bd-addon-list .bd-footer .bd-links,
-.bd-addon-list .bd-footer .bd-links a,
-.bd-addon-list .bd-footer .bd-addon-button {
-    display: flex;
-    align-items: center;
-}
-
-.bd-addon-list .bd-footer .bd-link {
-    color: var(--interactive-normal);
-}
-
-.bd-addon-list .bd-footer .bd-link:hover {
-    color: var(--interactive-hover);
-}
-
-.bd-addon-list .bd-footer .bd-link:active {
-    color: var(--interactive-active);
-}
-
-.bd-addon-list .bd-footer .bd-link svg {
-    fill: currentColor;
-}
-
-.bd-addon-list .bd-footer .bd-links .bd-addon-button {
-    height: 24px;
-}
-
 .bd-controls + .bd-addon-list {
     margin-top: 10px;
 }
@@ -148,6 +121,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 5px;
 }
 
 .bd-addon-controls .bd-search {
@@ -208,6 +183,14 @@
     padding: 3px 4px;
 }
 
+.bd-addon-views .bd-view-button svg {
+    fill: var(--interactive-normal);
+}
+
+.bd-addon-views .bd-view-button.selected svg {
+    fill: #fff;
+}
+
 .bd-addon-views .bd-view-button:hover {
     background-color: var(--background-modifier-selected);
 }
@@ -222,4 +205,31 @@
 
 .bd-addon-views .bd-view-button + .bd-view-button {
     margin-left: 5px;
+}
+
+.bd-addon-list .bd-footer .bd-links,
+.bd-addon-list .bd-footer .bd-links a,
+.bd-addon-list .bd-footer .bd-addon-button {
+    display: flex;
+    align-items: center;
+}
+
+.bd-addon-list .bd-footer .bd-link {
+    color: var(--interactive-normal);
+}
+
+.bd-addon-list .bd-footer .bd-link:hover {
+    color: var(--interactive-hover);
+}
+
+.bd-addon-list .bd-footer .bd-link:active {
+    color: var(--interactive-active);
+}
+
+.bd-addon-list .bd-footer .bd-link svg {
+    fill: currentColor;
+}
+
+.bd-addon-list .bd-footer .bd-links .bd-addon-button {
+    height: 24px;
 }

src/styles/ui/bdsettings.css

@@ -1,9 +1,9 @@
-.bd-social-logo {
+.theme-dark .bd-social-logo path {
-    opacity: 0.6;
+    fill: #adadad;
 }
 
-.bd-social-logo path {
+.theme-light .bd-social-logo path {
-    fill: white;
+    fill: #b9bbbe;
 }
 
 .bd-social-link:hover .bd-social-logo {
@@ -165,7 +165,6 @@
     height: 18px;
     left: 0;
     transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .bd-switch .bd-checkbox {

src/styles/ui/modals.css

@@ -221,4 +221,14 @@
 
 .bd-modal-wrapper .bd-content-modal .scroller {
     padding-top: 0;
+}
+
+.bd-modal-close {
+    padding: 0;
+    height: 18px;
+}
+
+.bd-modal-close svg {
+    width: 18px;
+    height: 18px;
 }

src/ui/modals.js

@@ -267,11 +267,11 @@ export default class Modals {
 
         const mc = this.ModalComponents;
         const modal = props => {
-            return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.MEDIUM, className: "bd-addon-modal"}, props), 
+            return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.SMALL, className: "bd-addon-modal"}, props), 
                 React.createElement(mc.ModalHeader, {separator: false, className: "bd-addon-modal-header"},
                     React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`),
                     React.createElement(this.FlexElements.Child, {grow: 0},
-                        React.createElement(mc.ModalCloseButton, {onClick: props.onClose})
+                        React.createElement(mc.ModalCloseButton, {className: "bd-modal-close", onClick: props.onClose})
                     )
                 ),
                 React.createElement(mc.ModalContent, {className: "bd-addon-modal-settings"}, 

src/ui/publicservers/menu.js

@@ -160,7 +160,7 @@ export default class PublicServers extends React.Component {
         });
 
         let content = React.createElement(EmptyResults);
-        if (this.state.loading) content = this.loadingIndicator;
+        if (this.state.loading) content = this.loadingScreen;
         else if (this.state.results.total) content = React.createElement("div", {className: "bd-card-list"}, servers);
 
         return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}),
@@ -171,12 +171,14 @@ export default class PublicServers extends React.Component {
         ];
     }
 
-    get loadingIndicator() {
+    get loadingScreen() {
-        return <div className="bd-loading">
+        return <div className="bd-card-list">
-                <div className="bd-spinner">
+                <div className="bd-placeholder-card"></div>
-                    <div className="bd-cube1"></div>
+                <div className="bd-placeholder-card"></div>
-                    <div className="bd-cube2"></div>
+                <div className="bd-placeholder-card"></div>
-                </div>
+                <div className="bd-placeholder-card"></div>
+                <div className="bd-placeholder-card"></div>
+                <div className="bd-placeholder-card"></div>
             </div>;
     }