Show backup status in Settings window

This commit is contained in:
trevor-signal
2025-04-02 14:57:29 -04:00
committed by GitHub
parent 51647fef95
commit aba0e028d4
25 changed files with 1136 additions and 191 deletions

View File

@@ -15,6 +15,11 @@
}
}
$secondary-text-color: light-dark(
variables.$color-gray-60,
variables.$color-gray-25
);
.Preferences {
display: flex;
overflow: hidden;
@@ -111,6 +116,10 @@
&--data-usage {
@include preferences-icon('../images/icons/v3/data/data.svg');
}
&--backups {
@include preferences-icon('../images/icons/v3/backup/backup-bold.svg');
}
}
&__settings-pane {
@@ -140,6 +149,11 @@
border-color: variables.$color-gray-65;
}
&--backups {
border: none;
margin-bottom: 16px;
}
&--header {
flex-grow: 1;
text-align: center;
@@ -247,13 +261,7 @@
&__description {
@include mixins.font-subtitle;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
color: $secondary-text-color;
&--error {
color: variables.$color-accent-red !important;
}
@@ -444,3 +452,90 @@
color: variables.$color-gray-25;
}
}
.Preferences--backups-summary {
&__container {
background-color: light-dark(
variables.$color-gray-02,
variables.$color-gray-80
);
border-radius: 12px;
padding-block: 20px;
padding-inline: 16px;
margin-inline: 24px;
}
&__status-container {
display: flex;
justify-content: space-between;
}
&__type {
@include mixins.font-subtitle;
color: $secondary-text-color;
margin-block-end: 8px;
}
&__note {
@include mixins.font-subtitle;
color: $secondary-text-color;
margin-block-start: 12px;
}
&__canceled {
@include mixins.font-body-1-bold;
color: variables.$color-accent-red;
}
&__icon {
&--active {
&::after {
@include mixins.dark-theme() {
background-image: url('../images/icons/v3/backup/backups-subscribed-dark.svg');
}
@include mixins.light-theme() {
background-image: url('../images/icons/v3/backup/backups-subscribed-light.svg');
}
}
}
&--inactive {
&::after {
@include mixins.dark-theme() {
background-image: url('../images/icons/v3/backup/backups-logo-dark.svg');
}
@include mixins.light-theme() {
background-image: url('../images/icons/v3/backup/backups-logo-light.svg');
}
}
}
&::after {
& {
content: '';
margin-inline-start: 8px;
display: block;
height: 48px;
width: 48px;
}
}
}
}
.Preferences--backup-details {
margin-block-start: 30px;
legend {
margin-block-end: 10px;
}
&__row {
padding-block: 10px;
padding-inline: 24px;
}
&__value {
margin-block-start: 2px;
@include mixins.font-subtitle;
color: $secondary-text-color;
}
&__value-divider {
&::before {
content: '';
margin-inline: 4px;
}
}
}