feat: style subscription form

farscrl · Dec 4, 2023 · 9651f1f · 9651f1f
1 parent 4ca3a68
commit 9651f1f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/src/app/shared/components/forms/subscription/subscription.component.html b/src/app/shared/components/forms/subscription/subscription.component.html
@@ -4,7 +4,7 @@
     </p>
 
     <div class="mb-3">
-        <label for="name" class="form-label">
+        <label for="name" class="form-label title">
             {{ 'FORMS.SUBSCRIPTION.NAME' | translate }}
             <app-info-button>
                 {{ 'FORMS.SUBSCRIPTION.NAME_DESC_TEXT' | translate }}
@@ -19,10 +19,12 @@
 
     <div class="row" *ngIf="subscription?.id">
         <div class="col" formArrayName="genres">
-            {{ 'FORMS.SUBSCRIPTION.GENRES' | translate }} *
-            <app-info-button>
-                {{ 'FORMS.SUBSCRIPTION.GENRES_DESC_TEXT' | translate }}
-            </app-info-button>
+            <h2>
+                {{ 'FORMS.SUBSCRIPTION.GENRES' | translate }}
+                <app-info-button>
+                    {{ 'FORMS.SUBSCRIPTION.GENRES_DESC_TEXT' | translate }}
+                </app-info-button>
+            </h2>
             <div class="form-check" *ngFor="let genre of genres; let i = index"
                  [class.is-invalid]="isFieldInvalid('genres')">
                 <input class="form-check-input" type="checkbox" value="{{ genre }}" id="genre-{{genre.id}}"
@@ -36,10 +38,12 @@
             </div>
         </div>
         <div class="col" formArrayName="regions">
-            {{ 'FORMS.SUBSCRIPTION.REGIONS' | translate }} *
-            <app-info-button>
-                {{ 'FORMS.SUBSCRIPTION.REGIONS_DESC_TEXT' | translate }}
-            </app-info-button>
+            <h2>
+                {{ 'FORMS.SUBSCRIPTION.REGIONS' | translate }}
+                <app-info-button>
+                    {{ 'FORMS.SUBSCRIPTION.REGIONS_DESC_TEXT' | translate }}
+                </app-info-button>
+            </h2>
             <div class="form-check" *ngFor="let region of regions; let i = index"
                  [class.is-invalid]="isFieldInvalid('regions')">
                 <input class="form-check-input" type="checkbox" value="{{ region }}" id="region-{{region.id}}"
@@ -55,7 +59,7 @@
     </div>
 
     <div class="mb-3 mt-3" *ngIf="subscription?.id">
-        <label for="searchTerm" class="form-label">
+        <label for="searchTerm" class="form-label title">
             {{ 'FORMS.SUBSCRIPTION.SEARCH_TERM' | translate }}
         </label>
         <app-info-button>
@@ -69,6 +73,7 @@
     </div>
 
     <div class="mb-3">
+        <h2>{{ 'FORMS.SUBSCRIPTION.FREQUENCY' | translate }}</h2>
         <fieldset>
             <div>
                 <input type="radio" id="weekly" name="type" value="WEEKLY"
@@ -93,7 +98,7 @@
     </div>
 
     <div class="mb-3" *ngIf="subscription?.id">
-        <label for="active" class="form-label">
+        <label for="active" class="form-label title">
             {{ 'FORMS.SUBSCRIPTION.ACTIVE' | translate }}
         </label>
         <div class="form-check form-switch">

diff --git a/src/app/shared/components/forms/subscription/subscription.component.scss b/src/app/shared/components/forms/subscription/subscription.component.scss
@@ -1,3 +1,11 @@
+h2, label.title {
+    font-family: "CadizBlack", sans-serif;
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 0;
+    margin-top: 36px;
+}
+
 input[type="radio"] {
     margin-right: 8px;
 }

diff --git a/src/app/user-area/pages/edit-subscription/edit-subscription.component.html b/src/app/user-area/pages/edit-subscription/edit-subscription.component.html
@@ -1,5 +1,5 @@
 <section class="content-narrow">
-    <h1>Midar l'abunament</h1>
+    <h1>Midar l’abunament</h1>
 
     <app-subscription [subscription]="subscription" (success)="success()" (cancel)="cancel()"
                       *ngIf="subscription"></app-subscription>

diff --git a/src/assets/i18n/rm.json b/src/assets/i18n/rm.json
@@ -163,21 +163,22 @@
             "ADD_IMAGE_OR_DOCUMENT_INVALID_FILE_SIZE": "La datoteca na dastga betg esser pli gronda che 20MB."
         },
         "SUBSCRIPTION": {
-            "NAME": "Num da l'abunament",
-            "NAME_DESC_TITLE": "Num da l'abunament",
-            "NAME_DESC_TEXT": "Quai num vign mussà a vus en l'email (p.ex. «Litteratura en l'Engiadina Bassa» u «tut»)",
+            "NAME": "Num da l’abunament",
+            "NAME_DESC_TITLE": "Num da l’abunament",
+            "NAME_DESC_TEXT": "Quai num vign mussà a vus en l’email (p.ex. «Litteratura en l’Engiadina Bassa» u «tut»)",
             "NAME_ERROR": "Endatescha p.pl. in num.",
-            "GENRES": "categorias",
+            "GENRES": "Categorias",
             "GENRES_DESC_TEXT": "Tscherna las categorias che ti vuls vegnir infurmà. Tscherner nagut per vegnir infurmà davart tut las categorias.",
             "GENRES_ERROR": "Tscherna almain ina categoria.",
-            "REGIONS": "regiuns",
+            "REGIONS": "Regiuns",
             "REGIONS_DESC_TEXT": "Tscherna las regiuns che ti vuls vegnir infurmà. Tscherner nagut per vegnir infurmà davart tut las regiuns.",
             "REGIONS_ERROR": "Tscherna almain ina regiun.",
             "SEARCH_TERM": "Term da tschertga",
             "SEARCH_TERM_DESC_TITLE": "Term da tschertga (Suchbegriff / termine di ricerca)",
             "SEARCH_TERM_DESC_TEXT": "Sche quest champ n’è betg vid, vegnan mo tramessas occurrenzas che cuntegnan il text da quest champ.",
             "SEARCH_TERM_ERROR": "Endatescha p.pl. in term da tschertga.",
             "TYPE": "Con savens vuls ti retschaiver ils e-mails?",
+            "FREQUENCY": "Frequenza",
             "TYPE_DESC_INSTANT": "Direct: Cun la publicaziun dad ina occurrenza vegn mintgamai tramess in e-mail",
             "TYPE_DESC_WEEKLY": "Emnil: Mintg’emna vegn tramessa ina survista da las occurrenzas da las proximas 2 emnas",
             "TYPE_ERROR": "Tscherna p.pl. in tip.",