refactor: use classes instead of modify the style inline

src/styles.css

@@ -1,3 +1,37 @@
+.better-recall-empty-state-title {
+  margin-bottom: 0.625rem;
+}
+
+.better-recall-card-modal-description {
+  padding-top: 0;
+}
+
+.better-recall-description {
+  margin-bottom: var(--size-2-2);
+}
+
+/* Affects all the fields (dropdown, input field) */
+.better-recall-field {
+  width: 100%;
+}
+.better-recall-back-field {
+  margin-top: var(--size-2-3);
+}
+.better-recall-deck-description-field {
+  margin-top: var(--size-2-3);
+}
+.better-recall-deck-name-field {
+  margin-top: 0;
+}
+
+.better-recall-decks-view .better-recall-buttons-bar {
+  margin-top: 1rem;
+}
+
+.better-recall-delete-button {
+  margin-top: var(--size-4-5);
+}
+
 .better-recall-buttons-bar {
   margin-top: var(--size-4-5);
   display: flex;

src/ui/components/InputFieldComponent.ts

@@ -29,7 +29,7 @@ export class InputFieldComponent extends TextComponent {
       );
     }
 
-    this.inputEl.style.width = '100%';
+    this.inputEl.classList.add('better-recall-field');
     this.addKeyEnterAction(this.inputEl);
   }
 
@@ -39,9 +39,8 @@ export class InputFieldComponent extends TextComponent {
   ): HTMLElement {
     const descriptionEl = container.createEl('p', {
       text,
-      cls: 'setting-item-description',
+      cls: 'setting-item-description better-recall-description',
     });
-    descriptionEl.style.marginBottom = 'var(--size-2-2)';
     container.insertBefore(descriptionEl, this.inputEl);
     return descriptionEl;
   }

src/ui/modals/CreateDeckModal.ts

@@ -30,7 +30,9 @@ export class CreateDeckModal extends Modal {
     this.deckNameInputComp.onEnter = () => {
       this.createDeck();
     };
-    this.deckNameInputComp.descriptionEl.style.marginTop = '0';
+    this.deckNameInputComp.descriptionEl.addClass(
+      'better-recall-deck-name-field',
+    );
 
     // Creates the deck description input field.
     this.deckDescriptionInputComp = new InputFieldComponent(this.contentEl, {
@@ -43,8 +45,9 @@ export class CreateDeckModal extends Modal {
 
       this.createDeck();
     };
-    this.deckDescriptionInputComp.descriptionEl.style.marginTop =
-      'var(--size-2-3)';
+    this.deckDescriptionInputComp.descriptionEl.addClass(
+      'better-recall-deck-description-field',
+    );
 
     // Creates the buttons bar.
     this.buttonsBarComp = new ButtonsBarComponent(this.contentEl)

src/ui/modals/EditDeckModal.ts

@@ -31,14 +31,17 @@ export class EditDeckModal extends Modal {
       .onChange((value) => {
         this.buttonsBarComp.setSubmitButtonDisabled(value.length === 0);
       });
-    this.deckNameInputComp.descriptionEl.style.marginTop = '0';
+    this.deckNameInputComp.descriptionEl.addClass(
+      'better-recall-deck-name-field',
+    );
 
     // Renders the deck description input field.
     this.deckDescriptionInputComp = new InputFieldComponent(this.contentEl, {
       description: 'Deck description:',
     }).setValue(this.deck.getDescription());
-    this.deckDescriptionInputComp.descriptionEl.style.marginTop =
-      'var(--size-2-3)';
+    this.deckDescriptionInputComp.descriptionEl.addClass(
+      'better-recall-deck-description-field',
+    );
 
     const buttonsContainer = this.contentEl.createDiv(
       'better-recall__buttons-container',
@@ -47,7 +50,7 @@ export class EditDeckModal extends Modal {
     const deleteButton = new ButtonComponent(buttonsContainer)
       .setButtonText('Delete')
       .onClick(() => this.deleteDeck());
-    deleteButton.buttonEl.style.marginTop = 'var(--size-4-5)';
+    deleteButton.buttonEl.addClass('better-recall-delete-button');
 
     // Renders the button bar.
     this.buttonsBarComp = new ButtonsBarComponent(buttonsContainer)

src/ui/modals/card-modal/CardModal.ts

@@ -44,30 +44,25 @@ export abstract class CardModal extends Modal {
     }, {});
 
     // Renders the deck dropdown.
-    const deckDropdownDescriptionEl = this.optionsContainerEl.createEl('p', {
+    this.optionsContainerEl.createEl('p', {
       text: 'Deck:',
-      cls: 'setting-item-description',
+      cls: 'setting-item-description better-recall-card-modal-description',
     });
-    deckDropdownDescriptionEl.style.paddingTop = '0';
     this.deckDropdownComp = new DropdownComponent(
       this.optionsContainerEl,
     ).addOptions(decks);
-    this.deckDropdownComp.selectEl.style.width = '100%';
+    this.deckDropdownComp.selectEl.addClass('better-recall-field');
   }
 
   protected renderCardTypeDropdown(): void {
-    const cardTypeDropdownDescriptionEl = this.optionsContainerEl.createEl(
-      'p',
-      {
-        text: 'Type:',
-        cls: 'setting-item-description',
-      },
-    );
-    cardTypeDropdownDescriptionEl.style.paddingTop = '0';
+    this.optionsContainerEl.createEl('p', {
+      text: 'Type:',
+      cls: 'setting-item-description better-recall-card-modal-description',
+    });
     const cardTypeDropdown = new DropdownComponent(this.optionsContainerEl)
       .addOptions({ basic: 'Basic' })
       .setDisabled(true);
-    cardTypeDropdown.selectEl.style.width = '100%';
+    cardTypeDropdown.selectEl.addClass('better-recall-field');
   }
 
   protected renderBasicTypeFields(front?: string, back?: string): void {
@@ -82,7 +77,7 @@ export abstract class CardModal extends Modal {
     })
       .setValue(back ?? '')
       .onChange(this.handleInputChange.bind(this));
-    this.backInputComp.descriptionEl.style.marginTop = 'var(--size-2-3)';
+    this.backInputComp.descriptionEl.addClass('better-recall-back-field');
   }
 
   protected renderButtonsBar(

src/ui/modals/card-modal/EditCardModal.ts

@@ -28,7 +28,7 @@ export class EditCardModal extends CardModal {
     const deleteButton = new ButtonComponent(buttonsContainer)
       .setButtonText('Delete')
       .onClick(() => this.deleteCard());
-    deleteButton.buttonEl.style.marginTop = 'var(--size-4-5)';
+    deleteButton.buttonEl.addClass('better-recall-delete-button');
     this.renderButtonsBar('Save', { container: buttonsContainer });
   }
 

src/ui/views/DecksView.ts

@@ -50,7 +50,9 @@ export class DecksView extends RecallSubView {
   }
 
   public render(): void {
-    this.rootEl = this.recallView.rootEl.createDiv(CENTERED_VIEW);
+    this.rootEl = this.recallView.rootEl.createDiv(
+      `${CENTERED_VIEW} better-recall-decks-view`,
+    );
 
     this.renderDecks();
     this.renderButtons();
@@ -303,7 +305,6 @@ export class DecksView extends RecallSubView {
 
   private renderButtons(): void {
     const buttonsBarEl = this.rootEl.createDiv('better-recall-buttons-bar');
-    buttonsBarEl.style.marginTop = '1rem';
 
     new ButtonComponent(buttonsBarEl)
       .setButtonText('Create Deck')

src/ui/views/EmptyView.ts

@@ -11,8 +11,9 @@ export class EmptyView extends RecallSubView {
     // Uses the `empty-state-container` class from Obsidian.
     const containerEl = this.rootEl.createDiv('empty-state-container');
     // Uses the `empty-state-title` class from Obsidian.
-    const titleContainerEl = containerEl.createDiv('empty-state-title');
-    titleContainerEl.style.marginBottom = '10px';
+    const titleContainerEl = containerEl.createDiv(
+      'empty-state-title better-recall-empty-state-title',
+    );
     titleContainerEl.setText('No available decks');
 
     // Uses the `empty-state-action-list` class from Obsidian.