From f64a70c1915b773eecb93eafa31c69b555eac340 Mon Sep 17 00:00:00 2001 From: George Sproston <103250539+gsproston-scottlogic@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:43:51 +0100 Subject: [PATCH] 237 UI header icon (#245) * WIP: Header icon * Correct icon * Header icon * Removed unused file * Smiley icon when phase is complete * Formatted * Smaller icon and better padding * React-friendly icon * Don't wrap the header title * Don't wrap button text --- frontend/src/App.css | 1 + .../components/MainComponent/DemoHeader.css | 10 ++- .../components/MainComponent/DemoHeader.tsx | 8 ++- .../components/MainComponent/ProjectIcon.tsx | 63 +++++++++++++++++ .../MainComponent/ProjectIconWon.tsx | 69 +++++++++++++++++++ 5 files changed, 149 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/MainComponent/ProjectIcon.tsx create mode 100644 frontend/src/components/MainComponent/ProjectIconWon.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index e4a02874a..28ea0e871 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -42,6 +42,7 @@ border-width: 1px; color: var(--main-button-inactive-text-colour); cursor: pointer; + white-space: nowrap; } .prompt-injection-button:hover:not([disabled]) { diff --git a/frontend/src/components/MainComponent/DemoHeader.css b/frontend/src/components/MainComponent/DemoHeader.css index fc92a7e3c..018cca320 100644 --- a/frontend/src/components/MainComponent/DemoHeader.css +++ b/frontend/src/components/MainComponent/DemoHeader.css @@ -11,6 +11,9 @@ } #demo-header-left { + display: flex; + align-items: center; + height: 100%; width: 100%; } @@ -18,7 +21,12 @@ font-size: 36px; font-style: italic; font-weight: 700; - padding-right: 24px; + white-space: nowrap; +} + +#demo-header-icon { + height: 70%; + padding: 0 4%; } #demo-header-middle { diff --git a/frontend/src/components/MainComponent/DemoHeader.tsx b/frontend/src/components/MainComponent/DemoHeader.tsx index 714033d09..759ebbe46 100644 --- a/frontend/src/components/MainComponent/DemoHeader.tsx +++ b/frontend/src/components/MainComponent/DemoHeader.tsx @@ -2,6 +2,8 @@ import { PHASES } from "../../Phases"; import { PHASE_NAMES } from "../../models/phase"; import PhaseSelectionBox from "../PhaseSelectionBox/PhaseSelectionBox"; import "./DemoHeader.css"; +import ProjectIcon from "./ProjectIcon"; +import ProjectIconWon from "./ProjectIconWon"; function DemoHeader({ currentPhase, @@ -17,11 +19,15 @@ function DemoHeader({ return phaseName ?? ""; } + const isPhaseComplete = (currentPhase as number) < numCompletedPhases; + return (
Prompt Injection Demo - ICON + + {isPhaseComplete ? : } + {getPhaseName(currentPhase)} diff --git a/frontend/src/components/MainComponent/ProjectIcon.tsx b/frontend/src/components/MainComponent/ProjectIcon.tsx new file mode 100644 index 000000000..bf9a1a4a5 --- /dev/null +++ b/frontend/src/components/MainComponent/ProjectIcon.tsx @@ -0,0 +1,63 @@ +function ProjectIcon() { + return ( + + + + + + + + + + + + + + ); +} + +export default ProjectIcon; diff --git a/frontend/src/components/MainComponent/ProjectIconWon.tsx b/frontend/src/components/MainComponent/ProjectIconWon.tsx new file mode 100644 index 000000000..8c3c7fe16 --- /dev/null +++ b/frontend/src/components/MainComponent/ProjectIconWon.tsx @@ -0,0 +1,69 @@ +function ProjectIconWon() { + return ( + + + + + + + + + + + + + + + ); +} + +export default ProjectIconWon;