diff --git a/App/Frontend/src/app/dashboard/dashboard.component.css b/App/Frontend/src/app/dashboard/dashboard.component.css index 68991c0..0781a60 100644 --- a/App/Frontend/src/app/dashboard/dashboard.component.css +++ b/App/Frontend/src/app/dashboard/dashboard.component.css @@ -8,7 +8,6 @@ .dashboard-header-section1 { grid-area: header1; } .dashboard-header-section2 { grid-area: header2; } .dashboard-header-section3 { grid-area: header3; } -.dashboard-header-section4 { grid-area: header4; } .nav { grid-area: nav; } .dashboard-main { grid-area: main; } .footer { grid-area: footer; } @@ -30,21 +29,20 @@ /* Dashboard Header */ .dashboard-header { display: grid; - grid-template-areas: 'header1 header2 header3 header4'; - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: 'header1 header2 header3'; + grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .dashboard-header-section1, .dashboard-header-section2, -.dashboard-header-section3, -.dashboard-header-section4 { +.dashboard-header-section3 { background-color: var(--quaternary); color: var(--text); border-radius: var(--radius); box-shadow: 2px 0 5px var(--shadow); width: 100%; - height: 170px; + height: 190px; font-weight: bold; font-size: 1rem; align-items: center; @@ -62,16 +60,23 @@ padding: 0; } -#dashboard-header-4 { - margin-top: 5%; +.dashboard-header-1, +.dashboard-header-2, +.dashboard-header-3 { align-content: center; align-items: center; display: flex; flex-direction: column; justify-content: center; } -#dashboard-header-2,#dashboard-header-3 { - float: left; + +.dashboard-header-1, +.dashboard-header-2 { + margin-top: 0; +} + +.dashboard-header-3 { + margin-top: 5%; } .progress-container { @@ -155,10 +160,11 @@ .dashboard-header { grid-template-areas: - 'header1 header2' - 'header3 header4'; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; + 'header1' + 'header2' + 'header3'; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; } } @@ -176,16 +182,14 @@ grid-template-areas: 'header1' 'header2' - 'header3' - 'header4'; + 'header3'; grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; } .dashboard-header-section1, .dashboard-header-section2, - .dashboard-header-section3, - .dashboard-header-section4 { + .dashboard-header-section3 { margin-bottom: 16px; } diff --git a/App/Frontend/src/app/dashboard/dashboard.component.html b/App/Frontend/src/app/dashboard/dashboard.component.html index 462dfde..c346168 100644 --- a/App/Frontend/src/app/dashboard/dashboard.component.html +++ b/App/Frontend/src/app/dashboard/dashboard.component.html @@ -2,17 +2,11 @@