styles/Apps/Ask.css

@@ -23,10 +23,6 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
-
-		button {
-			flex-grow: 1;
-		}
 	}
 
 	label {

styles/Apps/QueryStatus.css

@@ -11,7 +11,7 @@
 			display: flex;
 			flex-direction: column;
 			margin: 0;
-			border: 1px solid yellowgreen;
+			border: 1px solid rebeccapurple;
 			border-radius: 4px;
 			padding: 4px 8px;
 
@@ -19,7 +19,15 @@
 				display: flex;
 				flex-direction: row;
 				align-items: center;
+				/* Same height as the icons used for loading/disconnected */
+				height: 35px;
 			}
 		}
 	}
+
+	.control-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
 }

styles/elements/div.css

@@ -0,0 +1,20 @@
+.taf > .window-content div {
+	&.chip {
+		display: inline flex;
+		color: var(--chip-color);
+		background: var(--chip-background);
+		border: 1px solid var(--chip-border-color);
+		border-radius: 4px;
+
+		.key {
+			padding: 2px 4px;
+		}
+
+		.value {
+			padding: 2px 4px;
+			border-radius: 0 4px 4px 0;
+			color: var(--chip-value-color);
+			background: var(--chip-value-background);
+		}
+	}
+}

styles/elements/span.css

@@ -18,7 +18,7 @@
 
 .taf > .window-content span {
 	&.loader {
-		--size: 40px;
+		--size: 35px;
 		width: var(--size);
 		height: var(--size);
 		border-radius: 50%;

styles/main.css

@@ -3,6 +3,7 @@
 /* Resets */
 @import url("./resets/hr.css") layer(resets);
 @import url("./resets/inputs.css") layer(resets);
+@import url("./resets/button.css") layer(resets);
 
 /* Themes */
 @import url("./themes/dark.css") layer(themes);
@@ -10,6 +11,7 @@
 
 /* Elements */
 @import url("./elements/utils.css") layer(elements);
+@import url("./elements/div.css") layer(elements);
 @import url("./elements/headers.css") layer(elements);
 @import url("./elements/hr.css") layer(elements);
 @import url("./elements/input.css") layer(elements);

styles/resets/button.css

@@ -0,0 +1,3 @@
+.taf > .window-content button {
+	height: initial;
+}

styles/themes/dark.css

@@ -1,3 +1,10 @@
 .theme-dark {
 	--prosemirror-background: var(--color-cool-5);
+
+	/* Chip Variables */
+	--chip-color: #fff7ed;
+	--chip-background: #2b3642;
+	--chip-value-color: #fff7ed;
+	--chip-value-background: #10161d;
+	--chip-border-color: var(--chip-value-background);
 }

templates/QueryStatus/controls.hbs

@@ -1,8 +1,8 @@
-<div>
+<div class="control-row">
-	<button data-action="">
+	<button data-action="cancelRequest">
 		Cancel Request
 	</button>
-	<button data-action="">
+	<button data-action="finishEarly">
 		Finish Request Early
 	</button>
 </div>

templates/QueryStatus/users.hbs

@@ -16,7 +16,7 @@
 					<taf-icon
 						data-tooltip="taf.Apps.QueryStatus.user-disconnected-tooltip"
 						name="icons/disconnected"
-						var:size="40px"
+						var:size="35px"
 						var:stroke="currentColor"
 						var:fill="currentColor"
 					></taf-icon>
@@ -32,14 +32,14 @@
 			{{#if (eq user.status "finished")}}
 				<div class="chip-list">
 					{{#each user.answers as | answer |}}
-						<span class="chip">
+						<div class="chip">
 							<span class="key">
 								{{ @key }}
 							</span>
 							<span class="value">
 								{{ answer }}
 							</span>
-						</span>
+						</div>
 					{{/each}}
 				</div>
 			{{/if}}