@adzen/doohbot 1.0.1 → 1.0.3

package/src/lib/app/personalization/sections/account/account-section.component.scss

@@ -0,0 +1,209 @@
+.account-container {
+    padding: 32px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    box-sizing: border-box;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.settings-list {
+    display: flex;
+    flex-direction: column;
+    background: var(--background-color);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
+        0 4px 12px rgba(var(--black-rgb), 0.01);
+}
+
+.settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
+    transition: background 0.2s ease;
+
+    &.clickable {
+        cursor: pointer;
+
+        &:hover {
+            background: rgba(var(--black-rgb), 0.04);
+        }
+    }
+
+    &.no-border {
+        border-bottom: none;
+    }
+
+    .row-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .row-label {
+            font-size: 1.05rem;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        .row-sublabel {
+            font-size: 0.9rem;
+            color: var(--secondary-text-color);
+        }
+
+        .danger-text {
+            color: var(--warn-color);
+        }
+    }
+
+    .row-action {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        .status-text {
+            font-size: 0.95rem;
+            color: var(--secondary-text-color);
+        }
+
+        .chevron {
+            color: var(--secondary-text-color);
+            font-size: 20px;
+        }
+
+        .org-id {
+            font-family: 'Space Mono', monospace;
+            padding: 4px 12px;
+            background: rgba(var(--primary-rgb), 0.05);
+            border-radius: 6px;
+            font-size: 0.9rem;
+            color: var(--primary-color);
+        }
+    }
+}
+
+.pill-btn {
+    background: none;
+    border: 1.5px solid rgba(var(--black-rgb), 0.15);
+    border-radius: 100px;
+    padding: 8px 24px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(var(--black-rgb), 0.05);
+        border-color: rgba(var(--black-rgb), 0.3);
+    }
+
+    &.danger {
+        color: var(--warn-color);
+        border-color: rgba(var(--warn-rgb), 0.3);
+
+        &:hover {
+            background: rgba(var(--warn-rgb), 0.05);
+            border-color: var(--warn-color);
+        }
+    }
+
+    &.danger-filled {
+        background: transparent;
+        color: var(--text-color);
+        border: var(--red);
+
+        &:hover {
+            background: var(--red);
+            box-shadow: 0 4px 12px rgba(var(--warn-rgb), 0.2);
+        }
+    }
+}
+
+.sessions-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    h3 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--text-color);
+    }
+}
+
+.sessions-table-container {
+    border: 1px solid rgba(var(--black-rgb), 0.05);
+    border-radius: 16px;
+    background: rgba(var(--black-rgb), 0.01);
+    overflow: hidden;
+}
+
+.sessions-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+
+    th {
+        padding: 16px 20px;
+        background: rgba(var(--black-rgb), 0.03);
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: var(--secondary-text-color);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    td {
+        padding: 20px;
+        border-top: 1px solid rgba(var(--black-rgb), 0.05);
+        font-size: 0.95rem;
+        color: var(--text-color);
+    }
+
+    tr.current {
+        background: rgba(var(--primary-rgb), 0.03);
+    }
+
+    .action-cell {
+        text-align: right;
+        padding-right: 12px;
+        color: var(--secondary-text-color);
+    }
+}
+
+.device-cell {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    mat-icon {
+        font-size: 24px;
+        color: var(--secondary-text-color);
+    }
+
+    .device-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .device-name {
+            font-weight: 600;
+        }
+
+        .current-badge {
+            font-size: 0.7rem;
+            color: var(--primary-color);
+            background: rgba(var(--primary-rgb), 0.1);
+            padding: 2px 8px;
+            border-radius: 4px;
+            width: fit-content;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+    }
+}

package/src/lib/app/personalization/sections/instruction/instruction-section.component.scss

@@ -0,0 +1,63 @@
+.instruction-container {
+    padding: 32px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    box-sizing: border-box;
+    animation: fadeIn 0.3s ease-out;
+
+    .pane-header {
+        h1 {
+            margin: 0 0 8px 0;
+            font-size: 1.75rem;
+            font-weight: 700;
+        }
+
+        p {
+            margin: 0;
+            font-size: 1rem;
+            color: var(--secondary-text-color);
+        }
+    }
+}
+
+.instruction-card {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    background: var(--background-color);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    padding: 32px;
+    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
+        0 4px 12px rgba(var(--black-rgb), 0.01);
+}
+
+.instruction-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+
+    .field-item {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        label {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+    }
+}
+
+.full-width {
+    width: 100%;
+}
+
+.section-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: auto;
+}

package/src/lib/app/personalization/sections/preferences/preferences-section.component.scss

@@ -0,0 +1,199 @@
+.preferences-container {
+    padding: 32px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    box-sizing: border-box;
+    animation: fadeIn 0.3s ease-out;
+
+    .pane-header {
+        h1 {
+            margin: 0 0 8px 0;
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--text-color);
+        }
+
+        p {
+            margin: 0;
+            font-size: 1rem;
+            color: var(--secondary-text-color);
+        }
+    }
+}
+
+.profile-card {
+    background: var(--background-color);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
+        0 4px 12px rgba(var(--black-rgb), 0.01);
+
+    .avatar-section {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+
+        .letter-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-color-rgb));
+            color: var(--white);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            font-weight: 700;
+            box-shadow: 0 8px 16px rgba(var(--primary-color-rgb), 0.3);
+            overflow: hidden;
+
+            &.has-image {
+                background: var(--border-color);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            .profile-img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        .user-main-info {
+            h2 {
+                margin: 0 0 4px 0;
+                font-size: 1.5rem;
+                font-weight: 700;
+                color: var(--text-color);
+            }
+
+            .role-badge {
+                margin: 0;
+                display: inline-block;
+                padding: 4px 10px;
+                background: rgba(var(--primary-color-rgb), 0.1);
+                color: var(--primary-color);
+                border-radius: 20px;
+                font-size: 0.75rem;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+        }
+    }
+
+    .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+
+        .info-item {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
+            label {
+                font-size: 0.75rem;
+                font-weight: 600;
+                text-transform: uppercase;
+                color: var(--secondary-text-color);
+                letter-spacing: 0.5px;
+            }
+
+            .info-value {
+                font-size: 1.05rem;
+                font-weight: 500;
+                color: var(--text-color);
+            }
+        }
+    }
+}
+
+.settings-list {
+    display: flex;
+    flex-direction: column;
+    background: var(--background-color);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
+        0 4px 12px rgba(var(--black-rgb), 0.01);
+}
+
+.settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
+    transition: background 0.2s ease;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .row-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .row-label {
+            font-size: 1.05rem;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+    }
+
+    .row-action {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+}
+
+.option-content,
+.selected-option-trigger {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        color: var(--secondary-text-color);
+    }
+
+    span {
+        font-size: 0.95rem;
+    }
+}
+
+.pill-btn {
+    background: none;
+    border: 1.5px solid rgba(var(--black-rgb), 0.15);
+    border-radius: 100px;
+    padding: 8px 24px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(var(--black-rgb), 0.05);
+        border-color: rgba(var(--black-rgb), 0.3);
+    }
+}
+
+.section-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: auto;
+}

package/src/lib/app/personalization/sections/terms/terms-section.component.scss

@@ -0,0 +1,74 @@
+.terms-container {
+    padding: 32px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    box-sizing: border-box;
+    animation: fadeIn 0.3s ease-out;
+
+    .pane-header {
+        h1 {
+            margin: 0 0 8px 0;
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--text-color);
+        }
+
+        .last-updated {
+            margin: 0;
+            font-size: 1rem;
+            color: var(--secondary-text-color);
+        }
+    }
+}
+
+.terms-card {
+    background: var(--background-color);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
+        0 4px 12px rgba(var(--black-rgb), 0.01);
+}
+
+.terms-content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    section {
+        h4 {
+            margin: 0 0 8px 0;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        p {
+            margin: 0;
+            line-height: 1.6;
+            font-size: 0.95rem;
+            color: var(--text-color);
+        }
+    }
+
+    .full-terms-link {
+        margin-top: 20px;
+        padding-top: 20px;
+        border-top: 1px solid rgba(var(--black-rgb), 0.05);
+
+        a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.95rem;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}

package/src/lib/doohbot.component.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@use './styles/material-override' as *;
+@use './styles/theme' as *;
+@use './theme/index.scss' as *;
+
+// Global base styles (since encapsulation is None, these apply globally)
+html,
+body {
+  height: 100%;
+  margin: 0;
+  color-scheme: light dark;
+}
+
+body {
+  font-family: var(--font-family, 'Roboto', 'Helvetica Neue', sans-serif);
+  color: var(--text-color);
+  background-color: var(--background-color);
+}

package/{projects/doohbot/src/lib/shared/chips/chips.scss → src/lib/shared/chips/chips.component.scss}

@@ -3,15 +3,17 @@
   flex-wrap: wrap;
   gap: 8px;
   padding: 10px;
+  font: var(--font-family);
 }
 
 .chip {
-  background-color: rgba(var(--primary-color-rgb), 0.2);
+  background-color: rgba(var(--primary-color), 0.2);
   border: 1px solid var(--primary-color);
   border-radius: 16px;
   padding: 6px 12px;
   cursor: pointer;
   font-size: 0.9rem;
+  font: var(--font-family);
   transition: background-color 0.3s ease;
   color: var(--text-color);
 }

package/src/lib/shared/dialog/dialog.component.scss

@@ -0,0 +1,90 @@
+.dialog-container {
+  padding: 0;
+  min-width: 320px;
+  max-width: 500px;
+
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 24px 16px;
+    margin-bottom: 0;
+
+    .dialog-icon {
+      font-size: 32px;
+      width: 32px;
+      height: 32px;
+      color: var(--primary-color);
+
+      &.warn-icon {
+        color: var(--red);
+      }
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--secondary-text-color);
+    }
+  }
+
+  mat-dialog-content {
+    padding: 0 24px 24px;
+    margin: 0;
+
+    .dialog-message {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--text-color);
+    }
+  }
+
+  mat-dialog-actions {
+    padding: 12px 24px 24px;
+    margin: 0;
+    gap: 12px;
+
+    .cancel-btn {
+      color: var(--secondary-text-color, var(--grey));
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--hover-bg);
+      }
+    }
+
+    .confirm-btn {
+      font-weight: 500;
+      transition: all 0.2s ease;
+
+      &.warn-btn {
+        background-color: var(--red);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--red);
+        }
+      }
+
+      &.primary-btn {
+        background-color: var(--primary-color);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--primary-color);
+        }
+      }
+
+      &.accent-btn {
+        background-color: var(--light-red);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--light-red);
+        }
+      }
+    }
+  }
+}

package/src/lib/shared/dropdown-menu/dropdown-menu.component.scss

@@ -0,0 +1,53 @@
+.dropdown-menu {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-menu summary {
+  list-style: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.dropdown-menu summary::-webkit-details-marker {
+  display: none;
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 8px 0 0 0;
+  padding: 8px 0;
+  width: 180px;
+  background: var(--background-color);
+  border-radius: 6px;
+  box-shadow: var(--border-shadow-color);
+  z-index: 1000;
+  list-style: none;
+}
+
+.dropdown-list::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 16px;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-bottom-color: var(--background-color);
+}
+
+.dropdown-list li a {
+  display: block;
+  padding: 8px 16px;
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.dropdown-list li a:hover {
+  background: var(--red);
+  color: var(--secondary-color);
+}