diff --git a/browser/resources/settings/brave_sync_page/brave_sync_code_dialog.html b/browser/resources/settings/brave_sync_page/brave_sync_code_dialog.html index 9041cbd711de..b33fed4e5ba1 100644 --- a/browser/resources/settings/brave_sync_page/brave_sync_code_dialog.html +++ b/browser/resources/settings/brave_sync_page/brave_sync_code_dialog.html @@ -12,34 +12,34 @@ .dialog-title { display: block; - line-height: 1.6; font-weight: 700; + line-height: 1.6; } .dialog-subtitle { - margin-top: 10px; display: block; - line-height: 1.4; font-size: 90%; + line-height: 1.4; + margin-top: 10px; } .tertiary-button { - border: none; background: none; + border: none; color: var(--cr-primary-text-color); - text-decoration: underline; + cursor: pointer; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; - cursor: pointer; + text-decoration: underline; } .button-group > * { - margin-right: 8px; + margin-inline-end: 8px; } .button-group:last-child { - margin-right: 0; + margin-inline-end: 0; } .invalid-sync-code { @@ -47,34 +47,34 @@ } .devices { - margin: 0 20px 20px 20px; - padding: 0; - width: -webkit-fill-available; - height: 220px; + align-items: center; display: grid; + grid-gap: 30px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; - grid-gap: 30px; - align-items: center; + height: 220px; justify-content: center; + margin: 0 20px 20px 20px; + padding: 0; + width: -webkit-fill-available; } .device { -webkit-appearance: none; + align-items: center; background: none; - box-sizing: border-box; - height: 100%; - border-width: 1px; - border-style: solid; border-color: var(--line-color); border-image: initial; border-radius: 6px; - padding: 0; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + cursor: pointer; display: flex; flex-direction: column; - align-items: center; + height: 100%; justify-content: center; - cursor: pointer; + padding: 0; } .device[disabled] { @@ -83,8 +83,8 @@ .device-image { - margin-bottom: 20px; height: 100px; + margin-bottom: 20px; } [disabled] > .device-image { @@ -92,20 +92,20 @@ } .device-title { - color: var(--cr-primary-text-color); align-self: unset; - font-weight: 600; + color: var(--cr-primary-text-color); + font-family: Poppins, sans-serif; font-size: 20px; + font-weight: 600; line-height: 1.6; margin: 0; padding: 0; - font-family: Poppins, sans-serif; } .device-subtitle { align-self: unset; - font-weight: 400; font-style: italic; + font-weight: 400; margin: 0; } [disabled] > .device-title, @@ -116,82 +116,82 @@ .qr-viewer { - padding-left: 50%; + align-items: center; background-image: url(chrome://settings/brave_sync_page/qr_scanning.svg); background-position: left center; background-repeat: no-repeat; background-size: 40%; - min-height: 130px; + color: var(--cr-primary-text-color); display: flex; justify-content: center; - align-items: center; - color: var(--cr-primary-text-color); + min-height: 130px; + padding-inline-start: 50%; } .qr-image { - box-sizing: border-box; - border: solid 1px var(--line-color); background: white; + border: solid 1px var(--line-color); + box-sizing: border-box; + max-width: 100%; padding: 15px; width: 300px; - max-width: 100%; } .sync-code-widget { - margin: 0 20px; - width: -webkit-fill-available; - font-family: Poppins, sans-serif; - padding: 10px; - border-width: 1px; - border-style: solid; border-color: var(--line-color); border-image: initial; border-radius: 6px; + border-style: solid; + border-width: 1px; + font-family: Poppins, sans-serif; + margin: 0 20px; + padding: 10px; + width: -webkit-fill-available; } .sync-code-text { - box-sizing: border-box; - min-height: 140px; - width: 100%; - border-width: 1px; - border-style: solid; border-color: var(--line-color); border-radius: 6px; - padding: 15px 20px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 26px; + min-height: 140px; + padding: 15px 20px; resize: vertical; + width: 100%; } .sync-code-footer { - margin-top: 10px; + align-items: center; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; - align-items: center; + margin-top: 10px; /* check muli */ } .clipboard-button { + height: 24px; margin: 0; width: 24px; - height: 24px; } .sync-code-clipboard { + align-items: center; display: grid; + gap: 10px; grid-template-columns: auto auto; grid-template-rows: auto; - align-items: center; - gap: 10px; } .clipboard-success { - transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; + transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1); } .clipboard-success.is-success-true { diff --git a/browser/resources/settings/brave_sync_page/brave_sync_configure.html b/browser/resources/settings/brave_sync_page/brave_sync_configure.html index 782c05964f18..38edfeed8bc4 100644 --- a/browser/resources/settings/brave_sync_page/brave_sync_configure.html +++ b/browser/resources/settings/brave_sync_page/brave_sync_configure.html @@ -7,12 +7,12 @@ .device-list { - margin: 24px 0; - min-width: 100%; border-collapse: collapse; font-family: Poppins, sans-serif; font-weight: 500; - text-align: left; + margin: 24px 0; + min-width: 100%; + text-align: left; /* csschecker-disable-line left-right */ } thead @@ -35,39 +35,39 @@ th:first-child, td:first-child { - padding-left: 12px; + padding-inline-start: 12px; } th:last-child, td:last-child { - padding-right: 12px; + padding-inline-end: 12px; } .device-name { + display: block; max-width: 30ch; - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; - display: block; + text-overflow: ellipsis; + white-space: nowrap; } .device-actions { + column-gap: 8px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto; - column-gap: 8px; justify-content: end; } .delete-button { + height: 24px; margin: 0; width: 24px; - height: 24px; } section @@ -77,10 +77,10 @@ .chain-actions { + column-gap: 8px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto; - column-gap: 8px; justify-content: start; } diff --git a/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.html b/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.html index 0ada9e2b3a39..96db23f7fcc4 100644 --- a/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.html +++ b/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.html @@ -2,23 +2,23 @@ .dialog-title { display: block; - line-height: 1.6; font-weight: 700; + line-height: 1.6; } .dialog-subtitle { - margin-top: 10px; display: block; - line-height: 1.4; font-size: 90%; + line-height: 1.4; + margin-top: 10px; } .button-group > * { - margin-right: 8px; + margin-inline-end: 8px; } .button-group:last-child { - margin-right: 0; + margin-inline-end: 0; } .delete-account-error { diff --git a/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.ts b/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.ts index 718bbfce3b55..d09bfb7e405c 100644 --- a/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.ts +++ b/browser/resources/settings/brave_sync_page/brave_sync_delete_account_dialog.ts @@ -76,17 +76,17 @@ export class SettingsBraveSyncCodeDialogElement BraveSyncBrowserProxy.getInstance(); async handleDeleteAccount_() { - let error_text = '' + let errorText = '' this.deleteIsInProgress = true this.deleteAccountError = '' try { await this.syncBrowserProxy_.permanentlyDeleteSyncAccount() } catch (e: unknown) { - error_text = (e as string) + errorText = (e as string) } this.deleteIsInProgress = false - this.deleteAccountError = error_text + this.deleteAccountError = errorText if (!this.deleteAccountError) { this.doingDeleteAccount = false