From 9157dc136423bdc20594f3436b46ab7139fef276 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 13 Sep 2023 00:10:32 +0530
Subject: [PATCH] chore: show key option descriptions & improve style

---
 .../VaultModal/KeyStoragePreference.tsx       | 40 ++++++++++-------
 .../VaultModal/PasswordTypePreference.tsx     | 43 +++++++++++--------
 .../Components/Radio/StyledRadioInput.tsx     |  6 +--
 3 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx
index b0c191651..fbe9addc5 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx
@@ -1,4 +1,4 @@
-import { KeySystemRootKeyStorageMode } from '@standardnotes/snjs'
+import { KeySystemRootKeyStorageMode, classNames } from '@standardnotes/snjs'
 import StyledRadioInput from '@/Components/Radio/StyledRadioInput'
 
 type KeyStorageOption = {
@@ -37,21 +37,29 @@ export const KeyStoragePreference = ({
 }) => {
   return (
     <div className="mb-3">
-      <div className="mb-3 text-lg">Vault Key Type</div>
-      {options.map((option) => {
-        return (
-          <label key={option.value} className="mb-2 flex items-center gap-2 text-base font-medium md:text-sm">
-            <StyledRadioInput
-              name="option"
-              checked={value === option.value}
-              onChange={() => {
-                onChange(option.value)
-              }}
-            />
-            {option.label}
-          </label>
-        )
-      })}
+      <div className="mb-3 text-lg">Vault Key Storage Mode</div>
+      <div className="space-y-3">
+        {options.map((option) => {
+          const isSelected = value === option.value
+          return (
+            <label
+              key={option.value}
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
+            >
+              <StyledRadioInput
+                className="col-start-1 col-end-2 place-self-center"
+                name="option"
+                checked={isSelected}
+                onChange={() => {
+                  onChange(option.value)
+                }}
+              />
+              <div className={classNames('select-none', isSelected ? 'font-semibold' : '')}>{option.label}</div>
+              <div className="col-start-2 row-start-2 text-sm opacity-80">{option.description}</div>
+            </label>
+          )
+        })}
+      </div>
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx
index 62d719aa3..072413914 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx
@@ -1,4 +1,4 @@
-import { KeySystemPasswordType } from '@standardnotes/snjs'
+import { KeySystemPasswordType, classNames } from '@standardnotes/snjs'
 import StyledRadioInput from '@/Components/Radio/StyledRadioInput'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import { useState } from 'react'
@@ -42,25 +42,30 @@ export const PasswordTypePreference = ({
   return (
     <div className="mb-3">
       <div className="mb-3 text-lg">Vault Key Type</div>
-      {options.map((option) => {
-        return (
-          <label key={option.value} className="mb-2 flex items-center gap-2 text-base font-medium md:text-sm">
-            <StyledRadioInput
-              name="option"
-              checked={value === option.value}
-              onChange={() => {
-                onChange(option.value)
-              }}
-            />
-            {option.label}
-          </label>
-        )
-      })}
-
+      <div className="mb-1 space-y-3">
+        {options.map((option) => {
+          const isSelected = value === option.value
+          return (
+            <label
+              key={option.value}
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
+            >
+              <StyledRadioInput
+                className="col-start-1 col-end-2 place-self-center"
+                name="option"
+                checked={isSelected}
+                onChange={() => {
+                  onChange(option.value)
+                }}
+              />
+              <div className={classNames('select-none', isSelected ? 'font-semibold' : '')}>{option.label}</div>
+              <div className="col-start-2 row-start-2 text-sm opacity-80">{option.description}</div>
+            </label>
+          )
+        })}
+      </div>
       {value === KeySystemPasswordType.UserInputted && (
-        <div>
-          <div className="text-gray-500 mt-3 text-sm">{options[1].description}</div>
-
+        <div className="mt-2">
           <DecoratedPasswordInput
             placeholder="Choose a password"
             id="key-input"
diff --git a/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx b/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
index 7de076718..832a3982b 100644
--- a/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
+++ b/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
@@ -4,10 +4,10 @@ import RadioIndicator from './RadioIndicator'
 
 type Props = ComponentPropsWithoutRef<'input'>
 
-const StyledRadioInput = (props: Props) => {
+const StyledRadioInput = ({ className, ...props }: Props) => {
   return (
-    <div className="flex">
-      <input type="radio" className={classNames('h-0 w-0 opacity-0', props.className)} {...props} />
+    <div className={classNames('flex', className)}>
+      <input type="radio" className="h-0 w-0 opacity-0" {...props} />
       <RadioIndicator checked={!!props.checked} />
     </div>
   )