chore: refactor markup and styles

examples-standalone/spreadsheet-event-budgeting/package.json

@@ -40,7 +40,7 @@
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
     "@progress/kendo-svg-icons": "^2.0.0",
-    "@progress/kendo-theme-default": "^7.2.1",
+    "@progress/kendo-theme-default": "^8.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

examples-standalone/spreadsheet-event-budgeting/src/app/header/header.component.css

@@ -1,63 +1,34 @@
-kendo-appbar {
-  background-color: #ebebeb;
-  position: fixed;
-  height: 46px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 999;
-}
-.title {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-size: 18px;
-  letter-spacing: 0.18px;
-  line-height: 20px;
-  margin: 0;
-  cursor: pointer;
-  color: #000000;
-}
-.user-title {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #000000;
-  margin-right: 5px;
-  margin-bottom: 24px;
-  /* should be removed when readonly is available */
-  display:none;
-}
+.k-appbar {
+  padding-inline: var(--kendo-spacing-4);
 
-.title-container {
-  margin-top: -4px !important;
-}
-.k-appbar-section {
-  margin-bottom: 18px;
-}
-.active {
-  background-color: #1274ac33 !important;
+  @media (max-width: 767.98px) {
+    justify-content: center;
+  }
 }
-.flex-buttons {
+
+.logo-nav-container {
   display: flex;
-  gap: 10px;
-  margin-top: -2px;
-}
-.actions {
-  margin-right: 14px;
-  /* should be removed when readonly is available */
-  display:none;
+  gap: var(--kendo-spacing-8);
 }
-@media only screen and (max-width: 660px) and (max-height: 900px) {
-  .title {
+
+.logo {
+  font-size: var(--kendo-font-size-xl);
+  cursor: pointer;
+
+  @media (max-width: 767.98px) {
     display: none;
   }
 }
-@media only screen and (max-width: 360px) and (max-height: 800px) {
-  .title {
+
+.nav-buttons,
+.username-logout-container {
+  display: flex;
+  gap: var(--kendo-spacing-2);
+}
+
+.username-logout-container,
+.k-appbar-spacer {
+  @media (max-width: 767.98px) {
     display: none;
   }
-  .flex-buttons {
-    margin-left: -22px;
-  }
 }

examples-standalone/spreadsheet-event-budgeting/src/app/header/header.component.html

@@ -1,46 +1,48 @@
-<kendo-appbar position="top">
-  <kendo-appbar-section class="title-container">
-    <h1 class="title" routerLink="/login">Sample Event</h1>
-  </kendo-appbar-section>
-
-  <kendo-appbar-spacer width="32px"></kendo-appbar-spacer>
-
-  <kendo-appbar-section class="flex-buttons">
-    <kendo-button
-      kendoButton
-      themeColor="primary"
-      rounded="medium"
-      fillMode="clear"
-      size="medium"
-      routerLink="/event-budget"
-      routerLinkActive="active"
-      >Event Budget</kendo-button
-    >
-    <kendo-button
-      kendoButton
-      themeColor="primary"
-      rounded="medium"
-      fillMode="clear"
-      size="medium"
-      routerLink="/tickets"
-      routerLinkActive="active"
-      >Tickets</kendo-button
-    >
-    <kendo-button
-      kendoButton
-      themeColor="primary"
-      rounded="medium"
-      fillMode="clear"
-      size="medium"
-      routerLink="/speakers"
-      routerLinkActive="active"
-      >Call for Speakers</kendo-button
-    >
+<kendo-appbar
+  positionMode="sticky"
+  position="top"
+  themeColor="light"
+>
+  <kendo-appbar-section class="logo-nav-container">
+    <div class="logo" routerLink="/login">Sample Event</div>
+    <div class="nav-buttons">
+      <kendo-button
+        kendoButton
+        themeColor="primary"
+        rounded="medium"
+        fillMode="clear"
+        size="medium"
+        routerLink="/event-budget"
+        routerLinkActive="active"
+        >Event Budget</kendo-button
+      >
+      <kendo-button
+        kendoButton
+        themeColor="primary"
+        rounded="medium"
+        fillMode="clear"
+        size="medium"
+        routerLink="/tickets"
+        routerLinkActive="active"
+        >Tickets</kendo-button
+      >
+      <kendo-button
+        kendoButton
+        themeColor="primary"
+        rounded="medium"
+        fillMode="clear"
+        size="medium"
+        routerLink="/speakers"
+        routerLinkActive="active"
+        >Call for Speakers</kendo-button
+      >
+    </div>
   </kendo-appbar-section>
 
   <kendo-appbar-spacer></kendo-appbar-spacer>
-  <span class="user-title">Hello, {{ roleName }}</span>
-  <kendo-appbar-section class="actions">
+
+  <kendo-appbar-section class="username-logout-container">
+    <span class="user-title">Hello, {{ roleName }}</span>
     <kendo-button
       kendoButton
       fillMode="clear"
@@ -49,10 +51,9 @@ <h1 class="title" routerLink="/login">Sample Event</h1>
       routerLinkActive="active"
     >
       <kendo-svgicon
-        style="margin-bottom: 5px"
         [icon]="logoutIcon"
       ></kendo-svgicon>
-      <span style="margin-left: 5px">Logout</span>
+      <span>Logout</span>
     </kendo-button>
   </kendo-appbar-section>
 </kendo-appbar>