Skip to content

Commit

Permalink
Theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillemcordoba
guillemcordoba committed Jul 16, 2024
1 parent a9180bd commit 19667cf
Show file tree
Hide file tree
Showing 11 changed files with 49 additions and 36 deletions.
6 changes: 3 additions & 3 deletions flake.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lobby/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"localize:build": "lit-localize build"
},
"dependencies": {
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#398cf50aca5d977b011356c1ca33cbe91686f88c&path:ui",
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#2144d76247553b9b4dcd4e162478163872d57db4&path:ui",
"@holochain-open-dev/elements": "^0.300.0",
"@holochain-open-dev/file-storage": "github:holochain-open-dev/file-storage#f4a4e0ef0378d1e6235f998ac1c507ea3a29cd62&path:ui",
"@holochain-open-dev/profiles": "github:holochain-open-dev/profiles#748bb4879e247eff44a4a23a8d2aaa02a585578a&path:ui",
Expand Down
4 changes: 2 additions & 2 deletions lobby/src/lobby-app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export class LobbyApp extends SignalWatcher(LitElement) {
if (this._loading)
return html`<div
class="row"
style="flex: 1; height: 100%; align-content: center; justify-content: center;"
style="flex: 1; height: 100%; align-items: center; justify-content: center;"
>
<sl-spinner style="font-size: 2rem"></sl-spinner>
</div>`;

if (this._error)
return html`
<div
style="flex: 1; height: 100%; align-content: center; justify-content: center;"
style="flex: 1; height: 100%; align-items: center; justify-content: center;"
>
<display-error
.error=${this._error}
Expand Down
18 changes: 9 additions & 9 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion tests/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"@holochain/client": "^0.17.0",
"@holochain/tryorama": "^v0.16.0",
"@holochain-open-dev/profiles": "github:holochain-open-dev/profiles#748bb4879e247eff44a4a23a8d2aaa02a585578a&path:ui",
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#398cf50aca5d977b011356c1ca33cbe91686f88c&path:ui",
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#2144d76247553b9b4dcd4e162478163872d57db4&path:ui",
"@holochain-open-dev/signals": "^0.300.0",
"@holochain-open-dev/utils": "^0.300.0",
"typescript": "^5.4.0",
Expand Down
22 changes: 11 additions & 11 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,17 @@
:root {
/* Changes the primary theme color to purple using primitives */
--background-color: #ededed;
--sl-color-primary-50: var(--sl-color-lime-50);
--sl-color-primary-100: var(--sl-color-green-100);
--sl-color-primary-200: var(--sl-color-green-200);
--sl-color-primary-300: var(--sl-color-green-300);
--sl-color-primary-400: var(--sl-color-green-400);
--sl-color-primary-500: var(--sl-color-green-500);
--sl-color-primary-600: var(--sl-color-green-600);
--sl-color-primary-700: var(--sl-color-green-700);
--sl-color-primary-800: var(--sl-color-green-800);
--sl-color-primary-900: var(--sl-color-green-900);
--sl-color-primary-950: var(--sl-color-green-950);
--sl-color-primary-50: var(--sl-color-teal-50);
--sl-color-primary-100: var(--sl-color-teal-100);
--sl-color-primary-200: var(--sl-color-teal-200);
--sl-color-primary-300: var(--sl-color-teal-300);
--sl-color-primary-400: var(--sl-color-teal-400);
--sl-color-primary-500: var(--sl-color-teal-500);
--sl-color-primary-600: var(--sl-color-teal-600);
--sl-color-primary-700: var(--sl-color-teal-700);
--sl-color-primary-800: var(--sl-color-teal-800);
--sl-color-primary-900: var(--sl-color-teal-900);
--sl-color-primary-950: var(--sl-color-teal-950);
}
</style>
<title>Plenty</title>
Expand Down
2 changes: 1 addition & 1 deletion ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"localize:build": "lit-localize build"
},
"dependencies": {
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#398cf50aca5d977b011356c1ca33cbe91686f88c&path:ui",
"@darksoil-studio/notifications": "github:darksoil-studio/notifications#2144d76247553b9b4dcd4e162478163872d57db4&path:ui",
"@darksoil-studio/roles": "github:darksoil-studio/roles#a0ec335b4a17afa36fd73bc0202bde9ecb9162b9&path:ui",
"@holochain-open-dev/elements": "^0.300.0",
"@holochain-open-dev/file-storage": "github:holochain-open-dev/file-storage#f4a4e0ef0378d1e6235f998ac1c507ea3a29cd62&path:ui",
Expand Down
15 changes: 14 additions & 1 deletion ui/src/app-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,21 @@ export const appStyles = [
}
.top-bar {
align-items: center;
background-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
color: white;
padding: 16px;
height: 32px;
}
.top-bar sl-icon-button {
color: white;
}
.top-bar sl-icon-button::part(base):hover {
color: rgb(220, 220, 220);
}
my-notifications-icon-button::part(icon-button) {
color: white;
--sl-color-primary-600: rgb(220, 220, 220);
--sl-color-primary-700: rgb(180, 180, 180);
}
sl-tab-group {
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions ui/src/holochain-app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,15 +196,15 @@ export class HolochainApp extends SignalWatcher(LitElement) {
if (this._loading)
return html`<div
class="row"
style="flex: 1; height: 100%; align-content: center; justify-content: center;"
style="flex: 1; height: 100%; align-items: center; justify-content: center;"
>
<sl-spinner style="font-size: 2rem"></sl-spinner>
<sl-spinner style="font-size: 2rem;"></sl-spinner>
</div>`;

if (this._error)
return html`
<div
style="flex: 1; height: 100%; align-content: center; justify-content: center;"
style="flex: 1; height: 100%; align-items: center; justify-content: center;"
>
<display-error
.error=${this._error}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/home-page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export class HomePage extends SignalWatcher(LitElement) {
style="width: 32px; height: 32px;"
.imageHash=${household.value?.entry.avatar}
></show-image>
<span style="margin: 0 16px;">${household.value?.entry.name}</span>
<span style="margin: 0 8px;">${household.value?.entry.name}</span>
</div>
</div>`;
}
Expand Down
6 changes: 3 additions & 3 deletions ui/src/members-page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export class MembersPage extends SignalWatcher(LitElement) {
path: "",
name: msg("All Households"),
render: () => html`
<div class="column" style="margin: 16px 0">
<div class="row" style="align-items: center">
<div class="column" style="margin: 12px 0">
<div class="row" style="align-items: center; height: 38px">
<span class="title">${msg("Members")}</span>
<routes-breadcrumbs
style="margin-left: 24px"
Expand All @@ -49,7 +49,7 @@ export class MembersPage extends SignalWatcher(LitElement) {
name: msg("Manage Roles"),
render: () => html`
<div class="column" style="margin: 12px 0">
<div class="row" style="align-items: center">
<div class="row" style="align-items: center; height: 38px">
<span class="title">${msg("Members")}</span>
<routes-breadcrumbs
style="margin-left: 24px"
Expand Down

0 comments on commit 19667cf

Please sign in to comment.