783 details summary buttons hover and redesign

frontend/src/App.css

@@ -69,6 +69,17 @@ hr {
 	border-bottom: transparent;
 }
 
+.visually-hidden {
+	position: absolute;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+}
+
 @media (width < 62.5rem) {
 	.dialog-modal {
 		max-height: 95%;

frontend/src/Theme.css

@@ -61,6 +61,7 @@
 
 	/* control panel */
 	--control-header-background-colour: #313131;
+	--control-header-background-colour-hover: #414141;
 	--control-body-background-colour: #3a3a3a;
 	--control-config-border: var(--chat-info-text-colour);
 

frontend/src/components/ChatBox/ChatBoxInput.tsx

@@ -2,8 +2,6 @@ import { KeyboardEvent } from 'react';
 
 import ThemedTextArea from '@src/components/ThemedInput/ThemedTextArea';
 
-import './ChatBoxInput.css';
-
 function ChatBoxInput({
 	content,
 	onContentChanged,

frontend/src/components/ControlPanel/ControlPanel.css

@@ -1,4 +1,7 @@
 .control-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
 	overflow-y: auto;
 	height: 100%;
 	padding: 1.875rem;
@@ -12,26 +15,38 @@
 	background: transparent;
 }
 
-.control-panel .control-collapsible-section {
-	margin-bottom: 0.75rem;
+.control-panel .config-container {
 	border-radius: 0.5rem;
-	background-color: var(--control-body-background-colour);
+	background-color: var(--control-header-background-colour);
+}
+
+.control-panel .config-container fieldset {
+	margin: 0;
+	padding: 0.25rem 0.75rem 0.75rem;
+	border: 0.25rem solid var(--control-config-border);
+	border-radius: 0.5rem;
+}
+
+.control-panel .config-container fieldset legend {
+	padding: 0.25rem 0.375rem;
 }
 
-.control-panel .control-collapsible-section-header {
+.control-panel .config-container > .details-button {
+	width: 100%;
 	padding: 0.75rem;
+	border: none;
 	border-radius: 0.5rem;
 	background-color: var(--control-header-background-colour);
-	cursor: default;
+	color: inherit;
+	font-size: 1rem;
+	text-align: start;
 }
 
-.control-panel .control-collapsible-section-header:focus-visible {
-	border-radius: 0;
+.control-panel .config-container > .details-button:hover,
+.control-panel .config-container > .details-button:focus-visible {
+	background-color: var(--control-header-background-colour-hover);
 }
 
-.control-panel
-	.control-collapsible-section[open]
-	.control-collapsible-section-header {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
+.control-panel .config-container > .details-content {
+	margin: 0;
 }

frontend/src/components/ControlPanel/ControlPanel.tsx

@@ -2,6 +2,7 @@ import { DEFENCES_HIDDEN_LEVEL3_IDS, MODEL_DEFENCES } from '@src/Defences';
 import DefenceBox from '@src/components/DefenceBox/DefenceBox';
 import DocumentViewButton from '@src/components/DocumentViewer/DocumentViewButton';
 import ModelBox from '@src/components/ModelBox/ModelBox';
+import DetailElement from '@src/components/ThemedButtons/DetailElement';
 import { ChatModel } from '@src/models/chat';
 import {
 	DEFENCE_ID,
@@ -68,44 +69,41 @@ function ControlPanel({
 			{(currentLevel === LEVEL_NAMES.LEVEL_3 ||
 				currentLevel === LEVEL_NAMES.SANDBOX) && (
 				<>
-					<h2 className="visually-hidden">ScottBrew System Access</h2>
-					<details className="control-collapsible-section">
-						<summary className="control-collapsible-section-header">
-							Defence Configuration
-						</summary>
-						<DefenceBox
-							currentLevel={currentLevel}
-							defences={nonModelDefences}
-							showConfigurations={showConfigurations}
-							resetDefenceConfiguration={resetDefenceConfiguration}
-							toggleDefence={toggleDefence}
-							setDefenceConfiguration={setDefenceConfiguration}
-						/>
-					</details>
-
-					<details className="control-collapsible-section">
-						<summary className="control-collapsible-section-header">
-							Model Configuration
-						</summary>
-						<DefenceBox
-							currentLevel={currentLevel}
-							defences={modelDefences}
-							showConfigurations={showConfigurations}
-							toggleDefence={toggleDefence}
-							resetDefenceConfiguration={resetDefenceConfiguration}
-							setDefenceConfiguration={setDefenceConfiguration}
-						/>
-
-						{/* only show model box in sandbox mode */}
-						{showConfigurations && (
-							<ModelBox
-								chatModel={chatModel}
-								setChatModelId={setChatModelId}
-								chatModelOptions={chatModelOptions}
-								addInfoMessage={addInfoMessage}
+					<h2 className="visually-hidden">
+						ScottBrewBot Security Configuration
+					</h2>
+					<div className="config-container">
+						<DetailElement useIcon={true} buttonText={'Defence Configuration'}>
+							<DefenceBox
+								currentLevel={currentLevel}
+								defences={nonModelDefences}
+								showConfigurations={showConfigurations}
+								resetDefenceConfiguration={resetDefenceConfiguration}
+								toggleDefence={toggleDefence}
+								setDefenceConfiguration={setDefenceConfiguration}
+							/>
+						</DetailElement>
+					</div>
+					<div className="config-container">
+						<DetailElement useIcon={true} buttonText={'Model Configuration'}>
+							<DefenceBox
+								currentLevel={currentLevel}
+								defences={modelDefences}
+								showConfigurations={showConfigurations}
+								toggleDefence={toggleDefence}
+								resetDefenceConfiguration={resetDefenceConfiguration}
+								setDefenceConfiguration={setDefenceConfiguration}
 							/>
-						)}
-					</details>
+							{currentLevel === LEVEL_NAMES.SANDBOX && (
+								<ModelBox
+									chatModel={chatModel}
+									setChatModelId={setChatModelId}
+									chatModelOptions={chatModelOptions}
+									addInfoMessage={addInfoMessage}
+								/>
+							)}
+						</DetailElement>
+					</div>
 				</>
 			)}
 

frontend/src/components/DefenceBox/DefenceConfiguration.css

@@ -1,5 +1,7 @@
 .defence-configuration {
-	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
 }
 
 .defence-configuration .header {

frontend/src/components/DefenceBox/DefenceConfigurationRadioButton.css

@@ -1,12 +1,11 @@
 .defence-radio-button {
 	position: relative;
 	display: flex;
-	cursor: pointer;
 	gap: 0.75rem;
+	cursor: pointer;
 }
 
 .defence-radio-button input {
-	margin-bottom: 0.5rem;
 	opacity: 0;
 }
 

frontend/src/components/DefenceBox/DefenceMechanism.css

@@ -1,123 +1,64 @@
-.defence-mechanism-fieldset {
-	min-height: fit-content;
-	margin: 0;
-	border: 0.25rem solid var(--control-config-border);
-	border-radius: 0.5rem;
-}
-
-.defence-mechanism-legend {
-	padding: 0.3em;
-}
-
-.defence-mechanism-summary {
-	width: fit-content;
-	padding: 0.3125rem;
-	border: 0.25rem outset var(--control-config-border);
-	border-radius: 0.25rem;
-	background-color: var(--main-scrollbar-colour);
-}
-
-.defence-mechanism > summary {
-	font-size: 1rem;
-}
-
-.defence-mechanism-fieldset details > summary {
-	list-style: none;
-}
-
-.defence-mechanism-fieldset details > summary::-webkit-details-marker {
-	display: none;
-}
-
-.defence-mechanism-fieldset details[open] > summary {
-	border-style: inset;
-	background-color: var(--control-body-background-colour);
-}
-
-.defence-mechanism-form {
+.defence-mechanism-fieldset .defence-mechanism-form {
 	position: absolute;
-	right: 1em;
-}
-
-.defence-mechanism {
-	cursor: default;
-}
-
-.defence-mechanism .info-box :first-child {
-	margin-top: 0;
-}
-
-.defence-mechanism .info-box {
-	padding: 0.5em;
-	font-size: 0.875rem;
-}
-
-.defence-mechanism .info-box .validation-text {
-	font-weight: 600;
-	font-size: inherit;
+	right: 1rem;
+	display: flex;
+	align-items: center;
+	height: 2.5rem;
 }
 
-.defence-mechanism .defence-radio-buttons {
+.defence-mechanism-fieldset .defence-radio-buttons {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
-	padding: 0.75rem 0;
-}
-
-.defence-mechanism .prompt-enclosure-configuration-area {
-	padding: 0;
+	gap: 0.875rem;
 }
 
 /* adapted from: https://adrianroselli.com/2019/03/under-engineered-toggles.html */
 
-.toggles [type='checkbox'] {
-	position: absolute;
-	top: auto;
-	overflow: hidden;
-	clip: rect(1px, 1px, 1px, 1px);
-	width: 1px;
-	height: 1px;
-	white-space: nowrap;
+.toggles *,
+.toggles ::before,
+.toggles ::after {
+	box-sizing: border-box;
 }
 
 .toggles [type='checkbox'] + label {
 	position: relative;
 	display: block;
 	max-width: fit-content;
-	padding-right: 3em;
+	padding-right: 3rem;
 	text-align: right;
 }
 
+.toggles [type='checkbox']:focus + label,
+.toggles [type='checkbox']:hover + label {
+	color: var(--main-text-accent-colour);
+}
+
 .toggles [type='checkbox'] + label::before,
 .toggles [type='checkbox'] + label::after {
 	content: '';
 	position: absolute;
-	height: 0.9em;
-	transition: all 0.25s ease;
-}
-
-.toggles [type='checkbox']:focus + label,
-.toggles [type='checkbox']:hover + label {
-	color: var(--main-text-accent-colour);
 }
 
 .toggles [type='checkbox'] + label::before {
-	top: 0.1em;
+	top: 0;
 	right: 0;
-	width: 1.9em;
-	border: 0.15em solid var(--main-toggle-off-border-colour);
-	border-radius: 1.1em;
-	background: var(--main-toggle-off-colour);
+	width: 2.125rem;
+	height: 1.25rem;
+	border: 0.125rem solid var(--main-toggle-off-border-colour);
+	border-radius: 1rem;
+	background-color: var(--main-toggle-off-colour);
 }
 
 .toggles [type='checkbox'] + label::after {
-	top: 0.17em;
-	right: 0.95em;
-	width: 1em;
-	border: 0.05em solid var(--main-toggle-off-border-colour);
+	top: 0.125rem;
+	right: 1rem;
+	width: 1rem;
+	height: 1rem;
+	border: 0.0625rem solid var(--main-toggle-off-border-colour);
 	border-radius: 50%;
-	background: var(--main-text-colour);
+	background-color: var(--main-text-colour);
 	background-position: center center;
+	transition: right 0.3s ease 0.2s;
 }
 
 .toggles [type='checkbox']:focus + label::before,
@@ -134,19 +75,18 @@
 	background-repeat: no-repeat;
 }
 
-.toggles [type='checkbox']:checked + label::after {
-	right: 0.1em;
+.toggles [type='checkbox']:checked + label::before {
 	border-color: var(--main-toggle-on-border-colour);
-	color: var(--main-toggle-on-border-colour);
+	background-color: var(--main-toggle-on-border-colour);
 }
 
-.toggles [type='checkbox']:checked + label::before {
+.toggles [type='checkbox']:checked + label::after {
+	right: 0.125rem;
 	border-color: var(--main-toggle-on-border-colour);
-	background-color: var(--main-toggle-on-border-colour);
+	color: var(--main-toggle-on-border-colour);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-	.toggles [type='checkbox'] + label::before,
 	.toggles [type='checkbox'] + label::after {
 		transition: none;
 	}