Update dashboard welcome page.

[src/xds/xds-agent.git] / webapp / src / app / pages / dashboard / dashboard.component.scss

diff --git a/webapp/src/app/pages/dashboard/dashboard.component.scss b/webapp/src/app/pages/dashboard/dashboard.component.scss
index 6f1f0e0..376510d 100644 (file)
--- a/webapp/src/app/pages/dashboard/dashboard.component.scss
+++ b/webapp/src/app/pages/dashboard/dashboard.component.scss
@@ -1,16 +1,54 @@
 @import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
-
 @include nb-install-component() {
-  .solar-card nb-card-header {
-    border: none;
-    padding-bottom: 0;
+  nb-card-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+  .picture {
+    background-position: center;
+    background-size: cover;
+    position: relative;
+    border-top-left-radius: nb-theme(card-border-radius);
+    border-top-right-radius: nb-theme(card-border-radius);
+    flex: 1;
+  }
+  .details {
+    padding: 1.25rem;
+    .title {
+      padding-bottom: 2.5rem;
+      font-family: nb-theme(font-secondary);
+      font-weight: nb-theme(font-weight-bold);
+      color: nb-theme(color-fg-heading);
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      @include nb-for-theme(cosmic) {
+        font-weight: nb-theme(font-weight-bolder);
+      }
+    }
+    .description {
+      text-align: center;
+      color: nb-theme(color-fg-text);
+      font-size: 1.3rem;
+      font-weight: nb-theme(font-weight-light);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
-
-  @include media-breakpoint-down(is) {
-    /deep/ nb-card.large-card {
-      height: nb-theme(card-height-medium);
+  nb-card-footer {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.75rem 0;
+    border: none;
+    a {
+      text-decoration: none;
+      color: nb-theme(color-fg);
+      &:hover {
+        color: nb-theme(color-fg-heading);
+      }
+      i {
+        font-size: 1.75rem;
+      }
     }
   }
 }