Skip to content

Commit 1659358

Browse files
salazarsebassalazarsebas
authored
Merge pull request #40 from pushkarm029/tailwind
[feat] Add Tailwind
2 parents 386cfb0 + 083d137 commit 1659358

6 files changed

Lines changed: 210 additions & 112 deletions

File tree

‎apps/frontend/src/app/app.css‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
1-
.editor-container {
2-
margin-top: 2rem;
3-
width: 100%;
4-
max-width: 800px;
5-
}
1+
/* App-specific utilities - using Tailwind apply directive for complex styles */
62

7-
.editor-container h3 {
8-
color: var(--gray-900);
9-
margin-bottom: 1rem;
10-
font-size: 1.5rem;
11-
font-weight: 500;
3+
/* App container styles */
4+
.app-container {
5+
@apply h-full min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-800;
126
}
137

14-
.content {
15-
flex-direction: column !important;
16-
max-width: 1200px !important;
17-
align-items: flex-start !important;
8+
.editor-layout {
9+
@apply max-w-7xl mx-auto w-full h-full flex flex-col;
1810
}
1911

20-
.left-side {
21-
width: 100% !important;
22-
max-width: none !important;
12+
/* Custom focus styles for better accessibility */
13+
.focus-ring {
14+
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900;
2315
}
2416

25-
@media screen and (max-width: 650px) {
26-
.editor-container {
27-
width: 100%;
28-
}
17+
/* Smooth transitions for interactive elements */
18+
.transition-smooth {
19+
@apply transition-all duration-200 ease-in-out;
2920
}

‎apps/frontend/src/app/app.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<router-outlet />
1+
<div class="app-container">
2+
<div class="editor-layout">
3+
<router-outlet />
4+
</div>
5+
</div>

‎apps/frontend/src/app/components/editor/editor.component.css‎

Lines changed: 44 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
/* Editor Container Styles */
2-
.editor-container {
3-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4-
}
5-
6-
/* Monaco Editor Custom Styles */
7-
:host ::ng-deep .monaco-editor {
8-
padding-top: 10px;
9-
}
10-
1+
/* Monaco Editor Deep Styling */
112
:host ::ng-deep .monaco-editor .margin {
123
background-color: #1f2937;
134
}
@@ -16,76 +7,64 @@
167
background-color: #111827;
178
}
189

19-
/* Loading Animation */
20-
@keyframes spin {
21-
to {
22-
transform: rotate(360deg);
23-
}
10+
:host ::ng-deep .monaco-editor .current-line {
11+
background-color: rgba(59, 130, 246, 0.1) !important;
2412
}
2513

26-
.animate-spin {
27-
animation: spin 1s linear infinite;
14+
/* Custom Button Ripple Effect */
15+
.btn-ripple {
16+
@apply relative overflow-hidden transform-gpu;
2817
}
2918

30-
/* Button Hover Effects */
31-
button {
32-
position: relative;
33-
overflow: hidden;
19+
.btn-ripple::before {
20+
content: '';
21+
@apply absolute top-1/2 left-1/2 w-0 h-0 rounded-full bg-white/10 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500;
3422
}
3523

36-
button::before {
37-
content: '';
38-
position: absolute;
39-
top: 50%;
40-
left: 50%;
41-
width: 0;
42-
height: 0;
43-
border-radius: 50%;
44-
background: rgba(255, 255, 255, 0.1);
45-
transform: translate(-50%, -50%);
46-
transition: width 0.6s, height 0.6s;
24+
.btn-ripple:hover::before {
25+
@apply w-72 h-72;
4726
}
4827

49-
button:hover::before {
50-
width: 300px;
51-
height: 300px;
28+
/* Enhanced Editor Header */
29+
.editor-header-gradient {
30+
@apply bg-gradient-to-r from-gray-800 via-gray-800/95 to-gray-800 backdrop-blur-sm;
31+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
5232
}
5333

54-
/* Responsive Design */
55-
@media (max-width: 768px) {
56-
.editor-header {
57-
padding: 1rem;
58-
}
59-
60-
.editor-header h2 {
61-
font-size: 1rem;
62-
}
63-
64-
.editor-header p {
65-
display: none;
66-
}
67-
68-
button span {
69-
display: none;
70-
}
71-
72-
button {
73-
padding: 0.5rem 1rem;
34+
/* Status bar enhancements */
35+
.status-bar-glass {
36+
@apply backdrop-blur-md bg-gray-800/80 border-t border-gray-700/50;
37+
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
/* Loading state enhancements */
41+
.loading-backdrop {
42+
@apply absolute inset-0 bg-gray-900/20 backdrop-blur-sm flex items-center justify-center z-10;
43+
}
44+
45+
/* Responsive button text hiding */
46+
@media (min-width: 768px) {
47+
.btn-text-hidden {
48+
@apply hidden;
7449
}
7550
}
7651

77-
/* Accessibility */
78-
button:focus {
79-
outline: 2px solid #3b82f6;
80-
outline-offset: 2px;
52+
.btn-text-shown {
53+
@apply block;
54+
}
55+
56+
@media (min-width: 768px) {
57+
.btn-text-shown {
58+
@apply inline;
59+
}
8160
}
8261

83-
button:focus:not(:focus-visible) {
84-
outline: none;
62+
/* Focus ring for accessibility */
63+
.focus-ring-editor {
64+
@apply focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg;
8565
}
8666

87-
/* Editor Footer */
88-
.editor-footer {
89-
backdrop-filter: blur(10px);
90-
background-color: rgba(31, 41, 55, 0.95);
67+
/* Code syntax highlighting enhancements */
68+
.code-highlight {
69+
@apply font-mono text-sm leading-relaxed;
9170
}

‎apps/frontend/src/app/components/editor/editor.component.html‎

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
<div class="editor-container h-screen flex flex-col bg-gray-900">
1+
<div class="editor-container h-screen flex flex-col relative bg-gray-900">
22
<!-- Header with title and actions -->
3-
<div class="editor-header bg-gray-800 px-6 py-4 border-b border-gray-700">
3+
<div class="editor-header editor-header-gradient px-4 sm:px-6 py-4 border-b border-gray-700/50">
44
<div class="flex items-center justify-between">
5-
<div>
6-
<h2 class="text-xl font-semibold text-white">Soroban Smart Contract Editor</h2>
7-
<p class="text-sm text-gray-400 mt-1">Write and test your Rust smart contracts</p>
5+
<div class="flex items-center space-x-4">
6+
<div class="hidden sm:flex w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg items-center justify-center">
7+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
8+
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
9+
</svg>
10+
</div>
11+
<div>
12+
<h2 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Soroban Smart Contract Editor</h2>
13+
<p class="text-sm text-gray-300 mt-1 hidden sm:block">Write and test your Rust smart contracts</p>
14+
</div>
815
</div>
916

10-
<div class="flex gap-3" role="toolbar" aria-label="Editor actions">
17+
<div class="flex gap-2 sm:gap-3" role="toolbar" aria-label="Editor actions">
1118
<button
1219
(click)="onCompile()"
1320
[disabled]="isLoading || !code.trim()"
14-
class="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2"
15-
[class.opacity-50]="isLoading"
21+
class="btn-ripple focus-ring-editor px-4 sm:px-6 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg disabled:from-gray-600 disabled:to-gray-600 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95"
22+
[class.opacity-75]="isLoading"
23+
[class.animate-pulse]="isLoading"
1624
aria-label="Compile Rust smart contract"
1725
[attr.aria-busy]="isLoading"
1826
>
@@ -23,14 +31,15 @@ <h2 class="text-xl font-semibold text-white">Soroban Smart Contract Editor</h2>
2331
<svg *ngIf="!isLoading" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2432
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
2533
</svg>
26-
<span>{{ isLoading ? 'Compiling...' : 'Compile' }}</span>
34+
<span class="btn-text-shown">{{ isLoading ? 'Compiling...' : 'Compile' }}</span>
2735
</button>
2836

2937
<button
3038
(click)="onTest()"
3139
[disabled]="isLoading || !code.trim()"
32-
class="px-6 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2"
33-
[class.opacity-50]="isLoading"
40+
class="btn-ripple focus-ring-editor px-4 sm:px-6 py-2 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-medium rounded-lg disabled:from-gray-600 disabled:to-gray-600 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95"
41+
[class.opacity-75]="isLoading"
42+
[class.animate-pulse]="isLoading"
3443
aria-label="Test Rust smart contract"
3544
[attr.aria-busy]="isLoading"
3645
>
@@ -41,7 +50,7 @@ <h2 class="text-xl font-semibold text-white">Soroban Smart Contract Editor</h2>
4150
<svg *ngIf="!isLoading" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
4251
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
4352
</svg>
44-
<span>{{ isLoading ? 'Testing...' : 'Test' }}</span>
53+
<span class="btn-text-shown">{{ isLoading ? 'Testing...' : 'Test' }}</span>
4554
</button>
4655
</div>
4756
</div>
@@ -51,29 +60,47 @@ <h2 class="text-xl font-semibold text-white">Soroban Smart Contract Editor</h2>
5160
<div class="flex-1 overflow-hidden" role="main" aria-label="Code editor">
5261
<ngx-monaco-editor
5362
*ngIf="isBrowser"
54-
class="h-full"
63+
class="h-full w-full"
5564
[(ngModel)]="code"
5665
[options]="editorOptions"
5766
></ngx-monaco-editor>
58-
<div *ngIf="!isBrowser" class="h-full flex items-center justify-center bg-gray-800 text-gray-400">
59-
Loading editor...
67+
<div *ngIf="!isBrowser" class="h-full w-full flex flex-col items-center justify-center bg-gray-800 text-gray-400">
68+
<svg class="animate-spin h-8 w-8 text-blue-500 mx-auto mb-4" fill="none" viewBox="0 0 24 24">
69+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
70+
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
71+
</svg>
72+
<p class="text-sm font-medium">Loading editor...</p>
6073
</div>
6174
</div>
6275

6376
<!-- Status bar -->
64-
<div class="editor-footer bg-gray-800 px-6 py-2 border-t border-gray-700" role="status" aria-live="polite" aria-label="Editor status">
77+
<div class="editor-footer status-bar-glass px-4 sm:px-6 py-3" role="status" aria-live="polite" aria-label="Editor status">
6578
<div class="flex items-center justify-between text-sm">
66-
<div class="flex items-center gap-4 text-gray-400">
67-
<span class="flex items-center gap-1">
79+
<div class="flex items-center gap-4 sm:gap-6 text-gray-300">
80+
<span class="flex items-center gap-2 bg-orange-500/20 text-orange-300 px-2 py-1 rounded-md">
6881
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
6982
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
7083
</svg>
71-
Rust
84+
<span class="font-medium">Rust</span>
85+
</span>
86+
<span class="flex items-center gap-1 text-gray-400">
87+
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
88+
<path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4z"/>
89+
</svg>
90+
UTF-8
7291
</span>
73-
<span>UTF-8</span>
7492
</div>
75-
<div class="text-gray-400">
76-
<span *ngIf="code">{{ code.split('\n').length }} lines</span>
93+
<div class="flex items-center gap-4 text-gray-300">
94+
<span *ngIf="code" class="flex items-center gap-1 bg-gray-700/50 px-2 py-1 rounded-md">
95+
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
96+
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
97+
</svg>
98+
<span class="font-mono text-xs">{{ code.split('\n').length }} lines</span>
99+
</span>
100+
<span class="hidden sm:flex items-center gap-1 text-xs text-gray-500">
101+
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
102+
Ready
103+
</span>
77104
</div>
78105
</div>
79106
</div>

‎apps/frontend/src/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="h-full">
33
<head>
44
<meta charset="utf-8">
55
<title>Online Soroban Compiler 📟 - Scaffold Rust</title>
66
<base href="/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" type="image/x-icon" href="Scaffold-Rust-Logo.jpg">
9+
<meta name="description" content="Online Soroban smart contract compiler and editor for Rust development">
10+
<meta name="theme-color" content="#111827">
911
</head>
10-
<body>
11-
<app-root></app-root>
12+
<body class="h-full bg-gray-900 text-gray-100 font-inter antialiased">
13+
<app-root class="h-full block"></app-root>
1214
</body>
1315
</html>

0 commit comments

Comments
 (0)