JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/{multinode,satellite,storagenode}: Fix SVG styling

Browse Source 
Our SVG loader was recently reworked so that snapshots of UI tests
are smaller, but this broke some SVG styles because SVG paths no longer
contain a scoped CSS attribute. This change adds deep selectors where
appropriate to repair the broken styles.

A scoped CSS attribute is added by Vue Loader to elements of components
with scoped styles to identify which component the element belongs to
and restrict CSS rules accordingly. Paths within imported SVGs no longer
contain this type of attribute, so the deep selector must be used to
style the SVG as if it were a child component.

Change-Id: If4beb903fa3b40aa208efa549b8fe23ccf2a547b
This commit is contained in:
Jeremy Wharton 2022-06-07 19:37:38 -05:00 committed by Storj Robot
parent 16d1296613
commit 4e0acba9ba
26 changed files with 56 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/multinode/src/app/components/navigation/NavigationArea.vue
View File

@ -89,7 +89,7 @@ export default class NavigationArea extends Vue {
margin-bottom: 20px;
text-decoration: none;
path {
::v-deep path {
fill: var(--c-label);
}
@ -117,7 +117,7 @@ export default class NavigationArea extends Vue {
color: var(--c-title);
}
path {
::v-deep path {
fill: var(--c-title) !important;
opacity: 1;
}

7
web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue
View File

@ -332,10 +332,7 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
}
}
.arrow-icon {
path {
fill: var(--c-gray);
}
.arrow-icon ::v-deep path {
fill: var(--c-gray);
}
</style>

2
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -908,7 +908,7 @@ tbody {
transform: translateY(-50%);
margin: unset;
& path {
::v-deep path {
fill: white;
}
}

7
web/satellite/src/components/common/VLoader.vue
View File

@ -42,10 +42,7 @@ export default class VLoader extends Vue {
justify-content: center;
}
.white {
path {
fill: #fff;
}
.white ::v-deep path {
fill: #fff;
}
</style>

4
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -282,8 +282,8 @@ export default class AccountArea extends Vue {
font-weight: 600;
}
&__left__icon path,
&__arrow path {
&__left__icon ::v-deep path,
&__arrow ::v-deep path {
fill: #0149ff;
}
}

6
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -480,8 +480,8 @@ export default class NavigationArea extends Vue {
.navigation-area__container__wrap__item-container {
&__left__image path,
&__arrow path {
&__left__image ::v-deep path,
&__arrow ::v-deep path {
fill: #0149ff;
}
}
@ -494,7 +494,7 @@ export default class NavigationArea extends Vue {
background-color: #f7f8fb;
color: #0149ff;
.navigation-area__container__wrap__item-container__left__image path {
.navigation-area__container__wrap__item-container__left__image ::v-deep path {
fill: #0149ff;
}
}

2
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -377,7 +377,7 @@ export default class ProjectSelection extends Vue {
font-weight: 600;
}
svg path {
svg ::v-deep path {
fill: #0149ff;
}
}

2
web/satellite/src/components/objects/BucketItem.vue
View File

@ -151,7 +151,7 @@ export default class BucketItem extends Vue {
background-color: #f4f5f7;
font-family: 'font_medium', sans-serif;
& svg path {
svg ::v-deep path {
fill: #0068dc;
stroke: #0068dc;
}

2
web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
View File

@ -118,7 +118,7 @@ export default class DateRangeSelection extends Vue {
color: #0149ff;
}
svg path {
svg ::v-deep path {
fill: #0149ff;
}
}

7
web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
View File

@ -613,11 +613,8 @@ export default class NewProjectDashboard extends Vue {
margin-right: 9px;
}
&:hover {
svg path {
fill: #fff;
}
&:hover svg ::v-deep path {
fill: #fff;
}
}

7
web/storagenode/src/app/App.vue
View File

@ -132,11 +132,8 @@ export default class App extends Vue {
overflow-y: scroll;
}
.back-button {
path {
fill: var(--regular-icon-color) !important;
}
.back-button ::v-deep path {
fill: var(--regular-icon-color) !important;
}
.js-loading *,

4
web/storagenode/src/app/components/AllSatellitesAuditsArea.vue
View File

@ -164,7 +164,7 @@ export default class AllSatellitesAuditsArea extends Vue {
.disqualification {
color: var(--critical-color);
path {
::v-deep path {
fill: var(--critical-color);
}
}
@ -172,7 +172,7 @@ export default class AllSatellitesAuditsArea extends Vue {
.warning {
color: var(--warning-color);
path {
::v-deep path {
fill: var(--warning-color);
}
}

7
web/storagenode/src/app/components/LoadingScreen.vue
View File

@ -49,11 +49,8 @@ export default class LoadingScreen extends Vue {}
}
}
.storj-logo {
path {
fill: var(--loader-logo-color);
}
.storj-logo ::v-deep path {
fill: var(--loader-logo-color);
}
.loader {

14
web/storagenode/src/app/components/SNOContentTitle.vue
View File

@ -181,11 +181,8 @@ export default class SNOContentTitle extends Vue {
</script>
<style scoped lang="scss">
.svg {
path {
fill: var(--node-id-copy-icon-color);
}
.svg ::v-deep path {
fill: var(--node-id-copy-icon-color);
}
.title-area {
@ -224,11 +221,8 @@ export default class SNOContentTitle extends Vue {
border-color: var(--node-id-border-hover-color);
color: var(--node-id-hover-text-color);
.svg {
path {
fill: var(--node-id-border-hover-color) !important;
}
.svg ::v-deep path {
fill: var(--node-id-border-hover-color) !important;
}
}
}

7
web/storagenode/src/app/components/SNOFooter.vue
View File

@ -99,11 +99,8 @@ export default class SNOFooter extends Vue {
}
}
.storj-logo {
path {
fill: var(--icon-color) !important;
}
.storj-logo ::v-deep path {
fill: var(--icon-color) !important;
}
@media screen and (max-width: 600px) {

28
web/storagenode/src/app/components/SNOHeader.vue
View File

@ -212,18 +212,12 @@ export default class SNOHeader extends Vue {
</script>
<style scoped lang="scss">
.svg {
path {
fill: var(--node-id-copy-icon-color);
}
.svg ::v-deep path {
fill: var(--node-id-copy-icon-color);
}
.storj-logo {
path {
fill: var(--icon-color) !important;
}
.storj-logo ::v-deep path {
fill: var(--icon-color) !important;
}
.settings-icon {
@ -233,11 +227,8 @@ export default class SNOHeader extends Vue {
}
}
.notifications-bell-icon {
path {
fill: var(--regular-icon-color) !important;
}
.notifications-bell-icon ::v-deep path {
fill: var(--regular-icon-color) !important;
}
.header {
@ -329,11 +320,8 @@ export default class SNOHeader extends Vue {
border-color: var(--node-id-border-hover-color);
color: var(--node-id-hover-text-color);
.svg {
path {
fill: var(--node-id-border-hover-color) !important;
}
.svg ::v-deep path {
fill: var(--node-id-border-hover-color) !important;
}
}
}

7
web/storagenode/src/app/components/SatelliteSelection.vue
View File

@ -161,11 +161,8 @@ export default class SatelliteSelection extends Vue {
cursor: pointer;
color: #133e9c;
.svg {
path {
fill: #133e9c !important;
}
.svg ::v-deep path {
fill: #133e9c !important;
}
}
}

7
web/storagenode/src/app/components/SatelliteSelectionDropdownItem.vue
View File

@ -165,11 +165,8 @@ export default class SatelliteSelectionDropdownItem extends Vue {
cursor: pointer;
color: #133e9c;
.svg {
path {
fill: #133e9c !important;
}
.svg ::v-deep path {
fill: #133e9c !important;
}
}
}

2
web/storagenode/src/app/components/WalletArea.vue
View File

@ -149,7 +149,7 @@ export default class WalletArea extends Vue {
background: white;
border-radius: 50%;
path {
::v-deep path {
fill: var(--wallet-feature-opted-in);
}
}

2
web/storagenode/src/app/components/payments/EstimationArea.vue
View File

@ -774,7 +774,7 @@ export default class EstimationArea extends Vue {
fill: var(--info-icon-background);
}
path {
::v-deep path {
fill: var(--info-icon-letter);
}
}

14
web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
View File

@ -109,11 +109,8 @@ export default class EstimationPeriodDropdown extends Vue {
}
}
.arrow {
path {
fill: var(--period-selection-arrow-color);
}
.arrow ::v-deep path {
fill: var(--period-selection-arrow-color);
}
.short-text {
@ -129,11 +126,8 @@ export default class EstimationPeriodDropdown extends Vue {
}
}
.arrow {
path {
fill: #909bad !important;
}
.arrow ::v-deep path {
fill: #909bad !important;
}
}

7
web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
View File

@ -304,10 +304,7 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
}
}
.arrow-icon {
path {
fill: var(--year-selection-arrow-color);
}
.arrow-icon ::v-deep path {
fill: var(--year-selection-arrow-color);
}
</style>

7
web/storagenode/src/app/components/payments/PayoutHistoryPeriodDropdown.vue
View File

@ -102,10 +102,7 @@ export default class PayoutHistoryPeriodDropdown extends Vue {
}
}
.arrow {
path {
fill: var(--period-selection-arrow-color);
}
.arrow ::v-deep path {
fill: var(--period-selection-arrow-color);
}
</style>

4
web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
View File

@ -313,7 +313,7 @@ export default class PayoutHistoryTableItem extends Vue {
&__icon {
margin-left: 7px;
path {
::v-deep path {
stroke: var(--navigation-link-color);
}
}
@ -367,7 +367,7 @@ export default class PayoutHistoryTableItem extends Vue {
min-width: 40px;
min-height: 40px;
path {
::v-deep path {
fill: #909bad;
}
}

7
web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
View File

@ -438,10 +438,7 @@ export default class PayoutPeriodCalendar extends Vue {
}
}
.arrow-icon {
path {
fill: var(--year-selection-arrow-color);
}
.arrow-icon ::v-deep path {
fill: var(--year-selection-arrow-color);
}
</style>

2
web/storagenode/src/app/views/NotificationsArea.vue
View File

@ -221,7 +221,7 @@ export default class NotificationsArea extends Vue {
background-color: var(--disabled-background-color);
pointer-events: none;
.notifications-container__header__button__svg path {
.notifications-container__header__button__svg ::v-deep path {
fill: #979ba7 !important;
}