feat: rounded design for components

mattjoke · xflord · commit 58998a15842d · 2023-08-07T12:37:34.000+02:00
* added rounded design for buttons, dialogs, tables...
* updated _styles.scss, to include the changes
diff --git a/apps/admin-gui/src/_styles.scss b/apps/admin-gui/src/_styles.scss
@@ -556,7 +556,7 @@ body {
 }
 
 button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 button:focus {
@@ -1325,19 +1325,15 @@ textarea.cdk-textarea-autosize-measuring {
 
 // sharp design
 .mat-mdc-outlined-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .mat-mdc-unelevated-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .mat-mdc-button {
-  border-radius: 0 !important;
-}
-
-.card {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 //colors for material icons
@@ -1597,6 +1593,7 @@ td.mat-mdc-cell {
   font-size: 16px !important;
   color: black !important;
   opacity: 1 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .mdc-tab__icon {
@@ -1687,7 +1684,7 @@ table .mdc-text-field--outlined {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
@@ -1706,12 +1703,13 @@ table .mdc-text-field--outlined {
 
 .mat-mdc-tab-header {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
 }
 
 .mat-mdc-tab.mdc-tab--active {
   background-color: #e8e4e4;
+  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
 }
-
 .mdc-data-table__cell {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
 }
@@ -1727,3 +1725,7 @@ table .mdc-text-field--outlined {
 .mb-25 {
   margin-bottom: 0.75rem;
 }
+
+.card {
+  border-radius: var(--bs-border-radius) !important;
+}
diff --git a/apps/admin-gui/src/app/users/pages/user-detail-page/user-dashboard/dashboard-recently-viewed-button-field/dashboard-recently-viewed-button-field.component.scss b/apps/admin-gui/src/app/users/pages/user-detail-page/user-dashboard/dashboard-recently-viewed-button-field/dashboard-recently-viewed-button-field.component.scss
@@ -19,6 +19,13 @@
 
 .item-itself-container {
   margin: 8px;
+  transition: 250ms;
+
+  &:hover {
+    box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.33);
+    transform: scale(1.02);
+    border-radius: var(--bs-border-radius);
+  }
 }
 
 .item-itself {
@@ -33,6 +40,7 @@
   overflow-wrap: break-word;
   word-break: break-word;
   text-decoration: none;
+  border-radius: var(--bs-border-radius);
 
   & img {
     height: 120px;
diff --git a/apps/admin-gui/src/app/users/pages/user-detail-page/user-overview/user-overview.component.html b/apps/admin-gui/src/app/users/pages/user-detail-page/user-overview/user-overview.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="inMyProfile" class="align-cards">
-  <mat-card appearance="outlined" class="mat-elevation-z3">
+  <mat-card appearance="outlined" class="card mat-elevation-z3">
     <mat-card-header>
       <mat-card-title>
         <h1 class="page-subtitle">{{'USER_DETAIL.OVERVIEW.GENERAL_SETTINGS' | translate}}</h1>
diff --git a/apps/admin-gui/src/app/users/pages/user-detail-page/user-overview/user-overview.component.scss b/apps/admin-gui/src/app/users/pages/user-detail-page/user-overview/user-overview.component.scss
@@ -1,5 +1,5 @@
 .align-cards {
-  margin: 1rem 1rem 1rem 1rem;
+  margin: 1rem 0;
   display: inline-block;
   vertical-align: top;
 }
diff --git a/apps/admin-gui/src/app/vos/components/applications-list/applications-list.component.scss b/apps/admin-gui/src/app/vos/components/applications-list/applications-list.component.scss
@@ -1,3 +1,7 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+table {
+  border-radius: 30px;
+}
diff --git a/apps/consolidator/src/_styles.scss b/apps/consolidator/src/_styles.scss
@@ -111,7 +111,7 @@ $perun-theme: mat.define-light-theme(
 }
 
 button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 button:focus {
@@ -244,6 +244,12 @@ button:focus {
 
 .noBorderDialog .mat-mdc-dialog-container {
   background-color: black;
+  border-radius: var(--bs-border-radius);
+}
+
+.noBorderDialog .mat-mdc-dialog-container .mdc-dialog__surface {
+  background-color: black !important;
+  border-radius: var(--bs-border-radius);
 }
 
 mat-mdc-chip-grid {
@@ -257,7 +263,7 @@ mat-icon {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
diff --git a/apps/linker/src/_styles.scss b/apps/linker/src/_styles.scss
@@ -209,7 +209,7 @@ $perun-theme: mat.define-light-theme(
 }
 
 button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 button:focus {
@@ -228,7 +228,7 @@ mat-icon {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
diff --git a/apps/password-reset/src/_styles.scss b/apps/password-reset/src/_styles.scss
@@ -91,7 +91,7 @@ $password-reset-theme: mat.define-light-theme(
 }
 
 .mat-mdc-unelevated-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .dialog-container {
@@ -152,7 +152,7 @@ mat-form-field mat-icon {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
diff --git a/apps/publications/src/_styles.scss b/apps/publications/src/_styles.scss
@@ -111,7 +111,7 @@ $perun-theme: mat.define-light-theme(
 }
 
 button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 button:focus {
@@ -415,7 +415,7 @@ mat-form-field mat-icon {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
diff --git a/apps/user-profile/src/_styles.scss b/apps/user-profile/src/_styles.scss
@@ -113,7 +113,7 @@ $perun-theme: mat.define-light-theme(
 }
 
 button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 button:focus {
@@ -167,6 +167,7 @@ td.mat-mdc-cell {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--bs-card-border-radius) !important;
 }
 
 #preloader {
@@ -298,7 +299,7 @@ mat-list-item .mat-mdc-form-field-subscript-wrapper {
 // angular 15 button fixes
 
 .mdc-button {
-  border-radius: 0 !important;
+  border-radius: var(--bs-border-radius) !important;
   white-space: nowrap !important;
   letter-spacing: normal;
 }
diff --git a/libs/lib-linker/src/lib/consolidation-result/consolidation-result.component.html b/libs/lib-linker/src/lib/consolidation-result/consolidation-result.component.html
@@ -1,4 +1,4 @@
-<div class="p-4 m-3" [ngStyle]="{'background-color': color }">
+<div class="p-4 m-3 card" [ngStyle]="{'background-color': color }">
   <div class="d-flex pb-5 flex-row">
     <div>
       <mat-icon *ngIf="result !== 'OK'" class="mat-icon-war me-4"> {{icon}} </mat-icon>
diff --git a/libs/perun/components/src/lib/groups-list/groups-list.component.scss b/libs/perun/components/src/lib/groups-list/groups-list.component.scss
@@ -1,7 +1,3 @@
-.card {
-  border-radius: 0 !important;
-}
-
 .static-column-size {
   width: 80px;
 }
diff --git a/libs/perun/components/src/lib/menu-buttons-field/menu-buttons-field.component.scss b/libs/perun/components/src/lib/menu-buttons-field/menu-buttons-field.component.scss
@@ -18,6 +18,13 @@
 
 .item-itself-container {
   margin: 8px;
+  transition: 250ms;
+
+  &:hover {
+    box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.33);
+    transform: scale(1.02);
+    border-radius: var(--bs-border-radius);
+  }
 }
 
 .item-itself {
@@ -30,6 +37,7 @@
   align-items: center;
   font-size: 1.25rem;
   text-decoration: none;
+  border-radius: var(--bs-border-radius);
 
   & img {
     height: 120px;
diff --git a/libs/perun/components/src/lib/notification/notification.component.html b/libs/perun/components/src/lib/notification/notification.component.html
@@ -1,5 +1,5 @@
 <div
-  class="notification {{inDialog ? '' : 'mat-elevation-z7'}}"
+  class="card notification {{inDialog ? '' : 'mat-elevation-z7'}}"
   [class.error]="data.type === 'error'"
   [class.success]="data.type === 'success'">
   <div class="notification-container" (click)="!alreadyClosed && !waiting ? closeSelf(): ''">
diff --git a/libs/perun/components/src/lib/vos-list/vos-list.component.scss b/libs/perun/components/src/lib/vos-list/vos-list.component.scss
@@ -1,7 +1,3 @@
-.card {
-  border-radius: 0 !important;
-}
-
 .static-column-size {
   width: 80px;
 }
diff --git a/libs/ui/alerts/src/lib/alert/alert.component.css b/libs/ui/alerts/src/lib/alert/alert.component.css
@@ -3,6 +3,7 @@
   padding: 0.75rem 1.25rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  border-radius: 10px;
 }
 
 .perun-alert.info-alert {

Original file line number	Diff line number	Diff line change
`@@ -556,7 +556,7 @@ body {`
`556`	`556`	`}`
`557`	`557`
`558`	`558`	`button {`
`559`		`- border-radius: 0 !important;`
	`559`	`+ border-radius: var(--bs-border-radius) !important;`
`560`	`560`	`}`
`561`	`561`
`562`	`562`	`button:focus {`
`@@ -1325,19 +1325,15 @@ textarea.cdk-textarea-autosize-measuring {`
`1325`	`1325`
`1326`	`1326`	`// sharp design`
`1327`	`1327`	`.mat-mdc-outlined-button {`
`1328`		`- border-radius: 0 !important;`
	`1328`	`+ border-radius: var(--bs-border-radius) !important;`
`1329`	`1329`	`}`
`1330`	`1330`
`1331`	`1331`	`.mat-mdc-unelevated-button {`
`1332`		`- border-radius: 0 !important;`
	`1332`	`+ border-radius: var(--bs-border-radius) !important;`
`1333`	`1333`	`}`
`1334`	`1334`
`1335`	`1335`	`.mat-mdc-button {`
`1336`		`- border-radius: 0 !important;`
`1337`		`-}`
`1338`		`-`
`1339`		`-.card {`
`1340`		`- border-radius: 0 !important;`
	`1336`	`+ border-radius: var(--bs-border-radius) !important;`
`1341`	`1337`	`}`
`1342`	`1338`
`1343`	`1339`	`//colors for material icons`
`@@ -1597,6 +1593,7 @@ td.mat-mdc-cell {`
`1597`	`1593`	`font-size: 16px !important;`
`1598`	`1594`	`color: black !important;`
`1599`	`1595`	`opacity: 1 !important;`
	`1596`	`+ border-radius: var(--bs-border-radius) !important;`
`1600`	`1597`	`}`
`1601`	`1598`
`1602`	`1599`	`.mdc-tab__icon {`
`@@ -1687,7 +1684,7 @@ table .mdc-text-field--outlined {`
`1687`	`1684`	`// angular 15 button fixes`
`1688`	`1685`
`1689`	`1686`	`.mdc-button {`
`1690`		`- border-radius: 0 !important;`
	`1687`	`+ border-radius: var(--bs-border-radius) !important;`
`1691`	`1688`	`white-space: nowrap !important;`
`1692`	`1689`	`letter-spacing: normal;`
`1693`	`1690`	`}`
`@@ -1706,12 +1703,13 @@ table .mdc-text-field--outlined {`
`1706`	`1703`
`1707`	`1704`	`.mat-mdc-tab-header {`
`1708`	`1705`	`border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;`
	`1706`	`+ border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;`
`1709`	`1707`	`}`
`1710`	`1708`
`1711`	`1709`	`.mat-mdc-tab.mdc-tab--active {`
`1712`	`1710`	`background-color: #e8e4e4;`
	`1711`	`+ border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;`
`1713`	`1712`	`}`
`1714`		`-`
`1715`	`1713`	`.mdc-data-table__cell {`
`1716`	`1714`	`border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;`
`1717`	`1715`	`}`
`@@ -1727,3 +1725,7 @@ table .mdc-text-field--outlined {`
`1727`	`1725`	`.mb-25 {`
`1728`	`1726`	`margin-bottom: 0.75rem;`
`1729`	`1727`	`}`
	`1728`	`+`
	`1729`	`+.card {`
	`1730`	`+ border-radius: var(--bs-border-radius) !important;`
	`1731`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.align-cards {`
`2`		`- margin: 1rem 1rem 1rem 1rem;`
	`2`	`+ margin: 1rem 0;`
`3`	`3`	`display: inline-block;`
`4`	`4`	`vertical-align: top;`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`.cursor-pointer {`
`2`	`2`	`cursor: pointer;`
`3`	`3`	`}`
	`4`	`+`
	`5`	`+table {`
	`6`	`+ border-radius: 30px;`
	`7`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,7 @@ $perun-theme: mat.define-light-theme(`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`button {`
`114`		`- border-radius: 0 !important;`
	`114`	`+ border-radius: var(--bs-border-radius) !important;`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`button:focus {`
`@@ -244,6 +244,12 @@ button:focus {`
`244`	`244`
`245`	`245`	`.noBorderDialog .mat-mdc-dialog-container {`
`246`	`246`	`background-color: black;`
	`247`	`+ border-radius: var(--bs-border-radius);`
	`248`	`+}`
	`249`	`+`
	`250`	`+.noBorderDialog .mat-mdc-dialog-container .mdc-dialog__surface {`
	`251`	`+ background-color: black !important;`
	`252`	`+ border-radius: var(--bs-border-radius);`
`247`	`253`	`}`
`248`	`254`
`249`	`255`	`mat-mdc-chip-grid {`
`@@ -257,7 +263,7 @@ mat-icon {`
`257`	`263`	`// angular 15 button fixes`
`258`	`264`
`259`	`265`	`.mdc-button {`
`260`		`- border-radius: 0 !important;`
	`266`	`+ border-radius: var(--bs-border-radius) !important;`
`261`	`267`	`white-space: nowrap !important;`
`262`	`268`	`letter-spacing: normal;`
`263`	`269`	`}`
Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,7 @@ $perun-theme: mat.define-light-theme(`
`209`	`209`	`}`
`210`	`210`
`211`	`211`	`button {`
`212`		`- border-radius: 0 !important;`
	`212`	`+ border-radius: var(--bs-border-radius) !important;`
`213`	`213`	`}`
`214`	`214`
`215`	`215`	`button:focus {`
`@@ -228,7 +228,7 @@ mat-icon {`
`228`	`228`	`// angular 15 button fixes`
`229`	`229`
`230`	`230`	`.mdc-button {`
`231`		`- border-radius: 0 !important;`
	`231`	`+ border-radius: var(--bs-border-radius) !important;`
`232`	`232`	`white-space: nowrap !important;`
`233`	`233`	`letter-spacing: normal;`
`234`	`234`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ $password-reset-theme: mat.define-light-theme(`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`.mat-mdc-unelevated-button {`
`94`		`- border-radius: 0 !important;`
	`94`	`+ border-radius: var(--bs-border-radius) !important;`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`.dialog-container {`
`@@ -152,7 +152,7 @@ mat-form-field mat-icon {`
`152`	`152`	`// angular 15 button fixes`
`153`	`153`
`154`	`154`	`.mdc-button {`
`155`		`- border-radius: 0 !important;`
	`155`	`+ border-radius: var(--bs-border-radius) !important;`
`156`	`156`	`white-space: nowrap !important;`
`157`	`157`	`letter-spacing: normal;`
`158`	`158`	`}`
Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ $perun-theme: mat.define-light-theme(`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`button {`
`116`		`- border-radius: 0 !important;`
	`116`	`+ border-radius: var(--bs-border-radius) !important;`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`button:focus {`
`@@ -167,6 +167,7 @@ td.mat-mdc-cell {`
`167`	`167`	`display: flex;`
`168`	`168`	`align-items: center;`
`169`	`169`	`justify-content: center;`
	`170`	`+ border-radius: var(--bs-card-border-radius) !important;`
`170`	`171`	`}`
`171`	`172`
`172`	`173`	`#preloader {`
`@@ -298,7 +299,7 @@ mat-list-item .mat-mdc-form-field-subscript-wrapper {`
`298`	`299`	`// angular 15 button fixes`
`299`	`300`
`300`	`301`	`.mdc-button {`
`301`		`- border-radius: 0 !important;`
	`302`	`+ border-radius: var(--bs-border-radius) !important;`
`302`	`303`	`white-space: nowrap !important;`
`303`	`304`	`letter-spacing: normal;`
`304`	`305`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="p-4 m-3" [ngStyle]="{'background-color': color }">`
	`1`	`+<div class="p-4 m-3 card" [ngStyle]="{'background-color': color }">`
`2`	`2`	`<div class="d-flex pb-5 flex-row">`
`3`	`3`	`<div>`
`4`	`4`	`<mat-icon *ngIf="result !== 'OK'" class="mat-icon-war me-4"> {{icon}} </mat-icon>`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`		`-.card {`
`2`		`- border-radius: 0 !important;`
`3`		`-}`
`4`		`-`
`5`	`1`	`.static-column-size {`
`6`	`2`	`width: 80px;`
`7`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`padding: 0.75rem 1.25rem;`
`4`	`4`	`margin-top: 1rem;`
`5`	`5`	`margin-bottom: 1rem;`
	`6`	`+ border-radius: 10px;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.perun-alert.info-alert {`