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);