feat: port UserProfile, Onboarding, CreateBot to legacy

2026-03-07 09:25:27 +00:00 · 2022-06-30 20:39:00 +01:00
parent 0d3f29515e
commit 401b2d4990
19 changed files with 155 additions and 129 deletions
--- a/src/controllers/modals/components/legacy/UserProfile.module.scss
+++ b/src/controllers/modals/components/legacy/UserProfile.module.scss
@@ -0,0 +1,177 @@
+.modal {
+    height: 460px;
+    display: flex;
+    padding: 0 !important;
+    flex-direction: column;
+}
+
+.header {
+    background-size: cover;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    background-position: center;
+    background-color: var(--secondary-background);
+
+    &[data-force="light"] {
+        color: white;
+    }
+
+    &[data-force="dark"] {
+        color: black;
+    }
+}
+
+.profile {
+    gap: 16px;
+    width: 560px;
+    display: flex;
+    padding: 20px;
+    max-width: 100%;
+    align-items: center;
+    flex-direction: row;
+
+    > svg {
+        cursor: pointer;
+    }
+
+    .details {
+        flex-grow: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+
+        * {
+            min-width: 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .username {
+            font-size: 22px;
+            font-weight: 600;
+        }
+
+        .status {
+            font-size: 13px;
+
+            > div {
+                display: inline !important;
+            }
+        }
+    }
+}
+
+.tabs {
+    gap: 8px;
+    display: flex;
+    padding: 0 1.5em;
+    font-size: 0.875rem;
+    font-weight: 500;
+
+    > div {
+        padding: 8px;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        transition: border-bottom 0.3s;
+
+        &[data-active="true"] {
+            border-bottom: 2px solid var(--foreground);
+            cursor: default;
+        }
+
+        &:hover:not([data-active="true"]) {
+            border-bottom: 2px solid var(--tertiary-foreground);
+        }
+    }
+}
+
+.content {
+    gap: 8px;
+    min-height: 240px;
+    max-height: 240px;
+    height: 100%;
+    display: flex;
+    padding: 1em 1.5em;
+
+    max-width: 560px;
+
+    overflow-y: auto;
+    flex-direction: column;
+    background: var(--primary-background);
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+    .markdown {
+        user-select: text;
+    }
+
+    .empty {
+        display: flex;
+        gap: 10px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.5;
+        flex-grow: 1;
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    .category {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: var(--tertiary-foreground);
+        margin-bottom: 8px;
+
+        &:not(:first-child) {
+            margin-top: 8px;
+        }
+    }
+
+    > div {
+        > span {
+            font-size: 14px;
+        }
+    }
+}
+
+.entries {
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+
+    a {
+        min-width: 0;
+    }
+}
+
+.entry {
+    gap: 12px;
+    font-weight: 500;
+    min-width: 0;
+    padding: 12px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    transition: background-color 0.1s;
+    color: var(--foreground);
+    border-radius: var(--border-radius);
+    background-color: var(--secondary-background);
+
+    &:hover {
+        background-color: var(--primary-background);
+    }
+
+    img {
+        width: 32px;
+        height: 32px;
+        border-radius: var(--border-radius-half);
+    }
+
+    span {
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}