From 6fa9667229e68a0e675b3673a68e5d150fde43a1 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 31 Jan 2024 15:00:28 +0000 Subject: [PATCH 01/21] 782 close button added --- frontend/src/components/Overlay/Overlay.css | 46 +++++++++++++++++-- frontend/src/components/Overlay/Overlay.tsx | 9 +++- .../src/components/Overlay/OverlayWelcome.tsx | 7 ++- .../ThemedButtons/ModeSelectButtons.tsx | 2 +- 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index db55dba75..554195100 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -25,7 +25,7 @@ font-size: 1.25rem; } -.overlay > .close-button { +/* .overlay > .close-button { position: absolute; top: 1rem; right: 1rem; @@ -34,15 +34,54 @@ color: inherit; font-weight: bold; font-size: 1.5rem; -} +} */ -.overlay > .close-button:focus-visible { +/* .overlay > .close-button:focus-visible { border-color: var(--main-text-colour); } .overlay > .close-button:hover { color: var(--main-text-colour); text-decoration: none; +} */ + +.close-button { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + border: 0.0625rem solid var(--overlay-tab-colour); + border-radius: 0.5rem; + background-color: var(--overlay-background-colour); + color: var(--main-text-colour-inverted); +} + +.close-button:hover { + background-color: var(--overlay-tab-colour); +} + +.overlay-close-icon { + display: flex; + align-items: center; + justify-content: center; + border: 0.125rem solid var(--main-text-colour-inverted); + color: var(--main-text-colour-inverted); + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + font-weight: bold; +} + +.overlay-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 2rem; + border-bottom: 2px solid grey; + position: fixed; + width: 100%; + height: 5rem; + background-color: #208187; } .overlay-content { @@ -50,4 +89,5 @@ overflow: hidden; height: 100%; padding: 1.5rem; + padding-top: 4rem; } diff --git a/frontend/src/components/Overlay/Overlay.tsx b/frontend/src/components/Overlay/Overlay.tsx index 88b5674a6..2864c670a 100644 --- a/frontend/src/components/Overlay/Overlay.tsx +++ b/frontend/src/components/Overlay/Overlay.tsx @@ -5,19 +5,24 @@ import './Overlay.css'; function Overlay({ children, closeOverlay, + heading, }: { children: ReactNode; closeOverlay: () => void; + heading: string; }) { return (
+
+

{heading}

+
{children}
diff --git a/frontend/src/components/Overlay/OverlayWelcome.tsx b/frontend/src/components/Overlay/OverlayWelcome.tsx index 0693a138b..b50e41318 100644 --- a/frontend/src/components/Overlay/OverlayWelcome.tsx +++ b/frontend/src/components/Overlay/OverlayWelcome.tsx @@ -16,12 +16,15 @@ function OverlayWelcome({ closeOverlay: () => void; }) { return ( - +
-

Welcome to Spy Logic!

+

Welcome to Spy Logic!

This is an app we developed to teach you about AI chat system security in a playful way. In this game you are playing the role of an diff --git a/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx b/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx index dc9223487..58989e660 100644 --- a/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx +++ b/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx @@ -18,7 +18,7 @@ function ModeSelectButtons({ } return ( -

    +
      {modeButtons.map((modeButton) => (
    • Date: Wed, 31 Jan 2024 16:36:22 +0000 Subject: [PATCH 02/21] 782 adding headers --- .../HandbookOverlay/HandbookOverlay.css | 26 +++++++++---------- .../HandbookOverlay/HandbookOverlay.tsx | 21 +++++++++------ .../HandbookOverlay/HandbookSpine.css | 1 + .../components/Overlay/MissionDialogue.css | 1 - .../components/Overlay/MissionInformation.tsx | 6 +++-- frontend/src/components/Overlay/Overlay.css | 20 ++++++++++---- .../src/components/Overlay/OverlayChoice.tsx | 4 ++- .../src/components/Overlay/ResetLevel.tsx | 9 ++++--- .../src/components/Overlay/ResetProgress.tsx | 12 +++++---- 9 files changed, 61 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index 972ad1b04..9f3ed3c04 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -7,27 +7,27 @@ aspect-ratio: 7/8; } -.handbook-overlay .close-button { - position: absolute; - top: 0.25rem; - right: 0.25rem; -} - -.handbook-overlay .close-button:hover svg rect { - fill: black; - stroke: white; +.handbook-overlay-header { + background-color: grey; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + position: fixed; + height: 4rem; } -.handbook-overlay .close-button:hover svg path { - fill: white; +.handbook .close-button { + margin-right: 3rem; } .handbook-overlay .content { overflow-y: auto; - margin-top: 3rem; + margin-top: 5rem; margin-right: 0.5rem; margin-bottom: 0.25rem; - padding: 0 1.75rem 0.5rem; + padding: 2rem 1.75rem 0.5rem; /* firefox scrollbar styling */ scrollbar-color: var(--handbook-scrollbar-colour) transparent; diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx index c2203f846..4ca0c606d 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx @@ -5,7 +5,6 @@ import { HANDBOOK_PAGES } from '@src/models/handbook'; import { LEVEL_NAMES, LevelSystemRole } from '@src/models/level'; import HandbookAttacks from './HandbookAttacks'; -import HandbookCloseIcon from './HandbookCloseIcon'; import HandbookGlossary from './HandbookGlossary'; import HandbookSpine from './HandbookSpine'; import HandbookSystemRole from './HandbookSystemRole'; @@ -43,14 +42,19 @@ function HandbookOverlay({ }[selectedPage]; return ( +
      +
      +

      Handbook

      + +
      - +
      +
      ); } diff --git a/frontend/src/components/HandbookOverlay/HandbookSpine.css b/frontend/src/components/HandbookOverlay/HandbookSpine.css index 5111434f0..d3ecd84ef 100644 --- a/frontend/src/components/HandbookOverlay/HandbookSpine.css +++ b/frontend/src/components/HandbookOverlay/HandbookSpine.css @@ -4,6 +4,7 @@ min-width: 6rem; max-width: 6rem; padding-top: 3rem; + margin-top: 5rem; border-right: 0.0625rem solid var(--handbook-spine-separator-colour); background-color: var(--handbook-spine-background-colour); font-size: 1.125rem; diff --git a/frontend/src/components/Overlay/MissionDialogue.css b/frontend/src/components/Overlay/MissionDialogue.css index 50539c945..d540ef975 100644 --- a/frontend/src/components/Overlay/MissionDialogue.css +++ b/frontend/src/components/Overlay/MissionDialogue.css @@ -1,5 +1,4 @@ .mission-dialogue h2 { - margin-top: 0; margin-bottom: 0; font-weight: bold; font-size: 1.25rem; diff --git a/frontend/src/components/Overlay/MissionInformation.tsx b/frontend/src/components/Overlay/MissionInformation.tsx index e00a06a15..61f5de4bf 100644 --- a/frontend/src/components/Overlay/MissionInformation.tsx +++ b/frontend/src/components/Overlay/MissionInformation.tsx @@ -14,10 +14,12 @@ function MissionInformation({ currentLevel: LEVEL_NAMES; closeOverlay: () => void; }) { + + const heading = `${LEVELS[currentLevel].name} Mission Information` + return ( - +
      -

      Mission Information

      void; + heading: string; }) { return ( - +
      {content} diff --git a/frontend/src/components/Overlay/ResetLevel.tsx b/frontend/src/components/Overlay/ResetLevel.tsx index ddd5ca543..88aefd21c 100644 --- a/frontend/src/components/Overlay/ResetLevel.tsx +++ b/frontend/src/components/Overlay/ResetLevel.tsx @@ -14,21 +14,21 @@ function ResetLevelOverlay({ return ( { void resetLevel(); }, }} button2={{ - children: 'Cancel', + children: 'No, cancel', onClick: closeOverlay, }} content={ <> -

      Reset level

      +

      Do you want to start this level from scratch?

      { - 'Warning! This will reset all your chat history and sent emails for this level.' + 'Resetting will erase all your chat history and sent emails for this level.' } {currentLevel >= LEVEL_NAMES.LEVEL_3 && ' However, any configurations you have made to defences will not be lost.'} @@ -37,6 +37,7 @@ function ResetLevelOverlay({ } closeOverlay={closeOverlay} + heading="Reset Level" /> ); } diff --git a/frontend/src/components/Overlay/ResetProgress.tsx b/frontend/src/components/Overlay/ResetProgress.tsx index 715a9b1f9..c252b0805 100644 --- a/frontend/src/components/Overlay/ResetProgress.tsx +++ b/frontend/src/components/Overlay/ResetProgress.tsx @@ -10,26 +10,28 @@ function ResetProgressOverlay({ return ( { void resetProgress(); }, }} button2={{ - children: 'Cancel', + children: 'No, cancel', onClick: closeOverlay, }} content={ <> -

      Reset all progress

      +

      Are you sure you want to start from scratch?

      - {`Warning! This will reset all your progress in the levels and sandbox mode. - This includes all your conversation history and sent emails. Any configurations you have made to defences in sandbox mode will also be lost. + {`Resetting will erase all your progress in the levels and sandbox mode. + This includes all your conversation history and sent emails. + Any configurations you have made to defences in sandbox mode will also be lost. Are you sure you want to do this?`}

      } closeOverlay={closeOverlay} + heading="Reset Progress" /> ); } From fe573a503178bfb756c6bbcd747821bab982a587 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:47:56 +0000 Subject: [PATCH 03/21] 782 adjusted handbook header --- frontend/src/App.css | 1 + frontend/src/Theme.css | 2 + .../HandbookOverlay/HandbookAttacks.tsx | 6 +-- .../HandbookOverlay/HandbookGlossary.tsx | 6 +-- .../HandbookOverlay/HandbookOverlay.css | 32 ++++++------- .../HandbookOverlay/HandbookOverlay.tsx | 4 +- .../HandbookOverlay/HandbookSpine.css | 3 +- .../HandbookOverlay/HandbookSystemRole.tsx | 6 +-- frontend/src/components/Overlay/Overlay.css | 46 ++++++++----------- frontend/src/components/Overlay/Overlay.tsx | 18 ++++---- 10 files changed, 59 insertions(+), 65 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 316b0df8f..bddf33a4f 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -51,6 +51,7 @@ border: none; background-color: transparent; transform: translate(-50%, -50%); + /* border-radius: 0.625rem; */ } .dialog-modal:focus-visible { diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css index 9884eb377..149c4b327 100644 --- a/frontend/src/Theme.css +++ b/frontend/src/Theme.css @@ -65,12 +65,14 @@ /* general modal overlay */ --overlay-background-colour: #8ad5da; + --overlay-header-background-colour: #61B5BA; --overlay-tab-colour: #c7e8f4; --overlay-attack-background-colour: #d6d6ff; --overlay-text-colour: #313131; /* handbook modal */ --handbook-background-colour: #fff; + --handbook-header-background-colour: #A7A7A7; --handbook-spine-background-colour: #d3d3d3; --handbook-spine-separator-colour: var(--main-text-colour-inverted); --handbook-tab-selected-colour: #313131; diff --git a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx index 9df109e70..d254edab5 100644 --- a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx @@ -22,10 +22,10 @@ function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) { return (
      -
      -

      Attacks

      +
      +

      Attacks

      {getHeaderText(currentLevel)}

      -
      +
      {currentLevel > LEVEL_NAMES.LEVEL_1 && (
      {attacks.map((attack) => ( diff --git a/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx b/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx index 8b9285b5c..23da7c7cb 100644 --- a/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx @@ -11,10 +11,10 @@ function HandbookGlossary({ currentLevel }: { currentLevel: LEVEL_NAMES }) { } return (
      -
      -

      Glossary

      +
      +

      Glossary

      {getHeaderText(currentLevel)}

      -
      +
      {currentLevel > LEVEL_NAMES.LEVEL_1 && (
      {GLOSSARY.map(({ term, definition }) => ( diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index 9f3ed3c04..d375123ca 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -7,24 +7,34 @@ aspect-ratio: 7/8; } -.handbook-overlay-header { - background-color: grey; +.handbook header { + background-color: var(--handbook-header-background-colour); width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; position: fixed; - height: 4rem; + height: 3.125rem; + border-radius: 0; } -.handbook .close-button { +.handbook header .close-button { margin-right: 3rem; + background-color: inherit; +} + +.handbook header .close-button:hover { + background-color: var(--handbook-tab-hover-colour); +} + +.handbook header .close-button:focus-visible { + background-color: var(--handbook-tab-hover-colour); } .handbook-overlay .content { overflow-y: auto; - margin-top: 5rem; + margin-top: 3.125rem; margin-right: 0.5rem; margin-bottom: 0.25rem; padding: 2rem 1.75rem 0.5rem; @@ -41,15 +51,3 @@ .handbook-overlay .content::-webkit-scrollbar-thumb:hover { background-color: var(--handbook-scrollbar-hover-colour); } - -.handbook-overlay .content h1 { - font-size: 1.5rem; -} - -.handbook-overlay .content h2 { - font-size: 1.125rem; -} - -.handbook-overlay .content p { - font-size: 1rem; -} diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx index 4ca0c606d..d6c107280 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx @@ -43,7 +43,7 @@ function HandbookOverlay({ return (
      -
      +

      Handbook

      -
      +
      -
      -

      System Roles

      +
      +

      System Roles

      Here you can review the parameters the bot is working under for each level. You can only review this for levels you have already completed.

      -
      +
      {systemRoles.length !== 0 ? ( diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index 1d34b33b2..8cc9f6507 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -8,15 +8,29 @@ max-height: 80vh; padding: 0; border: none; - border-radius: 0.625rem; + /* border-radius: 0.625rem; */ background-color: var(--overlay-background-colour); color: var(--overlay-text-colour); + border-radius: 0.625rem; } .overlay * { box-sizing: border-box; } +.overlay header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 2rem; + position: fixed; + width: 100%; + height: 5rem; + background-color: var(--overlay-header-background-colour); + border-top-right-radius: 0.625rem; + border-top-left-radius: 0.625rem; +} + .overlay h1 { text-align: center; } @@ -38,9 +52,9 @@ /* .overlay > .close-button:focus-visible { border-color: var(--main-text-colour); -} +} */ -.overlay > .close-button:hover { +/* .overlay > .close-button:hover { color: var(--main-text-colour); text-decoration: none; } */ @@ -50,12 +64,9 @@ align-items: center; gap: 0.5rem; padding: 0.5rem; - /* border: 0.0625rem solid var(--overlay-tab-colour); */ - /* border: 0.0625rem solid #8AD5DA; */ - border: 0.0625rem solid black; + border: 0.0625rem solid var(--main-text-colour-inverted); border-radius: 0.5rem; - /* background-color: var(--overlay-background-colour); */ - background-color: #61B5BA;; + background-color: inherit; color: var(--main-text-colour-inverted); } @@ -75,25 +86,6 @@ font-weight: bold; } -.overlay-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 2rem; - /* border-bottom: 2px solid grey; */ - position: fixed; - width: 100%; - height: 5rem; - /* background-color: #49a2a8; */ - /* background-color: #2bb3bb; */ - /* background-color: #73d1d6; */ - /* background-color: #8ad5da; */ - /* background-color: #5BB0B6; */ - background-color: #61B5BA; - border-top-right-radius: 0.625rem; - border-top-left-radius: 0.625rem; -} - .overlay-content { display: flex; overflow: hidden; diff --git a/frontend/src/components/Overlay/Overlay.tsx b/frontend/src/components/Overlay/Overlay.tsx index 2864c670a..9753d6d85 100644 --- a/frontend/src/components/Overlay/Overlay.tsx +++ b/frontend/src/components/Overlay/Overlay.tsx @@ -13,16 +13,16 @@ function Overlay({ }) { return (
      -
      +

      {heading}

      - -
      + +
      {children}
      From 26ff7fe84accee0bf540c264fa9dd80a8911ccd2 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 1 Feb 2024 13:05:55 +0000 Subject: [PATCH 04/21] adjusted reset level --- frontend/src/App.css | 1 - frontend/src/components/Overlay/Overlay.css | 7 +------ frontend/src/components/Overlay/ResetLevel.tsx | 2 +- frontend/src/components/Overlay/ResetProgress.tsx | 2 +- 4 files changed, 3 insertions(+), 9 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index bddf33a4f..316b0df8f 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -51,7 +51,6 @@ border: none; background-color: transparent; transform: translate(-50%, -50%); - /* border-radius: 0.625rem; */ } .dialog-modal:focus-visible { diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index 8cc9f6507..8ff40cbf8 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -8,10 +8,9 @@ max-height: 80vh; padding: 0; border: none; - /* border-radius: 0.625rem; */ + border-radius: 0.625rem; background-color: var(--overlay-background-colour); color: var(--overlay-text-colour); - border-radius: 0.625rem; } .overlay * { @@ -31,10 +30,6 @@ border-top-left-radius: 0.625rem; } -.overlay h1 { - text-align: center; -} - .overlay p { font-size: 1.25rem; } diff --git a/frontend/src/components/Overlay/ResetLevel.tsx b/frontend/src/components/Overlay/ResetLevel.tsx index 88aefd21c..7ac19b038 100644 --- a/frontend/src/components/Overlay/ResetLevel.tsx +++ b/frontend/src/components/Overlay/ResetLevel.tsx @@ -25,7 +25,7 @@ function ResetLevelOverlay({ }} content={ <> -

      Do you want to start this level from scratch?

      +

      Do you want to reset your level progress?

      { 'Resetting will erase all your chat history and sent emails for this level.' diff --git a/frontend/src/components/Overlay/ResetProgress.tsx b/frontend/src/components/Overlay/ResetProgress.tsx index c252b0805..1ee6b006a 100644 --- a/frontend/src/components/Overlay/ResetProgress.tsx +++ b/frontend/src/components/Overlay/ResetProgress.tsx @@ -21,7 +21,7 @@ function ResetProgressOverlay({ }} content={ <> -

      Are you sure you want to start from scratch?

      +

      Do you want to reset all progress?

      {`Resetting will erase all your progress in the levels and sandbox mode. This includes all your conversation history and sent emails. From d3e04fcff25332685b9f0d8b1d120f0af93dd108 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 1 Feb 2024 14:42:47 +0000 Subject: [PATCH 05/21] one header styling option --- .../DocumentViewer/DocumentViewBox.css | 48 ++++++++++++++----- .../DocumentViewer/DocumentViewBox.tsx | 20 ++++---- .../DocumentViewer/DocumentViewBoxHeader.tsx | 5 +- .../HandbookOverlay/HandbookOverlay.css | 1 + 4 files changed, 50 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index b7597305e..172497b3b 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -1,29 +1,51 @@ .document-popup-inner { + display: flex; + flex-direction: column; + /* border: 0.1875rem solid #444; */ + /* background-color: yellow; */ +} + +.view-documents-main { position: relative; display: flex; flex-direction: column; box-sizing: border-box; - height: 85vh; padding: 2rem; - border: 0.1875rem solid var(--main-border-colour); + margin-top: 5rem; + border: 0.1875rem solid #444; background: var(--main-background); + height: 75vh; aspect-ratio: 7/8; } -.document-popup-inner .close-button { - position: absolute; - top: 1rem; - right: 1rem; - padding: 0.25rem 0.75rem; +.document-popup-inner header { + color: var(--main-text-colour); + display: flex; + align-items: center; + justify-content: space-between; + background-color: #208187; + + position: fixed; + width: 100%; + height: 5rem; + margin: 0; + padding: 0; +} + +.document-popup-inner header h1 { + padding: 0 2rem; +} + +.document-popup-inner header .close-button { + border: 0.0625rem solid var(--main-text-colour); + border-radius: 0.5rem; color: var(--main-text-colour); - font-weight: bold; - font-size: 1.75rem; - text-decoration: none; + margin-right: 1rem; } -.document-popup-inner .close-button:hover { - border-color: var(--accent-border-colour); - color: var(--accent-border-colour); +.document-popup-inner header .overlay-close-icon { + color: var(--main-text-colour); + border-color: var(--main-text-colour); } .document-viewer-container { diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index 7f7532ae1..6c5bd16a6 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -7,6 +7,7 @@ import { getDocumentMetas } from '@src/service/documentService'; import DocumentViewBoxHeader from './DocumentViewBoxHeader'; import './DocumentViewBox.css'; +import ThemedButton from '../ThemedButtons/ThemedButton'; const emptyList: DocumentMeta[] = []; @@ -31,14 +32,16 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) { return (

      - +
      +

      View Documents

      + + closeX + +
      +
      void }) { }} />
      +
      ); } diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx index 487d6b8fb..b632f4fe8 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx @@ -21,9 +21,8 @@ function DocumentViewBoxHeader({ return (
      -

      View documents

      -
      +
      +

      {documentName}

      diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index d375123ca..48f970467 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -9,6 +9,7 @@ .handbook header { background-color: var(--handbook-header-background-colour); + /* background-color: var(--overlay-header-background-colour); */ width: 100%; display: flex; justify-content: space-between; From a52281440dcdc78314deb63c745a98af78fa2475 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 1 Feb 2024 17:01:47 +0000 Subject: [PATCH 06/21] reusable overlay header --- .../DocumentViewer/DocumentViewBox.css | 24 +++------- .../DocumentViewer/DocumentViewBox.tsx | 14 ++---- .../DocumentViewer/DocumentViewBoxHeader.css | 8 ---- .../HandbookOverlay/HandbookOverlay.css | 12 +++-- .../HandbookOverlay/HandbookOverlay.tsx | 10 ++-- frontend/src/components/Overlay/Overlay.css | 37 ++++---------- frontend/src/components/Overlay/Overlay.tsx | 14 ++---- .../src/components/Overlay/OverlayChoice.css | 5 ++ .../src/components/Overlay/OverlayHeader.css | 48 +++++++++++++++++++ .../src/components/Overlay/OverlayHeader.tsx | 23 +++++++++ 10 files changed, 113 insertions(+), 82 deletions(-) create mode 100644 frontend/src/components/Overlay/OverlayHeader.css create mode 100644 frontend/src/components/Overlay/OverlayHeader.tsx diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index 172497b3b..70a77698e 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -19,28 +19,18 @@ } .document-popup-inner header { + border-radius: 0; + background-color: var(--accent-background-colour); color: var(--main-text-colour); - display: flex; - align-items: center; - justify-content: space-between; - background-color: #208187; - - position: fixed; - width: 100%; - height: 5rem; - margin: 0; - padding: 0; -} - -.document-popup-inner header h1 { - padding: 0 2rem; } -.document-popup-inner header .close-button { +.document-popup-inner header .overlay-close-button { border: 0.0625rem solid var(--main-text-colour); - border-radius: 0.5rem; color: var(--main-text-colour); - margin-right: 1rem; +} + +.document-popup-inner header .overlay-close-button:hover { + background-color: var(--action-button-background-colour-hover); } .document-popup-inner header .overlay-close-icon { diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index 6c5bd16a6..d16140ba7 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -5,9 +5,11 @@ import { DocumentMeta } from '@src/models/document'; import { getDocumentMetas } from '@src/service/documentService'; import DocumentViewBoxHeader from './DocumentViewBoxHeader'; +// eslint-disable-next-line no-restricted-imports +import OverlayHeader from '../Overlay/OverlayHeader'; import './DocumentViewBox.css'; -import ThemedButton from '../ThemedButtons/ThemedButton'; + const emptyList: DocumentMeta[] = []; @@ -32,15 +34,7 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) { return (
      -
      -

      View Documents

      - - closeX - -
      +
      -
      -

      Handbook

      + + {/*
      +

      Handbook

      -
      +
      */}
      .close-button { - position: absolute; - top: 1rem; - right: 1rem; - padding: 0.125rem 0.5rem; - border: 0.1875rem solid transparent; - color: inherit; - font-weight: bold; - font-size: 1.5rem; -} */ - -/* .overlay > .close-button:focus-visible { - border-color: var(--main-text-colour); -} */ - -/* .overlay > .close-button:hover { - color: var(--main-text-colour); - text-decoration: none; -} */ - -.close-button { +/* .close-button { display: flex; align-items: center; gap: 0.5rem; @@ -63,13 +43,14 @@ border-radius: 0.5rem; background-color: inherit; color: var(--main-text-colour-inverted); -} + font-weight: bold; +} */ -.close-button:hover { +/* .close-button:hover { background-color: var(--overlay-tab-colour); -} +} */ -.overlay-close-icon { +/* .overlay-close-icon { display: flex; align-items: center; justify-content: center; @@ -79,7 +60,7 @@ height: 1.5rem; border-radius: 50%; font-weight: bold; -} +} */ .overlay-content { display: flex; diff --git a/frontend/src/components/Overlay/Overlay.tsx b/frontend/src/components/Overlay/Overlay.tsx index 9753d6d85..4c95a5dde 100644 --- a/frontend/src/components/Overlay/Overlay.tsx +++ b/frontend/src/components/Overlay/Overlay.tsx @@ -1,5 +1,7 @@ import { ReactNode } from 'react'; +import OverlayHeader from './OverlayHeader'; + import './Overlay.css'; function Overlay({ @@ -13,17 +15,7 @@ function Overlay({ }) { return (
      -
      -

      {heading}

      - -
      - +
      {children}
      ); diff --git a/frontend/src/components/Overlay/OverlayChoice.css b/frontend/src/components/Overlay/OverlayChoice.css index 76a73c67f..2e3ecb2f1 100644 --- a/frontend/src/components/Overlay/OverlayChoice.css +++ b/frontend/src/components/Overlay/OverlayChoice.css @@ -2,4 +2,9 @@ display: flex; flex-direction: column; gap: 0.5rem; + padding: 1rem; } + +.overlay-choice p { + margin-top: 0; +} \ No newline at end of file diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css new file mode 100644 index 000000000..9137b8dbb --- /dev/null +++ b/frontend/src/components/Overlay/OverlayHeader.css @@ -0,0 +1,48 @@ +.overlay-header { + display: flex; + align-items: center; + justify-content: space-between; + /* padding: 1rem 2rem; */ + position: fixed; + width: 100%; + height: 5rem; + margin: 0; + padding: 0; + background-color: var(--overlay-header-background-colour); + border-top-right-radius: 0.625rem; + border-top-left-radius: 0.625rem; +} + +.overlay-header h1 { + padding: 0 2rem; +} + +.overlay-close-button { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + border: 0.0625rem solid var(--main-text-colour-inverted); + border-radius: 0.5rem; + background-color: inherit; + color: var(--main-text-colour-inverted); + font-weight: bold; + margin-right: 1rem; + font-size: 1.125rem; +} + +.overlay-close-button:hover { + background-color: var(--overlay-tab-colour); +} + +.overlay-close-icon { + display: flex; + align-items: center; + justify-content: center; + border: 0.125rem solid var(--main-text-colour-inverted); + color: var(--main-text-colour-inverted); + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + font-weight: bold; +} \ No newline at end of file diff --git a/frontend/src/components/Overlay/OverlayHeader.tsx b/frontend/src/components/Overlay/OverlayHeader.tsx new file mode 100644 index 000000000..8fd654019 --- /dev/null +++ b/frontend/src/components/Overlay/OverlayHeader.tsx @@ -0,0 +1,23 @@ +import './OverlayHeader.css'; + +function OverlayHeader({ + closeOverlay, + heading, + }: { + closeOverlay: () => void; + heading: string; +}) { + + return ( +
      +

      {heading}

      + +
      + ); +} +export default OverlayHeader; From b0f8f5c291ebb951a3b455f47cfac03cafc779f6 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Fri, 2 Feb 2024 10:40:19 +0000 Subject: [PATCH 07/21] updated hover for handbook, doc viewer in progress --- .../DocumentViewer/DocumentViewBox.css | 42 +++++++++---------- .../DocumentViewer/DocumentViewBoxHeader.css | 10 +++++ .../HandbookOverlay/HandbookOverlay.css | 28 ++----------- .../HandbookOverlay/HandbookSpine.css | 9 ++-- frontend/src/components/Overlay/Overlay.css | 5 +++ .../src/components/Overlay/OverlayHeader.css | 10 +++-- .../ThemedButtons/ModeSelectButtons.css | 4 ++ 7 files changed, 55 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index 70a77698e..ebcf9c987 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -1,8 +1,26 @@ +.document-popup-inner header { + border-radius: 0; + background-color: var(--accent-background-colour); + color: var(--main-text-colour); +} + +.document-popup-inner header .overlay-close-button { + border: 0.0625rem solid var(--main-text-colour); + color: var(--main-text-colour); +} + +.document-popup-inner header .overlay-close-icon { + color: var(--main-text-colour); + border-color: var(--main-text-colour); +} + +.document-popup-inner header .overlay-close-button:hover { + background-color: var(--action-button-background-colour-hover); +} + .document-popup-inner { display: flex; flex-direction: column; - /* border: 0.1875rem solid #444; */ - /* background-color: yellow; */ } .view-documents-main { @@ -18,26 +36,6 @@ aspect-ratio: 7/8; } -.document-popup-inner header { - border-radius: 0; - background-color: var(--accent-background-colour); - color: var(--main-text-colour); -} - -.document-popup-inner header .overlay-close-button { - border: 0.0625rem solid var(--main-text-colour); - color: var(--main-text-colour); -} - -.document-popup-inner header .overlay-close-button:hover { - background-color: var(--action-button-background-colour-hover); -} - -.document-popup-inner header .overlay-close-icon { - color: var(--main-text-colour); - border-color: var(--main-text-colour); -} - .document-viewer-container { flex-grow: 1; overflow-y: auto; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css index 8d39b1368..9b07ad33b 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css @@ -34,3 +34,13 @@ flex: 0 0 30%; white-space: nowrap; } + +.view-documents-header .button-container button:focus-visible { + background-color: var(--action-button-background-colour-hover); + outline-color: var(--main-text-colour); +} + +.view-documents-header .button-container button[aria-disabled='true']:hover { + background-color: var(--action-button-disabled-background-colour); + cursor: not-allowed; +} \ No newline at end of file diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index f492eab61..f0ef7302e 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -7,36 +7,16 @@ aspect-ratio: 7/8; } -/* .handbook header { - background-color: var(--handbook-header-background-colour); - background-color: var(--overlay-header-background-colour); - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 2rem; - position: fixed; - height: 3.125rem; - border-radius: 0; -} */ - .handbook header { border-radius: 0; + border-bottom: 0.0625rem solid var(--handbook-spine-separator-colour); } -/* .handbook header .close-button { - margin-right: 3rem; - background-color: inherit; +.handbook header .overlay-close-button:focus-visible { + background-color: var(--overlay-tab-colour); + outline-color: var(--main-text-colour); } -.handbook header .close-button:hover { - background-color: var(--handbook-tab-hover-colour); -} - -.handbook header .close-button:focus-visible { - background-color: var(--handbook-tab-hover-colour); -} */ - .handbook-overlay .content { overflow-y: auto; margin-top: 3.125rem; diff --git a/frontend/src/components/HandbookOverlay/HandbookSpine.css b/frontend/src/components/HandbookOverlay/HandbookSpine.css index b3ac68a8f..cf9dea53e 100644 --- a/frontend/src/components/HandbookOverlay/HandbookSpine.css +++ b/frontend/src/components/HandbookOverlay/HandbookSpine.css @@ -6,14 +6,14 @@ padding-top: 3rem; margin-top: 3.125rem; border-right: 0.0625rem solid var(--handbook-spine-separator-colour); - background-color: var(--handbook-spine-background-colour); + background-color: var(--overlay-header-background-colour); font-size: 1.125rem; } .handbook-spine button { padding: 0.75rem 1.31rem; border: none; - + font-size: 1rem; /* remove default button styling */ background: none; text-align: left; @@ -21,11 +21,12 @@ .handbook-spine button:focus-visible { outline-offset: -0.25rem; - background-color: var(--handbook-tab-hover-colour); + background-color: var(--overlay-tab-colour); + outline-color: var(--main-text-colour); } .handbook-spine button:hover { - background-color: var(--handbook-tab-hover-colour); + background-color: var(--overlay-tab-colour); } .handbook-spine button[aria-selected='true'] { diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index d9c76003b..c80859cb3 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -17,6 +17,11 @@ box-sizing: border-box; } +.overlay *:focus-visible { + background-color: var(--overlay-tab-colour); + outline-color: var(--main-text-colour); +} + /* .overlay header { display: flex; align-items: center; diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css index 9137b8dbb..09d2a69d3 100644 --- a/frontend/src/components/Overlay/OverlayHeader.css +++ b/frontend/src/components/Overlay/OverlayHeader.css @@ -2,15 +2,14 @@ display: flex; align-items: center; justify-content: space-between; - /* padding: 1rem 2rem; */ position: fixed; width: 100%; height: 5rem; margin: 0; padding: 0; - background-color: var(--overlay-header-background-colour); border-top-right-radius: 0.625rem; border-top-left-radius: 0.625rem; + background-color: var(--overlay-header-background-colour); } .overlay-header h1 { @@ -28,13 +27,18 @@ color: var(--main-text-colour-inverted); font-weight: bold; margin-right: 1rem; - font-size: 1.125rem; + font-size: 1rem; } .overlay-close-button:hover { background-color: var(--overlay-tab-colour); } +.overlay-close-button:focus-visible { + background-color: var(--overlay-tab-colour); + outline-color: var(--main-text-colour); +} + .overlay-close-icon { display: flex; align-items: center; diff --git a/frontend/src/components/ThemedButtons/ModeSelectButtons.css b/frontend/src/components/ThemedButtons/ModeSelectButtons.css index cc19d0f66..0b6192bdb 100644 --- a/frontend/src/components/ThemedButtons/ModeSelectButtons.css +++ b/frontend/src/components/ThemedButtons/ModeSelectButtons.css @@ -27,3 +27,7 @@ .mode-selection-buttons button:hover { background-color: var(--overlay-tab-colour); } + +.mode-selection-buttons button:focus-visible { + background-color: var(--overlay-tab-colour); +} From ce8d3fcc482c02acdf99a76da50d27508cce75ed Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Fri, 2 Feb 2024 11:33:43 +0000 Subject: [PATCH 08/21] border colour of doc viewer changed --- .../DocumentViewer/DocumentViewBox.css | 2 +- .../DocumentViewer/DocumentViewBoxNav.css | 50 +++++++++++++++++++ .../DocumentViewer/DocumentViewBoxNav.tsx | 44 ++++++++++++++++ 3 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/DocumentViewer/DocumentViewBoxNav.css create mode 100644 frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index ebcf9c987..5585726e5 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -30,7 +30,7 @@ box-sizing: border-box; padding: 2rem; margin-top: 5rem; - border: 0.1875rem solid #444; + border: 0.1875rem solid var(--main-border-colour); background: var(--main-background); height: 75vh; aspect-ratio: 7/8; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css new file mode 100644 index 000000000..ccb8b0260 --- /dev/null +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css @@ -0,0 +1,50 @@ +.view-documents-nav { + display: flex; + flex-direction: column; + gap: 1.25rem; + align-items: stretch; + padding-bottom: 0.25rem; + color: var(--main-text-colour); +} + +.view-documents-nav .nav { + display: flex; + flex-direction: column; + gap: 0.5rem; + justify-content: center; + align-items: center; + width: 100%; +} + +.view-documents-nav .info { + margin: 0; + padding: 0; + font-size: 1.25rem; +} + +.view-documents-nav .button-container { + display: flex; + gap: 1rem; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +.view-documents-nav .button-container button { + flex: 0 0 30%; + white-space: nowrap; +} + +.view-documents-nav .button-container button:focus-visible { + background-color: var(--action-button-background-colour-hover); + outline-color: var(--main-text-colour); +} + +.view-documents-nav .button-container button[aria-disabled='true']:hover { + background-color: var(--action-button-disabled-background-colour); + cursor: not-allowed; +} + +.view-documents-nav .button-container button[aria-disabled='true']:focus-visible { + background-color: var(--action-button-disabled-background-colour); +} \ No newline at end of file diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx new file mode 100644 index 000000000..b4c49fe81 --- /dev/null +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx @@ -0,0 +1,44 @@ +import ThemedButton from '@src/components/ThemedButtons/ThemedButton'; + +import './DocumentViewBoxNav.css'; + +interface DocumentViewBoxNavProps { + documentIndex: number; + documentName: string; + numberOfDocuments: number; + onPrevious: () => void; + onNext: () => void; +} + +function DocumentViewBoxNav({ + documentIndex, + documentName, + numberOfDocuments, + onPrevious, + onNext, +}: DocumentViewBoxNavProps) { + const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`; + + return ( +
      +
      + +
      +

      {documentName}

      +
      + ); +} + +export default DocumentViewBoxNav; +export type { DocumentViewBoxNavProps }; From cbd28b0377a159b6869c7e0c892034979a3295f4 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Fri, 2 Feb 2024 12:01:05 +0000 Subject: [PATCH 09/21] 782 renamed doc header to nav --- .../DocumentViewer/DocumentViewBox.css | 4 ++ .../DocumentViewer/DocumentViewBox.test.tsx | 2 +- .../DocumentViewer/DocumentViewBox.tsx | 4 +- .../DocumentViewer/DocumentViewBoxHeader.css | 46 ------------------- .../DocumentViewer/DocumentViewBoxHeader.tsx | 44 ------------------ .../DocumentViewer/DocumentViewBoxNav.css | 4 -- .../DocumentViewer/DocumentViewBoxNav.tsx | 2 +- 7 files changed, 8 insertions(+), 98 deletions(-) delete mode 100644 frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css delete mode 100644 frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index 5585726e5..8adabce75 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -18,6 +18,10 @@ background-color: var(--action-button-background-colour-hover); } +.document-popup-inner header .overlay-close-button:focus-visible { + background-color: var(--action-button-background-colour-hover); +} + .document-popup-inner { display: flex; flex-direction: column; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx index c6371bfbf..aa1676d0d 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx @@ -126,7 +126,7 @@ describe('DocumentViewBox component tests', () => { const { user } = renderDocumentViewBox(); const closeButton = screen.getByRole('button', { - name: 'close document viewer', + name: 'close', }); await user.click(closeButton); diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index d16140ba7..e94837da6 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import { DocumentMeta } from '@src/models/document'; import { getDocumentMetas } from '@src/service/documentService'; -import DocumentViewBoxHeader from './DocumentViewBoxHeader'; +import DocumentViewBoxNav from './DocumentViewBoxNav'; // eslint-disable-next-line no-restricted-imports import OverlayHeader from '../Overlay/OverlayHeader'; @@ -36,7 +36,7 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) {
      - void; - onNext: () => void; -} - -function DocumentViewBoxHeader({ - documentIndex, - documentName, - numberOfDocuments, - onPrevious, - onNext, -}: DocumentViewBoxHeaderProps) { - const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`; - - return ( -
      -
      - -
      -

      {documentName}

      -
      - ); -} - -export default DocumentViewBoxHeader; -export type { DocumentViewBoxHeaderProps }; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css index ccb8b0260..c8c7bbd5e 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css @@ -43,8 +43,4 @@ .view-documents-nav .button-container button[aria-disabled='true']:hover { background-color: var(--action-button-disabled-background-colour); cursor: not-allowed; -} - -.view-documents-nav .button-container button[aria-disabled='true']:focus-visible { - background-color: var(--action-button-disabled-background-colour); } \ No newline at end of file diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx index b4c49fe81..e5e5f7b53 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx @@ -41,4 +41,4 @@ function DocumentViewBoxNav({ } export default DocumentViewBoxNav; -export type { DocumentViewBoxNavProps }; +export type { DocumentViewBoxNavProps}; From 3c93b08dd2086de4b3b7ce7e8523405c0f75ff05 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Mon, 5 Feb 2024 10:22:23 +0000 Subject: [PATCH 10/21] fixed import error --- frontend/src/components/DocumentViewer/DocumentViewBox.tsx | 4 ++-- frontend/src/components/HandbookOverlay/HandbookOverlay.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index e94837da6..0226e4d7c 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -1,12 +1,12 @@ import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer'; import { useEffect, useState } from 'react'; +import OverlayHeader from '@src/components/Overlay/OverlayHeader'; import { DocumentMeta } from '@src/models/document'; import { getDocumentMetas } from '@src/service/documentService'; import DocumentViewBoxNav from './DocumentViewBoxNav'; -// eslint-disable-next-line no-restricted-imports -import OverlayHeader from '../Overlay/OverlayHeader'; + import './DocumentViewBox.css'; diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx index 0d3f066c8..71b796302 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx @@ -1,5 +1,6 @@ import { useRef, useState } from 'react'; +import OverlayHeader from '@src/components/Overlay/OverlayHeader'; import useIsOverflow from '@src/hooks/useIsOverflow'; import { HANDBOOK_PAGES } from '@src/models/handbook'; import { LEVEL_NAMES, LevelSystemRole } from '@src/models/level'; @@ -8,8 +9,6 @@ import HandbookAttacks from './HandbookAttacks'; import HandbookGlossary from './HandbookGlossary'; import HandbookSpine from './HandbookSpine'; import HandbookSystemRole from './HandbookSystemRole'; -// eslint-disable-next-line no-restricted-imports -import OverlayHeader from '../Overlay/OverlayHeader'; import './HandbookOverlay.css'; From 507474abc276be66adf4b810cbc8d755c15ca06c Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 08:35:50 +0000 Subject: [PATCH 11/21] 782 tidying up headers --- frontend/src/Theme.css | 4 +- .../DocumentViewer/DocumentViewBox.css | 8 +-- .../DocumentViewer/DocumentViewBox.tsx | 60 +++++++++---------- .../DocumentViewer/DocumentViewBoxNav.css | 2 +- .../DocumentViewer/DocumentViewBoxNav.tsx | 4 +- .../HandbookOverlay/HandbookOverlay.css | 20 +++---- .../HandbookOverlay/HandbookOverlay.tsx | 40 +++++-------- .../HandbookOverlay/HandbookSpine.css | 7 ++- .../src/components/Overlay/LevelsComplete.css | 8 --- .../src/components/Overlay/LevelsComplete.tsx | 41 ++++++------- .../components/Overlay/MissionInformation.tsx | 3 +- .../src/components/Overlay/OverlayChoice.css | 4 +- .../src/components/Overlay/OverlayHeader.css | 30 +++++----- .../src/components/Overlay/OverlayHeader.tsx | 35 ++++++----- .../src/components/Overlay/OverlayWelcome.tsx | 5 +- 15 files changed, 121 insertions(+), 150 deletions(-) delete mode 100644 frontend/src/components/Overlay/LevelsComplete.css diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css index 149c4b327..bb238b5b0 100644 --- a/frontend/src/Theme.css +++ b/frontend/src/Theme.css @@ -65,14 +65,14 @@ /* general modal overlay */ --overlay-background-colour: #8ad5da; - --overlay-header-background-colour: #61B5BA; + --overlay-header-background-colour: #61b5ba; --overlay-tab-colour: #c7e8f4; --overlay-attack-background-colour: #d6d6ff; --overlay-text-colour: #313131; /* handbook modal */ --handbook-background-colour: #fff; - --handbook-header-background-colour: #A7A7A7; + --handbook-header-background-colour: #a7a7a7; --handbook-spine-background-colour: #d3d3d3; --handbook-spine-separator-colour: var(--main-text-colour-inverted); --handbook-tab-selected-colour: #313131; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index 8adabce75..fabc872ed 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -5,13 +5,13 @@ } .document-popup-inner header .overlay-close-button { - border: 0.0625rem solid var(--main-text-colour); + border-color: var(--main-text-colour); color: var(--main-text-colour); } .document-popup-inner header .overlay-close-icon { - color: var(--main-text-colour); border-color: var(--main-text-colour); + color: var(--main-text-colour); } .document-popup-inner header .overlay-close-button:hover { @@ -32,11 +32,11 @@ display: flex; flex-direction: column; box-sizing: border-box; - padding: 2rem; + height: 75vh; margin-top: 5rem; + padding: 2rem; border: 0.1875rem solid var(--main-border-colour); background: var(--main-background); - height: 75vh; aspect-ratio: 7/8; } diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index 0226e4d7c..5246a1c8f 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -7,10 +7,8 @@ import { getDocumentMetas } from '@src/service/documentService'; import DocumentViewBoxNav from './DocumentViewBoxNav'; - import './DocumentViewBox.css'; - const emptyList: DocumentMeta[] = []; function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) { @@ -36,37 +34,37 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) {
      - { - if (documentIndex > 0) { - setDocumentIndex(documentIndex - 1); - } - }} - onNext={() => { - if (documentIndex < documentMetas.length - 1) { - setDocumentIndex(documentIndex + 1); - } - }} - /> -
      - { + if (documentIndex > 0) { + setDocumentIndex(documentIndex - 1); + } + }} + onNext={() => { + if (documentIndex < documentMetas.length - 1) { + setDocumentIndex(documentIndex + 1); + } }} /> -
      +
      + +
      ); diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css index c8c7bbd5e..c4e3290d2 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css @@ -43,4 +43,4 @@ .view-documents-nav .button-container button[aria-disabled='true']:hover { background-color: var(--action-button-disabled-background-colour); cursor: not-allowed; -} \ No newline at end of file +} diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx index e5e5f7b53..87382c973 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx @@ -22,7 +22,7 @@ function DocumentViewBoxNav({ return (
      -
      ); } diff --git a/frontend/src/components/HandbookOverlay/HandbookSpine.css b/frontend/src/components/HandbookOverlay/HandbookSpine.css index cf9dea53e..7f723cb8c 100644 --- a/frontend/src/components/HandbookOverlay/HandbookSpine.css +++ b/frontend/src/components/HandbookOverlay/HandbookSpine.css @@ -3,8 +3,8 @@ flex-direction: column; min-width: 6rem; max-width: 6rem; - padding-top: 3rem; margin-top: 3.125rem; + padding-top: 3rem; border-right: 0.0625rem solid var(--handbook-spine-separator-colour); background-color: var(--overlay-header-background-colour); font-size: 1.125rem; @@ -13,16 +13,17 @@ .handbook-spine button { padding: 0.75rem 1.31rem; border: none; - font-size: 1rem; + /* remove default button styling */ background: none; + font-size: 1rem; text-align: left; } .handbook-spine button:focus-visible { - outline-offset: -0.25rem; background-color: var(--overlay-tab-colour); outline-color: var(--main-text-colour); + outline-offset: -0.25rem; } .handbook-spine button:hover { diff --git a/frontend/src/components/Overlay/LevelsComplete.css b/frontend/src/components/Overlay/LevelsComplete.css deleted file mode 100644 index ac34bca27..000000000 --- a/frontend/src/components/Overlay/LevelsComplete.css +++ /dev/null @@ -1,8 +0,0 @@ -.levels-complete-overlay { - display: flex; - flex-direction: column; -} - -.levels-complete-overlay .content { - overflow-y: auto; -} diff --git a/frontend/src/components/Overlay/LevelsComplete.tsx b/frontend/src/components/Overlay/LevelsComplete.tsx index 4d460a6ca..f955c78e7 100644 --- a/frontend/src/components/Overlay/LevelsComplete.tsx +++ b/frontend/src/components/Overlay/LevelsComplete.tsx @@ -3,8 +3,6 @@ import LevelsCompleteButtons from '@src/components/ThemedButtons/LevelsCompleteB import MissionDialogue from './MissionDialogue'; import Overlay from './Overlay'; -import './LevelsComplete.css'; - function LevelsComplete({ goToSandbox, closeOverlay, @@ -22,27 +20,24 @@ function LevelsComplete({ ]; return ( - -
      -

      Congratulations!

      -
      - -
      -

      - You've completed the story mode! You can stay here and continue - to play with the levels, or you can move onto Sandbox mode where you - can configure your own defence set up and try to break it. -

      -

      - You can always switch modes by clicking on the button in the left - panel. -

      - -
      -
      + +
      + +
      +

      + You've completed the story mode! You can stay here and continue + to play with the levels, or you can move onto Sandbox mode where you + can configure your own defence set up and try to break it. +

      +

      + You can always switch modes by clicking on the button in the left + panel. +

      + +
      ); } diff --git a/frontend/src/components/Overlay/MissionInformation.tsx b/frontend/src/components/Overlay/MissionInformation.tsx index 61f5de4bf..7de080504 100644 --- a/frontend/src/components/Overlay/MissionInformation.tsx +++ b/frontend/src/components/Overlay/MissionInformation.tsx @@ -14,8 +14,7 @@ function MissionInformation({ currentLevel: LEVEL_NAMES; closeOverlay: () => void; }) { - - const heading = `${LEVELS[currentLevel].name} Mission Information` + const heading = `${LEVELS[currentLevel].name} Mission Information`; return ( diff --git a/frontend/src/components/Overlay/OverlayChoice.css b/frontend/src/components/Overlay/OverlayChoice.css index 2e3ecb2f1..84c256ce3 100644 --- a/frontend/src/components/Overlay/OverlayChoice.css +++ b/frontend/src/components/Overlay/OverlayChoice.css @@ -5,6 +5,6 @@ padding: 1rem; } -.overlay-choice p { +.overlay-choice p { margin-top: 0; -} \ No newline at end of file +} diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css index 09d2a69d3..2ad8f7b2a 100644 --- a/frontend/src/components/Overlay/OverlayHeader.css +++ b/frontend/src/components/Overlay/OverlayHeader.css @@ -1,14 +1,14 @@ .overlay-header { + position: fixed; display: flex; - align-items: center; justify-content: space-between; - position: fixed; + align-items: center; width: 100%; height: 5rem; - margin: 0; - padding: 0; + margin: 0; + padding: 0; + border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; - border-top-left-radius: 0.625rem; background-color: var(--overlay-header-background-colour); } @@ -16,37 +16,37 @@ padding: 0 2rem; } -.overlay-close-button { +.overlay-header button { display: flex; - align-items: center; gap: 0.5rem; + align-items: center; + margin-right: 1rem; padding: 0.5rem; border: 0.0625rem solid var(--main-text-colour-inverted); border-radius: 0.5rem; background-color: inherit; color: var(--main-text-colour-inverted); font-weight: bold; - margin-right: 1rem; - font-size: 1rem; + font-size: 1rem; } -.overlay-close-button:hover { +.overlay-header button:hover { background-color: var(--overlay-tab-colour); } -.overlay-close-button:focus-visible { +.overlay-header button:focus-visible { background-color: var(--overlay-tab-colour); outline-color: var(--main-text-colour); } .overlay-close-icon { display: flex; - align-items: center; justify-content: center; - border: 0.125rem solid var(--main-text-colour-inverted); - color: var(--main-text-colour-inverted); + align-items: center; width: 1.5rem; height: 1.5rem; + border: 0.125rem solid var(--main-text-colour-inverted); border-radius: 50%; + color: var(--main-text-colour-inverted); font-weight: bold; -} \ No newline at end of file +} diff --git a/frontend/src/components/Overlay/OverlayHeader.tsx b/frontend/src/components/Overlay/OverlayHeader.tsx index 8fd654019..4fb0f5080 100644 --- a/frontend/src/components/Overlay/OverlayHeader.tsx +++ b/frontend/src/components/Overlay/OverlayHeader.tsx @@ -1,23 +1,22 @@ import './OverlayHeader.css'; -function OverlayHeader({ - closeOverlay, - heading, - }: { - closeOverlay: () => void; - heading: string; +function OverlayHeader({ + closeOverlay, + heading, +}: { + closeOverlay: () => void; + heading: string; }) { - - return ( -
      -

      {heading}

      - -
      - ); + return ( +
      +

      {heading}

      + +
      + ); } export default OverlayHeader; diff --git a/frontend/src/components/Overlay/OverlayWelcome.tsx b/frontend/src/components/Overlay/OverlayWelcome.tsx index b50e41318..d20f34e26 100644 --- a/frontend/src/components/Overlay/OverlayWelcome.tsx +++ b/frontend/src/components/Overlay/OverlayWelcome.tsx @@ -16,10 +16,7 @@ function OverlayWelcome({ closeOverlay: () => void; }) { return ( - +
      From 9cc8d2fbb5efbeb7749deafea2d33bad0b013237 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 08:53:42 +0000 Subject: [PATCH 12/21] 782 tidied up css --- .../DocumentViewer/DocumentViewBox.css | 1 + .../HandbookOverlay/HandbookOverlay.css | 5 --- frontend/src/components/Overlay/Overlay.css | 41 ------------------- 3 files changed, 1 insertion(+), 46 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index fabc872ed..aca643481 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -20,6 +20,7 @@ .document-popup-inner header .overlay-close-button:focus-visible { background-color: var(--action-button-background-colour-hover); + outline-color: var(--main-text-colour); } .document-popup-inner { diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index b11a0c619..a06374a59 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -3,11 +3,6 @@ border-radius: 0; } -/* .handbook header .overlay-close-button:focus-visible { - background-color: var(--overlay-tab-colour); - outline-color: var(--main-text-colour); -} */ - .handbook-overlay { display: flex; flex-direction: row; diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index c80859cb3..9c7ad4368 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -22,51 +22,10 @@ outline-color: var(--main-text-colour); } -/* .overlay header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 2rem; - position: fixed; - width: 100%; - height: 5rem; - background-color: var(--overlay-header-background-colour); - border-top-right-radius: 0.625rem; - border-top-left-radius: 0.625rem; -} */ - .overlay p { font-size: 1.25rem; } -/* .close-button { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem; - border: 0.0625rem solid var(--main-text-colour-inverted); - border-radius: 0.5rem; - background-color: inherit; - color: var(--main-text-colour-inverted); - font-weight: bold; -} */ - -/* .close-button:hover { - background-color: var(--overlay-tab-colour); -} */ - -/* .overlay-close-icon { - display: flex; - align-items: center; - justify-content: center; - border: 0.125rem solid var(--main-text-colour-inverted); - color: var(--main-text-colour-inverted); - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - font-weight: bold; -} */ - .overlay-content { display: flex; overflow: hidden; From 7062a60de58e43f7f361f4b8953d3e4d5f5b649a Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 09:01:35 +0000 Subject: [PATCH 13/21] 782 adding unit test --- .../components/Overlay/OverlayHeader.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 frontend/src/components/Overlay/OverlayHeader.test.tsx diff --git a/frontend/src/components/Overlay/OverlayHeader.test.tsx b/frontend/src/components/Overlay/OverlayHeader.test.tsx new file mode 100644 index 000000000..e6646549b --- /dev/null +++ b/frontend/src/components/Overlay/OverlayHeader.test.tsx @@ -0,0 +1,20 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, test, vi } from 'vitest'; + +import OverlayHeader from './OverlayHeader'; + +const mockCloseOverlay = vi.fn(); + +describe('Overlay Header component', () => { + test('renders the heading text passed in', () => { + render() + + expect(screen.getByText('Test Header')).toBeInTheDocument(); + }) + + test('renders close button', () => { + render() + + expect(screen.getByText('close')).toBeInTheDocument(); + }) +}) \ No newline at end of file From cf12df415f73d7b145488979883fd57ad161fa90 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 09:19:12 +0000 Subject: [PATCH 14/21] 782 added unit test --- .../components/Overlay/OverlayHeader.test.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Overlay/OverlayHeader.test.tsx b/frontend/src/components/Overlay/OverlayHeader.test.tsx index e6646549b..41be83706 100644 --- a/frontend/src/components/Overlay/OverlayHeader.test.tsx +++ b/frontend/src/components/Overlay/OverlayHeader.test.tsx @@ -6,15 +6,19 @@ import OverlayHeader from './OverlayHeader'; const mockCloseOverlay = vi.fn(); describe('Overlay Header component', () => { - test('renders the heading text passed in', () => { - render() - - expect(screen.getByText('Test Header')).toBeInTheDocument(); - }) + test('renders the heading text passed in', () => { + render( + + ); - test('renders close button', () => { - render() - - expect(screen.getByText('close')).toBeInTheDocument(); - }) -}) \ No newline at end of file + expect(screen.getByText('Test Header')).toBeInTheDocument(); + }); + + test('renders close button', () => { + render( + + ); + + expect(screen.getByText('close')).toBeInTheDocument(); + }); +}); From acbc806bd0c86bced1397b5eb524bf057924e549 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:54:40 +0000 Subject: [PATCH 15/21] 782 added svg --- .../DocumentViewer/DocumentViewBox.tsx | 6 +++++- .../components/Overlay/OverlayCloseIcon.tsx | 12 ++++++++++++ .../src/components/Overlay/OverlayHeader.css | 11 ++--------- .../src/components/Overlay/OverlayHeader.tsx | 18 +++++++++++++----- 4 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 frontend/src/components/Overlay/OverlayCloseIcon.tsx diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx index 5246a1c8f..981e7075d 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx @@ -32,7 +32,11 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) { return (
      - +
      + + + ); +} + +export default OverlayCloseIcon; diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css index 2ad8f7b2a..804808820 100644 --- a/frontend/src/components/Overlay/OverlayHeader.css +++ b/frontend/src/components/Overlay/OverlayHeader.css @@ -40,13 +40,6 @@ } .overlay-close-icon { - display: flex; - justify-content: center; - align-items: center; - width: 1.5rem; - height: 1.5rem; - border: 0.125rem solid var(--main-text-colour-inverted); - border-radius: 50%; - color: var(--main-text-colour-inverted); - font-weight: bold; + width: 1.2rem; + height: 1.2rem; } diff --git a/frontend/src/components/Overlay/OverlayHeader.tsx b/frontend/src/components/Overlay/OverlayHeader.tsx index 4fb0f5080..678af0088 100644 --- a/frontend/src/components/Overlay/OverlayHeader.tsx +++ b/frontend/src/components/Overlay/OverlayHeader.tsx @@ -1,19 +1,27 @@ +import OverlayCloseIcon from './OverlayCloseIcon'; + import './OverlayHeader.css'; +interface OverlayHeaderProps { + closeOverlay: () => void; + heading: string; + iconColor?: string; +} + function OverlayHeader({ closeOverlay, heading, -}: { - closeOverlay: () => void; - heading: string; -}) { + iconColor, +}: OverlayHeaderProps) { + const iconFill: string = iconColor ?? '#000'; + return (

      {heading}

      From 4876145e2794f8acc61b50dc1586474f28dd6a21 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 15:26:07 +0000 Subject: [PATCH 16/21] 782 fixed focus background colour doc viewer disabled button --- .../src/components/DocumentViewer/DocumentViewBoxNav.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css index c4e3290d2..1f1579691 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css @@ -40,7 +40,8 @@ outline-color: var(--main-text-colour); } -.view-documents-nav .button-container button[aria-disabled='true']:hover { +.view-documents-nav + .button-container + button[aria-disabled='true']:focus-visible { background-color: var(--action-button-disabled-background-colour); - cursor: not-allowed; } From b8fcf56bf23eade1c16aed73f10aec61c7577fa7 Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Wed, 7 Feb 2024 15:48:01 +0000 Subject: [PATCH 17/21] 782 deleted handbook icon --- .../HandbookOverlay/HandbookCloseIcon.tsx | 26 ------------------- 1 file changed, 26 deletions(-) delete mode 100644 frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx diff --git a/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx b/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx deleted file mode 100644 index 4f876c2a9..000000000 --- a/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -function HandbookIcon() { - return ( - - - - - ); -} - -export default HandbookIcon; From 5e1dbdba520b37aefcbd0b1fd6622ef505131775 Mon Sep 17 00:00:00 2001 From: Chris Wilton-Magras Date: Thu, 8 Feb 2024 12:02:45 +0000 Subject: [PATCH 18/21] Use flex for overlay header instead of position fixed --- frontend/src/App.css | 3 ++- .../DocumentViewer/DocumentViewBox.css | 1 - .../HandbookOverlay/HandbookOverlay.css | 25 +++++++++++-------- .../HandbookOverlay/HandbookOverlay.tsx | 6 ++--- .../HandbookOverlay/HandbookSpine.css | 1 - .../components/Overlay/MissionInformation.css | 5 +--- frontend/src/components/Overlay/Overlay.css | 4 +-- .../src/components/Overlay/OverlayChoice.css | 1 + .../src/components/Overlay/OverlayHeader.css | 4 --- .../src/components/Overlay/OverlayWelcome.css | 1 - 10 files changed, 23 insertions(+), 28 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 316b0df8f..8104fd9e0 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -46,11 +46,12 @@ position: fixed; top: 50%; left: 50%; + transform: translate(-50%, -50%); margin: 0; padding: 0; border: none; background-color: transparent; - transform: translate(-50%, -50%); + overflow: hidden; } .dialog-modal:focus-visible { diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css index aca643481..683eeaf0b 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBox.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css @@ -34,7 +34,6 @@ flex-direction: column; box-sizing: border-box; height: 75vh; - margin-top: 5rem; padding: 2rem; border: 0.1875rem solid var(--main-border-colour); background: var(--main-background); diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index a06374a59..628375de1 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -1,33 +1,36 @@ -.handbook header { +.handbook-overlay { + height: 85vh; + aspect-ratio: 7/8; + display: flex; + flex-direction: column; +} + +.handbook-overlay header { border-bottom: 0.0625rem solid var(--handbook-spine-separator-colour); border-radius: 0; } -.handbook-overlay { +.handbook-overlay .handbook { display: flex; flex-direction: row; - height: 85vh; + overflow: hidden; background-color: var(--handbook-background-colour); color: var(--handbook-text-colour); - aspect-ratio: 7/8; } -.handbook-overlay .content { +.handbook-overlay .handbook-page { overflow-y: auto; - margin-top: 3.125rem; - margin-right: 0.5rem; - margin-bottom: 0.25rem; - padding: 2rem 1.75rem 0.5rem; + padding: 1.75rem; /* firefox scrollbar styling */ scrollbar-color: var(--handbook-scrollbar-colour) transparent; } /* webkit scrollbar styling */ -.handbook-overlay .content::-webkit-scrollbar-thumb { +.handbook-overlay .handbook-page::-webkit-scrollbar-thumb { background-color: var(--handbook-scrollbar-colour); } -.handbook-overlay .content::-webkit-scrollbar-thumb:hover { +.handbook-overlay .handbook-page::-webkit-scrollbar-thumb:hover { background-color: var(--handbook-scrollbar-hover-colour); } diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx index dbee39c4f..ca99d13ef 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx @@ -43,9 +43,9 @@ function HandbookOverlay({ }[selectedPage]; return ( -
      +
      -
      +
      Date: Thu, 8 Feb 2024 12:08:06 +0000 Subject: [PATCH 19/21] Stylelint corrections --- frontend/src/App.css | 4 ++-- frontend/src/components/HandbookOverlay/HandbookOverlay.css | 4 ++-- frontend/src/components/Overlay/Overlay.css | 2 +- frontend/src/components/Overlay/OverlayChoice.css | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 8104fd9e0..a75dbdec7 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -46,12 +46,12 @@ position: fixed; top: 50%; left: 50%; - transform: translate(-50%, -50%); + overflow: hidden; margin: 0; padding: 0; border: none; background-color: transparent; - overflow: hidden; + transform: translate(-50%, -50%); } .dialog-modal:focus-visible { diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index 628375de1..7619abd84 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -1,8 +1,8 @@ .handbook-overlay { - height: 85vh; - aspect-ratio: 7/8; display: flex; flex-direction: column; + height: 85vh; + aspect-ratio: 7/8; } .handbook-overlay header { diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css index d79389e3b..f7b346520 100644 --- a/frontend/src/components/Overlay/Overlay.css +++ b/frontend/src/components/Overlay/Overlay.css @@ -1,8 +1,8 @@ .overlay { position: relative; - overflow: visible; display: flex; flex-direction: column; + overflow: visible; box-sizing: border-box; width: 50vw; height: fit-content; diff --git a/frontend/src/components/Overlay/OverlayChoice.css b/frontend/src/components/Overlay/OverlayChoice.css index 33785a96f..a1e535769 100644 --- a/frontend/src/components/Overlay/OverlayChoice.css +++ b/frontend/src/components/Overlay/OverlayChoice.css @@ -1,8 +1,8 @@ .overlay-choice { display: flex; flex-direction: column; - overflow: auto; gap: 0.5rem; + overflow: auto; padding: 1rem; } From c1b36ae82f4c84f6a9e8838711f2d0a9edf9f41b Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 8 Feb 2024 14:22:57 +0000 Subject: [PATCH 20/21] 782 addressed requested changes --- .../DocumentViewer/DocumentViewBoxNav.css | 9 ------- .../DocumentViewer/DocumentViewBoxNav.tsx | 26 +++++++++---------- .../HandbookOverlay/HandbookAttacks.tsx | 4 +-- .../HandbookOverlay/HandbookOverlay.css | 2 +- .../src/components/Overlay/OverlayHeader.css | 4 +-- .../src/components/Overlay/OverlayHeader.tsx | 6 ++--- 6 files changed, 19 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css index 1f1579691..69441f811 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css @@ -7,15 +7,6 @@ color: var(--main-text-colour); } -.view-documents-nav .nav { - display: flex; - flex-direction: column; - gap: 0.5rem; - justify-content: center; - align-items: center; - width: 100%; -} - .view-documents-nav .info { margin: 0; padding: 0; diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx index 87382c973..930e25e84 100644 --- a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx +++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx @@ -21,20 +21,18 @@ function DocumentViewBoxNav({ return (
      -
      - -
      +

      {documentName}

      ); diff --git a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx index d254edab5..1379f5735 100644 --- a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx +++ b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx @@ -22,10 +22,10 @@ function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) { return (
      -
      +

      Attacks

      {getHeaderText(currentLevel)}

      -
      + {currentLevel > LEVEL_NAMES.LEVEL_1 && (
      {attacks.map((attack) => ( diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css index 7619abd84..39fdabf32 100644 --- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css +++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css @@ -5,7 +5,7 @@ aspect-ratio: 7/8; } -.handbook-overlay header { +.handbook-overlay .overlay-header { border-bottom: 0.0625rem solid var(--handbook-spine-separator-colour); border-radius: 0; } diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css index db0facf38..7345c528b 100644 --- a/frontend/src/components/Overlay/OverlayHeader.css +++ b/frontend/src/components/Overlay/OverlayHeader.css @@ -36,6 +36,6 @@ } .overlay-close-icon { - width: 1.2rem; - height: 1.2rem; + width: 1.25rem; + height: 1.25rem; } diff --git a/frontend/src/components/Overlay/OverlayHeader.tsx b/frontend/src/components/Overlay/OverlayHeader.tsx index 678af0088..d6ce1f223 100644 --- a/frontend/src/components/Overlay/OverlayHeader.tsx +++ b/frontend/src/components/Overlay/OverlayHeader.tsx @@ -11,17 +11,15 @@ interface OverlayHeaderProps { function OverlayHeader({ closeOverlay, heading, - iconColor, + iconColor = '#000', }: OverlayHeaderProps) { - const iconFill: string = iconColor ?? '#000'; - return (

      {heading}

      From 99ff56d253ee7e9af5faa33e0c66d5cd90d4cd5b Mon Sep 17 00:00:00 2001 From: dhinrichs-scottlogic <125262707+dhinrichs-scottlogic@users.noreply.github.com> Date: Thu, 8 Feb 2024 15:16:05 +0000 Subject: [PATCH 21/21] 782 added close button call test --- frontend/src/components/Overlay/OverlayHeader.test.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/components/Overlay/OverlayHeader.test.tsx b/frontend/src/components/Overlay/OverlayHeader.test.tsx index 41be83706..201ab0a83 100644 --- a/frontend/src/components/Overlay/OverlayHeader.test.tsx +++ b/frontend/src/components/Overlay/OverlayHeader.test.tsx @@ -1,4 +1,5 @@ import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { describe, expect, test, vi } from 'vitest'; import OverlayHeader from './OverlayHeader'; @@ -21,4 +22,13 @@ describe('Overlay Header component', () => { expect(screen.getByText('close')).toBeInTheDocument(); }); + + test('clicking the close button closes the modal', async () => { + render( + + ); + await userEvent.click(screen.getByRole('button')); + + expect(mockCloseOverlay).toHaveBeenCalledOnce(); + }); });