Update settings css, hopefully closer to bem

ui/component/settingsRow/view.jsx

@@ -16,20 +16,20 @@ export default function SettingsRow(props: Props) {
   const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props;
   return (
     <div
-      className={classnames('card__main-actions settings__row', {
+      className={classnames('card__main-actions settings-row', {
         'section__actions--between': !multirow,
         'opacity-30': disabled,
         'card--highlightedActive': highlighted,
       })}
     >
-      <div className="settings__row--title">
+      <div className="settings-row__title">
         <p>{title}</p>
-        {subtitle && <p className="settings__row--subtitle">{subtitle}</p>}
+        {subtitle && <p className="settings-row__subtitle">{subtitle}</p>}
       </div>
       <div
-        className={classnames('settings__row--value', {
-          'settings__row--value--multirow': multirow,
-          'settings__row--value--vertical-separator': useVerticalSeparator,
+        className={classnames('settings-row__value', {
+          'settings-row__value--multirow': multirow,
+          'settings-row__vertical-separator': useVerticalSeparator,
         })}
       >
         {children && children}

ui/scss/component/_main.scss

@@ -703,11 +703,11 @@ body {
     border-radius: var(--border-radius);
     border-top: unset;
 
-    .settings__row {
+    .settings-row {
       padding: var(--spacing-s);
       border-bottom: 1px solid var(--color-border);
 
-      .settings__row--value {
+      .settings-row__value {
         .button__content {
           &:hover {
             color: var(--color-secondary);
@@ -723,10 +723,10 @@ body {
         }
       }
     }
-    .settings__row:first-of-type {
+    .settings-row:first-of-type {
       margin-top: var(--spacing-xxxs);
     }
-    .settings__row:last-of-type {
+    .settings-row:last-of-type {
       border-bottom: unset;
     }
 
@@ -798,19 +798,19 @@ body {
     margin-left: auto;
     position: relative;
 
-    .settings__row--value {
+    .settings-row__value {
       align-self: start;
     }
 
-    .settings__row--title {
+    .settings-row__title {
       color: rgba(var(--color-text-base), 0.9);
     }
-    .settings__row--subtitle {
+    .settings-row__subtitle {
       color: rgba(var(--color-text-base), 0.6);
     }
 
     &:hover:not(.opacity-30) {
-      .settings__row--title {
+      .settings-row__title {
         color: rgba(var(--color-text-base), 1);
       }
     }

ui/scss/component/section.scss

@@ -280,14 +280,14 @@
   }
 }
 
-.settings__row {
+.settings-row {
   &:first-child,
   &:only-child {
     border-top: none;
   }
 }
 
-.card__main-actions.settings__row {
+.card__main-actions.settings-row {
   @media (max-width: $breakpoint-small) {
     //padding: var(--spacing-s);
     padding: 0;
@@ -296,7 +296,7 @@
   }
 }
 
-.settings__row--title {
+.settings-row__title {
   min-width: 100%;
   align-self: flex-start;
 
@@ -306,13 +306,13 @@
   }
 }
 
-.settings__row--subtitle {
+.settings-row__subtitle {
   @extend .section__subtitle;
   font-size: var(--font-small);
   margin-top: calc(var(--spacing-xxs) / 2);
 }
 
-.settings__row--value {
+.settings-row__value {
   width: 100%;
 
   fieldset-section.radio {
@@ -353,7 +353,7 @@
   }
 }
 
-.settings__row--value--multirow {
+.settings-row__value--multirow {
   @media (min-width: $breakpoint-medium) {
     width: 80%;
     margin-top: var(--spacing-l);
@@ -367,7 +367,7 @@
   }
 }
 
-.settings__row--value--vertical-separator {
+.settings-row__vertical-separator {
   @media (min-width: $breakpoint-medium) {
     border-left: 1px solid var(--color-border);
   }