Skip to content

[PER-10633] Replace hardcoded colors for file-browser components and generic elements from the same main screen #1085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aasandei-vsp merged 1 commit into from
Jul 20, 2026
Merged

[PER-10633] Replace hardcoded colors for file-browser components and generic elements from the same main screen #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions src/app/core/components/left-menu/left-menu.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ $transition-length: $default-transition-length;

$left-menu-icon-width: 3 * $grid-unit;

$hover-color: lighten($PR-blue, 4%);
$hover-color: lighten($PR-blue-900, 4%);
$active-color: $PR-orange;
$active-indicator-color: lighten($active-color, 7%);

$archive-options-shadow-color: rgba($black, 0.1);
$archive-options-shadow-color: rgba($PR-brand-black, 0.1);
$archive-options-shadow-spread: $grid-unit * 0.25;
$archive-options-shadow-offset: 0.5rem;

Expand All @@ -23,8 +23,8 @@ $archive-options-shadow-offset: 0.5rem;
width: $left-menu-width;
max-width: 80%;
transform: translateX(-100%);
background-color: $PR-blue;
color: white;
background-color: $PR-blue-900;
color: $PR-brand-white;
max-height: 100vh;
display: flex;
flex-direction: column;
Expand All @@ -37,7 +37,7 @@ $archive-options-shadow-offset: 0.5rem;
width: 180px;
height: 1px;
margin: 0 auto;
border-top: solid 1px rgba(255, 255, 255, 0.15);
border-top: solid 1px rgba($PR-brand-white, 0.15);
}

.apps-menu {
Expand Down Expand Up @@ -97,14 +97,14 @@ $archive-options-shadow-offset: 0.5rem;
line-height: $btn-line-height;
cursor: pointer;
user-select: none;
color: white;
color: $PR-brand-white;
font-weight: 700;
text-decoration: none;

transition: background-color $transition-length * 0.25 ease-in;

a {
color: white;
color: $PR-brand-white;
text-decoration: none;
}

Expand Down Expand Up @@ -165,7 +165,7 @@ $archive-options-shadow-offset: 0.5rem;
}

.submenu {
background: $PR-blue;
background: $PR-blue-900;

.submenu-item {
font-size: $font-size-sm;
Expand All @@ -176,7 +176,7 @@ $archive-options-shadow-offset: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
color: white;
color: $PR-brand-white;
text-decoration: none;

& span {
Expand All @@ -192,7 +192,7 @@ $archive-options-shadow-offset: 0.5rem;
}

&:hover {
background: darken($PR-blue, 7%);
background: darken($PR-blue-900, 7%);
text-decoration: none;
}
}
Expand Down Expand Up @@ -224,7 +224,7 @@ $archive-options-shadow-offset: 0.5rem;
padding: 0;
position: relative;
outline: none !important;
background-color: $PR-blue;
background-color: $PR-blue-900;
z-index: 3;

.archive {
Expand Down Expand Up @@ -295,7 +295,7 @@ $archive-options-shadow-offset: 0.5rem;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: $PR-blue;
background-color: $PR-blue-900;
transition: background-color $transition-length * 0.25 ease-in;

&:hover {
Expand All @@ -308,10 +308,10 @@ $archive-options-shadow-offset: 0.5rem;
.archive-options {
display: initial;
flex: 0 0 auto;
background-color: $PR-blue;
background-color: $PR-blue-900;
hr {
margin: $grid-unit * 0.5;
border-color: white;
border-color: $PR-brand-white;
}
overflow-y: hidden;
}
Expand All @@ -324,12 +324,12 @@ $archive-options-shadow-offset: 0.5rem;
align-items: center;
font-size: $font-size-sm;
user-select: none;
color: white;
color: $PR-brand-white;
text-decoration: none;

&:hover:not(.active) {
text-decoration: none;
background-color: lighten($PR-blue, 4%);
background-color: lighten($PR-blue-900, 4%);
}

&.active {
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/components/multi-select-status/multi-select-status.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
display: flex;
align-items: center;
background-color: $PR-orange;
color: white;
color: $PR-brand-white;
transition: transform $default-transition-length ease-in;
padding: 0px 10px;

Expand Down
12 changes: 6 additions & 6 deletions src/app/core/components/nav/nav.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
left: 0;
right: 0;
z-index: $z-index-nav;
background-color: $white;
background-color: $PR-brand-white;
box-shadow: $box-shadow-sm;

@include after($tablet-horizontal) {
Expand All @@ -22,10 +22,10 @@

nav.navbar {
padding: 0 0.5rem;
color: white;
color: $PR-brand-white;
height: $navbar-height;
align-items: center;
background-color: $PR-blue;
background-color: $PR-blue-900;

&.nav-desktop {
display: none;
Expand Down Expand Up @@ -116,7 +116,7 @@ nav.nav-desktop {

.nav-buttons {
margin-left: $grid-unit;
color: white;
color: $PR-brand-white;
display: flex;
align-items: center;

Expand All @@ -127,8 +127,8 @@ nav.nav-desktop {
border-radius: 50%;
width: $button-size;
height: $button-size;
background-color: white;
color: $PR-blue;
background-color: $PR-brand-white;
color: $PR-blue-900;
text-align: center;
line-height: $button-size;
font-weight: bold;
Expand Down
30 changes: 15 additions & 15 deletions src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
@import 'mixins';

.pr-edit-date-time-dialog {
background: $white;
background: $PR-brand-white;
border-radius: 12px;
min-width: 658px;
box-shadow: 0 8px 32px rgba($black, 0.12);
box-shadow: 0 8px 32px rgba($PR-brand-black, 0.12);
font-family: 'Inter', sans-serif;

// Header
Expand All @@ -21,7 +21,7 @@
margin: 0;
font-size: 18px;
font-weight: 600;
color: $PR-blue;
color: $PR-blue-900;
}

.pr-close-button {
Expand All @@ -35,7 +35,7 @@
font-size: 20px;

&:hover {
color: $PR-blue;
color: $PR-blue-900;
}
}
}
Expand All @@ -57,7 +57,7 @@
padding: 20px;
border: 1px solid $PR-blue-100;
border-radius: 12px;
background: $white;
background: $PR-brand-white;
}

.pr-card-header {
Expand Down Expand Up @@ -99,7 +99,7 @@

span {
font-size: 14px;
color: $PR-blue;
color: $PR-blue-900;
white-space: nowrap;
}
}
Expand Down Expand Up @@ -153,7 +153,7 @@
width: 18px;
left: 3px;
bottom: 3px;
background-color: $white;
background-color: $PR-brand-white;
border-radius: 50%;
transition: 0.2s;
}
Expand Down Expand Up @@ -185,7 +185,7 @@
border: none;
cursor: pointer;
padding: 4px;
color: $PR-blue;
color: $PR-blue-900;
display: flex;
align-items: center;
margin-left: auto;
Expand All @@ -203,7 +203,7 @@

> span {
font-size: 14px;
color: $PR-blue;
color: $PR-blue-900;
}
}

Expand All @@ -230,8 +230,8 @@
letter-spacing: 0.16em;
text-align: center;
text-transform: uppercase;
color: $PR-blue;
background: $white;
color: $PR-blue-900;
background: $PR-brand-white;
border-radius: 4px;
padding: 0 8px;
height: 20px;
Expand Down Expand Up @@ -270,10 +270,10 @@
padding: 16px 24px;
border: none;
border-radius: 6px;
background: $white;
background: $PR-brand-white;
font-size: 14px;
font-weight: 500;
color: $PR-blue;
color: $PR-blue-900;
cursor: pointer;
height: 40px;
display: flex;
Expand All @@ -286,10 +286,10 @@
padding: 16px 24px;
border: none;
border-radius: 6px;
background: $PR-blue;
background: $PR-blue-900;
font-size: 14px;
font-weight: 500;
color: $white;
color: $PR-brand-white;
cursor: pointer;
height: 40px;
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions src/app/file-browser/components/edit-tags/edit-tags.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: block;
flex: 1;
max-width: 100%;
background-color: white;
background-color: $PR-brand-white;

&.is-waiting {
opacity: 0.5;
Expand Down Expand Up @@ -88,7 +88,7 @@
height: $multi-select-radius * math.div(2, 3);
width: $multi-select-radius * math.div(2, 3);
border-radius: 50%;
background: $PR-blue;
background: $PR-blue-900;
opacity: 0;
}

Expand Down Expand Up @@ -122,7 +122,7 @@

.manage-tags-link {
font-weight: 600;
color: black;
color: $PR-brand-black;
text-decoration: underline;
cursor: pointer;
}
Expand Down
8 changes: 4 additions & 4 deletions src/app/file-browser/components/file-list-controls/file-list-controls.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ pr-folder-view-toggle {
flex: 1 1 auto;
display: flex;
align-items: center;
background-color: white;
background-color: $PR-brand-white;
padding-left: 5px;

&.visible {
Expand Down Expand Up @@ -237,8 +237,8 @@ pr-folder-view-toggle {

.download-options {
box-shadow:
0px 2px 2px rgba(0, 0, 0, 0.24),
0px 0px 2px rgba(0, 0, 0, 0.12);
0px 2px 2px rgba($PR-brand-black, 0.24),
0px 0px 2px rgba($PR-brand-black, 0.12);
border-radius: 2px;
width: 211px;
height: auto;
Expand All @@ -247,7 +247,7 @@ pr-folder-view-toggle {
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
background-color: $PR-brand-white;
margin-left: 7rem;
z-index: 1000;

Expand Down
Loading