{
- const subrouter = await this.getAccountRouter();
- subrouter.pushUrl('');
- }}
- >
- overview
+
{
- const idpState = await IdpState.getSingletonInstance();
- idpState.domtools.router.pushUrl('/logout');
- }}
- >
- logout
+
+
+
Account
+
{
+ const subrouter = await this.getAccountRouter();
+ subrouter.pushUrl('');
+ }}
+ >
+
+ Overview
+
+
{
+
+ }}
+ >
+
+ Manage Roles
+
+
{
+ }}
+ >
+
+ Create Organization
+
+
{
+ const idpState = await IdpState.getSingletonInstance();
+ idpState.domtools.router.pushUrl('/logout');
+ }}
+ >
+
+ Log Out
+
+
+
+
+
Organization
+
{
+ const currentState = states.accountState.getState();
+ states.accountState.dispatchAction(
+ states.setSelectedOrg,
+ currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
+ );
+ }}
+ >
+
+
{}}
+ >
+
+ Apps
+
+
{}}
+ >
+
+ Users
+
+
{}}
+ >
+
+ Activity
+
+
{}}
+ >
+
+ Billing
+
-
{
-
- }}
- >
- manage roles
-
-
{
- }}
- >
- create an org
-
-
Organization Settings
-
{
- const currentState = states.accountState.getState();
- states.accountState.dispatchAction(
- states.setSelectedOrg,
- currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
- );
- }}
- >
- ${this.options.map((option) => {
- return html`
${option.text}
`;
- })}
+
+
v${commitinfo.version}
`;
}
diff --git a/ts_web/elements/account/sharedstyles.ts b/ts_web/elements/account/sharedstyles.ts
index a6633ca..c430272 100644
--- a/ts_web/elements/account/sharedstyles.ts
+++ b/ts_web/elements/account/sharedstyles.ts
@@ -1,29 +1,117 @@
import { css } from '@design.estate/dees-element';
-export default css`
+/**
+ * Design tokens matching the login page aesthetic (idp-centercontainer.ts)
+ */
+export const accountDesignTokens = css`
+ :host {
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --border: hsl(240 3.7% 15.9%);
+ --card: hsl(240 6% 6%);
+
+ font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+ color: var(--foreground);
+ }
+`;
+
+/**
+ * Card container styles
+ */
+export const cardStyles = css`
+ .card {
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 32px;
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+ }
+`;
+
+/**
+ * Typography styles for consistent text hierarchy
+ */
+export const typographyStyles = css`
h1 {
- margin-top: 50px;
- border-bottom: 1px solid;
- border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
- padding-bottom: 10px;
- font-weight: 500;
+ font-size: 24px;
+ font-weight: 600;
+ color: var(--foreground);
+ margin: 0 0 8px 0;
+ letter-spacing: -0.02em;
}
h2 {
- border-top: 1px dotted #666;
- padding-top: 16px;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--foreground);
+ margin: 24px 0 8px 0;
+ letter-spacing: -0.01em;
}
p {
- line-height: 1.5em;
+ font-size: 14px;
+ color: var(--muted-foreground);
+ margin: 0 0 16px 0;
+ line-height: 1.5;
+ }
+
+ .description {
+ font-size: 14px;
+ color: var(--muted-foreground);
+ margin: 0;
+ line-height: 1.5;
}
dees-button {
margin-top: 16px;
- width: 200px;
}
dees-input-text {
- max-width: 400px;
+ max-width: 100%;
}
`;
+
+/**
+ * Navigation styles for the sidebar
+ */
+export const navigationStyles = css`
+ .nav-item {
+ padding: 10px 16px;
+ margin: 2px 8px;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--muted-foreground);
+ transition: all 0.15s ease;
+ cursor: pointer;
+ }
+
+ .nav-item:hover {
+ background: var(--muted);
+ color: var(--foreground);
+ }
+
+ .nav-item.active {
+ background: var(--muted);
+ color: var(--foreground);
+ }
+
+ .nav-group-label {
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--muted-foreground);
+ padding: 24px 16px 8px;
+ }
+`;
+
+/**
+ * Legacy export for backwards compatibility
+ */
+export default css`
+ ${accountDesignTokens}
+ ${typographyStyles}
+`;
diff --git a/ts_web/elements/account/views/baseview.ts b/ts_web/elements/account/views/baseview.ts
index 701256a..9110f5a 100644
--- a/ts_web/elements/account/views/baseview.ts
+++ b/ts_web/elements/account/views/baseview.ts
@@ -11,7 +11,7 @@ import {
directives,
} from '@design.estate/dees-element';
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
declare global {
interface HTMLElementTagNameMap {
@@ -52,34 +52,75 @@ export class BaseView extends DeesElement {
public static styles = [
cssManager.defaultStyles,
- sharedStyles,
+ accountDesignTokens,
+ cardStyles,
+ typographyStyles,
css`
:host {
display: block;
- max-width: 900px;
- margin: auto;
- color: ${cssManager.bdTheme('#333', '#fff')};
+ padding: 48px;
}
+
+ .viewHost {
+ max-width: 600px;
+ margin: 0 auto;
+ }
+
+ .card {
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 32px;
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+ }
+
.slug {
- color: orange;
+ color: var(--foreground);
+ font-weight: 600;
+ font-family: 'Geist Mono', monospace;
+ }
+
+ .hint {
+ display: block;
+ font-size: 13px;
+ color: var(--muted-foreground);
+ margin: 16px 0;
+ padding: 12px 16px;
+ background: var(--muted);
+ border-radius: 8px;
+ }
+
+ dees-form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-top: 24px;
}
.orgGrid {
display: grid;
grid-gap: 16px;
- grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ margin-top: 24px;
}
.org {
- padding: 16px;
- border-top: 1px solid #444;
- background: ${cssManager.bdTheme('#ccc', '#222')};
- border-radius: 16px;
+ padding: 20px;
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ color: var(--foreground);
+ transition: all 0.15s ease;
+ cursor: pointer;
}
.org:hover {
- cursor: default;
- background: ${cssManager.bdTheme('#CCC', '#333')};
+ background: var(--muted);
+ border-color: var(--muted-foreground);
+ }
+
+ .org dees-icon {
+ opacity: 0.7;
}
`,
];
@@ -100,24 +141,26 @@ export class BaseView extends DeesElement {
if (state.accountState.getState().organizations.length === 0) {
render(
html`
-
Setup Your Account
-
- There are no organizations for your account. Please create one now. Alternatively you
- can ask an admin of an existing organization to invite you.
-
-
-
-
-
- The organization slug corresponds to the organization name:
- ${directives.subscribe(
- state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
- )}
-
-
-
Create the Organization
+
+
Setup Your Account
+
+ There are no organizations for your account. Please create one now. Alternatively you
+ can ask an admin of an existing organization to invite you.
+
+
+
+
+
+ The organization slug will be:
+ ${directives.subscribe(
+ state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
+ )}
+
+
+
Create the Organization
+
`,
viewHost
);
@@ -169,6 +212,7 @@ export class BaseView extends DeesElement {
render(
html`
Select An Organization
+
Choose an organization to manage its settings and billing.
${state.accountState.getState().organizations.map((orgArg) => {
return html`
@@ -180,7 +224,7 @@ export class BaseView extends DeesElement {
parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
}}
>
- ${orgArg.data.name}
+ ${orgArg.data.name}
`;
})}
diff --git a/ts_web/elements/account/views/subscriptions.ts b/ts_web/elements/account/views/subscriptions.ts
index a26be88..f799ed2 100644
--- a/ts_web/elements/account/views/subscriptions.ts
+++ b/ts_web/elements/account/views/subscriptions.ts
@@ -8,7 +8,7 @@ import {
css,
} from '@design.estate/dees-element';
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
import * as state from '../../../states/accountstate.js';
@@ -46,48 +46,106 @@ export class SubscriptionView extends DeesElement {
public static styles = [
cssManager.defaultStyles,
- sharedStyles,
+ accountDesignTokens,
+ cardStyles,
+ typographyStyles,
css`
:host {
display: block;
+ padding: 48px;
max-width: 900px;
- margin: auto;
- color: ${cssManager.bdTheme('#333', '#fff')};
+ margin: 0 auto;
+ }
+
+ .section {
+ margin-bottom: 48px;
+ }
+
+ .card {
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 24px;
+ margin-top: 16px;
+ }
+
+ h3 {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--foreground);
+ margin: 24px 0 8px 0;
+ }
+
+ dees-table {
+ margin-top: 16px;
+ }
+
+ dees-button {
+ margin-top: 16px;
}
`
]
public render() {
return html`
-
-> Billing & Subscription
- This page allows you to setup how you are billed for any workspace.global charges.
-
PaymentMethod
-
Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
- and we will bill any occurring charges as an extra on the monthly date of your choosing.
- Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.
-
Paddle
-
{
- await this.domtoolsPromise;
- this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
- }}>set up paddle.com
-
Enterprise billing
- Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
-
Subscriptions
-
- The total price of a subscription already includes all taxes. If you are a VAT registered business,
- the actual price might be cheaper in case you can claim VAT exemption from the purchase.
-
-
- Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
- To see other organization, select the respective organization at the top left of this page.
-
-
-
Add subscription
-
Accrued IaaS Usage
-
Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.
-
-
Upcoming Billable Items
-
Past Invoices
+
Billing & Subscription
+
Manage your billing settings and subscriptions for your organization.
+
+
+
Payment Method
+
+
Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
+ and we will bill any occurring charges as an extra on the monthly date of your choosing.
+ Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.
+
+
Paddle
+
{
+ await this.domtoolsPromise;
+ this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
+ }}>Set up Paddle.com
+
+
Enterprise Billing
+
Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.
+
Note: You are currently not eligible.
+
+
+
+
+
Subscriptions
+
+
+ The total price of a subscription already includes all taxes. If you are a VAT registered business,
+ the actual price might be cheaper in case you can claim VAT exemption from the purchase.
+
+
+ Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.
+
+
+
Add Subscription
+
+
+
+
+
Accrued IaaS Usage
+
+
The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.
+
+
+
+
+
+
Upcoming Billable Items
+
+
No upcoming billable items.
+
+
+
+
+
Past Invoices
+
+
No past invoices available.
+
+
`;
}
}
\ No newline at end of file
diff --git a/ts_web/elements/idp-loginprompt.ts b/ts_web/elements/idp-loginprompt.ts
index 88ae30a..dc8a541 100644
--- a/ts_web/elements/idp-loginprompt.ts
+++ b/ts_web/elements/idp-loginprompt.ts
@@ -167,9 +167,9 @@ export class IdpLoginPrompt extends DeesElement {
}
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
- // lets disable the register button
- const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
- registerButton.disabled = true;
+ // lets disable the submit button
+ const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
+ loginSubmitButton.disabled = true;
// lets define the needed requests
const idpState = await IdpState.getSingletonInstance();
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');