refactor styles of generic component

puzzle · Oct 31, 2024 · a181a54 · a181a54
1 parent 4de7698
commit a181a54
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 34 deletions.
diff --git a/frontend/src/app/components/dialog-template-core/dialog-template-core.component.html b/frontend/src/app/components/dialog-template-core/dialog-template-core.component.html
@@ -10,7 +10,8 @@ <h2 class="col d-flex justify-content-between align-items-center my-2">
     </div>
   </div>
 </div>
-<mat-divider></mat-divider>
+
+<mat-divider class="mx-4"></mat-divider>
 
 <mat-dialog-content>
   <ng-content select="[content]"></ng-content>

diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.html b/frontend/src/app/components/key-result-form/key-result-form.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="keyResultForm" class="okr-form-container">
-  <div class="okr-form-row">
+  <div class="row">
     <div class="okr-form-col">
       <label class="text-black" for="title">Titel</label>
       <textarea
@@ -16,13 +16,13 @@
   </div>
 
   <app-keyresult-type
-    class="okr-form-row"
+    class="row"
     (formValidityEmitter)="updateFormValidity()"
     [keyresult]="keyResult"
     [keyResultForm]="keyResultForm"
   ></app-keyresult-type>
 
-  <div class="okr-form-row">
+  <div class="row">
     <div class="okr-form-col">
       <label class="text-black" for="owner">Owner</label>
       <input
@@ -45,7 +45,7 @@
     </div>
   </div>
 
-  <div class="okr-form-row">
+  <div class="row">
     <div class="okr-form-col">
       <label for="description" class="text-black">Beschreibung (optional)</label>
       <textarea

diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.scss b/frontend/src/app/components/keyresult-type/keyresult-type.component.scss
@@ -33,7 +33,7 @@
 }
 
 .kr-input {
-  @extend w-100;
+  @extend .w-100;
   padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
 }
 

diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
@@ -51,9 +51,9 @@ $pz-dark-blue-palette: (
   --mdc-text-button-label-text-tracking: normal;
   --mdc-filled-button-label-text-tracking: normal;
   --mdc-outlined-button-label-text-tracking: normal;
-  --mat-dialog-headline-padding: 0 0px 0 12px;
+  --mat-dialog-headline-padding: 0 0 0 12px;
   --mat-dialog-actions-padding: 0 12px 0 12px;
-  --mat-dialog-with-actions-content-padding: var($dialog-content-padding-y) 24px;
+  --mat-dialog-with-actions-content-padding: 24px var($dialog-content-padding-y);
   --okr-topbar-background-color: #1e5a96;
   --okr-banner-background-color: #dcedf9;
 }
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -93,17 +93,6 @@ body pzsh-backdrop {
   }
 }
 
-.dialog {
-  max-width: 769px;
-  box-shadow:
-    0 0 0 0 rgba(0, 0, 0, 0.06),
-    1px 1px 2px 0 rgba(0, 0, 0, 0.06),
-    3px 3px 4px 0 rgba(0, 0, 0, 0.05),
-    8px 6px 6px 0 rgba(0, 0, 0, 0.03),
-    14px 11px 7px 0 rgba(0, 0, 0, 0.01),
-    21px 18px 8px 0 rgba(0, 0, 0, 0);
-}
-
 .disable-scrolling {
   overflow-y: hidden;
 }
@@ -112,15 +101,6 @@ input textarea {
   outline-color: #909090;
 }
 
-.panel {
-  max-width: 800px;
-  @extend .col-md-12;
-}
-
-.backdrop {
-  margin-top: $top-bar-height;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -359,12 +339,6 @@ table.okr-table {
   @extend .p-0;
 }
 
-.okr-form-row {
-  @extend .d-flex;
-  @extend .flex-column;
-  @extend .row;
-}
-
 .okr-form-col {
   @extend .col;
   @extend .d-flex;