Skip to content

HTML Popup Pages Styling #44

Open
Open
HTML Popup Pages Styling#44
Assignees
tranvanhai0504
@terranweb3

Description

@terranweb3
terranweb3
opened on Aug 24, 2025

📋 Overview

Styling and improving the interface of HTML popup pages for wallet actions such as connect, sign, send transaction to create a better user experience and modern interface.

🎯 Objectives

Primary Goals

  • ✅ Improve styling for HTML popup pages
  • ✅ Create consistent interface across pages
  • ✅ Add smooth animations and transitions
  • ✅ Optimize responsive design for popups
  • ✅ Improve UX/UI for wallet actions

Secondary Goals

  • 🔄 Add loading states and feedback
  • 🔄 Improve accessibility
  • 🔄 Optimize performance
  • 🔄 Add micro-interactions

🏗️ Current State Analysis

HTML Popup Pages

  • main.html - Main wallet page (375x600px)
  • connect.html - dApp connection page (responsive)
  • sign.html - Message signing page (375x600px)
  • transaction.html - Transaction sending page (375x600px)
  • import.html - Wallet import page
  • onboarding.html - Onboarding page
  • unsupported-chain.html - Unsupported chain page

Current Issues

  • Basic styling, lacks polish
  • No smooth animations
  • Missing loading states
  • Responsive design not optimized
  • No micro-interactions

🔧 Implementation Tasks

Phase 1: Base HTML Styling

Task 1.1: Enhanced HTML Structure

  • Improve HTML structure for all popup pages
  • Add meta tags for SEO and performance
  • Optimize viewport settings
  • Add preload for critical resources

Files to modify:

  • html/main.html
  • html/connect.html
  • html/sign.html
  • html/transaction.html
  • html/import.html
  • html/onboarding.html
  • html/unsupported-chain.html

Enhanced HTML Template:

<!DOCTYPE html>
<html lang="en" translate="no">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="google" content="notranslate" />
    <meta name="translate" content="no" />
    <meta http-equiv="Content-Language" content="en" />
    <meta name="theme-color" content="#009487" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    
    <!-- Preload critical resources -->
    <link rel="preload" href="/src/client/globals.css" as="style" />
    <link rel="preload" href="/src/client/screens/main/index.tsx" as="script" />
    
    <title>Purro | Wallet</title>
    
    <!-- Enhanced base styling -->
    <style>
      /* Reset and base styles */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      html {
        font-size: 16px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      body {
        width: 375px;
        height: 600px;
        margin: 0;
        padding: 0;
        font-family: "Livvic", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: linear-gradient(135deg, #0f1b1f 0%, #103a39 100%);
        color: #f1f7f6;
        overflow: hidden;
        position: relative;
      }
      
      /* Loading animation */
      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #0f1b1f 0%, #103a39 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        animation: fadeOut 0.5s ease-out 1s forwards;
      }
      
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(0, 247, 218, 0.2);
        border-top: 3px solid #00f7da;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes fadeOut {
        to { opacity: 0; visibility: hidden; }
      }
      
      /* Smooth transitions */
      .fade-in {
        animation: fadeIn 0.3s ease-out;
      }
      
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      /* Responsive adjustments */
      @media (max-width: 375px) {
        body {
          width: 100vw;
          height: 100vh;
        }
      }
    </style>
    
    <link rel="stylesheet" href="/src/client/globals.css" />
  </head>
  <body class="notranslate">
    <!-- Loading screen -->
    <div class="loading-screen">
      <div class="loading-spinner"></div>
    </div>
    
    <!-- Main content -->
    <div id="root" translate="no" class="fade-in"></div>
    
    <script type="module" src="/src/client/screens/main/index.tsx"></script>
  </body>
</html>

Task 1.2: Responsive Design System

  • Create responsive breakpoints for popup pages
  • Add mobile-first approach
  • Optimize for different screen sizes
  • Add touch-friendly interactions

Responsive CSS:

/* Responsive Design System */
:root {
  --popup-width: 375px;
  --popup-height: 600px;
  --popup-padding: 16px;
  --popup-border-radius: 16px;
}

/* Mobile First */
.popup-container {
  width: 100vw;
  height: 100vh;
  max-width: var(--popup-width);
  max-height: var(--popup-height);
  margin: 0 auto;
  padding: var(--popup-padding);
  border-radius: var(--popup-border-radius);
  overflow: hidden;
}

/* Tablet */
@media (min-width: 768px) {
  .popup-container {
    --popup-padding: 24px;
    --popup-border-radius: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .popup-container {
    --popup-padding: 32px;
    --popup-border-radius: 24px;
  }
}

Phase 2: Page-Specific Enhancements

Task 2.1: Connect Page Styling

  • Improve connect page interface
  • Add animations for dApp info
  • Optimize button styling
  • Add loading states

Connect Page Enhancements:

<!-- Enhanced connect.html -->
<style>
  .connect-page {
    background: linear-gradient(135deg, #0f1b1f 0%, #103a39 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .dapp-info {
    background: rgba(16, 58, 57, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin: 16px;
    animation: slideInUp 0.5s ease-out;
  }
  
  .dapp-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
  
  .action-buttons {
    display: flex;
    gap: 12px;
    margin: 16px;
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #009487 0%, #00f7da 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
  }
  
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 247, 218, 0.3);
  }
  
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

Task 2.2: Sign Page Styling

  • Improve sign message page interface
  • Add message preview styling
  • Optimize signature display
  • Add security indicators

Sign Page Enhancements:

<!-- Enhanced sign.html -->
<style>
  .sign-page {
    background: linear-gradient(135deg, #0f1b1f 0%, #103a39 100%);
    min-height: 100vh;
    padding: 16px;
  }
  
  .message-preview {
    background: rgba(16, 58, 57, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    animation: fadeIn 0.5s ease-out;
  }
  
  .message-content {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .security-warning {
    background: rgba(255, 164, 143, 0.1);
    border: 1px solid rgba(255, 164, 143, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    color: #ffa48f;
    font-size: 14px;
  }
</style>

Task 2.3: Transaction Page Styling

  • Improve transaction page interface
  • Add transaction details styling
  • Optimize gas fee display
  • Add transaction status indicators

Transaction Page Enhancements:

<!-- Enhanced transaction.html -->
<style>
  .transaction-page {
    background: linear-gradient(135deg, #0f1b1f 0%, #103a39 100%);
    min-height: 100vh;
    padding: 16px;
  }
  
  .transaction-details {
    background: rgba(16, 58, 57, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
  }
  
  .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .detail-row:last-child {
    border-bottom: none;
  }
  
  .gas-fee-display {
    background: rgba(0, 247, 218, 0.1);
    border: 1px solid rgba(0, 247, 218, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
  }
  
  .transaction-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    margin: 16px 0;
  }
  
  .status-pending {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
  }
  
  .status-success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #4caf50;
  }
</style>

Phase 3: Advanced Features

Task 3.1: Loading States & Animations

  • Add loading animations for all pages
  • Create skeleton loading states
  • Add progress indicators
  • Implement smooth page transitions

Loading States:

/* Loading States */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.page-transition {
  animation: pageTransition 0.3s ease-out;
}

@keyframes pageTransition {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Task 3.2: Micro-Interactions

  • Add hover effects for buttons
  • Implement focus states
  • Add click feedback
  • Create smooth transitions

Micro-Interactions:

/* Micro-Interactions */
.btn {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 247, 218, 0.2);
}

.btn:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

🧪 Testing Strategy

Visual Testing

  • Test on different screen sizes
  • Verify animations work smoothly
  • Check responsive behavior
  • Test loading states

Interaction Testing

  • Test button interactions
  • Verify form submissions
  • Test error states
  • Check accessibility

Performance Testing

  • Measure page load times
  • Test animation performance
  • Check memory usage
  • Verify smooth scrolling

📊 Success Metrics

Visual Quality

  • Consistent styling across all pages
  • Smooth animations (60fps)
  • Modern glassmorphism effects
  • Responsive design working

User Experience

  • Faster page load times
  • Better accessibility scores
  • Improved user feedback
  • Reduced user errors

Performance

  • Page load time < 500ms
  • Animation performance > 60fps
  • Memory usage optimization
  • Smooth interactions

🛠️ Development Commands

# Build with new styling
pnpm run build

# Development with hot reload
pnpm run dev

# Test HTML pages
pnpm run test:html

# Lint HTML
pnpm run lint:html

📋 Implementation Checklist

Phase 1: Foundation

  • Enhance HTML structure
  • Add responsive design system
  • Implement base styling
  • Add loading animations

Phase 2: Pages

  • Style connect page
  • Style sign page
  • Style transaction page
  • Style other pages

Phase 3: Advanced

  • Add micro-interactions
  • Implement loading states
  • Create smooth transitions
  • Optimize performance

Note: This task focuses on improving the interface and user experience for HTML popup pages of wallet actions.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Purro Extension

Status

In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions