diff --git a/renderer/src/structs/markdown.js b/renderer/src/structs/markdown.js
index fc6464ba..041f366a 100644
--- a/renderer/src/structs/markdown.js
+++ b/renderer/src/structs/markdown.js
@@ -1,9 +1,9 @@
import {DiscordModules, Utilities} from "modules";
export default class SimpleMarkdownExt {
- static parseToReact(str) {
+ static parseToReact(str, inline = true) {
if (!this._parser) this._initialize();
- return this._renderer(this._parse(str, {inline: true}));
+ return this._renderer(this._parse(str, {inline}));
}
static _initialize() {
diff --git a/renderer/src/styles/buttons.css b/renderer/src/styles/buttons.css
index eb06877f..79b0eea0 100644
--- a/renderer/src/styles/buttons.css
+++ b/renderer/src/styles/buttons.css
@@ -1,4 +1,4 @@
-.bd-button {
+/* .bd-button {
display: inline-flex;
justify-content: center;
align-items: center;
@@ -59,4 +59,539 @@
.bd-button-disabled:hover {
cursor: not-allowed;
-}
\ No newline at end of file
+} */
+
+
+
+
+
+
+
+
+
+
+
+/* Generic Button Styles */
+.bd-button {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ background: none;
+ border: none;
+ border-radius: 3px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 16px;
+ padding: 2px 16px;
+ user-select: none;
+}
+
+.bd-button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.bd-button .bd-button-content {
+ --button--underline-color: transparent;
+ background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
+}
+
+.bd-button:disabled .bd-button-content {
+ background-image: none !important;
+}
+
+.bd-button-outlined:disabled {
+ background-color: transparent !important;
+}
+
+
+
+/* Button Sizes */
+.bd-button-tiny {
+ width: 52px;
+ height: 24px;
+ min-width: 52px;
+ min-height: 24px;
+}
+
+.bd-button-small {
+ width: 60px;
+ height: 32px;
+ min-width: 60px;
+ min-height: 32px;
+}
+
+.bd-button-medium {
+ width: 96px;
+ height: 38px;
+ min-width: 96px;
+ min-height: 38px;
+}
+
+.bd-button-large {
+ width: 130px;
+ height: 44px;
+ min-width: 130px;
+ min-height: 44px;
+}
+
+.bd-button-xlarge {
+ width: 148px;
+ height: 50px;
+ min-width: 148px;
+ min-height: 50px;
+ font-size: 16px;
+ line-height: normal;
+ padding: 2px 20px;
+}
+
+.bd-button-icon {
+ height: auto;
+ padding: 4px;
+}
+
+.bd-button-grow,
+.bd-button-icon {
+ width: auto
+}
+
+
+
+/* Button Looks */
+.bd-button-filled {
+ -webkit-transition: background-color .17s ease, color .17s ease;
+ transition: background-color .17s ease, color .17s ease
+}
+
+.bd-button-outlined {
+ -webkit-transition: color .17s ease, background-color .17s ease, border-color .17s ease;
+ transition: color .17s ease, background-color .17s ease, border-color .17s ease;
+ border-width: 1px;
+ border-style: solid
+}
+
+.bd-button-blank {
+ background: transparent;
+ color: currentColor;
+ border: 0;
+ padding: 0;
+ margin: 0
+}
+
+.bd-button-filled .bd-button-content,
+.bd-button-link .bd-button-content,
+.bd-button-outlined .bd-button-content {
+ margin: 0 auto;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+
+/* COLORS */
+
+/* Color BD Brand */
+.bd-button-filled.bd-button-color-brand {
+ color: var(--white-500);
+ background-color: #3E82E5; /* BD Blue */
+}
+
+.bd-button-filled.bd-button-color-brand:hover {
+ background-color: #3875CE;
+}
+
+.bd-button-filled.bd-button-color-brand:active {
+ background-color: #3268B7;
+}
+
+.bd-button-filled.bd-button-color-brand:disabled {
+ background-color: #3E82E5; /* BD Blue */
+ opacity: 0.4;
+}
+
+.bd-button-outlined.bd-button-color-brand {
+ color: var(--button-outline-brand-text);
+ border-color: var(--button-outline-brand-border);
+}
+
+.bd-button-outlined.bd-button-color-brand:hover {
+ background-color: var(--button-outline-brand-background-hover);
+ border-color: var(--button-outline-brand-border-hover);
+ color: var(--button-outline-brand-text-hover);
+}
+
+.bd-button-outlined.bd-button-color-brand:active {
+ background-color: var(--button-outline-brand-background-active);
+ border-color: var(--button-outline-brand-border-active);
+ color: var(--button-outline-brand-text-active);
+}
+
+.bd-button-link.bd-button-color-brand {
+ color: #3E82E5; /* BD Blue */
+}
+
+.bd-button-link.bd-button-color-brand:hover .bd-button-content {
+ --button--underline-color: #3E82E5; /* BD Blue */
+}
+
+
+
+/* Color Blurple */
+.bd-button-filled.bd-button-color-blurple {
+ color: var(--white-500);
+ background-color: var(--brand-experiment)
+}
+
+.bd-button-filled.bd-button-color-blurple:hover {
+ background-color: var(--brand-experiment-560)
+}
+
+.bd-button-filled.bd-button-color-blurple:active {
+ background-color: var(--brand-experiment-600)
+}
+
+.bd-button-filled.bd-button-color-blurple:disabled {
+ background-color: var(--brand-experiment)
+}
+
+.bd-button-outlined.bd-button-color-blurple {
+ color: var(--button-outline-brand-text);
+ border-color: var(--button-outline-brand-border)
+}
+
+.bd-button-outlined.bd-button-color-blurple:hover {
+ background-color: var(--button-outline-brand-background-hover);
+ border-color: var(--button-outline-brand-border-hover);
+ color: var(--button-outline-brand-text-hover)
+}
+
+.bd-button-outlined.bd-button-color-blurple:active {
+ background-color: var(--button-outline-brand-background-active);
+ border-color: var(--button-outline-brand-border-active);
+ color: var(--button-outline-brand-text-active)
+}
+
+.bd-button-link.bd-button-color-blurple {
+ color: var(--brand-experiment)
+}
+
+.bd-button-link.bd-button-color-blurple:hover .bd-button-content {
+ --button--underline-color: var(--brand-experiment)
+}
+
+
+
+/* Color Yellow/Warn */
+.bd-button-filled.bd-button-color-yellow {
+ color: var(--white-500);
+ background-color: var(--status-warning)
+}
+
+.bd-button-filled.bd-button-color-yellow:active,
+.bd-button-filled.bd-button-color-yellow:hover {
+ background-color: null;
+}
+
+.bd-button-filled.bd-button-color-yellow:disabled {
+ background-color: var(--status-warning)
+}
+
+.bd-button-outlined.bd-button-color-yellow {
+ color: var(--status-warning);
+ border-color: var(--status-warning)
+}
+
+.bd-button-outlined.bd-button-color-yellow:active {
+ background-color: hsl(var(--yellow-300-hsl)/.1)
+}
+
+.bd-button-link.bd-button-color-yellow {
+ color: var(--status-warning)
+}
+
+.bd-button-link.bd-button-color-yellow:hover .bd-button-content {
+ --button--underline-color: var(--status-warning)
+}
+
+
+
+/* Color Link */
+.bd-button-filled.bd-button-color-link {
+ color: var(--white-500);
+ background-color: var(--text-link)
+}
+
+.bd-button-filled.bd-button-color-link:active,
+.bd-button-filled.bd-button-color-link:hover {
+ background-color: null
+}
+
+.bd-button-filled.bd-button-color-link:disabled {
+ background-color: var(--text-link)
+}
+
+.bd-button-outlined.bd-button-color-link {
+ color: var(--text-link);
+ border-color: var(--text-link)
+}
+
+.bd-button-outlined.bd-button-color-link:active {
+ background-color: hsl(var(--text-link-hsl)/.1)
+}
+
+.bd-button-link.bd-button-color-link {
+ color: var(--text-link)
+}
+
+.bd-button-link.bd-button-color-link:hover .bd-button-content {
+ --button--underline-color: var(--text-link)
+}
+
+
+
+/* Color White */
+.bd-button-filled.bd-button-color-white {
+ color: var(--primary-500);
+ background-color: var(--white-500)
+}
+
+.bd-button-filled.bd-button-color-white:active,
+.bd-button-filled.bd-button-color-white:hover {
+ background-color: null
+}
+
+.bd-button-filled.bd-button-color-white:disabled {
+ background-color: var(--white-500)
+}
+
+.bd-button-outlined.bd-button-color-white {
+ color: var(--white-500);
+ border-color: var(--white-500)
+}
+
+.bd-button-outlined.bd-button-color-white:active {
+ background-color: hsl(var(--white-500-hsl)/.1)
+}
+
+.bd-button-link.bd-button-color-white {
+ color: var(--white-500)
+}
+
+.bd-button-link.bd-button-color-white:hover .bd-button-content {
+ --button--underline-color: var(--white-500)
+}
+
+
+
+/* Color Red/Danger/Error */
+.bd-button-filled.bd-button-color-red {
+ color: var(--white-500);
+ background-color: var(--button-danger-background)
+}
+
+.bd-button-filled.bd-button-color-red:hover {
+ background-color: var(--button-danger-background-hover)
+}
+
+.bd-button-filled.bd-button-color-red:active {
+ background-color: var(--button-danger-background-active)
+}
+
+.bd-button-filled.bd-button-color-red:disabled {
+ background-color: var(--button-danger-background-disabled)
+}
+
+.bd-button-outlined.bd-button-color-red {
+ color: var(--button-outline-danger-text);
+ border-color: var(--button-outline-danger-border)
+}
+
+.bd-button-outlined.bd-button-color-red:hover {
+ background-color: var(--button-outline-danger-background-hover);
+ border-color: var(--button-outline-danger-border-hover);
+ color: var(--button-outline-danger-text-hover)
+}
+
+.bd-button-outlined.bd-button-color-red:active {
+ background-color: var(--button-outline-danger-background-active);
+ border-color: var(--button-outline-danger-border-active);
+ color: var(--button-outline-danger-text-active)
+}
+
+.bd-button-link.bd-button-color-red {
+ color: var(--text-danger)
+}
+
+.bd-button-link.bd-button-color-red:hover .bd-button-content {
+ --button--underline-color: var(--text-danger)
+}
+
+
+/* Color Green Success */
+.bd-button-filled.bd-button-color-green {
+ color: var(--white-500);
+ background-color: var(--button-positive-background)
+}
+
+.bd-button-filled.bd-button-color-green:hover {
+ background-color: var(--button-positive-background-hover)
+}
+
+.bd-button-filled.bd-button-color-green:active {
+ background-color: var(--button-positive-background-active)
+}
+
+.bd-button-filled.bd-button-color-green:disabled {
+ background-color: var(--button-positive-background-disabled)
+}
+
+.bd-button-outlined.bd-button-color-green {
+ color: var(--button-outline-positive-text);
+ border-color: var(--button-outline-positive-border)
+}
+
+.bd-button-outlined.bd-button-color-green:hover {
+ background-color: var(--button-outline-positive-background-hover);
+ border-color: var(--button-outline-positive-border-hover);
+ color: var(--button-outline-positive-text-hover)
+}
+
+.bd-button-outlined.bd-button-color-green:active {
+ background-color: var(--button-outline-positive-background-active);
+ border-color: var(--button-outline-positive-border-active);
+ color: var(--button-outline-positive-text-active)
+}
+
+.bd-button-link.bd-button-color-green {
+ color: var(--green-360)
+}
+
+.bd-button-link.bd-button-color-green:hover .bd-button-content {
+ --button--underline-color: var(--green-360)
+}
+
+
+
+/* Color Primary/Grey */
+.bd-button-outlined.bd-button-color-primary {
+ color: var(--button-outline-primary-text);
+ border-color: var(--button-outline-primary-border)
+}
+
+.bd-button-outlined.bd-button-color-primary:hover {
+ background-color: var(--button-outline-primary-background-hover);
+ border-color: var(--button-outline-primary-border-hover);
+ color: var(--button-outline-primary-text-hover)
+}
+
+.bd-button-outlined.bd-button-color-primary:active {
+ background-color: var(--button-outline-primary-background-active);
+ border-color: var(--button-outline-primary-border-active);
+ color: var(--button-outline-primary-text-active)
+}
+
+.bd-button-filled.bd-button-color-primary {
+ color: var(--white-500);
+ background-color: var(--button-secondary-background)
+}
+
+.bd-button-filled.bd-button-color-primary:hover {
+ background-color: var(--button-secondary-background-hover)
+}
+
+.bd-button-filled.bd-button-color-primary:active {
+ background-color: var(--button-secondary-background-active)
+}
+
+.bd-button-filled.bd-button-color-primary:disabled {
+ background-color: var(--button-secondary-background-disabled)
+}
+
+.theme-dark .bd-button-link.bd-button-color-primary {
+ color: var(--white-500)
+}
+
+.theme-dark .bd-button-link.bd-button-color-primary:hover .bd-button-content {
+ --button--underline-color: var(--white-500)
+}
+
+.theme-light .bd-button-link.bd-button-color-primary {
+ color: var(--primary-400)
+}
+
+.theme-light .bd-button-link.bd-button-color-primary:hover .bd-button-content {
+ --button--underline-color: var(--primary-400)
+}
+
+
+
+/* Color Transparent */
+.theme-dark .bd-button-filled.bd-button-color-transparent {
+ color: var(--primary-100);
+ background-color: hsl(var(--white-500-hsl)/.1)
+}
+
+.theme-dark .bd-button-filled.bd-button-color-transparent:hover {
+ background-color: hsl(var(--white-500-hsl)/.05)
+}
+
+.theme-dark .bd-button-filled.bd-button-color-transparent:active {
+ background-color: hsl(var(--white-500-hsl)/.01)
+}
+
+.theme-dark .bd-button-filled.bd-button-color-transparent:disabled {
+ background-color: hsl(var(--white-500-hsl)/.1)
+}
+
+.theme-dark .bd-button-outlined.bd-button-color-transparent {
+ color: var(--primary-200);
+ border-color: var(--primary-200)
+}
+
+.theme-dark .bd-button-outlined.bd-button-color-transparent:active {
+ background-color: hsl(var(--primary-200-hsl)/.1)
+}
+
+.theme-dark .bd-button-link.bd-button-color-transparent {
+ color: var(--primary-200)
+}
+
+.theme-dark .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
+ --button--underline-color: var(--primary-200)
+}
+
+.theme-light .bd-button-filled.bd-button-color-transparent {
+ color: var(--primary-400);
+ background-color: hsl(var(--primary-400-hsl)/.01)
+}
+
+.theme-light .bd-button-filled.bd-button-color-transparent:hover {
+ background-color: hsl(var(--primary-400-hsl)/.2)
+}
+
+.theme-light .bd-button-filled.bd-button-color-transparent:active {
+ background-color: hsl(var(--primary-400-hsl)/.25)
+}
+
+.theme-light .bd-button-filled.bd-button-color-transparent:disabled {
+ background-color: hsl(var(--primary-400-hsl)/.01)
+}
+
+.theme-light .bd-button-outlined.bd-button-color-transparent {
+ color: var(--primary-400);
+ border-color: var(--primary-400)
+}
+
+.theme-light .bd-button-outlined.bd-button-color-transparent:active {
+ background-color: hsl(var(--primary-400-hsl)/.1)
+}
+
+.theme-light .bd-button-link.bd-button-color-transparent {
+ color: var(--primary-400)
+}
+
+.theme-light .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
+ --button--underline-color: var(--primary-400)
+}
diff --git a/renderer/src/styles/index.css b/renderer/src/styles/index.css
index fd1bc78b..cf0e3945 100644
--- a/renderer/src/styles/index.css
+++ b/renderer/src/styles/index.css
@@ -6,6 +6,7 @@
@import "./buttons.css";
@import "./spinner.css";
@import "./search.css";
+@import "./text.css";
.bd-chat-badge {
vertical-align: bottom;
@@ -19,23 +20,6 @@
margin-left: 4px;
}
-.bd-changelog-modal video,
-.bd-changelog-modal img {
- width: 100%;
- border-radius: 5px;
- outline: none;
-}
-
-.bd-changelog-modal code.inline {
- padding: 0.2em;
- margin: -0.2em 0;
- border-radius: 3px;
- font-size: 85%;
- line-height: 1.125rem;
- white-space: pre-wrap;
- background: var(--background-secondary);
-}
-
.bd-link {
text-decoration: none;
}
diff --git a/renderer/src/styles/text.css b/renderer/src/styles/text.css
new file mode 100644
index 00000000..e29b9de5
--- /dev/null
+++ b/renderer/src/styles/text.css
@@ -0,0 +1,86 @@
+.bd-text-normal {
+ color: var(--text-normal);
+}
+
+.bd-text-muted {
+ color: var(--text-muted);
+}
+
+.bd-text-error {
+ color: var(--red-400);
+}
+
+.bd-text-brand {
+ color: var(--text-brand);
+}
+
+.bd-text-link {
+ color: var(--text-link);
+}
+
+.bd-header-primary {
+ color: var(--header-primary);
+}
+
+.bd-header-secondary {
+ color: var(--header-secondary);
+}
+
+.bd-text-yellow {
+ color: var(--text-warning);
+}
+
+.bd-text-green {
+ color: var(--text-positive);
+}
+
+.bd-text-red {
+ color: var(--status-danger);
+}
+
+.bd-text-white {
+ color: var(--white-500);
+}
+
+.bd-text-10 {
+ font-size: 10px;
+ line-height: 12px;
+}
+
+.bd-text-12 {
+ font-size: 12px;
+ line-height: 16px;
+}
+
+.bd-text-14 {
+ font-size: 14px;
+ line-height: 18px;
+}
+
+.bd-text-16 {
+ font-size: 16px;
+ line-height: 20px;
+}
+
+.bd-text-20 {
+ font-size: 20px;
+ line-height: 24px;
+}
+
+.bd-text-24 {
+ font-size: 24px;
+ line-height: 30px;
+}
+
+.bd-text-32 {
+ font-size: 32px;
+ line-height: 40px;
+}
+
+.bd-text-strong {
+ font-weight: 600;
+}
+
+.bd-selectable {
+ user-select: text;
+}
\ No newline at end of file
diff --git a/renderer/src/styles/ui/bdsettings.css b/renderer/src/styles/ui/bdsettings.css
index abc9c357..0603206c 100644
--- a/renderer/src/styles/ui/bdsettings.css
+++ b/renderer/src/styles/ui/bdsettings.css
@@ -166,6 +166,7 @@
.bd-settings-title {
color: var(--header-primary, #FFFFFF);
+ display: flex;
font-weight: 600;
cursor: default;
flex: 1;
diff --git a/renderer/src/styles/ui/changelog.css b/renderer/src/styles/ui/changelog.css
new file mode 100644
index 00000000..aea4237e
--- /dev/null
+++ b/renderer/src/styles/ui/changelog.css
@@ -0,0 +1,217 @@
+.bd-changelog-modal video,
+.bd-changelog-modal img {
+ width: 100%;
+ border-radius: 5px;
+ outline: none;
+}
+
+.bd-changelog-modal code.inline {
+ padding: 0.2em;
+ margin: -0.2em 0;
+ border-radius: 3px;
+ font-size: 85%;
+ line-height: 1.125rem;
+ white-space: pre-wrap;
+ background: var(--background-secondary);
+}
+
+.bd-changelog-modal .bd-modal-content {
+ font-size: 16px;
+ line-height: 20px;
+ padding-bottom: 20px;
+}
+
+.bd-changelog-modal .bd-modal-content .emoji {
+ object-fit: contain;
+ width: 22px;
+ height: 22px;
+}
+
+.bd-changelog-modal .bd-modal-content h1 {
+ line-height: 20px;
+ font-size: 16px;
+}
+
+.bd-changelog-modal .bd-modal-content h1,
+.bd-changelog-modal .bd-modal-content h2,
+.bd-changelog-modal .bd-modal-content strong {
+ font-weight: 700;
+}
+
+.bd-changelog-modal .bd-modal-content em,
+.bd-changelog-modal .bd-modal-content i {
+ font-style: italic;
+}
+
+.bd-changelog-modal .bd-modal-content p + p {
+ margin-top: 10px;
+}
+
+.bd-changelog-modal .bd-modal-content ol {
+ margin: 16px 0 16px 16px;
+}
+
+.bd-changelog-modal .bd-modal-content ol li {
+ list-style-type: decimal;
+ margin-bottom: 8px;
+ margin-left: 20px;
+}
+
+.bd-changelog-modal .bd-modal-content ul {
+ margin: 20px 0 8px 20px;
+}
+
+.bd-changelog-modal .bd-modal-content ul ul {
+ margin-top: 8px;
+}
+
+.bd-changelog-modal .bd-modal-content ul li {
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+ user-select: text;
+}
+
+.bd-changelog-modal .bd-modal-content ul li:last-child {
+ margin-bottom: 0;
+}
+
+.bd-changelog-modal .bd-modal-content ul li::before {
+ content: "";
+ position: absolute;
+ top: 10px;
+ left: -15px;
+ width: 6px;
+ height: 6px;
+ margin-top: -4px;
+ margin-left: -3px;
+ border-radius: 50%;
+ opacity: 0.3;
+}
+
+.bd-changelog-modal .bd-modal-content ul li li::before {
+ top: 12px;
+ height: 2px;
+ border-radius: 0;
+}
+
+.bd-changelog-modal .bd-modal-content img {
+ width: 100%;
+}
+
+.bd-changelog-modal .bd-modal-content a {
+ color: hsl(200, calc(var(--saturation-factor, 1) * 100%), 49.4%);
+ transition: 0.05s;
+ text-decoration: none;
+}
+
+.bd-changelog-modal .bd-modal-content a:hover {
+ text-decoration: underline;
+}
+
+.theme-dark .bd-changelog-modal .bd-modal-content ol,
+.theme-dark .bd-changelog-modal .bd-modal-content p,
+.theme-dark .bd-changelog-modal .bd-modal-content ul li {
+ color: hsl(210, calc(var(--saturation-factor, 1) * 9.3%), 78.8%);
+}
+
+.theme-dark .bd-changelog-modal .bd-modal-content ul li::before {
+ background-color: hsl(216, calc(var(--saturation-factor, 1) * 9.8%), 90%);
+}
+
+.theme-light .bd-changelog-modal .bd-modal-content ol,
+.theme-light .bd-changelog-modal .bd-modal-content p,
+.theme-light .bd-changelog-modal .bd-modal-content ul li {
+ color: hsl(223, calc(var(--saturation-factor, 1) * 5.8%), 52.9%);
+}
+
+.theme-light .bd-changelog-modal .bd-modal-content ul li::before {
+ background-color: hsl(223, calc(var(--saturation-factor, 1) * 5.8%), 52.9%);
+}
+
+.bd-changelog-title {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ text-transform: uppercase;
+}
+
+.bd-changelog-title {
+ display: flex;
+ align-items: center;
+ margin-top: 40px;
+}
+
+.bd-changelog-title.bd-changelog-first {
+ margin-top: 20px;
+}
+
+.bd-changelog-title::after {
+ content: "";
+ height: 1px;
+ flex: 1 1 auto;
+ margin-left: 4px;
+ opacity: .6;
+}
+
+.bd-changelog-added {
+ color: var(--text-positive);
+}
+
+.bd-changelog-added::after {
+ background-color: var(--info-positive-foreground);
+}
+
+.bd-changelog-fixed {
+ color: hsl(359, calc(var(--saturation-factor, 1)*87.3%), 59.8%);
+}
+
+.bd-changelog-fixed::after {
+ background-color: hsl(359, calc(var(--saturation-factor, 1)*87.3%), 59.8%);
+}
+
+.bd-changelog-progress {
+ color: var(--text-warning);
+}
+
+.bd-changelog-progress::after {
+ background-color: var(--info-warning-foreground);
+}
+
+.bd-changelog-improved {
+ color: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
+}
+
+.bd-changelog-improved::after {
+ background-color: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
+}
+
+.theme-dark .bd-changelog-improved {
+ color: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
+}
+
+.theme-dark .bd-changelog-improved::after {
+ background-color: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
+}
+
+.theme-dark .bd-changelog-modal video,
+.theme-dark .bd-changelog-modal img {
+ box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.2);
+}
+
+.theme-light .bd-changelog-modal video,
+.theme-light .bd-changelog-modal img {
+ box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.1);
+}
+
+/* .socialLink-1qjJIk {
+ margin-right: 16px;
+}
+
+.theme-light .socialLink-1qjJIk {
+ color: hsl(228, calc(var(--saturation-factor, 1)*6%), 32.5%);
+}
+
+.theme-dark .socialLink-1qjJIk {
+ color: hsl(210, calc(var(--saturation-factor, 1)*9.3%), 78.8%);
+} */
\ No newline at end of file
diff --git a/renderer/src/styles/ui/flex.css b/renderer/src/styles/ui/flex.css
new file mode 100644
index 00000000..60d92be2
--- /dev/null
+++ b/renderer/src/styles/ui/flex.css
@@ -0,0 +1,124 @@
+.bd-flex {
+ display: flex;
+}
+
+.bd-flex-align-start {
+ align-items: flex-start;
+}
+
+.bd-flex-align-end {
+ align-items: flex-end;
+}
+
+.bd-flex-align-center {
+ align-items: center;
+}
+
+.bd-flex-align-stretch {
+ align-items: stretch;
+}
+
+.bd-flex-align-baseline {
+ align-items: baseline
+}
+
+.bd-flex-justify-start {
+ justify-content: flex-start;
+}
+
+.bd-flex-justify-end {
+ justify-content: flex-end;
+}
+
+.bd-flex-justify-center {
+ justify-content: center;
+}
+
+.bd-flex-justify-around {
+ justify-content: space-around;
+}
+
+.bd-flex-justify-between {
+ justify-content: space-between;
+}
+
+.bd-flex-no-wrap {
+ flex-wrap: nowrap;
+}
+
+.bd-flex-wrap {
+ flex-wrap: wrap;
+}
+
+.bd-flex-wrap-reverse {
+ flex-wrap: wrap-reverse;
+}
+
+.bd-flex-horizontal {
+ flex-direction: row;
+}
+
+.bd-flex-reverse {
+ flex-direction: row-reverse;
+}
+
+.bd-flex-vertical {
+ flex-direction: column;
+}
+
+.spacer-2upayl {
+ flex: 1;
+ overflow: hidden;
+}
+
+.bd-flex-vertical {}
+
+.bd-flex-horizontal {}
+
+.bd-flex-reverse {}
+
+.bd-flex-horizontal > .spacer-2upayl,
+.bd-flex-reverse > .spacer-2upayl,
+.bd-flex-vertical > .spacer-2upayl {
+ min-height: 1px;
+}
+
+.flexCenter-1Mwsxg {}
+
+.bd-flex {}
+
+.bd-flex-horizontal {}
+
+.bd-flex-reverse {}
+
+.bd-flex-horizontal > .bd-flex,
+.bd-flex-horizontal > .bd-flex-child {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.bd-flex-horizontal > .bd-flex:first-child,
+.bd-flex-horizontal > .bd-flex-child:first-child {
+ margin-left: 0;
+}
+
+.bd-flex-horizontal > .bd-flex:last-child,
+.bd-flex-horizontal > .bd-flex-child:last-child {
+ margin-right: 0;
+}
+
+.bd-flex-reverse > .bd-flex,
+.bd-flex-reverse > .bd-flex-child {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.bd-flex-reverse > .bd-flex:first-child,
+.bd-flex-reverse > .bd-flex-child:first-child {
+ margin-right: 0;
+}
+
+.bd-flex-reverse > .bd-flex:last-child,
+.bd-flex-reverse > .bd-flex-child:last-child {
+ margin-left: 0;
+}
\ No newline at end of file
diff --git a/renderer/src/styles/ui/modal.css b/renderer/src/styles/ui/modal.css
index 1421e5c9..524c8269 100644
--- a/renderer/src/styles/ui/modal.css
+++ b/renderer/src/styles/ui/modal.css
@@ -71,3 +71,94 @@
@keyframes bd-modal-open {
from {transform: scale(0.7);}
}
+
+
+
+.bd-modal-root {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--modal-background);
+ border-radius: 4px;
+ margin: 0 auto;
+ pointer-events: all;
+ position: relative;
+ max-height: 100%;
+}
+
+.bd-close-button {
+ height: 26px;
+ padding: 4px;
+ transition: opacity 0.2s ease-in-out;
+ opacity: 0.5;
+ cursor: pointer;
+ border-radius: 3px;
+ color: var(--interactive-normal);
+ box-sizing: content-box;
+}
+
+.bd-close-button:hover {
+ opacity: 1;
+ color: var(--interactive-hover);
+}
+
+.bd-modal-small {
+ width: 440px;
+ max-height: 720px;
+ min-height: 200px;
+}
+
+.bd-modal-standard {
+ font-size: 13px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ width: 490px;
+ max-height: 800px;
+}
+
+.bd-modal-medium {
+ width: 600px;
+ max-height: 800px;
+ min-height: 400px;
+}
+
+.bd-modal-large {
+ width: 800px;
+ max-height: 960px;
+ min-height: 400px;
+}
+
+.bd-modal-header,
+.bd-modal-footer {
+ position: relative;
+ flex: 0 0 auto;
+ padding: 16px;
+ z-index: 1;
+ overflow-x: hidden;
+}
+
+.bd-modal-header {
+ border-radius: 4px 4px 0 0;
+ transition: box-shadow 0.1s ease-out;
+ word-wrap: break-word;
+}
+
+.bd-modal-footer {
+ border-radius: 0 0 5px 5px;
+ background-color: var(--modal-footer-background);
+ overflow: hidden;
+ box-shadow: inset 0 1px 0 hsl(var(--primary-630-hsl)/0.6);
+}
+
+.bd-modal-content {
+ position: relative;
+ z-index: 0;
+ border-radius: 5px 5px 0 0;
+ padding-left: 16px;
+ /* padding-right: 16px; */
+ overflow-x: hidden;
+ font-size: 16px;
+ line-height: 20px;
+ padding-bottom: 20px;
+ overflow: hidden scroll;
+ padding-right: 8px;
+}
\ No newline at end of file
diff --git a/renderer/src/styles/ui/scroller.css b/renderer/src/styles/ui/scroller.css
new file mode 100644
index 00000000..de7c74db
--- /dev/null
+++ b/renderer/src/styles/ui/scroller.css
@@ -0,0 +1,34 @@
+.bd-scroller-base {
+ position: relative;
+ box-sizing: border-box;
+ min-height: 0;
+ flex: 1 1 auto;
+}
+
+.bd-scroller-thin {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
+}
+
+.bd-scroller-thin::-webkit-scrollbar-track {
+ border-color: var(--scrollbar-thin-track);
+ background-color: var(--scrollbar-thin-track);
+ border: 2px solid var(--scrollbar-thin-track);
+}
+
+.bd-scroller-thin::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.bd-scroller-thin::-webkit-scrollbar-corner {
+ background-color: transparent;
+}
+
+.bd-scroller-thin::-webkit-scrollbar-thumb {
+ background-clip: padding-box;
+ border: 2px solid transparent;
+ border-radius: 4px;
+ background-color: var(--scrollbar-thin-thumb);
+ min-height: 40px;
+}
\ No newline at end of file
diff --git a/renderer/src/ui/base/button.jsx b/renderer/src/ui/base/button.jsx
new file mode 100644
index 00000000..22e5021e
--- /dev/null
+++ b/renderer/src/ui/base/button.jsx
@@ -0,0 +1,102 @@
+import {React, Utilities} from "modules";
+
+// S.Looks = y;
+// S.Colors = I;
+// S.BorderColors = O;
+// S.Hovers = T;
+// S.Sizes = v;
+
+const {useCallback} = React;
+
+export const Looks = Object.freeze({
+ FILLED: "bd-button-filled",
+ OUTLINED: "bd-button-outlined",
+ LINK: "bd-button-link",
+ BLANK: "bd-button-blank"
+});
+
+export const Colors = Object.freeze({
+ BRAND: "bd-button-color-brand",
+ BLURPLE: "bd-button-color-blurple",
+ RED: "bd-button-color-red",
+ GREEN: "bd-button-color-green",
+ YELLOW: "bd-button-color-yellow",
+ PRIMARY: "bd-button-color-primary",
+ LINK: "bd-button-color-link",
+ WHITE: "bd-button-color-white",
+ TRANSPARENT: "bd-button-color-transparent",
+ CUSTOM: ""
+});
+
+
+export const Sizes = Object.freeze({
+ NONE: "",
+ TINY: "bd-button-tiny",
+ SMALL: "bd-button-small",
+ MEDIUM: "bd-button-medium",
+ LARGE: "bd-button-large",
+ ICON: "bd-button-icon"
+});
+
+
+export default function Button({
+ className,
+ children,
+ onClick,
+ onKeyDown,
+ buttonRef,
+ disabled = false,
+ type = "button",
+ look = Looks.FILLED,
+ color = Colors.BRAND,
+ size = Sizes.MEDIUM,
+ grow = true
+}) {
+
+ const handleClick = useCallback(event => {
+ event.preventDefault();
+ event.stopPropagation();
+ onClick?.(event);
+ }, [onClick]);
+
+ return ;
+}
+
+Button.Looks = Looks;
+Button.Colors = Colors;
+Button.Sizes = Sizes;
+// window.BDButton = Button;
+// (() => {
+// const buttons = [];
+// for (const look in window.BDButton.Looks) {
+// if (!window.BDButton.Looks[look] || look === "BLANK") continue;
+// for (const color in window.BDButton.Colors) {
+// if (!window.BDButton.Colors[color]) continue;
+// for (const size in window.BDButton.Sizes) {
+// if (!window.BDButton.Sizes[size]) continue;
+// buttons.push(window.BdApi.React.createElement(window.BDButton, {
+// look: window.BDButton.Looks[look],
+// color: window.BDButton.Colors[color],
+// size: window.BDButton.Sizes[size]
+// }, "Hello World!"));
+// buttons.push(window.BdApi.React.createElement("br"));
+// }
+// }
+// }
+// window.BdApi.showConfirmationModal("Buttons", buttons);
+// })();
\ No newline at end of file
diff --git a/renderer/src/ui/base/flex.jsx b/renderer/src/ui/base/flex.jsx
new file mode 100644
index 00000000..572afbc4
--- /dev/null
+++ b/renderer/src/ui/base/flex.jsx
@@ -0,0 +1,75 @@
+import {React, Utilities} from "modules";
+
+
+export const Direction = Object.freeze({
+ VERTICAL: "bd-flex-vertical",
+ HORIZONTAL: "bd-flex-horizontal",
+ HORIZONTAL_REVERSE: "bd-flex-reverse"
+});
+
+export const Justify = Object.freeze({
+ START: "bd-flex-justify-start",
+ END: "bd-flex-justify-end",
+ CENTER: "bd-flex-justify-center",
+ BETWEEN: "bd-flex-justify-between",
+ AROUND: "bd-flex-justify-around"
+});
+
+export const Align = Object.freeze({
+ START: "bd-flex-align-start",
+ END: "bd-flex-align-end",
+ CENTER: "bd-flex-align-center",
+ STRETCH: "bd-flex-align-stretch",
+ BASELINE: "bd-flex-align-baseline"
+});
+
+export const Wrap = Object.freeze({
+ NO_WRAP: "bd-flex-no-wrap",
+ WRAP: "bd-flex-wrap",
+ WRAP_REVERSE: "bd-flex-wrap-reverse"
+});
+
+
+export function Child(props) {
+ if (!props.className) props.className = "";
+ props.className = Utilities.className(props.className, "bd-flex-child");
+ return