devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

refactor(web): RegistrationPanel — glass-bubble modal buttons + clearer Revoke copy

Browse Source
This commit is contained in:
Jannis Braun
2026-04-29 03:01:47 +02:00
parent f0ac847d9e
commit d31a9cf579
1 changed files with 62 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/instanceSettingsPanels/RegistrationPanel.tsx
+19 -12
View File
@@ -565,23 +565,25 @@ function CreateInviteModal({ onClose, onCreated }: CreateInviteModalProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex gap-2 mt-4"> <div className="flex justify-center pt-2">
<div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-3 animate-slide-up">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={submitting} disabled={submitting}
className="py-2.5 px-4 rounded-lg text-[13px] font-medium text-txt-tertiary border border-white/[0.06] hover:bg-white/[0.06] transition-colors disabled:opacity-50" className="px-3 py-1 text-sm text-txt-secondary hover:text-txt-primary transition-colors disabled:opacity-50"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
disabled={submitting} disabled={submitting}
className="flex-1 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors disabled:opacity-50" className="px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
> >
{submitting ? 'Creating…' : 'Create link'} {submitting ? 'Creating…' : 'Create link'}
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div>, </div>,
@@ -797,23 +799,25 @@ function EditInviteModal({ invite, onClose, onUpdated }: EditInviteModalProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex gap-2 mt-4"> <div className="flex justify-center pt-2">
<div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-3 animate-slide-up">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={submitting} disabled={submitting}
className="py-2.5 px-4 rounded-lg text-[13px] font-medium text-txt-tertiary border border-white/[0.06] hover:bg-white/[0.06] transition-colors disabled:opacity-50" className="px-3 py-1 text-sm text-txt-secondary hover:text-txt-primary transition-colors disabled:opacity-50"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
disabled={submitting} disabled={submitting}
className="flex-1 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors disabled:opacity-50" className="px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
> >
{submitting ? 'Saving…' : 'Save changes'} {submitting ? 'Saving…' : 'Save changes'}
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div>, </div>,
@@ -1025,19 +1029,20 @@ function ReinstateInviteModal({ invite, onClose, onReinstated }: ReinstateInvite
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex gap-2 mt-4"> <div className="flex justify-center pt-2">
<div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-3 animate-slide-up">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={submitting} disabled={submitting}
className="py-2.5 px-4 rounded-lg text-[13px] font-medium text-txt-tertiary border border-white/[0.06] hover:bg-white/[0.06] transition-colors disabled:opacity-50" className="px-3 py-1 text-sm text-txt-secondary hover:text-txt-primary transition-colors disabled:opacity-50"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
disabled={submitting} disabled={submitting}
className="flex-1 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors disabled:opacity-50" className="px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
> >
{submitting {submitting
? 'Reinstating…' ? 'Reinstating…'
@@ -1046,6 +1051,7 @@ function ReinstateInviteModal({ invite, onClose, onReinstated }: ReinstateInvite
: 'Reinstate'} : 'Reinstate'}
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div>, </div>,
@@ -1482,9 +1488,10 @@ function InviteRow({ invite, expanded, onToggleExpand, onMutate }: InviteRowProp
title={`Revoke "${invite.name}"?`} title={`Revoke "${invite.name}"?`}
description={ description={
<> <>
The link will stop working immediately. Anyone who has the URL will not be able The link stops working immediately. Anyone who has the URL can no longer use it.
to use it. You can reinstate the invite later — that will generate a new link <br />
with a different URL. <br />
If you change your mind later, <strong>Reinstate</strong> issues a fresh link under this entry — the original URL stays inactive.
</> </>
} }
confirmLabel="Revoke link" confirmLabel="Revoke link"