Merge pull request #1305 from isaacphysics/redesign/question-finder

Question Finders

Author: jacbn

public/assets/phy/icons/redesign/checkbox-bg.svg

@@ -3,6 +3,7 @@ import { Col, Row } from "reactstrap";
 import { Spacer } from "./Spacer";
 import { FilterCount } from "./svg/FilterCount";
 import classNames from "classnames";
+import { isAda, isPhy } from "../../services";
 
 export interface CollapsibleListProps {
     title?: string;
@@ -37,7 +38,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
 
     return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
         <div className="row collapsible-head" ref={headRef}>
-            <button className={classNames("w-100 d-flex align-items-center p-3 bg-white text-start", {"ps-4": props.asSubList})} onClick={toggle}>
+            <button className={classNames("w-100 d-flex align-items-center p-3 text-start", {"bg-white": isAda, "bg-transparent": isPhy, "ps-4": props.asSubList})} onClick={toggle}>
                 {title && <span>{title}</span>}
                 <Spacer/>
                 {(props.numberSelected ?? 0) > 0

public/assets/phy/icons/redesign/checkbox-fg.svg

@@ -66,13 +66,13 @@ export default function LLMFreeTextQuestionFeedbackView({validationResponse, has
                     <ul className="no-bullet px-2 mb-4">
                         <li>
                             <StyledCheckbox
-                                id="disagree"  label={<p>Disagree</p>} className='"mb-4'
+                                id="disagree"  label={<p>Disagree</p>}
                                 checked={feedback.disagree} onChange={() => setFeedback({...noFeedback, disagree: !feedback.disagree})}
                             />
                         </li>
                         <li>
                             <StyledCheckbox
-                                id="partlyAgree" label={<p>Partly agree</p>} className='"mb-4'
+                                id="partlyAgree" label={<p>Partly agree</p>}
                                 checked={feedback.partlyAgree} onChange={() => setFeedback({...noFeedback, partlyAgree: !feedback.partlyAgree})}
                             />
                         </li>

public/assets/phy/icons/redesign/checkbox-partial-alt-fg.svg

@@ -74,6 +74,7 @@ export interface TitleIconProps {
 export interface PageTitleProps {
     currentPageTitle: string;
     subTitle?: string;
+    description?: string;
     disallowLaTeX?: boolean;
     help?: ReactElement;
     className?: string;
@@ -82,7 +83,7 @@ export interface PageTitleProps {
     preview?: boolean;
     icon?: TitleIconProps;
 }
-export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
+export const PageTitle = ({currentPageTitle, subTitle, description, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
     const dispatch = useAppDispatch();
     const openModal = useAppSelector((state: AppState) => Boolean(state?.activeModals?.length));
     const headerRef = useRef<HTMLHeadingElement>(null);
@@ -120,12 +121,17 @@ export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, clas
     }
 
     return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4": isPhy}, className)}>
-        {icon && (
-            icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
-                : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
-        <div className="me-auto" data-testid={"main-heading"}>
-            {formatPageTitle(currentPageTitle, disallowLaTeX)}
-            {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+        <div className="me-auto">
+            <div className="d-sm-flex align-items-center">
+                {icon && (
+                    icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
+                        : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
+                <div className="me-auto" data-testid={"main-heading"}>
+                    {formatPageTitle(currentPageTitle, disallowLaTeX)}
+                    {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+                </div>
+            </div>
+            {description && <div className="h-description">{description}</div>}
         </div>
         <Helmet>
             <meta property="og:title" content={currentPageTitle} />

public/assets/phy/icons/redesign/checkbox-partial-fg.svg

@@ -3,8 +3,7 @@ import { selectors, useAppSelector, useGetGroupsQuery, useGetMySetAssignmentsQue
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Card, Col, Row } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import { isDefined, isLoggedIn, isTutorOrAbove, Subject, useDeviceSize } from '../../services';
-import { BookInfo, isaacBooks } from './modals/IsaacBooksModal';
+import { BookInfo, ISAAC_BOOKS, isDefined, isLoggedIn, isTutorOrAbove, Subject, useDeviceSize } from '../../services';
 import { AssignmentDTO, RegisteredUserDTO } from '../../../IsaacApiTypes';
 import { GroupSelector } from '../pages/Groups';
 import { StyledDropdown } from './inputs/DropdownInput';
@@ -141,7 +140,7 @@ const BooksPanel = () => {
             </StyledDropdown>
         </div>
         <Row className="row-cols-3 row-cols-md-4 row-cols-lg-8 row-cols-xl-2 row-cols-xxl-3 flex-nowrap book-panel">
-            {isaacBooks.filter(book => book.subject === subject || subject === "all")
+            {ISAAC_BOOKS.filter(book => book.subject === subject || subject === "all")
                 .map((book) =>
                     <Col key={book.title} className="mb-2 me-1 p-0">
                         <BookCard {...book}/>

public/assets/phy/icons/redesign/checkbox-selected-bg.svg

@@ -54,7 +54,7 @@ type TitleAndBreadcrumbProps = BreadcrumbTrailProps & PageTitleProps & {
     breadcrumbTitleOverride?: string;
     children?: ReactElement | boolean;
 };
-export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
+export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, description, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
     return <div className={classNames(className, {"title-breadcrumb-container": isPhy, "pt-4 pt-md-5": isAda})}>
         {isPhy && <div className="title-graphics"/>}
         <BreadcrumbTrail
@@ -64,7 +64,7 @@ export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride,
         />
         {children}
         <PageTitle
-            modalId={modalId} subTitle={subTitle}
+            modalId={modalId} subTitle={subTitle} description={description}
             disallowLaTeX={disallowLaTeX} audienceViews={audienceViews}
             currentPageTitle={currentPageTitle} help={help}
             preview={preview} icon={icon}

public/assets/phy/icons/redesign/checkbox-selected-fg.svg

@@ -2,14 +2,14 @@ import React, {useEffect, useMemo, useState} from "react";
 import {Input, InputProps} from "reactstrap";
 import {v4} from "uuid";
 import {Spacer} from "../Spacer";
-import {ifKeyIsEnter} from "../../../services";
+import {ifKeyIsEnter, isAda} from "../../../services";
 import classNames from "classnames";
 
 // A custom checkbox, dealing with mouse and keyboard input. Pass `onChange((e : ChangeEvent) => void)`, `checked: bool`, and `label: Element` as required as props to use.
 
-export const StyledCheckbox = (props : InputProps) => {
+export const StyledCheckbox = (props: InputProps) => {
 
-    const {label, ignoreLabelHover, className, ...rest} = props;
+    const {label, ignoreLabelHover, className, bsSize, ...rest} = props;
 
     const [checked, setChecked] = useState(props.checked ?? false);
     const id = useMemo(() => {return (props.id ?? "") + "-" + v4();}, [props.id]);
@@ -23,10 +23,10 @@ export const StyledCheckbox = (props : InputProps) => {
         setChecked(props.checked ?? false);
     }, [props.checked]);
 
-    return <div className={classNames("styled-checkbox-wrapper", {"is-invalid": props.invalid})}>
+    return <div className={classNames("styled-checkbox-wrapper", {"is-invalid": props.invalid, "checkbox-small": bsSize === "sm"})}>
         <div className={classNames({"me-2 my-2": label})}>
-            {checked && <div className="tick"/>}
-            <Input {...rest} id={id} type="checkbox" className={classNames(className ?? "", {"checked" : checked})}
+            {isAda && checked && <div className="tick"/>}
+            <input {...rest} id={id} type="checkbox" className={classNames(className ?? "", "d-block", {"checked": checked, "icon-checkbox-off": !className && !checked, "icon-checkbox-selected": !className && checked})}
                 onChange={(e) => onCheckChange(e)}
                 // If the user toggles with a keyboard, this does not change the state of the checkbox, so we need to do it manually (with modification to `target`
                 // as this is a keyboard event, not a change event). We also prevent default to avoid submitting the outer form.