723 redesign left panel (#781)

Changed the slider color, added fieldsets for Model configs, consolidated the details elements (and styles) to match Defence configs.
ScottLogic · Apr 8, 2024 · d9f0553 · d9f0553
1 parent 4baea2a
commit d9f0553
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 78 deletions.
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -2,6 +2,12 @@
 	overflow-y: auto;
 	height: 100%;
 	padding: 1.875rem;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.control::-webkit-scrollbar {
+	display: none;
 }
 
 .control-panel .control-collapsible-section {

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -23,11 +23,11 @@
 }
 
 .handbook-overlay .content {
+	overflow-y: auto;
 	margin-top: 3rem;
 	margin-right: 0.5rem;
 	margin-bottom: 0.25rem;
 	padding: 0 1.75rem 0.5rem;
-	overflow-y: auto;
 
 	/* firefox scrollbar styling */
 	scrollbar-color: var(--handbook-scrollbar-colour) transparent;

diff --git a/frontend/src/components/HandbookOverlay/HandbookPage.css b/frontend/src/components/HandbookOverlay/HandbookPage.css
@@ -36,8 +36,8 @@
 }
 
 .handbook-terms .system-role-error-message {
-	border: 0.125rem dashed var(--error-colour);
-	background-color: var(--error-background-colour);
 	padding: 0.625rem;
+	border: 0.125rem dashed var(--error-colour);
 	border-radius: 0.625rem;
+	background-color: var(--error-background-colour);
 }
diff --git a/frontend/src/components/ModelBox/ModelBox.css b/frontend/src/components/ModelBox/ModelBox.css
@@ -1,3 +1,4 @@
 .model-box {
 	position: relative;
+	margin-top: 1rem;
 }
diff --git a/frontend/src/components/ModelBox/ModelConfiguration.css b/frontend/src/components/ModelBox/ModelConfiguration.css
@@ -1,3 +1,3 @@
 .model-config-box {
-	padding: 0.625rem;
+	padding: 0;
 }
diff --git a/frontend/src/components/ModelBox/ModelConfigurationSlider.css b/frontend/src/components/ModelBox/ModelConfigurationSlider.css
@@ -2,25 +2,42 @@
 	display: flex;
 	flex-direction: column;
 	margin: 0;
-	padding: 0;
-	border: none;
+	border: 0.25rem solid var(--control-config-border);
+	border-radius: 0.5rem;
+}
+
+.model-selection-fieldset {
+	min-height: fit-content;
+	margin: 0;
+	border: 0.25rem solid var(--control-config-border);
+	border-radius: 0.5rem;
 }
 
 .model-config-slider-fieldset legend {
-	margin-right: auto;
+	padding: 0.3125rem;
 }
 
-.model-config-slider-fieldset .info-icon {
-	margin-top: -1.3rem;
-	margin-bottom: 1rem;
-	margin-left: auto;
-	font-size: 1.3rem;
+.model-config-slider-fieldset details > summary {
+	width: fit-content;
+	padding: 0.5rem;
+	border: 0.125rem outset var(--control-config-border);
+	border-radius: 0.25rem;
+	list-style: none;
+}
+
+.model-config-slider-fieldset details[open] summary {
+	border-style: inset;
 }
 
 .model-config-slider-fieldset .info-text {
+	padding: 0.5rem;
 	font-size: 0.875rem;
 }
 
+.model-config-slider-fieldset details[open] .info-text {
+	display: block;
+}
+
 .model-config-slider-fieldset .config-slider {
 	display: flex;
 	flex-direction: column;

diff --git a/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx b/frontend/src/components/ModelBox/ModelConfigurationSlider.tsx
@@ -1,6 +1,5 @@
 import { Slider } from '@mui/material';
 import { SyntheticEvent, useEffect, useState } from 'react';
-import { AiOutlineInfoCircle } from 'react-icons/ai';
 
 import { CustomChatModelConfiguration } from '@src/models/chat';
 import { configureGptModel } from '@src/service/chatService';
@@ -13,7 +12,6 @@ function ModelConfigurationSlider({
 	config: CustomChatModelConfiguration;
 }) {
 	const [value, setValue] = useState<number>(config.value);
-	const [showInfo, setShowInfo] = useState<boolean>(false);
 
 	function handleValueChange(
 		_: Event | SyntheticEvent,
@@ -23,31 +21,15 @@ function ModelConfigurationSlider({
 		setValue(val);
 	}
 
-	function toggleInfo() {
-		setShowInfo(!showInfo);
-	}
-
 	useEffect(() => {
 		setValue(config.value);
 	}, [config]);
 
 	return (
 		<fieldset className="model-config-slider-fieldset">
 			<legend>{config.name}</legend>
-			<button
-				className="info-icon prompt-injection-min-button"
-				title="more info"
-				aria-label="more info"
-				onClick={() => {
-					toggleInfo();
-				}}
-			>
-				<AiOutlineInfoCircle aria-hidden />
-			</button>
-			{showInfo && <div className="info-text">{config.info}</div>}
 			<div className="config-slider">
 				<Slider
-					aria-label={config.id}
 					getAriaValueText={(value) => `${value}`}
 					min={config.min}
 					max={config.max}
@@ -59,10 +41,14 @@ function ModelConfigurationSlider({
 						void configureGptModel(config.id, value);
 					}}
 					sx={{
-						color: '#1fd07b',
+						color: '#2bb3bb',
 					}}
 				/>
 			</div>
+			<details>
+				<summary>Details</summary>
+				<div className="info-text">{config.info}</div>
+			</details>
 		</fieldset>
 	);
 }

diff --git a/frontend/src/components/ModelBox/ModelSelection.css b/frontend/src/components/ModelBox/ModelSelection.css
@@ -1,8 +1,6 @@
 .model-selection-box {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
-	padding: 0.625rem;
 }
 
 .model-selection-box .model-selection-row {

diff --git a/frontend/src/components/ModelBox/ModelSelection.tsx b/frontend/src/components/ModelBox/ModelSelection.tsx
@@ -50,51 +50,53 @@ function ModelSelection({ chatModelOptions }: { chatModelOptions: string[] }) {
 	// return a drop down menu with the models
 	return (
 		<div className="model-selection-box">
-			<div className="model-selection-row">
-				<p>Select model: </p>
-				<div className="select-wrapper">
-					<select
-						aria-label="model-select"
-						value={selectedModel ?? 0} // default to the first model
-						onChange={(e) => {
-							setSelectedModel(e.target.value);
-						}}
-					>
-						{chatModelOptions.map((model) => (
-							<option key={model} value={model}>
-								{model}
-							</option>
-						))}
-						;
-					</select>
-					<LoadingButton
-						onClick={() => void submitSelectedModel()}
-						isLoading={isSettingModel}
-						loadingTooltip="Changing model..."
-					>
-						Choose
-					</LoadingButton>
+			<fieldset className="model-selection-fieldset">
+				<legend>Select Model</legend>
+				<div className="model-selection-row">
+					<div className="select-wrapper">
+						<select
+							aria-label="model-select"
+							value={selectedModel ?? 0} // default to the first model
+							onChange={(e) => {
+								setSelectedModel(e.target.value);
+							}}
+						>
+							{chatModelOptions.map((model) => (
+								<option key={model} value={model}>
+									{model}
+								</option>
+							))}
+							;
+						</select>
+						<LoadingButton
+							onClick={() => void submitSelectedModel()}
+							isLoading={isSettingModel}
+							loadingTooltip="Changing model..."
+						>
+							Choose
+						</LoadingButton>
+					</div>
 				</div>
-			</div>
 
-			<div className="model-selection-info">
-				{errorChangingModel ? (
-					<p className="error">
-						Could not change model. You are still chatting to:
-						<b> {modelInUse} </b>
-					</p>
-				) : (
-					<p>
-						{modelInUse ? (
-							<>
-								You are chatting to model: <b>{modelInUse}</b>
-							</>
-						) : (
-							'You are not connected to a model.'
-						)}
-					</p>
-				)}
-			</div>
+				<div className="model-selection-info">
+					{errorChangingModel ? (
+						<p className="error">
+							Could not change model. You are still chatting to:
+							<b> {modelInUse} </b>
+						</p>
+					) : (
+						<p>
+							{modelInUse ? (
+								<>
+									You are chatting to model: <b>{modelInUse}</b>
+								</>
+							) : (
+								'You are not connected to a model.'
+							)}
+						</p>
+					)}
+				</div>
+			</fieldset>
 		</div>
 	);
 }

diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -21,8 +21,8 @@
 }
 
 .themed-button.disabled {
-	background-color: var(--action-button-disabled-background-colour);
 	border-color: var(--action-button-disabled-background-colour);
+	background-color: var(--action-button-disabled-background-colour);
 	color: var(--action-button-disabled-text-colour);
 }
 

diff --git a/frontend/src/components/ThemedInput/ThemedInput.css b/frontend/src/components/ThemedInput/ThemedInput.css
@@ -14,6 +14,6 @@
 }
 
 .themed-input.disabled {
-	background-color: var(--main-input-inactive-background-colour);
+	background-color: var(--chat-button-background-colour);
 	color: var(--main-input-inactive-text-colour);
 }