Rebrand to Plebeian Signer with updated colors and UI improvements

- Fix project name from "Plebian" to "Plebeian" throughout codebase
- Replace gooti logo with Plebeian Market logo across all screens
- Update color scheme to match Plebeian Market (pink accent #ff3eb5)
- Add IBM Plex Mono fonts and Reglisse heading font
- Center vault create/import screen content vertically
- Reduce spacing on sync preference screen to prevent scrolling
- Add Enter key support on vault login password field
- Update options page with new logo and color scheme
- Bump version to 0.0.5

Files modified:
- package.json (version bump, name fix)
- projects/*/public/{logo.svg,options.html,manifest.json}
- projects/*/src/app/components/vault-*/*.{html,scss}
- projects/*/src/app/components/welcome/*.html
- projects/common/src/lib/styles/*.scss
- Various component files for branding updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-17 11:47:38 +01:00
parent 3c63e6555c
commit fe886d2101
64 changed files with 378 additions and 100 deletions

View File

@@ -14,7 +14,7 @@ export class AppComponent implements OnInit {
readonly #logger = inject(LoggerService);
ngOnInit(): void {
this.#logger.initialize('Plebian Signer Chrome Extension');
this.#logger.initialize('Plebeian Signer Chrome Extension');
this.#startup.startOver(getNewStorageServiceConfig());
}

View File

@@ -25,18 +25,20 @@
justify-content: center;
font-size: 24px;
color: gray;
color: var(--muted-foreground);
border-top: 3px solid transparent;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
&:hover {
background: var(--background-light-hover);
color: var(--foreground);
}
&.active {
color: #ffffff;
border-top: 3px solid #0d6efd;
color: var(--foreground);
border-top: 3px solid var(--primary);
}
}
}

View File

@@ -1,5 +1,5 @@
<div class="sam-text-header">
<span> Plebian Signer </span>
<span> Plebeian Signer </span>
</div>
<span>Version {{ version }}</span>

View File

@@ -81,7 +81,7 @@ export class SettingsComponent extends NavComponent implements OnInit {
const jsonVault = this.#storage.exportVault();
const dateTimeString = DateHelper.dateToISOLikeButLocal(new Date());
const fileName = `Plebian Signer Chrome - Vault Export - ${dateTimeString}.json`;
const fileName = `Plebeian Signer Chrome - Vault Export - ${dateTimeString}.json`;
this.#downloadJson(jsonVault, fileName);
}

View File

@@ -1,12 +1,10 @@
<div class="sam-text-header">
<span>Plebian Signer</span>
</div>
<div class="vertically-centered">
<div class="sam-flex-column center">
<div class="sam-flex-column gap" style="align-items: center">
<span class="title">Plebeian Signer</span>
<div class="logo-frame">
<img src="gooti.svg" height="120" width="120" alt="" />
<img src="logo.svg" height="120" width="120" alt="" />
</div>
<button

View File

@@ -10,6 +10,17 @@
align-items: center;
}
.title {
font-size: 20px;
font-weight: 500;
margin-bottom: var(--size);
}
.logo-frame {
border: 2px solid var(--secondary);
border-radius: 100%;
}
.file-input {
position: absolute;
visibility: hidden;

View File

@@ -1,11 +1,11 @@
<div class="sam-text-header">
<span>Plebian Signer</span>
<span>Plebeian Signer</span>
</div>
<div class="content">
<div class="sam-flex-column gap" style="align-items: center">
<div class="logo-frame">
<img src="gooti.svg" height="120" width="120" alt=""/>
<img src="logo.svg" height="120" width="120" alt=""/>
</div>
<span class="sam-mt-2"> Please define a password for your vault. </span>

View File

@@ -42,7 +42,7 @@
}
.logo-frame {
border: 2px solid #0d6efd;
border: 2px solid var(--secondary);
border-radius: 100%;
}
}

View File

@@ -1,11 +1,11 @@
<div class="sam-text-header">
<span class="brand">Plebian Signer</span>
<span class="brand">Plebeian Signer</span>
</div>
<div class="content-login-vault">
<div class="sam-flex-column gap" style="align-items: center">
<div class="logo-frame">
<img src="gooti.svg" height="120" width="120" alt="" />
<img src="logo.svg" height="120" width="120" alt="" />
</div>
<div class="sam-mt-2 input-group">
@@ -15,6 +15,7 @@
class="form-control"
placeholder="vault password"
[(ngModel)]="loginPassword"
(keyup.enter)="loginPassword && loginVault()"
/>
<button
class="btn btn-outline-secondary"

View File

@@ -5,7 +5,7 @@
justify-items: center;
.logo-frame {
border: 2px solid #0d6efd;
border: 2px solid var(--secondary);
border-radius: 100%;
}

View File

@@ -1,9 +1,9 @@
<div class="sam-text-header sam-mb-2">
<span>Plebian Signer Setup - Sync Preference</span>
<div class="sam-text-header sam-mb-h">
<span>Plebeian Signer Setup - Sync Preference</span>
</div>
<span class="sam-text-muted sam-text-md sam-text-align-center2">
Plebian Signer always encrypts sensitive data like private keys and site permissions
Plebeian Signer always encrypts sensitive data like private keys and site permissions
independent of the chosen sync mode.
</span>
@@ -22,7 +22,7 @@
<span> Sync ON</span>
</button>
<span class="sam-mt-2 sam-text-lg">Offline</span>
<span class="sam-mt sam-text-lg">Offline</span>
<span class="sam-text-muted sam-text-md">
Your encrypted data is never uploaded to any servers. It remains in your local

View File

@@ -17,7 +17,7 @@ import { Event, EventTemplate, finalizeEvent, nip04, nip44 } from 'nostr-tools';
export const debug = function (message: any) {
const dateString = new Date().toISOString();
console.log(`[Plebian Signer - ${dateString}]: ${JSON.stringify(message)}`);
console.log(`[Plebeian Signer - ${dateString}]: ${JSON.stringify(message)}`);
};
export type PromptResponse =

View File

@@ -51,7 +51,7 @@ browser.runtime.onMessage.addListener(async (message /*, sender*/) => {
const browserSessionData = await getBrowserSessionData();
if (!browserSessionData) {
throw new Error('Plebian Signer vault not unlocked by the user.');
throw new Error('Plebeian Signer vault not unlocked by the user.');
}
const currentIdentity = browserSessionData.identities.find(

View File

@@ -2,7 +2,7 @@
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<title>Plebian Signer</title>
<title>Plebeian Signer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->

View File

@@ -12,9 +12,16 @@ body {
height: 600px;
width: 375px;
color: #ffffff;
color: var(--foreground);
font-family: var(--font-sans);
font-size: 16px;
background: var(--background);
margin: 0;
}
// Button styling to match market
button {
text-transform: uppercase;
font-family: var(--font-sans);
}