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
ScottLogic · Sep 11, 2023 · f64a70c · f64a70c
1 parent e23bd1b
commit f64a70c
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 2 deletions.
diff --git 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
@@ -11,14 +11,22 @@
 }
 
 #demo-header-left {
+  display: flex;
+  align-items: center;
+  height: 100%;
   width: 100%;
 }
 
 #demo-header-title {
   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
@@ -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 (
     <div id="demo-header">
       <span id="demo-header-left">
         <span id="demo-header-title">Prompt Injection Demo</span>
-        <span id="demo-header-icon">ICON</span>
+        <span id="demo-header-icon">
+          {isPhaseComplete ? <ProjectIconWon /> : <ProjectIcon />}
+        </span>
       </span>
       <span id="demo-header-middle">
         <span id="demo-header-current-phase">{getPhaseName(currentPhase)}</span>

diff --git a/frontend/src/components/MainComponent/ProjectIcon.tsx b/frontend/src/components/MainComponent/ProjectIcon.tsx
@@ -0,0 +1,63 @@
+function ProjectIcon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 385 355"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="24.5"
+        cy="24.5"
+        r="24.5"
+        transform="matrix(0 1 1 0 170 0)"
+        fill="white"
+      />
+      <circle
+        cx="20.3538"
+        cy="20.3538"
+        r="20.3538"
+        transform="matrix(0 1 1 0 173.769 4.52295)"
+        fill="#1FD07B"
+      />
+      <circle
+        cx="14.3231"
+        cy="14.3231"
+        r="14.3231"
+        transform="matrix(0 1 1 0 179.8 10.5537)"
+        fill="#FF0080"
+      />
+      <circle
+        cx="8.29231"
+        cy="8.29231"
+        r="8.29231"
+        transform="matrix(0 1 1 0 185.831 16.5845)"
+        fill="#FF7524"
+      />
+      <path
+        d="M28.929 335.409L47.0595 266.56L49.4243 257.58L113.384 306.433L28.929 335.409Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M191.775 322.266C285.451 322.266 361.391 265.522 361.391 195.525C361.391 125.528 285.451 68.7837 191.775 68.7837C98.0993 68.7837 22.1599 125.528 22.1599 195.525C22.1599 265.522 98.0993 322.266 191.775 322.266ZM192.151 304.966C275.649 304.966 343.338 261.861 343.338 208.688C343.338 155.514 275.649 112.409 192.151 112.409C108.653 112.409 40.964 155.514 40.964 208.688C40.964 261.861 108.653 304.966 192.151 304.966Z"
+        fill="white"
+      />
+      <circle cx="20.3087" cy="201.167" r="20.3087" fill="white" />
+      <circle
+        cx="20.3087"
+        cy="20.3087"
+        r="20.3087"
+        transform="matrix(-1 0 0 1 385 180.858)"
+        fill="white"
+      />
+      <circle cx="129" cy="201" r="34.5" stroke="#1FD07B" strokeWidth="17" />
+      <circle cx="255" cy="201" r="34.5" stroke="#1FD07B" strokeWidth="17" />
+      <line x1="194" y1="46" x2="194" y2="77" stroke="white" strokeWidth="4" />
+    </svg>
+  );
+}
+
+export default ProjectIcon;
diff --git a/frontend/src/components/MainComponent/ProjectIconWon.tsx b/frontend/src/components/MainComponent/ProjectIconWon.tsx
@@ -0,0 +1,69 @@
+function ProjectIconWon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 385 355"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="24.5"
+        cy="24.5"
+        r="24.5"
+        transform="matrix(0 1 1 0 170 0)"
+        fill="white"
+      />
+      <circle
+        cx="20.3538"
+        cy="20.3538"
+        r="20.3538"
+        transform="matrix(0 1 1 0 173.769 4.52295)"
+        fill="#1FD07B"
+      />
+      <circle
+        cx="14.3231"
+        cy="14.3231"
+        r="14.3231"
+        transform="matrix(0 1 1 0 179.8 10.5537)"
+        fill="#FF0080"
+      />
+      <circle
+        cx="8.29231"
+        cy="8.29231"
+        r="8.29231"
+        transform="matrix(0 1 1 0 185.831 16.5845)"
+        fill="#FF7524"
+      />
+      <path
+        d="M28.929 335.409L47.0595 266.56L49.4243 257.58L113.384 306.433L28.929 335.409Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M191.775 322.266C285.451 322.266 361.391 265.522 361.391 195.525C361.391 125.528 285.451 68.7837 191.775 68.7837C98.0993 68.7837 22.1599 125.528 22.1599 195.525C22.1599 265.522 98.0993 322.266 191.775 322.266ZM192.151 304.966C275.649 304.966 343.338 261.861 343.338 208.688C343.338 155.514 275.649 112.409 192.151 112.409C108.653 112.409 40.964 155.514 40.964 208.688C40.964 261.861 108.653 304.966 192.151 304.966Z"
+        fill="white"
+      />
+      <circle cx="20.3087" cy="201.167" r="20.3087" fill="white" />
+      <circle
+        cx="20.3087"
+        cy="20.3087"
+        r="20.3087"
+        transform="matrix(-1 0 0 1 385 180.858)"
+        fill="white"
+      />
+      <circle cx="129" cy="201" r="34.5" stroke="#1FD07B" strokeWidth="17" />
+      <circle cx="255" cy="201" r="34.5" stroke="#1FD07B" strokeWidth="17" />
+      <line x1="194" y1="46" x2="194" y2="77" stroke="white" strokeWidth="4" />
+      <path
+        d="M148 274C162.5 282.667 201.2 294.8 240 274"
+        stroke="#1FD07B"
+        strokeWidth="13"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+export default ProjectIconWon;