From 4cac3b286d6bb449912cb72deb1b39b5c75c67da Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 5 Aug 2021 16:42:37 +0800
Subject: [PATCH] Styles for new Settings Page

---
 ui/component/settingsRow/index.js |  2 ++
 ui/component/settingsRow/view.jsx | 35 +++++++++++++++++++
 ui/scss/component/section.scss    | 58 +++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 ui/component/settingsRow/index.js
 create mode 100644 ui/component/settingsRow/view.jsx

diff --git a/ui/component/settingsRow/index.js b/ui/component/settingsRow/index.js
new file mode 100644
index 000000000..a8d6ab489
--- /dev/null
+++ b/ui/component/settingsRow/index.js
@@ -0,0 +1,2 @@
+import SettingsRow from './view';
+export default SettingsRow;
diff --git a/ui/component/settingsRow/view.jsx b/ui/component/settingsRow/view.jsx
new file mode 100644
index 000000000..85951b6e1
--- /dev/null
+++ b/ui/component/settingsRow/view.jsx
@@ -0,0 +1,35 @@
+// @flow
+import React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  title: string,
+  subtitle?: string,
+  multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right.
+  useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values.
+  children?: React$Node,
+};
+
+export default function SettingsRow(props: Props) {
+  const { title, subtitle, multirow, useVerticalSeparator, children } = props;
+
+  return (
+    <div
+      className={classnames('card__main-actions settings__row', {
+        'section__actions--between': !multirow,
+      })}
+    >
+      <div className="settings__row--title">
+        <p>{title}</p>
+        {subtitle && <p className="settings__row--subtitle">{subtitle}</p>}
+      </div>
+      <div
+        className={classnames('settings__row--value', {
+          'settings__row--value--vertical-separator': useVerticalSeparator,
+        })}
+      >
+        {children && children}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 2c6fd46f8..07ae814fe 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -203,3 +203,61 @@
     margin-right: 10px;
   }
 }
+
+.settings__row {
+  &:first-child,
+  &:only-child {
+    border-top: none;
+  }
+}
+
+.settings__row--title {
+  min-width: 100%;
+  align-self: flex-start;
+
+  @media (min-width: $breakpoint-small) {
+    min-width: 60%;
+    max-width: 60%;
+  }
+}
+
+.settings__row--subtitle {
+  @extend .section__subtitle;
+  font-size: var(--font-small);
+  margin-top: calc(var(--spacing-xxs) / 2);
+}
+
+.settings__row--value {
+  width: 100%;
+
+  fieldset-section:not(:only-child) {
+    margin-top: var(--spacing-s);
+  }
+
+  fieldset-section.radio {
+    margin-top: var(--spacing-s);
+  }
+
+  fieldset-group {
+    margin-top: var(--spacing-m);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    width: 40%;
+    margin-left: var(--spacing-m);
+    padding-left: var(--spacing-m);
+
+    .button,
+    .checkbox {
+      &:only-child {
+        float: right;
+      }
+    }
+  }
+}
+
+.settings__row--value--vertical-separator {
+  @media (min-width: $breakpoint-small) {
+    border-left: 1px solid var(--color-border);
+  }
+}