3750e99e61
- Add new wallet tab with placeholder for future functionality
- Reorder bottom tabs: You, Identities, Wallet, Bookmarks, Settings
- Move Reset Extension button to bottom-right corner on login page
- Improve header layout consistency across all pages
- Add custom scrollbar styling for Chrome (thin, dark track, light thumb)
- Update edit button to use emoji icon on identity page
- Fix horizontal overflow issues in global styles
Files modified:
- package.json (version bump)
- projects/{chrome,firefox}/src/app/app.routes.ts (wallet route)
- projects/{chrome,firefox}/src/app/components/home/wallet/* (new)
- projects/{chrome,firefox}/src/app/components/home/home.component.* (tabs)
- projects/{chrome,firefox}/src/app/components/vault-login/* (reset btn)
- projects/{chrome,firefox}/src/styles.scss (scrollbar, overflow)
- Various component HTML/SCSS files (header consistency)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
133 lines
2.5 KiB
SCSS
133 lines
2.5 KiB
SCSS
@use "sass:meta";
|
|
|
|
@include meta.load-css("../../../node_modules/bootstrap/scss/bootstrap");
|
|
@include meta.load-css(
|
|
"../../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
|
|
);
|
|
|
|
// Load the common styles
|
|
@include meta.load-css("../../common/src/lib/styles/styles.scss");
|
|
|
|
body {
|
|
height: 600px;
|
|
width: 375px;
|
|
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
font-size: 16px;
|
|
background: var(--background);
|
|
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Button styling to match market
|
|
button {
|
|
text-transform: uppercase;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
// Override Bootstrap primary button with orange
|
|
.btn-primary {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary-border);
|
|
color: var(--primary-foreground);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-border-hover);
|
|
color: var(--primary-foreground-hover);
|
|
}
|
|
|
|
&:active,
|
|
&.active {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-border-hover);
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary-border);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 62, 181, 0.25);
|
|
}
|
|
}
|
|
|
|
// Style for outline variant
|
|
.btn-outline-primary {
|
|
color: var(--primary);
|
|
border-color: var(--primary-border);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary-border);
|
|
color: var(--primary-foreground);
|
|
}
|
|
}
|
|
|
|
// Form inputs styling
|
|
.form-control {
|
|
background-color: var(--input);
|
|
border-color: var(--input-border);
|
|
color: var(--foreground);
|
|
|
|
&:focus {
|
|
background-color: var(--input);
|
|
border-color: var(--primary);
|
|
color: var(--foreground);
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 62, 181, 0.25);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
}
|
|
|
|
// Ensure alerts work in both themes
|
|
.alert-danger {
|
|
background-color: var(--destructive);
|
|
border-color: var(--destructive);
|
|
color: var(--destructive-foreground);
|
|
}
|
|
|
|
// Cards and panels
|
|
.sam-card {
|
|
background: var(--background-light);
|
|
border-color: var(--border);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
// Bootstrap modal overrides - always use dark theme for modals
|
|
.modal-content {
|
|
background-color: #1a1a1a;
|
|
border-color: #3d3d3d;
|
|
color: #fafafa;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom-color: #3d3d3d;
|
|
|
|
.modal-title {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: #3d3d3d;
|
|
}
|
|
|
|
.modal-body {
|
|
color: #fafafa;
|
|
}
|
|
|