mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-10 12:28:56 +00:00
improvements: make banner full width and adjust icon/margins
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
+5
-5
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user