@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-connection-modal/wallet-connection-modal.component.scss

@@ -0,0 +1,678 @@
+/**
+ * @file wallet-connection-modal.component.scss
+ * @description Component-specific styles for wallet connection modal
+ */
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+ion-content {
+  --background: transparent;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  height: 100vh;
+  width: 100%;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+
+  &::part(scroll) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+  }
+}
+
+/* ============ Modal Container ============ */
+.modal-inner-content {
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  background: var(--glass-background, rgba(var(--ion-color-dark-rgb), 0.95));
+  border-radius: var(--border-radius-xl, 16px);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-2xl);
+  border: 1px solid var(--border-flat, rgba(var(--ion-color-light-rgb), 0.1));
+  overflow: hidden;
+  animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============ Header ============ */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg, 16px) var(--space-xl, 20px);
+  background: transparent;
+  flex-shrink: 0;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm, 8px);
+    flex: 1;
+
+    p {
+      margin: 0;
+      font-size: var(--font-size-2xl, 24px);
+      font-weight: var(--font-weight-bold, 700);
+      color: var(--ion-text-color);
+      line-height: 1.2;
+    }
+  }
+
+  .back-btn {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    margin: 0;
+
+    ion-icon {
+      font-size: 22px;
+      color: var(--ion-color-primary);
+    }
+  }
+
+  .close-modal {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    margin: 0;
+    cursor: pointer;
+
+    ion-icon {
+      font-size: 24px;
+      color: var(--ion-text-color);
+    }
+
+    &:hover:not(:disabled) {
+      transform: scale(1.05);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.95);
+    }
+  }
+}
+
+/* ============ Form Content Area ============ */
+.form {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-xl, 20px) var(--space-xl, 20px) var(--space-xl, 20px);
+  background: transparent;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--surface-flat, rgba(var(--ion-color-light-rgb), 0.05));
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(var(--ion-color-light-rgb), 0.2);
+    border-radius: 4px;
+
+    &:hover {
+      background: rgba(var(--ion-color-light-rgb), 0.3);
+    }
+  }
+}
+
+/* ============ Responsive Design ============ */
+@media (min-width: 768px) {
+  .modal-inner-content {
+    width: 80%;
+    max-width: 700px;
+    border-radius: 20px;
+  }
+
+  .header {
+    padding: 20px 24px;
+  }
+
+  .dao-header {
+    margin: 0 24px 24px 24px;
+  }
+
+  .form {
+    padding: 0 24px 24px 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-inner-content {
+    width: 95%;
+    max-height: 85vh;
+  }
+
+  .header {
+    padding: 14px 16px;
+  }
+
+  .dao-header {
+    margin: 0 16px 20px 16px;
+  }
+
+  .form {
+    padding: 0 16px 16px 16px;
+  }
+}
+
+// DAO Header - Step Progress
+.dao-header {
+  margin: 0 var(--space-xl, 20px) var(--token-space-6, 24px) var(--space-xl, 20px);
+  padding: var(--token-space-4, 16px);
+  background: var(--token-surface-2, var(--surface-flat, rgba(var(--ion-color-light-rgb), 0.05)));
+  border: var(--token-border-width-1, 1px) solid
+    var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), 0.1)));
+  border-radius: var(--token-radius-3, 12px);
+  box-shadow: var(--token-elevation-1, var(--shadow-sm));
+  flex-shrink: 0;
+  animation: fadeIn var(--token-transition-slow, 0.3s) ease;
+
+  .step-progress {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .step-indicator {
+      display: flex;
+      align-items: center;
+
+      .step-circle {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--token-radius-full, 50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--token-surface-3, rgba(var(--ion-color-light-rgb), 0.1));
+        color: var(--ion-text-color);
+        font-weight: var(--token-font-weight-semibold, 600);
+        font-size: var(--token-font-size-2, 14px);
+        border: var(--token-border-width-1, 1px) solid
+          var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), 0.2)));
+        transition: all var(--token-transition-slow, 0.3s)
+          var(--token-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+
+        &.active {
+          background: var(--ion-color-primary);
+          color: var(--ion-color-primary-contrast);
+          border-color: var(--ion-color-primary);
+          transform: scale(1.1);
+          box-shadow: 0 0 0 4px rgba(var(--ion-color-primary-rgb), 0.2);
+        }
+
+        &.completed {
+          background: var(--ion-color-success);
+          color: var(--ion-color-success-contrast);
+          border-color: var(--ion-color-success);
+          transform: scale(1.05);
+        }
+
+        &:hover:not(.active):not(.completed) {
+          transform: scale(1.05);
+          background: rgba(var(--ion-color-light-rgb), 0.15);
+        }
+
+        ion-icon {
+          font-size: 20px;
+        }
+      }
+
+      .step-line {
+        width: 40px;
+        height: var(--token-border-width-2, 2px);
+        background: var(
+          --border-flat,
+          var(--token-border-subtle, rgba(var(--ion-color-light-rgb), 0.2))
+        );
+        margin: 0 var(--token-space-2, 8px);
+        transition: all var(--token-transition-slow, 0.3s) ease;
+
+        &.active {
+          background: var(--ion-color-success);
+          box-shadow: 0 0 8px rgba(var(--ion-color-success-rgb), 0.5);
+        }
+      }
+    }
+  }
+}
+
+.membership-section {
+  margin-bottom: var(--token-space-6, 24px);
+  animation: fadeIn var(--token-transition-slow, 0.3s) ease;
+
+  .explanation {
+    margin-bottom: var(--token-space-4, 16px);
+
+    h3 {
+      font-size: var(--token-font-size-3, 16px);
+      font-weight: var(--token-font-weight-medium, 500);
+      color: var(--ion-text-color);
+      line-height: var(--token-line-height-tight, 1.3);
+      margin: 0 0 var(--token-space-2, 8px) 0;
+    }
+
+    p {
+      font-size: var(--token-font-size-2, 14px);
+      color: var(--ion-color-medium);
+      line-height: var(--token-line-height-normal, 1.4);
+      margin: 0;
+    }
+  }
+
+  // Options Grid (for networks and ledgers)
+  .options-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--token-space-3, 12px);
+
+    ion-card {
+      margin: 0;
+      background: var(--token-surface-3, rgba(var(--ion-color-light-rgb), 0.05));
+      border: 1px solid
+        var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), 0.1)));
+      border-radius: var(--token-radius-3, 12px);
+      transition: all var(--token-transition-normal, 0.2s) ease;
+      cursor: pointer;
+      box-shadow: var(--token-elevation-1, var(--shadow-sm));
+
+      &:hover {
+        transform: translateY(-2px);
+        background: var(--token-surface-hover, rgba(var(--ion-color-light-rgb), 0.08));
+        border-color: var(--border-flat, rgba(var(--ion-color-light-rgb), 0.2));
+        box-shadow: var(--token-elevation-2, var(--shadow-md));
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &.selected {
+        border: 2px solid var(--ion-color-primary);
+        background: rgba(var(--ion-color-primary-rgb), 0.1);
+        box-shadow: 0 0 0 4px rgba(var(--ion-color-primary-rgb), 0.1);
+      }
+
+      ion-card-content {
+        text-align: center;
+        padding: var(--token-space-5, 20px);
+
+        .option-icon {
+          margin-bottom: var(--token-space-3, 12px);
+
+          ion-icon {
+            font-size: 40px;
+            color: var(--ion-color-primary);
+            transition: transform var(--token-transition-fast, 0.15s) ease;
+          }
+        }
+
+        h3 {
+          font-size: var(--token-font-size-3, 16px);
+          font-weight: var(--token-font-weight-medium, 500);
+          margin: 0 0 var(--token-space-2, 6px) 0;
+          color: var(--ion-text-color);
+        }
+
+        p {
+          font-size: var(--token-font-size-1, 13px);
+          color: var(--ion-color-medium);
+          margin: 0 0 var(--token-space-2, 8px) 0;
+          line-height: var(--token-line-height-tight, 1.3);
+        }
+      }
+
+      &:hover .option-icon ion-icon {
+        transform: scale(1.1) rotate(5deg);
+      }
+    }
+  }
+
+  // Options List (for protocols)
+  .options-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--token-space-3, 12px);
+
+    ion-card {
+      margin: 0;
+      background: var(--token-surface-3, rgba(var(--ion-color-light-rgb), 0.05));
+      border: 1px solid
+        var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), 0.1)));
+      border-radius: var(--token-radius-3, 12px);
+      transition: all var(--token-transition-normal, 0.2s) ease;
+      cursor: pointer;
+      box-shadow: var(--token-elevation-1, var(--shadow-sm));
+
+      &:hover {
+        transform: translateX(4px);
+        background: var(--token-surface-hover, rgba(var(--ion-color-light-rgb), 0.08));
+        border-color: var(--border-flat, rgba(var(--ion-color-light-rgb), 0.2));
+        box-shadow: var(--token-elevation-2, var(--shadow-md));
+      }
+
+      &:active {
+        transform: translateX(2px);
+      }
+
+      &.selected {
+        border: 2px solid var(--ion-color-primary);
+        background: rgba(var(--ion-color-primary-rgb), 0.1);
+        box-shadow: 0 0 0 4px rgba(var(--ion-color-primary-rgb), 0.1);
+      }
+
+      ion-card-content {
+        padding: var(--token-space-4, 16px);
+
+        .protocol-header {
+          display: flex;
+          align-items: center;
+          gap: var(--token-space-3, 12px);
+          margin-bottom: var(--token-space-3, 12px);
+
+          .option-icon {
+            ion-icon {
+              font-size: 36px;
+              color: var(--ion-color-primary);
+              transition: transform var(--token-transition-fast, 0.15s) ease;
+            }
+          }
+
+          .protocol-info {
+            flex: 1;
+            min-width: 0;
+
+            h3 {
+              font-size: var(--token-font-size-3, 16px);
+              font-weight: var(--token-font-weight-medium, 500);
+              margin: 0 0 var(--token-space-1, 4px) 0;
+              color: var(--ion-text-color);
+            }
+
+            p {
+              font-size: var(--token-font-size-1, 13px);
+              color: var(--ion-color-medium);
+              margin: 0;
+              line-height: var(--token-line-height-tight, 1.3);
+            }
+          }
+        }
+
+        .feature-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+
+          li {
+            display: flex;
+            align-items: center;
+            gap: var(--token-space-2, 8px);
+            padding: var(--token-space-1, 4px) 0;
+            font-size: var(--token-font-size-1, 13px);
+            color: var(--ion-text-color);
+            line-height: var(--token-line-height-normal, 1.4);
+
+            ion-icon {
+              font-size: var(--token-space-4, 16px);
+              flex-shrink: 0;
+              color: var(--ion-color-success);
+            }
+          }
+        }
+      }
+
+      &:hover .protocol-header .option-icon ion-icon {
+        transform: scale(1.1) rotate(5deg);
+      }
+    }
+  }
+
+  // Connection Progress State
+  &.connection-progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+
+    .status-info {
+      text-align: center;
+      padding: var(--token-space-6, 24px);
+
+      ion-spinner {
+        font-size: 48px;
+        margin-bottom: var(--token-space-4, 16px);
+        color: var(--ion-color-primary);
+      }
+
+      h3 {
+        font-size: var(--token-font-size-4, 18px);
+        font-weight: var(--token-font-weight-medium, 500);
+        margin: 0 0 var(--token-space-2, 8px) 0;
+        color: var(--ion-text-color);
+      }
+
+      p {
+        font-size: var(--token-font-size-2, 14px);
+        color: var(--ion-color-medium);
+        margin: 0;
+        max-width: 300px;
+        line-height: var(--token-line-height-normal, 1.4);
+      }
+    }
+  }
+
+  .error-section {
+    padding: var(--token-space-3, 12px);
+    background: rgba(var(--ion-color-danger-rgb), 0.1);
+    border: 1px solid rgba(var(--ion-color-danger-rgb), 0.2);
+    border-radius: var(--token-radius-2, 8px);
+
+    ion-item {
+      --background: transparent;
+      --padding-start: 0;
+      --inner-padding-end: 0;
+
+      ion-icon {
+        font-size: var(--token-space-6, 24px);
+      }
+
+      ion-label {
+        h3 {
+          font-size: var(--token-font-size-3, 16px);
+          font-weight: var(--token-font-weight-medium, 500);
+          color: var(--ion-color-danger);
+          margin: 0 0 var(--token-space-1, 4px) 0;
+        }
+
+        p {
+          font-size: var(--token-font-size-1, 13px);
+          color: var(--ion-color-medium);
+          margin: 0;
+          line-height: var(--token-line-height-tight, 1.3);
+        }
+      }
+    }
+  }
+}
+
+// Step Content - Smooth Transitions
+.step-content {
+  animation: stepFadeIn var(--token-transition-normal, 0.25s)
+    var(--token-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+// Direct Selection Enhancement
+// Cards with direct-select class have enhanced visual feedback
+.direct-select {
+  ion-card {
+    position: relative;
+    overflow: hidden;
+
+    // Subtle arrow indicator showing "click to proceed"
+    &::after {
+      content: '';
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) translateX(0);
+      width: 0;
+      height: 0;
+      border-left: 6px solid var(--ion-color-primary);
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      opacity: 0;
+      transition: all var(--token-transition-fast, 0.15s) ease;
+    }
+
+    &:hover::after {
+      opacity: 0.6;
+      transform: translateY(-50%) translateX(4px);
+    }
+
+    // Enhanced hover state for direct selection
+    &:hover {
+      border-color: rgba(var(--ion-color-primary-rgb), 0.4);
+
+      .option-icon ion-icon {
+        color: var(--ion-color-primary);
+      }
+    }
+
+    // Active/pressed state feedback
+    &:active {
+      transform: scale(0.98);
+      background: rgba(var(--ion-color-primary-rgb), 0.15) !important;
+    }
+  }
+
+  // Grid layout cards (Network, Ledger) - position arrow differently
+  &.options-grid ion-card::after {
+    right: 8px;
+    top: 16px;
+    transform: translateY(0) translateX(0);
+  }
+
+  &.options-grid ion-card:hover::after {
+    transform: translateY(0) translateX(4px);
+  }
+}
+
+// Animations
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stepFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Step indicator animation for dynamic step changes
+@keyframes stepPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--ion-color-primary-rgb), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(var(--ion-color-primary-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--ion-color-primary-rgb), 0);
+  }
+}
+
+.step-progress .step-indicator .step-circle.active {
+  animation: stepPulse 1.5s ease-out infinite;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .membership-section {
+    .options-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  // Smaller step indicators on mobile
+  .dao-header .step-progress .step-indicator {
+    .step-circle {
+      width: 28px;
+      height: 28px;
+      font-size: 12px;
+    }
+
+    .step-line {
+      width: 24px;
+    }
+  }
+}
+
+// Reduced Motion Support
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  @keyframes fadeIn {
+    from,
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes stepFadeIn {
+    from,
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes stepPulse {
+    from,
+    to {
+      box-shadow: none;
+    }
+  }
+}