feat: redesign warning dialog — lock icon + title on same row

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 00:30:08 +05:30
parent 0d1429515a
commit 693ffed397
2 changed files with 149 additions and 7 deletions
@@ -5,3 +5,116 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
+
+$primary: #1a73e8;
+$primary-light: #e8f0fe;
+$amber: #f9ab00;
+$amber-light: #fef7e0;
+$gray-50: #f8f9fa;
+$gray-100: #f1f3f4;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
+$white: #fff;
+
+.warn-dialog {
+  display: flex;
+  flex-direction: column;
+  max-width: 480px;
+}
+
+// Header
+.warn-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 24px 14px;
+  border-bottom: 1px solid $gray-200;
+
+  &__icon-wrap {
+    width: 42px;
+    height: 42px;
+    border-radius: 10px;
+    background: $amber-light;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    i {
+      font-size: 20px;
+      color: $amber;
+    }
+  }
+
+  &__title {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 17px !important;
+    font-weight: 700 !important;
+    color: $gray-900;
+    letter-spacing: -0.2px;
+    line-height: 1.2;
+  }
+}
+
+// Body
+.warn-body {
+  padding: 18px 24px !important;
+  overflow: visible !important;
+  max-height: none !important;
+
+  &__text {
+    font-size: 13.5px;
+    line-height: 1.65;
+    color: $gray-700;
+    margin: 0 0 16px;
+  }
+
+  &__meta {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  &__meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: $gray-500;
+    background: $gray-50;
+    padding: 5px 10px;
+    border-radius: 6px;
+    border: 1px solid $gray-100;
+
+    i {
+      font-size: 12px;
+      color: #34a853;
+    }
+  }
+}
+
+// Actions
+.warn-actions {
+  padding: 12px 24px 18px !important;
+  border-top: 1px solid $gray-200;
+  margin: 0 !important;
+
+  &__btn {
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    padding: 0 24px !important;
+    height: 38px !important;
+    letter-spacing: 0.2px;
+    box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
+  }
+
+  &__btn-icon {
+    margin-right: 6px;
+    font-size: 12px;
+  }
+}