@oneuptime/common 9.3.4 → 9.3.6

package/Server/API/AIAgentDataAPI.ts

@@ -458,10 +458,20 @@ export default class AIAgentDataAPI {
             );
           }
 
-          // Generate GitHub installation access token
+          /*
+           * Generate GitHub installation access token with write permissions
+           * Required for AI Agent to push branches and create pull requests
+           */
           const tokenData: GitHubInstallationToken =
             await GitHubUtil.getInstallationAccessToken(
               codeRepository.gitHubAppInstallationId,
+              {
+                permissions: {
+                  contents: "write", // Required for pushing branches
+                  pull_requests: "write", // Required for creating PRs
+                  metadata: "read", // Required for reading repository metadata
+                },
+              },
             );
 
           const repositoryUrl: string = `https://github.com/${codeRepository.organizationName}/${codeRepository.repositoryName}.git`;

package/Server/API/GitHubAPI.ts

@@ -11,6 +11,7 @@ import { DashboardClientUrl, GitHubAppName } from "../EnvironmentConfig";
 import ObjectID from "../../Types/ObjectID";
 import GitHubUtil, {
   GitHubRepository,
+  GitHubInstallationNotFoundError,
 } from "../Utils/CodeRepository/GitHub/GitHub";
 import CodeRepositoryService from "../Services/CodeRepositoryService";
 import ProjectService from "../Services/ProjectService";
@@ -181,9 +182,19 @@ export default class GitHubAPI {
       UserMiddleware.getUserMiddleware,
       async (req: ExpressRequest, res: ExpressResponse) => {
         try {
+          const projectId: string | undefined =
+            req.params["projectId"]?.toString();
           const installationId: string | undefined =
             req.params["installationId"]?.toString();
 
+          if (!projectId) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new BadDataException("Project ID is required"),
+            );
+          }
+
           if (!installationId) {
             return Response.sendErrorResponse(
               req,
@@ -201,6 +212,40 @@ export default class GitHubAPI {
         } catch (error) {
           logger.error("GitHub List Repositories Error:");
           logger.error(error);
+
+          // Handle stale installation ID - clear it from the project and return specific error
+          if (error instanceof GitHubInstallationNotFoundError) {
+            const projectId: string | undefined =
+              req.params["projectId"]?.toString();
+
+            if (projectId) {
+              try {
+                // Clear the stale installation ID from the project
+                await ProjectService.updateOneById({
+                  id: new ObjectID(projectId),
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                logger.info(
+                  `Cleared stale GitHub App installation ID from project ${projectId}`,
+                );
+              } catch (clearError) {
+                logger.error(
+                  "Failed to clear stale installation ID from project:",
+                );
+                logger.error(clearError);
+              }
+            }
+
+            // Return the specific error so the frontend knows to prompt reinstallation
+            return Response.sendErrorResponse(req, res, error);
+          }
+
           return Response.sendErrorResponse(
             req,
             res,
@@ -349,6 +394,63 @@ export default class GitHubAPI {
 
           logger.debug(`Received GitHub webhook event: ${event}`);
 
+          // Handle installation events - specifically when the app is uninstalled
+          if (event === "installation") {
+            const action: string | undefined = (req.body as JSONObject)?.[
+              "action"
+            ]?.toString();
+            const installationId: string | undefined = (
+              (req.body as JSONObject)?.["installation"] as JSONObject
+            )?.["id"]?.toString();
+
+            if (action === "deleted" && installationId) {
+              logger.info(
+                `GitHub App installation ${installationId} was deleted. Clearing from database...`,
+              );
+
+              try {
+                // Clear the installation ID from any projects that have it
+                await ProjectService.updateBy({
+                  query: {
+                    gitHubAppInstallationId: installationId,
+                  },
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  limit: 1000,
+                  skip: 0,
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                // Also clear from any code repositories that have this installation ID
+                await CodeRepositoryService.updateBy({
+                  query: {
+                    gitHubAppInstallationId: installationId,
+                  },
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  limit: 10000,
+                  skip: 0,
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                logger.info(
+                  `Successfully cleared GitHub App installation ${installationId} from database`,
+                );
+              } catch (clearError) {
+                logger.error(
+                  `Failed to clear GitHub App installation ${installationId} from database:`,
+                );
+                logger.error(clearError);
+              }
+            }
+          }
+
           /*
            * Handle different webhook events here
            * For now, just acknowledge receipt

package/Server/EnvironmentConfig.ts

@@ -397,6 +397,13 @@ export const StatusPageApiClientUrl: URL = new URL(
   new Route(StatusPageApiRoute.toString()),
 );
 
+// Internal URL for server-to-server communication (uses internal Docker hostname)
+export const StatusPageApiInternalUrl: URL = new URL(
+  Protocol.HTTP,
+  AppApiHostname.toString(),
+  new Route(StatusPageApiRoute.toString()),
+);
+
 export const DashboardClientUrl: URL = new URL(
   HttpProtocol,
   Host,

package/Server/Utils/CodeRepository/GitHub/GitHub.ts

@@ -18,6 +18,17 @@ import {
 import BadDataException from "../../../../Types/Exception/BadDataException";
 import * as crypto from "crypto";
 
+/**
+ * Error thrown when a GitHub App installation is no longer valid (e.g., uninstalled from GitHub)
+ */
+export class GitHubInstallationNotFoundError extends BadDataException {
+  public constructor() {
+    super(
+      "GitHub App installation not found. The app may have been uninstalled from GitHub. Please reconnect with GitHub to reinstall the app.",
+    );
+  }
+}
+
 export interface GitHubRepository {
   id: number;
   name: string;
@@ -335,11 +346,20 @@ export default class GitHubUtil extends HostedCodeRepository {
   /**
    * Gets an installation access token for a GitHub App installation
    * @param installationId - The GitHub App installation ID
+   * @param options - Optional configuration for the token
+   * @param options.permissions - Specific permissions to request for the token
    * @returns Installation token and expiration date
    */
   @CaptureSpan()
   public static async getInstallationAccessToken(
     installationId: string,
+    options?: {
+      permissions?: {
+        contents?: "read" | "write";
+        pull_requests?: "read" | "write";
+        metadata?: "read";
+      };
+    },
   ): Promise<GitHubInstallationToken> {
     const jwt: string = GitHubUtil.generateAppJWT();
 
@@ -347,10 +367,17 @@ export default class GitHubUtil extends HostedCodeRepository {
       `https://api.github.com/app/installations/${installationId}/access_tokens`,
     );
 
+    // Build request data with optional permissions
+    const requestData: JSONObject = {};
+
+    if (options?.permissions) {
+      requestData["permissions"] = options.permissions;
+    }
+
     const result: HTTPErrorResponse | HTTPResponse<JSONObject> = await API.post(
       {
         url: url,
-        data: {},
+        data: requestData,
         headers: {
           Authorization: `Bearer ${jwt}`,
           Accept: "application/vnd.github+json",
@@ -360,6 +387,31 @@ export default class GitHubUtil extends HostedCodeRepository {
     );
 
     if (result instanceof HTTPErrorResponse) {
+      // Check if this is a permission error and provide helpful message
+      const errorMessage: string =
+        (result.data as JSONObject)?.["message"]?.toString() || "";
+
+      // Check if the installation is not found (404) - this means the app was uninstalled from GitHub
+      if (result.statusCode === 404) {
+        logger.error(
+          `GitHub App installation not found (ID: ${installationId}). ` +
+            `The app may have been uninstalled from GitHub. User needs to reinstall the app.`,
+        );
+        throw new GitHubInstallationNotFoundError();
+      }
+
+      if (
+        errorMessage.includes("permissions") ||
+        result.statusCode === 403 ||
+        result.statusCode === 422
+      ) {
+        logger.error(
+          `GitHub App permission error: ${errorMessage}. ` +
+            `Please ensure the GitHub App is configured with the required permissions ` +
+            `(contents: write, pull_requests: write, metadata: read) in the GitHub App settings.`,
+        );
+      }
+
       throw result;
     }
 

package/Server/Utils/Monitor/MonitorCriteriaEvaluator.ts

@@ -34,6 +34,10 @@ import OneUptimeDate from "../../../Types/Date";
 import { JSONObject } from "../../../Types/JSON";
 import Typeof from "../../../Types/Typeof";
 import ReturnResult from "../../../Types/IsolatedVM/ReturnResult";
+import URL from "../../../Types/API/URL";
+import IP from "../../../Types/IP/IP";
+import Hostname from "../../../Types/API/Hostname";
+import Port from "../../../Types/Port";
 
 export default class MonitorCriteriaEvaluator {
   public static async processMonitorStep(input: {
@@ -650,6 +654,45 @@ ${contextBlock}
     }
 
     try {
+      // Handle primitive types directly
+      if (typeof value === "string") {
+        return value.trim();
+      }
+
+      if (typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+      }
+
+      // Handle class instances with custom toString method (like URL, IP, Hostname)
+      if (
+        value instanceof URL ||
+        value instanceof IP ||
+        value instanceof Hostname ||
+        value instanceof Port
+      ) {
+        return value.toString().trim();
+      }
+
+      /*
+       * Handle JSON representations of URL, IP, Hostname, Port (e.g., { _type: "URL", value: "https://..." })
+       * This can happen when the value wasn't properly deserialized from JSON
+       */
+      if (typeof value === "object" && value !== null && "_type" in value) {
+        const typedValue: { _type: string; value?: unknown } = value as {
+          _type: string;
+          value?: unknown;
+        };
+        if (
+          (typedValue._type === "URL" ||
+            typedValue._type === "IP" ||
+            typedValue._type === "Hostname" ||
+            typedValue._type === "Port") &&
+          typeof typedValue.value === "string"
+        ) {
+          return typedValue.value.trim();
+        }
+      }
+
       return String(value).trim();
     } catch (err) {
       logger.error(err);

package/Server/Utils/Monitor/MonitorResource.ts

@@ -50,6 +50,7 @@ interface ProbeAgreementResult {
   totalActiveProbes: number;
   agreedCriteriaId: string | null;
   agreedRootCause: string | null;
+  agreedProbeNames: Array<string>;
 }
 
 export default class MonitorResourceUtil {
@@ -566,6 +567,16 @@ export default class MonitorResourceUtil {
         ? probeAgreementResult.agreedCriteriaId
         : undefined;
       response.rootCause = probeAgreementResult.agreedRootCause;
+
+      // Add probe names in agreement to the root cause
+      if (
+        response.rootCause &&
+        probeAgreementResult.agreedProbeNames.length > 0
+      ) {
+        response.rootCause += `
+**Probes in Agreement**: ${probeAgreementResult.agreedProbeNames.join(", ")}
+`;
+      }
     }
 
     if (response.criteriaMetId && response.rootCause) {
@@ -829,6 +840,7 @@ export default class MonitorResourceUtil {
           lastMonitoringLog: true,
           probe: {
             connectionStatus: true,
+            name: true,
           },
         },
         limit: LIMIT_PER_PROJECT,
@@ -861,6 +873,7 @@ export default class MonitorResourceUtil {
         totalActiveProbes: 0,
         agreedCriteriaId: currentCriteriaMetId,
         agreedRootCause: currentRootCause,
+        agreedProbeNames: [],
       };
     }
 
@@ -876,11 +889,11 @@ export default class MonitorResourceUtil {
     /*
      * Count how many probes agree on each criteria result
      * Key: criteriaId or "none" for no criteria met
-     * Value: { count, rootCause }
+     * Value: { count, rootCause, probeNames }
      */
     const criteriaAgreements: Map<
       string,
-      { count: number; rootCause: string | null }
+      { count: number; rootCause: string | null; probeNames: Array<string> }
     > = new Map();
 
     const stepId: string = monitorStep.id.toString();
@@ -921,15 +934,21 @@ export default class MonitorResourceUtil {
 
       // Record the result
       const criteriaKey: string = evaluatedResponse.criteriaMetId || "none";
-      const existing: { count: number; rootCause: string | null } | undefined =
-        criteriaAgreements.get(criteriaKey);
+      const existing:
+        | { count: number; rootCause: string | null; probeNames: Array<string> }
+        | undefined = criteriaAgreements.get(criteriaKey);
+
+      // Get probe name for this monitor probe
+      const probeName: string = monitorProbe.probe?.name || "Unknown Probe";
 
       if (existing) {
         existing.count += 1;
+        existing.probeNames.push(probeName);
       } else {
         criteriaAgreements.set(criteriaKey, {
           count: 1,
           rootCause: evaluatedResponse.rootCause,
+          probeNames: [probeName],
         });
       }
     }
@@ -938,12 +957,14 @@ export default class MonitorResourceUtil {
     let maxCount: number = 0;
     let winningCriteriaId: string | null = null;
     let winningRootCause: string | null = null;
+    let winningProbeNames: Array<string> = [];
 
     for (const [criteriaId, data] of criteriaAgreements) {
       if (data.count > maxCount) {
         maxCount = data.count;
         winningCriteriaId = criteriaId === "none" ? null : criteriaId;
         winningRootCause = data.rootCause;
+        winningProbeNames = data.probeNames;
       }
     }
 
@@ -961,6 +982,7 @@ export default class MonitorResourceUtil {
       totalActiveProbes: activeProbes.length,
       agreedCriteriaId: hasAgreement ? winningCriteriaId : null,
       agreedRootCause: hasAgreement ? winningRootCause : null,
+      agreedProbeNames: hasAgreement ? winningProbeNames : [],
     };
   }
 }

package/Server/Utils/Workspace/MicrosoftTeams/MicrosoftTeams.ts

@@ -32,7 +32,6 @@ import ObjectID from "../../../../Types/ObjectID";
 import WorkspaceProjectAuthTokenService from "../../../Services/WorkspaceProjectAuthTokenService";
 import WorkspaceProjectAuthToken, {
   MicrosoftTeamsMiscData,
-  MicrosoftTeamsTeam,
 } from "../../../../Models/DatabaseModels/WorkspaceProjectAuthToken";
 import Incident from "../../../../Models/DatabaseModels/Incident";
 import IncidentState from "../../../../Models/DatabaseModels/IncidentState";
@@ -2940,12 +2939,10 @@ All monitoring checks are passing normally.`;
         // Fetch joined teams using app-scoped token
         if (data.userId) {
           logger.debug("Using app-scoped token to fetch joined teams for user");
-          const userTeams: Record<string, { id: string; name: string }> =
-            await this.getUserJoinedTeams({
-              userId: data.userId,
-              projectId: data.projectId,
-            });
-          allTeams = Object.values(userTeams) as any;
+          allTeams = await this.getUserJoinedTeams({
+            userId: data.userId,
+            projectId: data.projectId,
+          });
         }
       } catch (err) {
         logger.warn(
@@ -3069,7 +3066,7 @@ All monitoring checks are passing normally.`;
   public static async getUserJoinedTeams(data: {
     userId: ObjectID;
     projectId: ObjectID;
-  }): Promise<Record<string, { id: string; name: string }>> {
+  }): Promise<Array<JSONObject>> {
     logger.debug("=== getUserJoinedTeams called ===");
     logger.debug(`User ID: ${data.userId.toString()}`);
     logger.debug(`Project ID: ${data.projectId.toString()}`);
@@ -3123,29 +3120,9 @@ All monitoring checks are passing normally.`;
       const teams: Array<JSONObject> =
         (teamsData["value"] as Array<JSONObject>) || [];
 
-      if (teams.length === 0) {
-        logger.debug("No joined teams found for user");
-        return {};
-      }
+      logger.debug(`Fetched ${teams.length} joined teams`);
 
-      // Process teams
-      const availableTeams: Record<string, MicrosoftTeamsTeam> = teams.reduce(
-        (acc: Record<string, MicrosoftTeamsTeam>, t: JSONObject) => {
-          const team: MicrosoftTeamsTeam = {
-            id: t["id"] as string,
-            name: (t["displayName"] as string) || "Unnamed Team",
-          };
-          acc[team.name] = team;
-          return acc;
-        },
-        {} as Record<string, MicrosoftTeamsTeam>,
-      );
-
-      logger.debug(
-        `Fetched ${Object.keys(availableTeams).length} joined teams`,
-      );
-
-      return availableTeams;
+      return teams;
     } catch (error) {
       logger.error("Error getting user joined teams:");
       logger.error(error);

package/Types/Icon/IconProp.ts

@@ -141,6 +141,8 @@ enum IconProp {
   ExclaimationCircle = "ExclaimationCircle",
   WhatsApp = "WhatsApp",
   Brain = "Brain",
+  FlowDiagram = "FlowDiagram",
+  GitHub = "GitHub",
 }
 
 export default IconProp;

package/UI/Components/Icon/Icon.tsx

@@ -692,6 +692,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
         clipRule="evenodd"
       />,
     );
+  } else if (icon === IconProp.GitHub) {
+    return getSvgWrapper(
+      <path
+        fill="currentColor"
+        stroke="none"
+        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+      />,
+    );
   } else if (icon === IconProp.ChevronRight) {
     return getSvgWrapper(
       <path
@@ -1298,6 +1306,19 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
       />,
     );
+  } else if (icon === IconProp.FlowDiagram) {
+    // Flow diagram icon matching home page workflows - two boxes at top, one at bottom, connected
+    return getSvgWrapper(
+      <>
+        <rect x="3" y="3" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <rect x="15" y="3" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <rect x="9" y="17" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <path
+          strokeLinecap="round"
+          d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5"
+        />
+      </>,
+    );
   }
 
   return <></>;

package/UI/Components/Navbar/NavBar.tsx

@@ -29,6 +29,7 @@ export interface MoreMenuItem {
   description: string;
   route: Route;
   icon: IconProp;
+  iconColor?: string; // Tailwind color class like "bg-blue-500"
 }
 
 export interface ComponentProps {
@@ -277,7 +278,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
               {isMoreMenuVisible &&
                 (props.moreMenuFooter ? (
                   <NavBarMenu footer={props.moreMenuFooter}>
-                    {props.moreMenuItems.map((item: any) => {
+                    {props.moreMenuItems.map((item: MoreMenuItem) => {
                       return (
                         <NavBarMenuItem
                           key={item.title}
@@ -285,6 +286,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                           description={item.description}
                           route={item.route}
                           icon={item.icon}
+                          iconColor={item.iconColor}
                           onClick={forceHideMoreMenu}
                         />
                       );
@@ -292,7 +294,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                   </NavBarMenu>
                 ) : (
                   <NavBarMenu>
-                    {props.moreMenuItems.map((item: any) => {
+                    {props.moreMenuItems.map((item: MoreMenuItem) => {
                       return (
                         <NavBarMenuItem
                           key={item.title}
@@ -300,6 +302,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                           description={item.description}
                           route={item.route}
                           icon={item.icon}
+                          iconColor={item.iconColor}
                           onClick={forceHideMoreMenu}
                         />
                       );

package/UI/Components/Navbar/NavBarMenu.tsx

@@ -1,7 +1,14 @@
 import Link from "../Link/Link";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 import URL from "../../../Types/API/URL";
 import React, { FunctionComponent, ReactElement } from "react";
 
+export interface MenuSection {
+  title: string;
+  children: ReactElement | Array<ReactElement>;
+}
+
 export interface ComponentProps {
   children: ReactElement | Array<ReactElement>;
   footer?: {
@@ -11,7 +18,7 @@ export interface ComponentProps {
   };
 }
 
-const NavBarItem: FunctionComponent<ComponentProps> = (
+const NavBarMenu: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   let children: Array<ReactElement>;
@@ -20,27 +27,54 @@ const NavBarItem: FunctionComponent<ComponentProps> = (
   } else {
     children = props.children;
   }
+
+  // Calculate number of columns based on items count
+  const itemCount: number = children.length;
+  const columnClass: string =
+    itemCount <= 4
+      ? "lg:grid-cols-2"
+      : itemCount <= 6
+        ? "lg:grid-cols-3"
+        : "lg:grid-cols-3";
+  const maxWidthClass: string =
+    itemCount <= 4
+      ? "lg:max-w-xl"
+      : itemCount <= 6
+        ? "lg:max-w-2xl"
+        : "lg:max-w-3xl";
+
   return (
-    <div className="absolute left-1/3 z-10 mt-10 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 lg:max-w-3xl">
-      <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-        <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
+    <div
+      className={`absolute left-1/2 z-10 mt-8 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 ${maxWidthClass}`}
+    >
+      <div className="overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white">
+        {/* Menu Items */}
+        <div className={`relative grid gap-1 p-4 ${columnClass}`}>
           {children}
         </div>
+
+        {/* Footer */}
         {props.footer && (
-          <div className="bg-gray-50 p-5 sm:p-8">
+          <div className="border-t border-gray-100 bg-gray-50 px-4 py-4">
             <Link
               to={props.footer.link}
               openInNewTab={true}
-              className="-m-3 flow-root rounded-md p-3 transition duration-150 ease-in-out hover:bg-gray-100"
+              className="group flex items-center gap-3 rounded-lg p-2.5 -m-2 transition-colors hover:bg-gray-100"
             >
-              <span className="flex items-center">
-                <span className="text-base font-medium text-gray-900">
+              <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 group-hover:bg-gray-200 group-hover:ring-gray-300 transition-all">
+                <Icon
+                  icon={IconProp.GitHub}
+                  className="h-5 w-5 text-gray-700"
+                />
+              </div>
+              <div className="flex-1 min-w-0 text-left">
+                <p className="text-sm font-medium text-gray-900">
                   {props.footer.title}
-                </span>
-              </span>
-              <span className="mt-1 block text-sm text-gray-500 text-left">
-                {props.footer.description}
-              </span>
+                </p>
+                <p className="text-xs text-gray-500">
+                  {props.footer.description}
+                </p>
+              </div>
             </Link>
           </div>
         )}
@@ -49,4 +83,4 @@ const NavBarItem: FunctionComponent<ComponentProps> = (
   );
 };
 
-export default NavBarItem;
+export default NavBarMenu;