refactor: remove unused CSS and update layout components for improved structure

Author: Aloento

src/Components/Home/ServiceItem.css

@@ -7,7 +7,7 @@ import { useStatus } from "~/Services/Status";
 import { Models } from "~/Services/Status.Models";
 import { EventStatus, EventType, IsIncident, IsOpenStatus } from "../Event/Enums";
 import { Indicator } from "./Indicator";
-import "./ServiceItem.css";
+
 import serviceSlugMap from "./serviceSlugMap.json";
 
 interface IServiceItem {

src/Components/Home/ServiceItem.tsx

@@ -39,6 +39,10 @@ export function MobileMenu() {
                 <a href="/NewEvent">New Event</a>
               </ScaleTelekomMobileMenuItem>
 
+              <ScaleTelekomMobileMenuItem>
+                <a href="/Reviews">Reviews</a>
+              </ScaleTelekomMobileMenuItem>
+
               <ScaleTelekomMobileMenuItem onScale-set-menu-item-active={() => auth.signoutSilent()}>
                 Logout {auth.user?.profile.name}
               </ScaleTelekomMobileMenuItem>

src/Components/Layout/MobileMenu.tsx

@@ -1,7 +1,5 @@
-import { ODSBadgeNumber } from "@telekom-ods/react-ui-kit";
 import { ScaleButton, ScaleIconUserFileUser, ScaleMenuFlyout, ScaleMenuFlyoutItem, ScaleMenuFlyoutList, ScaleTelekomNavItem } from "@telekom/scale-components-react";
 import { useAuth } from "react-oidc-context";
-import { Authorized } from "../Auth/With";
 
 /**
  * @author Aloento
@@ -19,35 +17,13 @@ export function ProfileMenu() {
           <ScaleButton variant="secondary" iconOnly>
             <ScaleIconUserFileUser accessibility-title="Menu" />
           </ScaleButton>
-
-          <Authorized>
-            <div className="absolute -top-1 -right-1">
-              <ODSBadgeNumber
-                notificationNumber={6}
-                size="standard"
-                variant="notification"
-              />
-            </div>
-          </Authorized>
         </div>
 
         <ScaleMenuFlyoutList>
           <ScaleMenuFlyoutItem>
             Hi, {auth.user?.profile.name}
           </ScaleMenuFlyoutItem>
 
-          <ScaleMenuFlyoutItem>
-            <a href="/NewEvent">
-              New Event
-            </a>
-          </ScaleMenuFlyoutItem>
-
-          <ScaleMenuFlyoutItem>
-            <a href="/Reviews">
-              Reviews
-            </a>
-          </ScaleMenuFlyoutItem>
-
           <ScaleMenuFlyoutItem onScale-select={() => auth.signoutSilent()}>
             Logout
           </ScaleMenuFlyoutItem>

src/Components/Layout/ProfileMenu.tsx

@@ -8,7 +8,7 @@ import { ProfileMenu } from "./ProfileMenu";
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function TopNavBar() {
   return (
@@ -29,6 +29,12 @@ export function TopNavBar() {
             Docs
           </a>
         </ScaleTelekomNavItem>
+
+        <Authorized>
+          <NavItem Href="/NewEvent" Label="New Event" />
+
+          <NavItem Href="/Reviews" Label="Reviews" />
+        </Authorized>
       </ScaleTelekomNavList>
 
       <ScaleTelekomNavList alignment="right" aria-label="Functions Menu" slot="functions" variant="functions">

src/Components/Layout/TopNavBar.tsx

@@ -121,10 +121,10 @@ export function Home() {
       <section className="flex flex-wrap justify-between gap-y-2 py-2">
         <div className="flex items-center gap-x-2">
           <div className="Blink" />
-          <label>{update ? `Last Auto Update at ${dayjs(update).format(Dic.Time)}` : "Auto Refresh Enabled"}</label>
+          <label>{update ? `Last Auto Update at ${dayjs(update).format("HH:mm")}` : "Auto Refresh Enabled"}</label>
         </div>
 
-        <legend className="flex flex-wrap items-center gap-x-6 gap-y-2.5">
+        <legend className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
           {Object.values(EventType).map((state, i) => (
             <div key={i} className="flex gap-x-2">
               <Indicator Type={state} />

src/Pages/Home.tsx

@@ -14,3 +14,13 @@ img {
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }
+
+.blue-dot {
+  position: absolute !important;
+  top: -10%;
+  right: -10%;
+}
+
+.with-dot {
+  position: relative;
+}

src/index.css

@@ -1,4 +1,3 @@
-import "@telekom-ods/react-ui-kit/style.css";
 import "@telekom/scale-components/dist/scale-components/scale-components.css";
 import "./index.css";