Merge pull request #10208 from DestinyItemManager/settings-styles

Settings style cleanup
DestinyItemManager · Jan 5, 2024 · c16c055 · c16c055
2 parents d02e9a5 + 6ec5cf6
commit c16c055
Show file tree

Hide file tree

Showing 29 changed files with 512 additions and 469 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,15 +11,15 @@ export default function Checkbox({
   name,
   onChange,
 }: {
-  label: string;
+  label: React.ReactNode;
   value: boolean;
   title?: string;
   helpLink?: string;
   name: keyof Settings;
   onChange: (checked: boolean, name: keyof Settings) => void;
 }) {
   return (
-    <div className="setting horizontal">
+    <div className={horizontalClass}>
       <label htmlFor={name} title={title}>
         {label}
       </label>

diff --git a/src/app/settings/CustomStatsSettings.m.scss b/src/app/settings/CustomStatsSettings.m.scss
@@ -1,13 +1,16 @@
+@use '../variables.scss' as *;
+
 .headerRow {
-  display: flex;
+  composes: flexRow from '../dim-ui/common.m.scss';
+  align-items: center;
 
   label {
     flex-grow: 1;
   }
 }
 
 .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
@@ -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 (
-    <div className="setting">
+    <>
       <div className={styles.headerRow}>
         <label htmlFor="">{t('Settings.CustomStatTitle')}</label>
         {$featureFlags.customStatWeights && (
@@ -88,7 +87,7 @@ export function CustomStatsSettings() {
           <AppIcon icon={addIcon} />
         </button>
       </div>
-      <div className={clsx(styles.customDesc, 'fineprint')}>
+      <div className={styles.customDesc}>
         {t('Settings.CustomStatDesc1')} {t('Settings.CustomStatDesc3')}
       </div>
       {[...(provisionalStat ? [provisionalStat] : []), ...customStatList].map((c) =>
@@ -103,7 +102,7 @@ export function CustomStatsSettings() {
           <CustomStatView setEditing={setEditing} statDef={c} key={c.statHash} />
         ),
       )}
-    </div>
+    </>
   );
 }
 
@@ -173,7 +172,7 @@ function CustomStatEditor({
         />
       </div>
 
-      <div className={clsx(styles.editableStatsRow, weightsStyles.statWeightRow)}>
+      <div className={styles.editableStatsRow}>
         {armorStats.map((statHash) => {
           const stat = defs.Stat.get(statHash);
           const weight = weights[statHash] || 0;
@@ -205,7 +204,7 @@ function CustomStatEditor({
         })}
       </div>
       <div className={styles.identifyingInfo}>
-        <span className={clsx('fineprint', styles.filter)}>
+        <span className={styles.filter}>
           {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<React.SetStateAction<number>>;
 }) {
   return (
-    <div className={clsx(className, styles.customStatView)}>
-      <div className={styles.identifyingInfo}>
-        <button
-          type="button"
-          className="dim-button"
-          onClick={() => setEditing(statDef.statHash)}
-          title={t('Loadouts.EditBrief')}
-        >
-          <AppIcon icon={editIcon} />
-        </button>
-        <ClassIcon proportional className={styles.classIcon} classType={statDef.class} />
-        <span className={styles.label}>{statDef.label}</span>
-      </div>
+    <div className={styles.customStatView}>
+      <button
+        type="button"
+        className="dim-button"
+        onClick={() => setEditing(statDef.statHash)}
+        title={t('Loadouts.EditBrief')}
+      >
+        <AppIcon icon={editIcon} />
+      </button>
+      <ClassIcon proportional className={styles.classIcon} classType={statDef.class} />
+      <span className={styles.label}>{statDef.label}</span>
       <CustomStatWeightsDisplay customStat={statDef} />
     </div>
   );

diff --git a/src/app/settings/Select.m.scss 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
diff --git 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<HTMLSelectElement>;
 }) {
   return (
-    <div className="setting horizontal">
+    <div className={styles.select}>
       <label htmlFor={name}>{label}</label>
       <select name={name} value={value} required={true} onChange={onChange}>
         {options.map((option) => (