improvements: make banner full width and adjust icon/margins

This commit is contained in:
Scott Wilson
2024-10-28 16:43:15 -07:00
parent df5bdf3773
commit e382135384
2 changed files with 6 additions and 6 deletions
+1 -1
View File
@@ -362,6 +362,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
return ( return (
<> <>
<div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex"> <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
{!window.isSecureContext && <InsecureConnectionBanner />}
<div className="flex flex-grow flex-col overflow-y-hidden md:flex-row"> <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
<aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"> <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
<nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]"> <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
@@ -1024,7 +1025,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
onClose={() => handlePopUpToggle("createOrg", false)} onClose={() => handlePopUpToggle("createOrg", false)}
/> />
<main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]"> <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
{!window.isSecureContext && <InsecureConnectionBanner />}
{children} {children}
</main> </main>
</div> </div>
@@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { faWarning, faX } from "@fortawesome/free-solid-svg-icons"; import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconButton } from "@app/components/v2"; import { IconButton } from "@app/components/v2";
@@ -17,9 +17,9 @@ export const InsecureConnectionBanner = () => {
if (isAcknowledged) return null; if (isAcknowledged) return null;
return ( return (
<div className="sticky top-0 z-50 flex w-full items-start bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200"> <div className="flex w-screen items-start border-b border-red-900 bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200">
<FontAwesomeIcon className="mt-1" icon={faWarning} /> <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
<span className="mx-1 mt-[0.04rem]"> <span className="mx-1 ml-2 mt-[0.04rem]">
Your connection to this Infisical instance is not secured via HTTPS. Some features may not Your connection to this Infisical instance is not secured via HTTPS. Some features may not
behave as expected. behave as expected.
</span> </span>
@@ -30,7 +30,7 @@ export const InsecureConnectionBanner = () => {
onClick={handleDismiss} onClick={handleDismiss}
ariaLabel="Dismiss banner" ariaLabel="Dismiss banner"
> >
<FontAwesomeIcon icon={faX} /> <FontAwesomeIcon icon={faXmark} />
</IconButton> </IconButton>
</div> </div>
); );