Skip to content

Commit 509500a

Browse files
teddavteddav
committed
update design: more caliente
1 parent 88bf7e1 commit 509500a

File tree

5 files changed

+109
-71
lines changed

5 files changed

+109
-71
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ If there's no match: no one ever knows.
3434

3535
## Run
3636

37+
### Noir circuit
38+
39+
The Noir circuit is really simple, in order to make proving faster. Compiled with `nargo 1.0.0-beta.3`, it has 188 gates.
40+
3741
### MPC server
3842

3943
You'll need a powerful server to compute the proofs fast. I'm renting an Hetzner's CCX33 (8 vcpus, 32GB) and each proof takes about 450ms to generate.

‎web-app/src/pages/Matches.tsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,25 +56,27 @@ export default function Matches() {
5656

5757
if (loading) {
5858
return (
59-
<div className="bg-white rounded-lg shadow-lg p-6">
60-
<h2 className="text-2xl font-semibold text-gray-800 mb-6">Loading Matches...</h2>
59+
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-8 border border-pink-100">
60+
<h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-6">
61+
Loading Matches... 💫
62+
</h2>
6163
<div className="animate-pulse space-y-4">
62-
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
63-
<div className="h-4 bg-gray-200 rounded"></div>
64-
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
64+
<div className="h-4 bg-gradient-to-r from-pink-100 to-purple-100 rounded-xl w-3/4"></div>
65+
<div className="h-4 bg-gradient-to-r from-pink-100 to-purple-100 rounded-xl"></div>
66+
<div className="h-4 bg-gradient-to-r from-pink-100 to-purple-100 rounded-xl w-5/6"></div>
6567
</div>
6668
</div>
6769
);
6870
}
6971

7072
if (error) {
7173
return (
72-
<div className="bg-white rounded-lg shadow-lg p-6">
73-
<h2 className="text-2xl font-semibold text-gray-800 mb-6">Error</h2>
74-
<div className="p-4 bg-red-50 text-red-700 rounded-md">{error}</div>
74+
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-8 border border-pink-100">
75+
<h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-6">Oops! 💔</h2>
76+
<div className="p-4 bg-red-50 text-red-700 rounded-xl border border-red-100 mb-6">{error}</div>
7577
<button
7678
onClick={computeNewMatches}
77-
className="mt-4 w-full py-2 px-4 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors"
79+
className="w-full py-3 px-6 rounded-xl transition-all duration-300 bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-600 hover:to-purple-600 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
7880
>
7981
Try Again
8082
</button>
@@ -84,12 +86,14 @@ export default function Matches() {
8486

8587
if (matches.length === 0) {
8688
return (
87-
<div className="bg-white rounded-lg shadow-lg p-6">
88-
<h2 className="text-2xl font-semibold text-gray-800 mb-6">No Matches Yet</h2>
89-
<p className="text-gray-600 mb-6">Click the button below to check for matches!</p>
89+
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-8 border border-pink-100">
90+
<h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-6">
91+
No Matches Yet 💭
92+
</h2>
93+
<p className="text-gray-600 mb-8">Click the button below to check for matches!</p>
9094
<button
9195
onClick={computeNewMatches}
92-
className="w-full py-2 px-4 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors"
96+
className="w-full py-3 px-6 rounded-xl transition-all duration-300 bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-600 hover:to-purple-600 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
9397
>
9498
Check for Matches
9599
</button>
@@ -100,10 +104,13 @@ export default function Matches() {
100104
console.log("MATCHES", matches);
101105

102106
return (
103-
<div className="bg-white rounded-lg shadow-lg p-6">
104-
<div className="flex justify-between items-center mb-6">
105-
<h2 className="text-2xl font-semibold text-gray-800">Your Matches</h2>
106-
<button onClick={computeNewMatches} className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
107+
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-8 border border-pink-100">
108+
<div className="flex justify-between items-center mb-8">
109+
<h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">Your Matches 💖</h2>
110+
<button
111+
onClick={computeNewMatches}
112+
className="px-6 py-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-600 hover:to-purple-600 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
113+
>
107114
Refresh Matches
108115
</button>
109116
</div>
@@ -112,26 +119,26 @@ export default function Matches() {
112119
const handle = match_.startsWith("@") ? match_.slice(1) : match_;
113120

114121
return (
115-
<div key={match_} className="border rounded-lg p-4 hover:bg-gray-50">
122+
<div key={match_} className="border border-gray-200 rounded-xl p-6 hover:border-purple-300 transition-all hover:shadow-md">
116123
<div className="flex items-center justify-between">
117124
<div>
118-
<h3 className="text-lg font-medium text-gray-900">@{handle}</h3>
125+
<h3 className="text-xl font-semibold text-gray-900">@{handle}</h3>
119126
<p className="text-sm text-gray-500">You have a match! 🎉</p>
120127
</div>
121-
<div className="flex gap-2">
128+
<div className="flex gap-3">
122129
<a
123130
href={`https://twitter.com/${handle}`}
124131
target="_blank"
125132
rel="noopener noreferrer"
126-
className="px-4 py-2 border border-purple-600 text-purple-700 rounded-md hover:bg-purple-50 transition-colors text-sm font-medium"
133+
className="px-4 py-2 border border-purple-600 text-purple-700 rounded-xl hover:bg-purple-50 transition-all text-sm font-medium"
127134
>
128135
View Profile →
129136
</a>
130137
<a
131138
href={`https://twitter.com/intent/tweet?text=I'm a match with @${handle} on Co-Match!!! ❤️ %0APrivate dating made possible thanks to Noir and coSNARKs🪄🥳 %0AThanks @TACEO_IO @NoirLang @0xteddav&url=https://co-match.vercel.app`}
132139
target="_blank"
133140
rel="noopener noreferrer"
134-
className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors text-sm font-medium"
141+
className="px-4 py-2 rounded-xl transition-all duration-300 bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-600 hover:to-purple-600 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 text-sm font-medium"
135142
>
136143
Send a love message
137144
</a>

‎web-app/src/pages/Preferences.tsx‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,26 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
7575
};
7676

7777
return (
78-
<div className="bg-white rounded-lg shadow-lg p-6">
79-
<h2 className="text-2xl font-semibold text-gray-800 mb-6">{isReadOnly ? "Your Saved Preferences" : "Your Preferences"}</h2>
78+
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-8 border border-pink-100">
79+
<h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent mb-6">
80+
{isReadOnly ? "Your Saved Preferences" : "Your Preferences"}
81+
</h2>
8082
{isReadOnly && (
81-
<div className="mb-6 p-4 bg-purple-50 text-purple-700 rounded-md">
83+
<div className="mb-6 p-4 bg-gradient-to-r from-pink-50 to-purple-50 text-purple-700 rounded-xl border border-pink-100">
8284
Your preferences have been saved. You can view them below, but they cannot be modified.
8385
</div>
8486
)}
85-
<form onSubmit={handleSubmit} className="space-y-6">
86-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
87+
<form onSubmit={handleSubmit} className="space-y-8">
88+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
8789
<div>
8890
<label className="block text-sm font-medium text-gray-700 mb-2">Your Age</label>
8991
<input
9092
type="number"
9193
value={preferences.age}
9294
onChange={(e) => !isReadOnly && setPreferences({ ...preferences, age: parseInt(e.target.value) })}
93-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
95+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
96+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
97+
}`}
9498
min="18"
9599
max="100"
96100
disabled={isReadOnly}
@@ -102,7 +106,9 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
102106
<select
103107
value={preferences.gender}
104108
onChange={(e) => !isReadOnly && setPreferences({ ...preferences, gender: parseInt(e.target.value) })}
105-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
109+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
110+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
111+
}`}
106112
disabled={isReadOnly}
107113
>
108114
<option value={0}>ZK Researcher 🤓</option>
@@ -115,7 +121,9 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
115121
<select
116122
value={preferences.region}
117123
onChange={(e) => !isReadOnly && setPreferences({ ...preferences, region: parseInt(e.target.value) })}
118-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
124+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
125+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
126+
}`}
119127
disabled={isReadOnly}
120128
>
121129
{REGIONS.map((region) => (
@@ -139,7 +147,9 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
139147
preferences: { ...preferences.preferences, age_min: parseInt(e.target.value) },
140148
})
141149
}
142-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
150+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
151+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
152+
}`}
143153
min="18"
144154
max="100"
145155
placeholder="Min"
@@ -155,7 +165,9 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
155165
preferences: { ...preferences.preferences, age_max: parseInt(e.target.value) },
156166
})
157167
}
158-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
168+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
169+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
170+
}`}
159171
min="18"
160172
max="100"
161173
placeholder="Max"
@@ -175,7 +187,9 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
175187
preferences: { ...preferences.preferences, gender: parseInt(e.target.value) },
176188
})
177189
}
178-
className={`w-full px-3 py-2 border border-gray-300 rounded-md ${isReadOnly ? "bg-gray-50" : ""}`}
190+
className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all ${
191+
isReadOnly ? "bg-gray-50" : "hover:border-purple-300"
192+
}`}
179193
disabled={isReadOnly}
180194
>
181195
<option value={0}>ZK Researcher 🤓</option>
@@ -190,16 +204,16 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
190204
Your Interests (Select up to 3)
191205
<span className="ml-2 text-sm text-gray-500">{preferences.interests.length}/3 selected</span>
192206
</label>
193-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
207+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
194208
{INTERESTS.map((interest) => (
195209
<label
196210
key={interest.id}
197-
className={`flex items-center space-x-2 p-2 border rounded-md cursor-pointer ${
211+
className={`flex items-center space-x-2 p-3 border rounded-xl cursor-pointer transition-all ${
198212
isReadOnly
199213
? "bg-gray-50"
200214
: !preferences.interests.includes(interest.id) && preferences.interests.length >= 3
201215
? "opacity-50 cursor-not-allowed"
202-
: "hover:bg-gray-50"
216+
: "hover:bg-purple-50 hover:border-purple-300"
203217
}`}
204218
>
205219
<input
@@ -219,10 +233,10 @@ export default function Preferences({ onSubmit }: PreferencesProps) {
219233
<button
220234
type="submit"
221235
disabled={preferences.interests.length !== 3}
222-
className={`w-full py-2 px-4 rounded-md transition-colors ${
236+
className={`w-full py-3 px-6 rounded-xl transition-all duration-300 ${
223237
preferences.interests.length !== 3
224238
? "bg-gray-100 text-gray-400 cursor-not-allowed"
225-
: "bg-purple-600 text-white hover:bg-purple-700"
239+
: "bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-600 hover:to-purple-600 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
226240
}`}
227241
>
228242
{preferences.interests.length === 3

0 commit comments

Comments
 (0)