This repository has no description
tweaks
author
damedotblog
date
(Apr 22, 2025, 12:43 PM -0400)
commit
10901798
10901798447c59d49f83ad9da23f361055eeef4d
parent
8e2b1ab7
8e2b1ab73c6db044bf5a646a600358208d9f0636
+88
-15
+79
-9
src/components/Verifier/Verifier.css
+79
-9
src/components/Verifier/Verifier.css
···
322
322
323
323
/* Official Verifier Status */
324
324
.verifier-official-verifier-tooltip {
325
-
cursor: help;
325
+
/* Remove old styles for this if they existed, or repurpose if needed */
326
+
}
327
+
328
+
/* New Tooltip Styles */
329
+
.verifier-tooltip-container {
330
+
position: relative;
326
331
display: inline-block;
327
-
margin-left: 5px;
328
-
font-weight: bold;
329
-
border: 1px solid var(--text-muted, #ccc);
332
+
margin-left: 5px; /* Keep spacing */
333
+
}
334
+
335
+
.verifier-tooltip-icon {
336
+
display: inline-block;
337
+
background-color: var(--card-border); /* Use a subtle background */
338
+
color: var(--text-muted, var(--text));
330
339
border-radius: 50%;
331
-
width: 1.2em;
332
-
height: 1.2em;
333
-
line-height: 1.2em;
340
+
width: 1.4em; /* Adjust size */
341
+
height: 1.4em;
342
+
line-height: 1.4em; /* Center text vertically */
334
343
text-align: center;
335
-
font-size: 0.8em; /* Smaller question mark */
336
-
color: var(--text-muted, var(--text));
344
+
font-size: 0.8em;
345
+
font-weight: bold;
346
+
cursor: help;
347
+
transition: background-color 0.3s ease, color 0.3s ease;
348
+
}
349
+
350
+
.verifier-tooltip-icon:hover {
351
+
background-color: var(--button-bg); /* Use button color on hover */
352
+
color: var(--button-text);
353
+
}
354
+
355
+
.verifier-tooltip-text {
356
+
visibility: hidden;
357
+
opacity: 0;
358
+
width: 250px; /* Adjust width as needed */
359
+
background-color: var(--tooltip-bg, #333); /* Use variable or default */
360
+
color: var(--tooltip-text, #fff);
361
+
text-align: center;
362
+
border-radius: 6px;
363
+
padding: 8px 12px;
364
+
position: absolute;
365
+
z-index: 10;
366
+
bottom: 135%; /* Position above the icon */
367
+
left: 50%;
368
+
margin-left: -125px; /* Half of the width to center */
369
+
transition: opacity 0.3s ease, visibility 0.3s ease;
370
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
371
+
font-size: 0.9em; /* Adjust font size */
372
+
line-height: 1.4;
373
+
}
374
+
375
+
/* Tooltip arrow */
376
+
.verifier-tooltip-text::after {
377
+
content: "";
378
+
position: absolute;
379
+
top: 100%; /* At the bottom of the tooltip */
380
+
left: 50%;
381
+
margin-left: -5px;
382
+
border-width: 5px;
383
+
border-style: solid;
384
+
border-color: var(--tooltip-bg, #333) transparent transparent transparent; /* Arrow pointing down */
385
+
}
386
+
387
+
.verifier-tooltip-container:hover .verifier-tooltip-text {
388
+
visibility: visible;
389
+
opacity: 1;
390
+
}
391
+
392
+
/* Dark mode tooltip adjustments */
393
+
.dark-mode .verifier-tooltip-icon {
394
+
background-color: var(--card-border-dark, #555); /* Adjust dark variable */
395
+
color: var(--text-muted-dark, var(--text));
396
+
}
397
+
.dark-mode .verifier-tooltip-icon:hover {
398
+
background-color: var(--button-bg); /* Keep button colors */
399
+
color: var(--button-text);
400
+
}
401
+
.dark-mode .verifier-tooltip-text {
402
+
background-color: var(--tooltip-bg-dark, #eee);
403
+
color: var(--tooltip-text-dark, #333);
404
+
}
405
+
.dark-mode .verifier-tooltip-text::after {
406
+
border-top-color: var(--tooltip-bg-dark, #eee); /* Match dark background */
337
407
}
338
408
339
409
.verifier-official-verifier-note {
+7
-6
src/components/Verifier/Verifier.js
+7
-6
src/components/Verifier/Verifier.js
···
655
655
<p className="verifier-intro-text">
656
656
With Bluesky's new decentralized verification system, anyone can verify anyone else and any Bluesky client can choose which accounts to treat as "Trusted Verifiers". It's a first-of-its-kind verification system for a mainstream social platform of this size. Try verifying an account for yourself or check to see who has verified you!
657
657
</p>
658
-
<div className="verifier-page-header">
659
-
<p className="verifier-user-info">Logged in as: {userInfo ? `${userInfo.displayName} (@${userInfo.handle})` : session?.did}</p>
660
-
<button onClick={signOut} disabled={isAnyOperationInProgress} className="verifier-sign-out-button">Sign Out</button>
661
-
</div>
662
-
<hr />
658
+
663
659
664
660
<div className="verifier-section">
665
661
<h2>Verify a Bluesky User</h2>
···
719
715
<div className="verifier-section">
720
716
<div style={{display: 'flex', alignItems: 'center', marginBottom: '10px'}}>
721
717
<h2 style={{ display: 'inline-block', marginRight: '8px', marginBottom: 0, border: 'none', padding: 0 }}>Your Verification Status</h2>
722
-
<span title={trustedVerifiersTooltip} className="verifier-official-verifier-tooltip" style={{ fontSize: '1.2em' }}>(?)</span>
718
+
<div className="verifier-tooltip-container">
719
+
<span className="verifier-tooltip-icon">(?)</span>
720
+
<span className="verifier-tooltip-text">
721
+
{trustedVerifiersTooltip}
722
+
</span>
723
+
</div>
723
724
</div>
724
725
<div>
725
726
{TRUSTED_VERIFIERS.map(verifierId => {