General UI style fix (#658)

* side menu fix * header * workshop-details style fix * Update side-menu-cards.scss * toggle message bar * Update cards.scss * provide info fix * radio button fix * provider org info * Update provider-org-info.component.scss
ita-social-projects · Nov 22, 2021 · 3c7e334 · 3c7e334
1 parent 036001e
commit 3c7e334
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 121 deletions.
diff --git a/src/app/shared/components/child-card/child-card.component.html b/src/app/shared/components/child-card/child-card.component.html
@@ -14,24 +14,22 @@
       </div>
       <div>
         <mat-card-header>
-          <mat-card-title
-            [matTooltip]="childFullName"
-            showTooltipIfTruncated
-            matTooltipClass="tooltip"
-            [matTooltipPosition]="below"
-          >{{child.lastName}} {{child.firstName}} {{child.middleName}}</mat-card-title>
+          <mat-card-title [matTooltip]="childFullName" showTooltipIfTruncated matTooltipClass="tooltip"
+            [matTooltipPosition]="below">{{child.lastName}} {{child.firstName}} {{child.middleName}}</mat-card-title>
         </mat-card-header>
         <mat-card-content fxLayout="column" fxLayoutAlign="space-between start">
           <p class="card_text">
-            <mat-icon class="card_icon">calendar_today</mat-icon> {{child.dateOfBirth | date: constants.SHORT_DATE_FORMAT}} ({{ childAge }})
+            <mat-icon class="card_icon">calendar_today</mat-icon> {{child.dateOfBirth | date:
+            constants.SHORT_DATE_FORMAT}} ({{ childAge }})
           </p>
-          <h5 class="card_text">
+          <h5 class="card_text card_text_bold">
             <mat-icon class="card_icon">apps</mat-icon>Гуртки
           </h5>
           <div *ngIf="applications?.length; else NoWorkshops ">
             <div fxLayout="row" fxLayoutAlign="end start">
-              <div  [routerLink]="['/workshop-details', application.workshop.workshopId]" class="card-list card-list-workshop" *ngFor="let application of applications">
-                 {{application.workshop.title}}
+              <div [routerLink]="['/workshop-details', application.workshop.workshopId]"
+                class="card-list card-list-workshop" *ngFor="let application of applications">
+                {{application.workshop.title}}
               </div>
             </div>
           </div>
@@ -43,4 +41,4 @@ <h5 class="card_text">
 
 <ng-template #NoWorkshops>
   <p class="card-list"> Гуртків поки немає! </p>
-</ng-template>
+</ng-template>
diff --git a/src/app/shared/components/message-bar/message-bar.component.html b/src/app/shared/components/message-bar/message-bar.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="space-between center">
   <span fxLayout="row" fxLayoutAlign="center center">
-    <mat-icon class="icon">{{messageType}}</mat-icon>
+    <mat-icon fxLayout="row" fxLayoutAlign="center center" class="icon">{{messageType}}</mat-icon>
     {{data.message}}
   </span>
   <div (click)="onClose()">

diff --git a/src/app/shared/components/message-bar/message-bar.component.scss b/src/app/shared/components/message-bar/message-bar.component.scss
@@ -1,18 +1,25 @@
 ::ng-deep .mat-snack-bar-container{
-  padding: 8px 12px;
-  border-radius: 24px;
+  padding: 0.5rem 1rem;
+  border-radius: 2rem;
   color: #444444;
+  min-width: 550px;
+
   font-family: Innerspace;
   font-style: normal;
   font-weight: bold;
-  font-size: 16px;
-  min-width: 550px;
+  font-size: 13px;
+  line-height: 19px;
+}
+:host ::ng-deep .mat-icon{
+  height: 1.2rem;
+  width: 1.2rem;
 }
 
 .icon{
+  margin-right: 0.5rem;
   border-radius: 2rem;
   border: solid 1px #444444;
-  margin: 5px;
+  font-size: 13px;
 }
 
 .action{

diff --git a/src/app/shared/styles/cards.scss b/src/app/shared/styles/cards.scss
@@ -57,12 +57,18 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-size: 0.813rem;
-    line-height: 1.125rem;
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 18px;
     color: #333333;
     margin: 0.3rem;
     padding: 0;
-    font-weight: 500;
+
+    &_bold{
+      font-weight: bold;
+    }
 
     &_blue {
       color: #3849F9;
@@ -71,8 +77,13 @@
 
 
   &_icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     color: #AAAAAA;
     margin-right: 0.2rem;
+    font-size: 20px;
 
     &_blue{
       color: #3849F9;

diff --git a/src/app/shared/styles/create-form.scss b/src/app/shared/styles/create-form.scss
@@ -118,7 +118,9 @@ button:focus {
   font-weight: 400;
   color:#444444;
 }
-
+::ng-deep .mat-button-toggle-checked.mat-button-toggle-appearance-standard{
+  background-color: white;
+}
 .btn{
   min-width: 150px;
 }

diff --git a/src/app/shared/styles/navigation-tabs.scss b/src/app/shared/styles/navigation-tabs.scss
@@ -1,7 +1,7 @@
 :host ::ng-deep {
   .mat-tab-label-active {
     color: #3849F9;
-    background: rgba(56, 73, 249, 0.07);
+    background: none;
     border: 2px solid #3849F9;
     box-sizing: border-box;
     border-radius: 20px;

diff --git a/src/app/shared/styles/toggle-button.scss b/src/app/shared/styles/toggle-button.scss
@@ -4,8 +4,8 @@
 .mat-button-toggle-checked {
   background-color: #E3E3E3;
   color: #2979FF;
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
+  border-top-left-radius: 1.2rem;
+  border-bottom-left-radius: 1.2rem;
   border: 2px solid #3849F9;
 }
 
@@ -17,19 +17,16 @@
   border-radius: 20px;
   font-weight: bold;
 }
-
 .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{
-  border-top-right-radius: 1rem !important;
-  border-bottom-right-radius: 1rem !important;
+  border-top-right-radius: 1.2rem !important;
+  border-bottom-right-radius: 1.2rem !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
-
-
-.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
-  padding: 0px !important;
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
+  padding: 1rem;
+  line-height: 32px;
 }
-
 .mat-button-toggle-group .mat-button-toggle:nth-child(2){
  &.mat-button-toggle-checked{
    border-left: 2px solid #3849F9;

diff --git a/src/app/shell/main/main.component.scss b/src/app/shell/main/main.component.scss
@@ -103,7 +103,6 @@ app-footer {
         flex-wrap: nowrap !important;
         overflow: scroll;
         padding: 16px;
-        margin: 0 -16px;
       }
     }
 

diff --git a/src/app/shell/personal-cabinet/personal-cabinet.component.scss b/src/app/shell/personal-cabinet/personal-cabinet.component.scss
@@ -5,22 +5,7 @@
   padding: 1.5rem 1.5rem 0 1.5rem;
   border-radius: 5px;
 
-  @media (max-width: 750px) {
-    margin-top: 40px;
-  }
-}
-.title,
-.nav a {
-  font-weight: 700;
-  font-family:'Innerspace';
-  color: #444444;
-}
-.title {
-  font-size: 18px;
-  line-height: inherit;
-  margin-bottom: 1.5rem;
-}
-.nav {
+  .nav {
   border-bottom: none;
   a {
     font-size: 13px;
@@ -37,4 +22,20 @@
     opacity: 1;
     border-bottom: 2px solid #3849f9;
   }
+}
+
+  @media (max-width: 750px) {
+    margin-top: 40px;
+  }
+}
+.title,
+.nav a {
+  font-weight: 700;
+  font-family:'Innerspace';
+  color: #444444;
+}
+.title {
+  font-size: 18px;
+  line-height: inherit;
+  margin-bottom: 1.5rem;
 }
diff --git a/src/app/shell/personal-cabinet/provider/provider-org-info/provider-org-info.component.html b/src/app/shell/personal-cabinet/provider/provider-org-info/provider-org-info.component.html
@@ -8,77 +8,74 @@
           </button></a>
       </div>
 
-      <div fxLayout='row' fxLayoutAlign='center center' class="nav">
-        <mat-tab-group (selectedTabChange)="onTabChanged($event)">
+      <mat-tab-group (selectedTabChange)="onTabChanged($event)">
 
-          <mat-tab label="Інформація про заклад">
-            <h5>Форма властності</h5>
-            <p>{{ownershipTypeUkr[this.provider.ownership]}}</p>
-            <h5>Тип організації</h5>
-            <p>{{providerTypeUkr[this.provider.type]}}</p>
-            <h5>Повна назва організації</h5>
-            <p>{{provider.fullTitle}}</p>
-            <h5>Скорочена назва організації</h5>
-            <p>{{provider.shortTitle}}</p>
-            <h5>ПІБ керівника</h5>
-            <p>{{provider.director}}</p>
-            <h5>Дата народження керівника</h5>
-            <p>{{provider.directorDateOfBirth | date: 'shortDate'}}</p>
-            <h5>ЄДРПОУ/ІПН</h5>
-            <p>{{provider.edrpouIpn}}</p>
-            <h5>Телефон</h5>
-            <p>{{provider.phoneNumber}}</p>
-            <h5>Емейл</h5>
-            <p>{{provider.email}}</p>
-            <h5>Вебсайт</h5>
-            <p>{{provider.website}}</p>
-          </mat-tab>
+        <mat-tab label="Інформація про заклад">
+          <h5>Форма властності</h5>
+          <p>{{ownershipTypeUkr[this.provider.ownership]}}</p>
+          <h5>Тип організації</h5>
+          <p>{{providerTypeUkr[this.provider.type]}}</p>
+          <h5>Повна назва організації</h5>
+          <p>{{provider.fullTitle}}</p>
+          <h5>Скорочена назва організації</h5>
+          <p>{{provider.shortTitle}}</p>
+          <h5>ПІБ керівника</h5>
+          <p>{{provider.director}}</p>
+          <h5>Дата народження керівника</h5>
+          <p>{{provider.directorDateOfBirth | date: 'shortDate'}}</p>
+          <h5>ЄДРПОУ/ІПН</h5>
+          <p>{{provider.edrpouIpn}}</p>
+          <h5>Телефон</h5>
+          <p>{{provider.phoneNumber}}</p>
+          <h5>Емейл</h5>
+          <p>{{provider.email}}</p>
+          <h5>Вебсайт</h5>
+          <p>{{provider.website}}</p>
+        </mat-tab>
 
-          <mat-tab label="Контакти">
+        <mat-tab label="Контакти">
 
-            <div class="border">
-              <h3>Юридична адреса</h3>
-              <ng-container *ngIf="provider.legalAddress then LegalAddress"></ng-container>
-            </div>
-            <h3>Фактична адреса</h3>
-            <ng-container *ngIf="provider.actualAddress else LegalAddress;">
-              <h5>Область</h5>
-              <p>{{provider.actualAddress.district}}</p>
-              <h5>Місто</h5>
-              <p>{{provider.actualAddress.city}}</p>
-              <h5>Район</h5>
-              <p>{{provider.actualAddress.region}}</p>
-              <h5>Вулиця</h5>
-              <p>{{provider.actualAddress.street}}</p>
-              <h5>Будинок</h5>
-              <p>{{provider.actualAddress.buildingNumber}}</p>
-            </ng-container>
-          </mat-tab>
+          <div class="border">
+            <h3>Юридична адреса</h3>
+            <ng-container *ngIf="provider.legalAddress then LegalAddress"></ng-container>
+          </div>
+          <h3>Фактична адреса</h3>
+          <ng-container *ngIf="provider.actualAddress else LegalAddress;">
+            <h5>Область</h5>
+            <p>{{provider.actualAddress.district}}</p>
+            <h5>Місто</h5>
+            <p>{{provider.actualAddress.city}}</p>
+            <h5>Район</h5>
+            <p>{{provider.actualAddress.region}}</p>
+            <h5>Вулиця</h5>
+            <p>{{provider.actualAddress.street}}</p>
+            <h5>Будинок</h5>
+            <p>{{provider.actualAddress.buildingNumber}}</p>
+          </ng-container>
+        </mat-tab>
 
-          <mat-tab label="Опис">
-            <h5>Опис</h5>
-            <p class="description">{{provider.description}}</p>
-            <h5>Статус</h5>
-            <p class="description">{{this.currentStatus}}</p>
-
-          </mat-tab>
+        <mat-tab label="Опис">
+          <h5>Статус</h5>
+          <p class="description">{{this.currentStatus}}</p>
+          <h5>Опис</h5>
+          <p class="description">{{provider.description}}</p>
+        </mat-tab>
 
-        </mat-tab-group>
-      </div>
+      </mat-tab-group>
+    </div>
 
-      <ng-template #LegalAddress>
-        <h5>Область</h5>
-        <p>{{provider.legalAddress.district}}</p>
-        <h5>Місто</h5>
-        <p>{{provider.legalAddress.city}}</p>
-        <h5>Район</h5>
-        <p>{{provider.legalAddress.region}}</p>
-        <h5>Вулиця</h5>
-        <p>{{provider.legalAddress.street}}</p>
-        <h5>Будинок</h5>
-        <p>{{provider.legalAddress.buildingNumber}}</p>
-      </ng-template>
+    <ng-template #LegalAddress>
+      <h5>Область</h5>
+      <p>{{provider.legalAddress.district}}</p>
+      <h5>Місто</h5>
+      <p>{{provider.legalAddress.city}}</p>
+      <h5>Район</h5>
+      <p>{{provider.legalAddress.region}}</p>
+      <h5>Вулиця</h5>
+      <p>{{provider.legalAddress.street}}</p>
+      <h5>Будинок</h5>
+      <p>{{provider.legalAddress.buildingNumber}}</p>
+    </ng-template>
 
-    </div>
   </div>
-</ng-container>
+</ng-container>
diff --git a/src/app/shell/personal-cabinet/provider/provider-org-info/provider-org-info.component.scss b/src/app/shell/personal-cabinet/provider/provider-org-info/provider-org-info.component.scss
@@ -5,9 +5,19 @@ $basen-blue-color: #3849F9;
   background: #FFFFFF;
   box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
   border-radius: 5px;
-  padding: 20px 25px;
-  max-width: 30rem;
+  padding: 2rem;
+  width: 50%;
   margin-bottom: 2rem;
+   p{
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 18px;
+  }
+  h3{
+    margin-bottom: 1rem;
+  }
 }
 .edit-icon{
   position: relative;
@@ -19,7 +29,4 @@ $basen-blue-color: #3849F9;
 }
 .description{
   max-width: 35rem;
-}
-.nav{
-  width: 30rem;
 }