Redesign: very small improvements

src/app/components/elements/EventBookingForm.tsx

@@ -149,7 +149,7 @@ export const EventBookingForm = ({event, targetUser, additionalInformation, upda
                         <Label htmlFor="medical-reqs">
                             <span className={siteSpecific("d-flex align-items-center", "")}>
                                 Dietary requirements or relevant medical conditions
-                                <span id="dietary-reqs-help" aria-haspopup="true" className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help has-tip")} />
+                                <i id="dietary-reqs-help" aria-haspopup="true" className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help has-tip")} />
                             </span>
                             <UncontrolledPopover trigger="click" placement="bottom" target="dietary-reqs-help">
                                 <PopoverBody>For example, it is important for us to know if you have a severe allergy and/or carry an EpiPen, are prone to fainting, suffer from epilepsy...</PopoverBody>
@@ -165,7 +165,7 @@ export const EventBookingForm = ({event, targetUser, additionalInformation, upda
                         <Label htmlFor="access-reqs">
                             <span className={siteSpecific("d-flex align-items-center", "")}>
                                 Accessibility requirements
-                                <span id="access-reqs-help" aria-haspopup="true" className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help has-tip")} />
+                                <i id="access-reqs-help" aria-haspopup="true" className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help has-tip")} />
                             </span>
                             <UncontrolledPopover trigger="click" placement="bottom" target="access-reqs-help">
                                 <PopoverBody>For example, please let us know if you need wheelchair access, hearing loop or if we can help with any special adjustments.</PopoverBody>

src/app/components/elements/PrintButton.tsx

@@ -2,7 +2,8 @@ import React, {useState} from "react";
 import {printingSettingsSlice, useAppDispatch} from "../../state";
 import {Button} from "reactstrap";
 import { IconButton } from "./AffixButton";
-import { siteSpecific } from "../../services";
+import { isAda, siteSpecific } from "../../services";
+import classNames from "classnames";
 
 interface PrintProps {
     questionPage?: boolean;
@@ -15,7 +16,7 @@ export const PrintButton = ({questionPage}: PrintProps ) => {
 
     return questionPage ?
         <div className="position-relative">
-            {questionPrintOpen && <div className="action-buttons-popup-container not-mobile">
+            {questionPrintOpen && <div className={classNames("action-buttons-popup-container", {"not-mobile": isAda})}>
                 <div className="question-actions-link text-nowrap">
                     <Button
                         size={"sm"}
@@ -44,7 +45,7 @@ export const PrintButton = ({questionPage}: PrintProps ) => {
             {siteSpecific(
                 <IconButton
                     icon="icon-print"
-                    className="w-max-content h-max-content not-mobile"
+                    className="w-max-content h-max-content"
                     affixClassName="icon-color-black"
                     aria-label="Print page" 
                     title="Print page"
@@ -63,7 +64,7 @@ export const PrintButton = ({questionPage}: PrintProps ) => {
         siteSpecific(
             <IconButton
                 icon="icon-print"
-                className="w-max-content h-max-content not-mobile"
+                className="w-max-content h-max-content"
                 affixClassName="icon-color-black"
                 aria-label="Print page" 
                 title="Print page"

src/app/components/elements/inputs/UserContextPicker.tsx

@@ -128,7 +128,7 @@ export const UserContextPicker = ({className, hideLabels = true}: {className?: s
                     }
 
                     <div className="mt-2 ms-1">
-                        <span id={`viewing-context-explanation`} className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help mx-1")}/>
+                        <i id={`viewing-context-explanation`} className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help mx-1")}/>
                         <UncontrolledTooltip placement="bottom" target={`viewing-context-explanation`}>
                             You are seeing {stageLabelMap[userContext.stage]}{isAda ? ` - ${examBoardLabelMap[userContext.examBoard]}` : ""}
                             &nbsp;content.&nbsp;

src/app/components/elements/list-groups/ContentSummaryListGroupItem.tsx

@@ -197,7 +197,7 @@ export const ContentSummaryListGroupItem = ({item, search, showBreadcrumb, noCar
                 </div>
 
                 {isPhy && !isContentsIntendedAudience && <div className="ms-auto me-3 d-flex align-items-center">
-                    <span id={`audience-help-${componentId}`} className="icon icon-info layered icon-color-grey" />
+                    <i id={`audience-help-${componentId}`} className="icon icon-info layered icon-color-grey" />
                     <UncontrolledTooltip placement="bottom" target={`audience-help-${componentId}`}>
                         {`This content has ${notRelevantMessage(userContext)}.`}
                     </UncontrolledTooltip>

src/app/components/elements/list-groups/TopicSummaryLinks.tsx

@@ -67,7 +67,7 @@ export function TopicSummaryLinks({items, search}: {items: ContentSummaryDTO[];
                                 </Markup>
                             </div>
                             {isPhy && item.deEmphasised && <div className="ms-auto me-3 d-flex align-items-center">
-                                <span id={`audience-help-${index}`} className="icon icon-info layered icon-color-grey" />
+                                <i id={`audience-help-${index}`} className="icon icon-info layered icon-color-grey" />
                                 <UncontrolledTooltip placement="bottom" target={`audience-help-${index}`}>
                                     {`This content has ${notRelevantMessage(userContext)}.`}
                                 </UncontrolledTooltip>

src/app/components/elements/modals/QuizSettingModal.tsx

@@ -150,7 +150,7 @@ export function QuizSettingModal({quiz, dueDate: initialDueDate, scheduledStartD
         <Label className="w-100 mb-4">
             <div className={siteSpecific("d-flex align-items-center", "")}>
                 Set an optional start date:
-                <span id={scheduledQuizHelpTooltipId} className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help")}/>
+                <i id={scheduledQuizHelpTooltipId} className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help")}/>
             </div>
             <DateInput value={scheduledStartDate ?? undefined} invalid={scheduledStartDateInvalid || undefined}
                 yearRange={yearRange}

src/app/components/navigation/SupersededDeprecatedWarningBanner.tsx

@@ -26,7 +26,7 @@ export function SupersededDeprecatedWarningBanner({doc}: {doc: SeguePageDTO}) {
     // Tutors and teachers should see superseded/deprecated messages because they have to setting assignments etc. and
     // want up to date content.
     const teacherMessage = isTutorOrAbove(user) && <React.Fragment>
-        <span id="superseded-help" className={siteSpecific("icon icon-info layered icon-color-grey", "icon-help")} />
+        <i id="superseded-help" className={siteSpecific("icon icon-info layered icon-color-grey", "icon-help")} />
         <UncontrolledTooltip placement="bottom" target="superseded-help">
             <div className="text-start">
                 {supersededBy && <>

src/app/components/pages/AssignmentProgress.tsx

@@ -299,7 +299,7 @@ export const AssignmentProgressLegend = ({showQuestionKey, id}: {showQuestionKey
                     <div className={classNames("d-flex flex-row h-100", {"align-items-center": isPhy})}>
                         <span>Class average mode</span>
                         {above["md"](deviceSize) && <>
-                            <span id={`attempted-toggle-${id}`} className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help")}/>
+                            <i id={`attempted-toggle-${id}`} className={siteSpecific("icon icon-info layered icon-color-grey ms-1", "icon-help")}/>
                             <UncontrolledTooltip className="spaced-tooltip" placement="left" autohide={false} target={`attempted-toggle-${id}`}>
                                 This toggle changes what the percentages at the top and bottom of the table represent.<br/><br/>
                                 <b>Attempted</b> displays the percentage of students who have attempted all parts of that question.<br/><br/>

src/app/components/pages/Concept.tsx

@@ -63,7 +63,7 @@ export const Concept = withRouter(({match: {params}, location: {search}, concept
         <div className="question-actions">
             <ShareLink linkUrl={`/concepts/${conceptId}${search || ""}`} />
         </div>
-        <div className="question-actions not-mobile">
+        <div className="question-actions">
             <PrintButton />
         </div>
         <div className="question-actions">

src/app/components/pages/FreeTextBuilder.tsx

@@ -168,7 +168,7 @@ export const FreeTextBuilder = () => {
                                                         className="w-100" type="text" value={choice.value}
                                                         onChange={e => setQuestionChoices(questionChoices.map(c => choice == c ? {...c, value: e.target.value} : c))}
                                                     />
-                                                    <span id={`choice-help-${choice.choiceNumber}`} className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help me-2")} />
+                                                    <i id={`choice-help-${choice.choiceNumber}`} className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help me-2")} />
                                                 </div>
                                             </Label>
                                             <UncontrolledTooltip target={`choice-help-${choice.choiceNumber}`} placement="bottom" innerClassName="">

src/app/components/pages/Generic.tsx

@@ -73,7 +73,7 @@ export const Generic = withRouter(({pageIdOverride, match: {params}}: GenericPag
                 <div className="question-actions question-actions-leftmost mt-2">
                     <ShareLink linkUrl={`/pages/${doc.id}`}/>
                 </div>
-                <div className="question-actions mt-2 not-mobile">
+                <div className="question-actions mt-2">
                     <PrintButton/>
                 </div>
             </div>;

src/app/components/pages/Glossary.tsx

@@ -292,7 +292,7 @@ export const Glossary = () => {
         <div className="question-actions question-actions-leftmost mt-2">
             <ShareLink linkUrl={`/glossary`} clickAwayClose/>
         </div>
-        <div className="question-actions mt-2 not-mobile">
+        <div className="question-actions mt-2">
             <PrintButton/>
         </div>
     </div>;

src/app/components/pages/News.tsx

@@ -5,9 +5,9 @@ import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {MetaDescription} from "../elements/MetaDescription";
 import {useGetNewsPodListQuery} from "../../state";
 import {ShowLoadingQuery} from "../handlers/ShowLoadingQuery";
-import {above, isAda, isPhy, NEWS_PODS_PER_PAGE, siteSpecific, useDeviceSize} from "../../services";
+import {above, isPhy, NEWS_PODS_PER_PAGE, siteSpecific, useDeviceSize} from "../../services";
 import { IsaacPodDTO } from "../../../IsaacApiTypes";
-import classNames from "classnames";
+import { GenericPageSidebar, MainContent, SidebarLayout } from "../elements/layout/SidebarLayout";
 
 export const News = () => {
     const [page, setPage] = React.useState(0);
@@ -35,23 +35,28 @@ export const News = () => {
     return <Container>
         <TitleAndBreadcrumb currentPageTitle={"News"} icon={{type: "hex", icon: "icon-news"}} />
         <MetaDescription description={metaDescription} />
-        {allNews.length === 0 ? 
-            <ShowLoadingQuery
-                query={newsQuery}
-                thenRender={() => <div className={"w-100 text-start"}><h4>No news to display...</h4></div>}
-                defaultErrorTitle={"Error fetching news stories"}
-            /> : 
-            <>
-                <Row className={`row-cols-1 row-cols-sm-2 ${siteSpecific("row-cols-md-1", "row-cols-lg-3 mt-4")}`}>
-                    {allNews.map((n, i) => <Col key={i} className={`my-3 ${siteSpecific("px-3", "px-0 justify-content-center")}`}>
-                        <NewsCard key={n.id} newsItem={n} showTitle />
-                        {isPhy && above["md"](deviceSize) && <div className="section-divider"/>}
-                    </Col>)}
-                </Row>
-                <div className="w-100 d-flex justify-content-center mb-5">
-                    <Button className={"mt-3"} color={"primary"} disabled={disableLoadMore} onClick={() => setPage(p => p + 1)}>Load older news</Button>
-                </div>
-            </>
-        }
+        <SidebarLayout>
+            <GenericPageSidebar/>
+            <MainContent>
+                {allNews.length === 0 ? 
+                    <ShowLoadingQuery
+                        query={newsQuery}
+                        thenRender={() => <div className={"w-100 text-start"}><h4>No news to display...</h4></div>}
+                        defaultErrorTitle={"Error fetching news stories"}
+                    /> : 
+                    <>
+                        <Row className={`row-cols-1 row-cols-sm-2 ${siteSpecific("row-cols-md-1", "row-cols-lg-3 mt-4")}`}>
+                            {allNews.map((n, i) => <Col key={i} className={`my-3 ${siteSpecific("px-3", "px-0 justify-content-center")}`}>
+                                <NewsCard key={n.id} newsItem={n} showTitle />
+                                {isPhy && above["md"](deviceSize) && <div className="section-divider"/>}
+                            </Col>)}
+                        </Row>
+                        <div className="w-100 d-flex justify-content-center mb-5">
+                            <Button className={"mt-3"} color={"primary"} disabled={disableLoadMore} onClick={() => setPage(p => p + 1)}>Load older news</Button>
+                        </div>
+                    </>
+                }
+            </MainContent>
+        </SidebarLayout>
     </Container>;
 };

src/app/components/pages/Search.tsx

@@ -52,11 +52,11 @@ function deitemise(item: Item<DOCUMENT_TYPE>) {
 const selectStyle: StylesConfig<Item<DOCUMENT_TYPE>, true, GroupBase<Item<DOCUMENT_TYPE>>> = {
     multiValue: (styles: CSSObjectWithLabel) => ({
         ...styles,
-        backgroundColor: siteSpecific("rgba(254, 161, 0, 0.9)", "rgba(135, 12, 90, 0.9)"),
-        color: siteSpecific("black", "white"),
+        backgroundColor: siteSpecific("#448525", "rgba(135, 12, 90, 0.9)"),
+        color: "white",
 
     }),
-    multiValueLabel: (styles: CSSObjectWithLabel) => ({...styles, color: siteSpecific("black", "white")}),
+    multiValueLabel: (styles: CSSObjectWithLabel) => ({...styles, color: "white"}),
 };
 
 // Interacting with the page's filters change the query parameters.

src/app/components/pages/SetAssignments.tsx

@@ -212,7 +212,7 @@ const SetAssignmentsModal = (props: SetAssignmentsModalProps) => {
             <div className="py-2">
                 <Label className={siteSpecific("d-flex align-items-center", "")}>
                     Pending {siteSpecific("assignments", "quiz assignments")}:
-                    <span className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help mx-1")} id={`pending-assignments-help-${board?.id}`}/>
+                    <i className={siteSpecific("icon icon-info layered icon-color-grey ms-2", "icon-help mx-1")} id={`pending-assignments-help-${board?.id}`}/>
                 </Label>
                 <UncontrolledTooltip placement="left" autohide={false} target={`pending-assignments-help-${board?.id}`}>
                     These {siteSpecific("assignments", "quizzes")} are scheduled to begin at a future date. On the morning of the scheduled date, students
@@ -274,7 +274,7 @@ const PhyTable = (props: SetAssignmentsTableProps) => {
         <th colSpan={2} className="text-center align-middle">
             <div className="d-flex align-items-center">
                 Stages and Difficulties
-                <span id="difficulties-help" className="icon icon-info layered icon-color-grey ms-2"></span>
+                <i id="difficulties-help" className="icon icon-info layered icon-color-grey ms-2"/>
             </div>
             <UncontrolledTooltip placement="bottom" target={`difficulties-help`}>
                 Practice: {difficultiesOrdered.slice(0, 2).map(d => difficultyShortLabelMap[d]).join(", ")}<br />