diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html index c67d66397..c587f4ef4 100644 --- a/src/app/core/components/layout/layout.component.html +++ b/src/app/core/components/layout/layout.component.html @@ -1,4 +1,4 @@ -
+
@if (isWeb()) { } @@ -19,7 +19,7 @@
- + {{ 'project.overview.files.filesPreview' | translate }} @for (option of storageAddons(); track option.folder.id) { - - +
- + {{ option.label }} +
}
diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.scss b/src/app/features/project/overview/components/files-widget/files-widget.component.scss index 2ca8ce5fe..963f77097 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.scss +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.scss @@ -2,3 +2,19 @@ border: 1px solid var(--grey-2); border-radius: 0.75rem; } + +.addon-tab:hover { + .addon-option { + background-color: var(--grey-3); + } +} + +.addon-option { + color: var(--grey-4); + line-height: 1.5rem; + padding: 0.625rem 1rem; + + &.selected { + color: var(--dark-blue-1); + } +} diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.ts b/src/app/features/project/overview/components/files-widget/files-widget.component.ts index 8b6c926b4..c907027ac 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.ts +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.ts @@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store'; import { TranslatePipe } from '@ngx-translate/core'; -import { Button } from 'primeng/button'; import { Skeleton } from 'primeng/skeleton'; import { TabsModule } from 'primeng/tabs'; @@ -45,7 +44,7 @@ import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-h @Component({ selector: 'osf-files-widget', - imports: [TranslatePipe, SelectComponent, TabsModule, FilesTreeComponent, Button, Skeleton], + imports: [TranslatePipe, SelectComponent, TabsModule, FilesTreeComponent, Skeleton], templateUrl: './files-widget.component.html', styleUrl: './files-widget.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index dee43e41c..a1b804d87 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -91,7 +91,7 @@ $base-font-size: 16px; --p-form-field-hover-border-color: var(--grey-1); --p-form-field-disabled-background: var(--white); --p-form-field-disabled-color: var(--grey-1); - --p-form-field-placeholder-color: var(--grey-1); + --p-form-field-placeholder-color: var(--grey-4); --p-list-option-color: var(--dark-blue-1); --p-list-option-focus-color: var(--dark-blue-1); --p-list-option-focus-background: var(--bg-blue-3);