feat: improve readability of card options

2anki · Oct 9, 2024 · 69d9b3d · 69d9b3d
1 parent a31d025
commit 69d9b3d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/TemplateSelect.tsx b/src/components/TemplateSelect.tsx
@@ -8,16 +8,18 @@ interface TemplateSelectPicker {
   values: SelectOption[];
   name: string;
   value: string;
+  className?: string;
 }
 
 function TemplateSelect({
-  name,
-  value,
-  pickedTemplate,
-  values,
-}: TemplateSelectPicker) {
+                          name,
+                          value,
+                          pickedTemplate,
+                          values,
+                          className
+                        }: TemplateSelectPicker) {
   return (
-    <div className="field">
+    <div className={`${className || ''} field`}>
       <div className="control">
         <div className="select">
           <select

diff --git a/src/components/modals/SettingsModal/SettingsModal.tsx b/src/components/modals/SettingsModal/SettingsModal.tsx
@@ -181,7 +181,7 @@ function SettingsModal({
                   </p>
                   <div className="control">
                     <StyledInput
-                      className="input"
+                      className="input mb-0 mt-2"
                       placeholder="Enter deck name (optional)"
                       value={deckName}
                       onChange={(
@@ -195,13 +195,14 @@ function SettingsModal({
                       }}
                     />
                   </div>
-                  <div className="control">
+                  <div className="control my-4">
                     <strong>Page icon</strong>
                     <p className="is-size-7">
                       By default the icon is the Notion page icon. You can
                       disable this for example when sorting gets messed up.
                     </p>
                     <TemplateSelect
+                      className="mb-4 mt-2"
                       values={[
                         { label: 'Icon first', value: 'first_emoji' },
                         {
@@ -230,6 +231,7 @@ function SettingsModal({
                     them so you can open them manually when you want in Anki.
                   </p>
                   <TemplateSelect
+                    className="mb-4 mt-2"
                     values={[
                       { label: 'Open nested toggles', value: 'open_toggle' },
                       {
@@ -257,7 +259,7 @@ function SettingsModal({
                     }}
                   />)}
                 </div>
-                <h2 className="title is-4">Template Options</h2>
+                <h2 className="title is-4 mb-0 py-4">Template Options</h2>
                 <TemplateSelect
                   values={availableTemplates}
                   value={template}