diff --git a/web/app/components/new/document-template-list.hbs b/web/app/components/new/document-template-list.hbs index ce3192e52..93e5d1bd2 100644 --- a/web/app/components/new/document-template-list.hbs +++ b/web/app/components/new/document-template-list.hbs @@ -1,4 +1,4 @@ -
+

Choose a template

@@ -6,7 +6,7 @@
or
-
+
{{/if}}
-
-
- Whatʼs a project -
- -
+
    {{#each this.docTypes as |docType|}} diff --git a/web/app/components/new/project-form.hbs b/web/app/components/new/project-form.hbs index a9d9dc15d..0746338c3 100644 --- a/web/app/components/new/project-form.hbs +++ b/web/app/components/new/project-form.hbs @@ -14,7 +14,7 @@ -
    -
    -
    - - - -
    Project
    -
    -
    - Status: - - <:anchor as |dd|> - + {{! Project Badge }} +
    +
    + Project +
    +
    + + {{! Status and CopyURLButton }} +
    + + Status: + + + <:anchor as |dd|> + + + + {{this.statusLabel}} + + + + <:item as |dd|> + + - - - {{this.statusLabel}} - - - - <:item as |dd|> - - - <:default> -
    - - - {{dd.attrs.label}} - -
    - -     -     - -     - -
    + <:default> +
    + + + {{dd.attrs.label}} + +
    + + + + +     +
    diff --git a/web/app/components/project/status-icon.gts b/web/app/components/project/status-icon.gts index c864386c0..88f428ecb 100644 --- a/web/app/components/project/status-icon.gts +++ b/web/app/components/project/status-icon.gts @@ -1,29 +1,87 @@ import Component from "@glimmer/component"; -import { ProjectStatus } from "hermes/types/project-status"; +import { + ProjectStatus, + COLOR_BG_ACTIVE, + COLOR_BG_COMPLETED, + COLOR_BG_ARCHIVED, + COLOR_OUTLINE_ACTIVE, + COLOR_OUTLINE_COMPLETED, + COLOR_OUTLINE_ARCHIVED, + COLOR_ICON_ACTIVE, + COLOR_ICON_COMPLETED, +} from "hermes/types/project-status"; interface ProjectStatusIconComponentSignature { Element: SVGElement; Args: { status: `${ProjectStatus}`; }; - Blocks: { - default: []; - }; } export default class ProjectStatusIconComponent extends Component { + /** + * Whether the current project status is active. + * Determines if the "zap" icon is shown. + */ protected get isActive(): boolean { return this.args.status === ProjectStatus.Active; } + /** + * Whether the current project status is completed. + * Determines if the "check" icon is shown. + */ protected get isCompleted(): boolean { return this.args.status === ProjectStatus.Completed; } - protected get isArchived(): boolean { - return this.args.status === ProjectStatus.Archived; + /** + * The background color of the folder. + */ + protected get bgColor(): string { + switch (this.args.status) { + case ProjectStatus.Active: + return COLOR_BG_ACTIVE; + case ProjectStatus.Completed: + return COLOR_BG_COMPLETED; + default: + return COLOR_BG_ARCHIVED; + } + } + + /** + * The stroke color of the folder. + */ + protected get outlineColor(): string { + switch (this.args.status) { + case ProjectStatus.Active: + return COLOR_OUTLINE_ACTIVE; + case ProjectStatus.Completed: + return COLOR_OUTLINE_COMPLETED; + default: + return COLOR_OUTLINE_ARCHIVED; + } + } + + /** + * The color of the status icon. + */ + protected get iconColor(): string { + switch (this.args.status) { + case ProjectStatus.Active: + return COLOR_ICON_ACTIVE; + case ProjectStatus.Completed: + return COLOR_ICON_COMPLETED; + default: + return COLOR_OUTLINE_ARCHIVED; + } } + /*** + * Note: we use `data-test-color` to test color attributes since `fill` + * and `stroke` are converted from CSS tokens to `rgb` by `getAttribute`. + * By using `data-test-color` we can confirm the original token. + */