diff --git a/config/i18n.json b/config/i18n.json index 020f384367..6d840833fc 100644 --- a/config/i18n.json +++ b/config/i18n.json @@ -1295,9 +1295,8 @@ "StreamDeck": { "Connected": "Connected", "NotConnected": "Not Connected", - "Enable": "Stream Deck Plugin", + "Enable": "Stream Deck Plugin Enabled", "FinePrint": "Enable the connection with the DIM Stream Deck plugin. This plugin is a separate project that is neither written by nor supported by the DIM team.", - "OldExtension": "Make sure to uninstall the old Stream Deck Chrome extension. It is no longer needed and will cause odd behavior in DIM.", "Install": "Install plugin", "SelectLoadout": "Send to Stream Deck", "Selection": { diff --git a/src/app/dim-ui/CustomStatWeights.m.scss b/src/app/dim-ui/CustomStatWeights.m.scss index f023fcd828..f9b025d4b0 100644 --- a/src/app/dim-ui/CustomStatWeights.m.scss +++ b/src/app/dim-ui/CustomStatWeights.m.scss @@ -1,5 +1,5 @@ .statWeightRow { - display: flex; + composes: flexRow from '../dim-ui/common.m.scss'; align-items: center; gap: 2px; diff --git a/src/app/dim-ui/FileUpload.m.scss b/src/app/dim-ui/FileUpload.m.scss index 2410316191..ec8be9eab4 100644 --- a/src/app/dim-ui/FileUpload.m.scss +++ b/src/app/dim-ui/FileUpload.m.scss @@ -1,9 +1,13 @@ .fileInput { + composes: flexColumn from './common.m.scss'; + align-items: center; text-align: center; padding: 8px; border: 1px dashed #999; width: 100%; box-sizing: border-box; + gap: 4px; + cursor: pointer; } .instructions { diff --git a/src/app/settings/Checkbox.tsx b/src/app/settings/Checkbox.tsx index 5650d49b10..3c2f5b955c 100644 --- a/src/app/settings/Checkbox.tsx +++ b/src/app/settings/Checkbox.tsx @@ -1,5 +1,6 @@ import Switch from 'app/dim-ui/Switch'; import HelpLink from '../dim-ui/HelpLink'; +import { horizontalClass } from './SettingsPage'; import { Settings } from './initial-settings'; export default function Checkbox({ @@ -10,7 +11,7 @@ export default function Checkbox({ name, onChange, }: { - label: string; + label: React.ReactNode; value: boolean; title?: string; helpLink?: string; @@ -18,7 +19,7 @@ export default function Checkbox({ onChange: (checked: boolean, name: keyof Settings) => void; }) { return ( -
+
diff --git a/src/app/settings/CustomStatsSettings.m.scss b/src/app/settings/CustomStatsSettings.m.scss index 366b5e6fdd..53aa228d53 100644 --- a/src/app/settings/CustomStatsSettings.m.scss +++ b/src/app/settings/CustomStatsSettings.m.scss @@ -1,5 +1,8 @@ +@use '../variables.scss' as *; + .headerRow { - display: flex; + composes: flexRow from '../dim-ui/common.m.scss'; + align-items: center; label { flex-grow: 1; @@ -7,7 +10,7 @@ } .customDesc { - margin-top: 12px; + composes: fineprint from './SettingsPage.m.scss'; } // a style for inputs or input wrappers @@ -24,14 +27,22 @@ } .statOption { - align-items: center; background: #4443; border: 1px solid #0000; border-radius: 4px; box-sizing: border-box; color: var(--theme-text); - flex-grow: 1; + flex: 0 !important; gap: 4px; + padding: 3px 0; + display: flex !important; + align-items: center; + margin: 0; + flex-direction: row; + + @include phone-portrait { + flex-direction: column; + } } .classOption { @@ -52,81 +63,71 @@ // editor for a single stat .customStatEditor { + composes: flexColumn from '../dim-ui/common.m.scss'; border: 1px solid; margin: 8px 0; padding: 6px; - animation-name: pulse-border; - animation-duration: 2s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; + animation: pulse-border 1s ease-in-out 0s infinite alternate; + gap: 4px; +} - display: flex; - flex-direction: column; - gap: 4px 0; - - .editableStatsRow { - justify-content: space-between; - gap: 0.5em; - label { - padding: 3px 0; - display: flex; - margin: 0; - } +.identifyingInfo { + composes: flexWrap from '../dim-ui/common.m.scss'; + align-items: center; + justify-content: flex-end; + gap: 8px; + + img { + height: 1.5em; } - .identifyingInfo { - display: flex; - align-items: center; - gap: 4px; - input { - flex-grow: 1; - } - img { - height: 1.5em; - } - .filter { - flex-grow: 1; - } - code { - background-color: #000; - } + code { + background-color: #000; } - .zero { - opacity: 0.4; +} + +.label { + flex-grow: 1; + text-wrap: balance; +} + +.classIcon { + font-size: 20px; + width: 1.4em; + text-align: center; +} + +.filter { + flex-grow: 1; + color: var(--theme-text-secondary); +} + +.zero { + opacity: 0.4; +} + +.editableStatsRow { + composes: flexRow from '../dim-ui/common.m.scss'; + align-items: center; + justify-content: space-between; + gap: 4px; + + img { + height: 1.5em; } } // all info for a custom stat, without the editing controls .customStatView { - display: flex; + composes: flexRow from '../dim-ui/common.m.scss'; align-items: center; - margin-top: 4px; - // name, class icon, a - .identifyingInfo { - flex-grow: 1; - display: flex; - align-items: center; - & > :nth-child(n + 2) { - margin: 0 4px; - } - .label { - flex-grow: 1; - } - .classIcon { - font-size: 20px; - width: 1.4em; - text-align: center; - } - } + gap: 8px; } @keyframes pulse-border { 0% { border-color: #fff8; } - 50% { - border-color: #fff4; - } 100% { - border-color: #fff8; + border-color: #fff4; } } diff --git a/src/app/settings/CustomStatsSettings.tsx b/src/app/settings/CustomStatsSettings.tsx index 4685eb4aa8..fc90983d73 100644 --- a/src/app/settings/CustomStatsSettings.tsx +++ b/src/app/settings/CustomStatsSettings.tsx @@ -19,8 +19,7 @@ import { DestinyClass } from 'bungie-api-ts/destiny2'; import clsx from 'clsx'; import React, { useRef, useState } from 'react'; import { useSelector } from 'react-redux'; -// eslint-disable-next-line css-modules/no-unused-class -import weightsStyles from '../dim-ui/CustomStatWeights.m.scss'; + import styles from './CustomStatsSettings.m.scss'; import { useSetSetting } from './hooks'; @@ -65,7 +64,7 @@ export function CustomStatsSettings() { }; return ( -
+ <>
{$featureFlags.customStatWeights && ( @@ -88,7 +87,7 @@ export function CustomStatsSettings() {
-
+
{t('Settings.CustomStatDesc1')} {t('Settings.CustomStatDesc3')}
{[...(provisionalStat ? [provisionalStat] : []), ...customStatList].map((c) => @@ -103,7 +102,7 @@ export function CustomStatsSettings() { ), )} -
+ ); } @@ -173,7 +172,7 @@ function CustomStatEditor({ />
-
+
{armorStats.map((statHash) => { const stat = defs.Stat.get(statHash); const weight = weights[statHash] || 0; @@ -205,7 +204,7 @@ function CustomStatEditor({ })}
- + {shortLabel.length > 0 && ( <> {t('Filter.Filter')} @@ -271,28 +270,24 @@ function useStatWeightsEditor(w: CustomStatWeights) { */ function CustomStatView({ statDef, - className, setEditing, }: { statDef: CustomStatDef; - className?: string; // used to alert upstream that we want to edit this stat setEditing: React.Dispatch>; }) { return ( -
-
- - - {statDef.label} -
+
+ + + {statDef.label}
); diff --git a/src/app/settings/Select.m.scss b/src/app/settings/Select.m.scss new file mode 100644 index 0000000000..b3cba5c1d5 --- /dev/null +++ b/src/app/settings/Select.m.scss @@ -0,0 +1,7 @@ +.select { + composes: horizontal from './SettingsPage.m.scss'; + + > select { + max-width: 60%; + } +} diff --git a/src/app/settings/Select.m.scss.d.ts b/src/app/settings/Select.m.scss.d.ts new file mode 100644 index 0000000000..237ee15ebc --- /dev/null +++ b/src/app/settings/Select.m.scss.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'select': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/src/app/settings/Select.tsx b/src/app/settings/Select.tsx index 9f954f019d..71f8a260b5 100644 --- a/src/app/settings/Select.tsx +++ b/src/app/settings/Select.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import styles from './Select.m.scss'; import { Settings } from './initial-settings'; export default function Select({ @@ -18,7 +19,7 @@ export default function Select({ onChange: React.ChangeEventHandler; }) { return ( -
+

{t('Settings.Theme')}

-
+
-
{t('Settings.DefaultItemSizeNote')}
+
{t('Settings.DefaultItemSizeNote')}
)} -
+
-
- -
+
-
+
- {t('Settings.PerkList')} - - -
+
+ {t('Settings.PerkDisplay')} +
    +
  • + +
    • +
  • + +
    • +
{$featureFlags.clarityDescriptions && ( -
+
- {t('Settings.CharacterOrderRecent')} - - - - +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • {settings.characterOrder === 'custom' && ( )} -
+
)} - {isPhonePortrait ? ( -
+
+ {isPhonePortrait ? ( + <> + -
{t('Settings.InventoryColumnsMobileLine2')}
-
- ) : ( -
- } {$DIM_FLAVOR !== 'release' && currentAccount?.destinyVersion === 2 && ( - +
+ +
)} diff --git a/src/app/settings/SortOrderEditor.m.scss b/src/app/settings/SortOrderEditor.m.scss index f22886140d..486db400b3 100644 --- a/src/app/settings/SortOrderEditor.m.scss +++ b/src/app/settings/SortOrderEditor.m.scss @@ -1,13 +1,14 @@ @use '../variables' as *; .editor { + composes: flexColumn from '../dim-ui/common.m.scss'; + gap: 4px; padding: 4px 0 0 0; } .item { background: black; padding: 4px 8px 4px 0; - margin-bottom: 4px; display: flex; flex-direction: row; align-items: center; diff --git a/src/app/settings/Spreadsheets.m.scss b/src/app/settings/Spreadsheets.m.scss new file mode 100644 index 0000000000..add1b1d61a --- /dev/null +++ b/src/app/settings/Spreadsheets.m.scss @@ -0,0 +1,4 @@ +.buttons { + composes: flexWrap from '../dim-ui/common.m.scss'; + gap: 4px; +} diff --git a/src/app/settings/Spreadsheets.m.scss.d.ts b/src/app/settings/Spreadsheets.m.scss.d.ts new file mode 100644 index 0000000000..f86ab6f866 --- /dev/null +++ b/src/app/settings/Spreadsheets.m.scss.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'buttons': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/src/app/settings/Spreadsheets.tsx b/src/app/settings/Spreadsheets.tsx index 1f9e07f40d..152419bfd2 100644 --- a/src/app/settings/Spreadsheets.tsx +++ b/src/app/settings/Spreadsheets.tsx @@ -9,6 +9,8 @@ import { errorMessage } from 'app/utils/errors'; import { DropzoneOptions } from 'react-dropzone'; import { useSelector } from 'react-redux'; import { AppIcon, spreadsheetIcon } from '../shell/icons'; +import { settingClass } from './SettingsPage'; +import styles from './Spreadsheets.m.scss'; export default function Spreadsheets() { const dispatch = useThunkDispatch(); @@ -38,11 +40,11 @@ export default function Spreadsheets() {
{confirmDialog}

{t('Settings.Data')}

-
+
-
+
-
-
-
- + <> + - {($DIM_FLAVOR === 'dev' || window.enableMockProfile) && ( - - )} -
-
+ {($DIM_FLAVOR === 'dev' || window.enableMockProfile) && ( + + )} + ); } diff --git a/src/app/settings/WishListSettings.m.scss b/src/app/settings/WishListSettings.m.scss index 59b84f53e3..fdabadbcbd 100644 --- a/src/app/settings/WishListSettings.m.scss +++ b/src/app/settings/WishListSettings.m.scss @@ -1,3 +1,10 @@ .tooltipDiv { display: inline-block; } + +.text { + width: 100%; + margin: 4px 0; + height: 26px; + border: none; +} diff --git a/src/app/settings/WishListSettings.m.scss.d.ts b/src/app/settings/WishListSettings.m.scss.d.ts index c81067abd1..b78948c9e2 100644 --- a/src/app/settings/WishListSettings.m.scss.d.ts +++ b/src/app/settings/WishListSettings.m.scss.d.ts @@ -1,6 +1,7 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { + 'text': string; 'tooltipDiv': string; } export const cssExports: CssExports; diff --git a/src/app/settings/WishListSettings.tsx b/src/app/settings/WishListSettings.tsx index 5c5dab8021..25621d12bf 100644 --- a/src/app/settings/WishListSettings.tsx +++ b/src/app/settings/WishListSettings.tsx @@ -1,10 +1,9 @@ import { settingSelector } from 'app/dim-api/selectors'; import { ConfirmButton } from 'app/dim-ui/ConfirmButton'; import { PressTip } from 'app/dim-ui/PressTip'; -import Switch from 'app/dim-ui/Switch'; import { I18nKey, t } from 'app/i18next-t'; import { showNotification } from 'app/notifications/notifications'; -import { AppIcon, deleteIcon } from 'app/shell/icons'; +import { AppIcon, banIcon, deleteIcon, plusIcon } from 'app/shell/icons'; import { wishListGuideLink } from 'app/shell/links'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; import { errorMessage } from 'app/utils/errors'; @@ -18,7 +17,10 @@ import FileUpload from '../dim-ui/FileUpload'; import HelpLink from '../dim-ui/HelpLink'; import { clearWishLists } from '../wishlists/actions'; import { wishListsLastFetchedSelector, wishListsSelector } from '../wishlists/selectors'; +import Checkbox from './Checkbox'; +import { fineprintClass, horizontalClass, settingClass } from './SettingsPage'; import styles from './WishListSettings.m.scss'; +import { Settings } from './initial-settings'; export default function WishListSettings() { const dispatch = useThunkDispatch(); @@ -100,24 +102,23 @@ export default function WishListSettings() { return (

- {t('WishListRoll.Header')} - + {t('WishListRoll.Header')}

{numWishListRolls > 0 && ( -
-
+
+
{wishListLastUpdated && ( -
+
{t('WishListRoll.LastUpdated', { lastUpdatedDate: wishListLastUpdated.toLocaleDateString(), lastUpdatedTime: wishListLastUpdated.toLocaleTimeString(), @@ -173,7 +174,7 @@ export default function WishListSettings() { onAddWishlist={(url) => changeUrl(url, true)} /> -
+
@@ -196,14 +197,11 @@ function BuiltinWishlist({ onChange: (checked: boolean) => void; }) { return ( -
-
- - -
+
+ {rollsCount !== undefined && t('WishListRoll.NumRolls', { num: rollsCount })} {(title || description) && ( -
+
{title}
{description} @@ -227,16 +225,14 @@ function UrlWishlist({ onRemove: () => void; }) { return ( -
-
- - - - -
- {!title &&
{url}
} +
+ + + + + {!title &&
{url}
} {rollsCount !== undefined && t('WishListRoll.NumRolls', { num: rollsCount })} - {description &&
{description}
} + {description &&
{description}
}
); } @@ -252,12 +248,12 @@ function NewUrlWishlist({ const canAddError = addWishlistDisabled(newWishlistSource); const disabled = canAddError !== false; return ( -
+
{t('WishListRoll.ExternalSource')}
setNewWishlistSource(e.target.value)} placeholder={t('WishListRoll.ExternalSourcePlaceholder')} @@ -265,16 +261,17 @@ function NewUrlWishlist({
- { onAddWishlist(newWishlistSource); setNewWishlistSource(''); }} - /> + > + {t('WishListRoll.UpdateExternalSource')} +
diff --git a/src/app/settings/settings.scss b/src/app/settings/settings.scss deleted file mode 100644 index 8edf40d19f..0000000000 --- a/src/app/settings/settings.scss +++ /dev/null @@ -1,129 +0,0 @@ -@use '../variables.scss' as *; - -.settings { - font-size: 14px; - max-width: 500px; - padding: 0 10px; - - h1 { - margin: 8px 0 8px 0; - } - - h2 { - text-transform: uppercase; - font-size: 16px; - font-weight: normal; - letter-spacing: 1px; - margin: 0 0 4px 0 !important; - } - - section { - margin-bottom: 2em; - } - - .fineprint { - font-size: 0.85em; - color: var(--theme-text-secondary); - } - - .setting { - padding: 8px; - margin: 0 0 4px 0; - background-color: rgba(0, 0, 0, 0.4); - > .setting { - padding: 0; - margin: 0; - background-color: transparent; - } - } - - .horizontal { - display: flex; - flex-direction: row; - margin-bottom: 4px; - align-items: center; - &:last-child { - margin-bottom: 0; - } - } - - label { - flex: 1; - display: block; - margin-right: 1em; - } - - .itemSize { - label { - flex: 0; - white-space: nowrap; - margin-right: 0; - } - - input { - flex: 1; - margin: 0 1em; - } - - button { - margin-left: 1em; - } - } - - .stylizedAnchor { - margin-right: 0.5em; - } - - .radioOptions { - margin: 8px 0 0 4px; - display: flex; - flex-direction: column; - gap: 8px; - label { - vertical-align: text-top; - display: flex; - flex-direction: row; - align-items: center; - gap: 0.25em; - } - input { - margin: 0 4px 0 0; - } - } - - .ratings-key { - margin-top: 4px; - } - - input[type='checkbox'] { - font-size: 16px; - } - - .wish-list-text { - width: 100%; - margin: 10px 0; - height: 30px; - border: none; - } - - .customStats { - display: grid; - grid-template-columns: max-content 1fr; - margin: 8px 0 0 0; - gap: 4px 8px; - > div { - white-space: nowrap; - } - } - - .new-item { - position: static; - display: inline-block; - transform: scale(1.5); - margin-right: 8px; - } - - .subSetting { - margin-top: 8px; - } -} diff --git a/src/app/storage/DimApiSettings.m.scss b/src/app/storage/DimApiSettings.m.scss index a8abc59e79..7e1e739583 100644 --- a/src/app/storage/DimApiSettings.m.scss +++ b/src/app/storage/DimApiSettings.m.scss @@ -1,14 +1,4 @@ .storage { - h2 { - margin: 0 0 12px 0; - } - h3 { - text-transform: none; - font-size: 14px; - margin: 0; - font-weight: bold; - } - p { margin: 8px 0; } diff --git a/src/app/storage/DimApiSettings.tsx b/src/app/storage/DimApiSettings.tsx index 67e5b5b62f..98b64c05eb 100644 --- a/src/app/storage/DimApiSettings.tsx +++ b/src/app/storage/DimApiSettings.tsx @@ -5,11 +5,13 @@ import { exportDimApiData } from 'app/dim-api/dim-api'; import { importDataBackup } from 'app/dim-api/import'; import { apiPermissionGrantedSelector, dimSyncErrorSelector } from 'app/dim-api/selectors'; import HelpLink from 'app/dim-ui/HelpLink'; -import Switch from 'app/dim-ui/Switch'; import useConfirm from 'app/dim-ui/useConfirm'; import { t } from 'app/i18next-t'; import { dimApiHelpLink } from 'app/login/Login'; import { showNotification } from 'app/notifications/notifications'; +import Checkbox from 'app/settings/Checkbox'; +import { fineprintClass, horizontalClass, settingClass } from 'app/settings/SettingsPage'; +import { Settings } from 'app/settings/initial-settings'; import ErrorPanel from 'app/shell/ErrorPanel'; import { AppIcon, deleteIcon } from 'app/shell/icons'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; @@ -87,40 +89,41 @@ export default function DimApiSettings() { {confirmDialog}

{t('Storage.MenuTitle')}

-
-
- - -
-
{t('Storage.DimApiFinePrint')}
+
+ + {t('Storage.EnableDimApi')} + + } + value={apiPermissionGranted} + onChange={onApiPermissionChange} + /> +
{t('Storage.DimApiFinePrint')}
+ {apiPermissionGranted && ( + + )}
{profileLoadedError && ( )} {apiPermissionGranted && ( - <> -
+
+
{t('SearchHistory.Title')}
-
- - -
- +
)} - - + +
+ +
); } diff --git a/src/app/storage/ImportExport.tsx b/src/app/storage/ImportExport.tsx index e451d7ccc3..241c791912 100644 --- a/src/app/storage/ImportExport.tsx +++ b/src/app/storage/ImportExport.tsx @@ -6,7 +6,6 @@ import { AppIcon, downloadIcon } from 'app/shell/icons'; import { errorMessage } from 'app/utils/errors'; import React from 'react'; import { DropzoneOptions } from 'react-dropzone'; -import './storage.scss'; export default function ImportExport({ onExportData, @@ -56,18 +55,16 @@ export default function ImportExport({ }; return ( -
-

{t('Storage.ImportExport')}

-

- -

+ <> + {t('Storage.ImportExport')} + -
+ ); } diff --git a/src/app/storage/LocalStorageInfo.tsx b/src/app/storage/LocalStorageInfo.tsx index d3df857a51..8963347057 100644 --- a/src/app/storage/LocalStorageInfo.tsx +++ b/src/app/storage/LocalStorageInfo.tsx @@ -3,9 +3,14 @@ import { percent } from 'app/shell/formatters'; import clsx from 'clsx'; import { useEffect, useState } from 'react'; import styles from './LocalStorageInfo.m.scss'; -import './storage.scss'; -export default function LocalStorageInfo({ showDetails }: { showDetails: boolean }) { +export default function LocalStorageInfo({ + showDetails, + className, +}: { + showDetails: boolean; + className?: string; +}) { const [browserMayClearData, setBrowserMayClearData] = useState(true); const [quota, setQuota] = useState<{ quota: number; usage: number }>(); @@ -30,7 +35,7 @@ export default function LocalStorageInfo({ showDetails }: { showDetails: boolean } return ( -
+
{showDetails && ( <>

{t('Storage.IndexedDBStorage')}

diff --git a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss index c4f14660e4..7385f244e6 100644 --- a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss +++ b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss @@ -8,11 +8,3 @@ .connected { color: $green; } - -.downloadPlugin { - margin-top: 8px; -} - -.resetButton { - margin-top: 8px; -} diff --git a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss.d.ts b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss.d.ts index fea3dfcc72..84e5ab67a4 100644 --- a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss.d.ts +++ b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.m.scss.d.ts @@ -2,9 +2,7 @@ // Please do not change this file! interface CssExports { 'connected': string; - 'downloadPlugin': string; 'notConnected': string; - 'resetButton': string; } export const cssExports: CssExports; export default cssExports; diff --git a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.tsx b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.tsx index d6469aba88..45aae2a9d4 100644 --- a/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.tsx +++ b/src/app/stream-deck/StreamDeckSettings/StreamDeckSettings.tsx @@ -1,9 +1,11 @@ -import Switch from 'app/dim-ui/Switch'; import { t } from 'app/i18next-t'; -import { AppIcon, faArrowCircleDown } from 'app/shell/icons'; +import { AppIcon, banIcon, faArrowCircleDown } from 'app/shell/icons'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; import ExternalLink from 'app/dim-ui/ExternalLink'; +import Checkbox from 'app/settings/Checkbox'; +import { fineprintClass, settingClass } from 'app/settings/SettingsPage'; +import { Settings } from 'app/settings/initial-settings'; import { streamDeckConnectedSelector } from 'app/stream-deck/selectors'; import { lazyLoadStreamDeck, @@ -12,7 +14,6 @@ import { stopStreamDeckConnection, } from 'app/stream-deck/stream-deck'; import { setStreamDeckEnabled, streamDeckEnabled } from 'app/stream-deck/util/local-storage'; -import clsx from 'clsx'; import { useState } from 'react'; import { useSelector } from 'react-redux'; import styles from './StreamDeckSettings.m.scss'; @@ -46,29 +47,29 @@ export default function StreamDeckSettings() { return (

Elgato Stream Deck

-
-
- - -
-
- {t('StreamDeck.FinePrint')} {t('StreamDeck.OldExtension')} -
+
+ +
{t('StreamDeck.FinePrint')}
{connected ? (
{t('StreamDeck.Connected')}
) : (
- {t('StreamDeck.NotConnected')}
)} -
+
diff --git a/src/locale/en.json b/src/locale/en.json index 82e22dce80..4a219375e3 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -1225,7 +1225,6 @@ "DataIsLocal": "Tag and notes data is local only", "DeleteAllData": "Delete ALL Data from DIM Sync Servers", "DeleteAllDataConfirm": "Are you sure you want to delete ALL your data, for all accounts, from DIM Sync? You can't undo this.", - "DeleteAllDataLabel": "Wipe DIM Sync Data", "Details": { "IndexedDBStorage": "Local storage will save your information only on this browser. Clearing your browsing data will delete this information." }, @@ -1272,11 +1271,10 @@ "Yes": "Yes" }, "Connected": "Connected", - "Enable": "Stream Deck Plugin", + "Enable": "Stream Deck Plugin Enabled", "FinePrint": "Enable the connection with the DIM Stream Deck plugin. This plugin is a separate project that is neither written by nor supported by the DIM team.", "Install": "Install plugin", "NotConnected": "Not Connected", - "OldExtension": "Make sure to uninstall the old Stream Deck Chrome extension. It is no longer needed and will cause odd behavior in DIM.", "SelectLoadout": "Send to Stream Deck", "Selection": { "Item": "Choose an item from the inventory",