Ada iconography consistency

src/app/components/elements/SearchInputs.tsx

@@ -1,6 +1,6 @@
 import React, {ChangeEvent} from "react";
-import {Button, Input, InputGroup, Label} from "reactstrap";
-import {siteSpecific, withSearch} from "../../services";
+import {Button, Input, InputGroup, InputProps, Label} from "reactstrap";
+import {ifKeyIsEnter, SEARCH_CHAR_LENGTH_LIMIT, siteSpecific, withSearch} from "../../services";
 
 const PhysicsSearchButton = () => (
     <Button color='link' aria-label='search' className='search-button'>
@@ -108,3 +108,23 @@
 
 export const SearchPageSearch = siteSpecific(PhySimpleSearch, AdaHeaderSearch);
 export const MainSearchInput = siteSpecific(PhySearchInput, AdaSearchInput);
+
+
+interface SearchButtonWithIconProps extends InputProps {
+    onSearch?: () => void;
+}
+
+export const SearchInputWithIcon = (props: SearchButtonWithIconProps) => {
+    const {onSearch, ...rest} = props;
+    return <InputGroup className="search-input-icon">
+        <Input {...rest}
+            id="question-search-title"
+            type="text"
+            maxLength={SEARCH_CHAR_LENGTH_LIMIT}
+            {...(onSearch ? {"onKeyDown": ifKeyIsEnter(onSearch)} : {})}
+        />
+        <button className="d-flex align-items-center justify-content-center" onClick={onSearch} aria-label="Search">
+            <i className="icon icon-search" color="tertiary"/>
+        </button>
+    </InputGroup>;
+}

src/app/components/pages/QuestionFinder.tsx

@@ -42,7 +42,7 @@ import {MetaDescription} from "../elements/MetaDescription";
 import {CanonicalHrefElement} from "../navigation/CanonicalHrefElement";
 import classNames from "classnames";
 import queryString from "query-string";
-import {Button, Card, CardBody, CardHeader, Col, Container, Input, InputGroup, Label, Row} from "reactstrap";
+import {Button, Card, CardBody, CardHeader, Col, Container, Label, Row} from "reactstrap";
 import {ChoiceTree, getChoiceTreeLeaves, QuestionFinderFilterPanel} from "../elements/panels/QuestionFinderFilterPanel";
 import {TierID} from "../elements/svg/HierarchyFilter";
 import { MainContent, QuestionFinderSidebar, SidebarLayout } from "../elements/layout/SidebarLayout";
@@ -54,6 +54,7 @@ import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/lis
 import { PageFragment } from "../elements/PageFragment";
 import { RenderNothing } from "../elements/RenderNothing";
 import { processTagHierarchy, pruneTreeNode } from "../../services/questionHierarchy";
+import { SearchInputWithIcon } from "../elements/SearchInputs";
 
 // Type is used to ensure that we check all query params if a new one is added in the future
 const FILTER_PARAMS = ["query", "topics", "fields", "subjects", "stages", "difficulties", "examBoards", "book", "excludeBooks", "statuses", "randomSeed"] as const;
@@ -498,19 +499,15 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
                 {isAda && <Row>
                     <Col lg={6} md={12} xs={12} className="finder-search">
                         <Label htmlFor="question-search-title" className="mt-2"><b>Search for a question</b></Label>
-                        <InputGroup>
-                            <Input id="question-search-title"
-                                type="text"
-                                maxLength={SEARCH_CHAR_LENGTH_LIMIT}
-                                defaultValue={searchQuery}
-                                placeholder={siteSpecific(`e.g. ${getQuestionPlaceholder(pageContext)}`, "e.g. Creating an AST")}
-                                onChange={(e) => {
-                                    debouncedSearchHandler(e.target.value);
-                                    setRandomSeed(undefined); // This random seed reset is for Ada only! This is managed in the filtersChanged useEffect for Phy
-                                }}
-                            />
-                            <Button className="question-search-button" onClick={searchAndUpdateURL}/>
-                        </InputGroup>
+                        <SearchInputWithIcon
+                            defaultValue={searchQuery}
+                            placeholder={siteSpecific(`e.g. ${getQuestionPlaceholder(pageContext)}`, "e.g. Creating an AST")}
+                            onChange={(e) => {
+                                debouncedSearchHandler(e.target.value);
+                                setRandomSeed(undefined); // This random seed reset is for Ada only! This is managed in the filtersChanged useEffect for Phy
+                            }}
+                            onSearch={searchAndUpdateURL}
+                        />
                     </Col>
                 </Row>}
 

src/scss/common/elements.scss

@@ -381,17 +381,17 @@ iframe.email-html {
   transition: background-position 0.3s ease-in-out;
 
   &:has(> input:checked) {
-    border-left: solid 2px var(--sidebar-tab-active);
+    border-left: solid 2px var(--tab-active);
     background-position: 0% 0%;
 
     .badge.rounded-pill {
-      background-color: var(--sidebar-tab-active);
+      background-color: var(--tab-active);
       color: white;
     }
   }
 
   &:hover:not(:has(> input:checked, > input:disabled)) {
-    border-left: solid 2px var(--sidebar-tab-hover);
+    border-left: solid 2px var(--tab-hover);
   }
 
   &:has(> input:disabled) {

src/scss/common/icons.scss

@@ -63,3 +63,80 @@ polygon.fill-secondary {
 img[aria-disabled="true"] {
   opacity: 0.5;
 }
+
+.icon-download {
+  @include svg-icon('/assets/common/icons/download.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+.icon-chevron-right {
+  @include svg-icon('/assets/common/icons/arrow-right.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+.icon-search {
+  @include svg-icon('/assets/common/icons/search-icon.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+// Icon sizing
+.icon {
+  --icon-size: 16px;
+  --mask-size: 100%;
+}
+
+.icon-lg {
+  --icon-size: 60px;
+  --mask-size: initial;
+}
+
+.icon-xl {
+  --icon-size: 75px;
+  --mask-size: initial;
+}
+
+@mixin icon-color-override($color) {
+  &.layered {
+    &::before {
+      background-color: $color !important;
+    }
+    &::after {
+      background-color: $color !important;
+    }
+  }
+
+  // .layered is a bit grim; if we could set something in @svg-icon-layered as a flag instead this would be ideal.
+  &:not(.layered) {
+    background-color: $color !important;
+  }
+}
+
+i.icon {
+  &, &[color="primary"] {
+    background-color: var(--icon-primary);
+
+    @include not-reduced-motion {
+      transition: background-color 0.15s ease-in-out; // mirrors BS's $btn-transition
+    }
+
+    // for layered icons, the ::after element takes the colour while the ::before remains uncoloured
+    &::after {
+      background-color: var(--icon-primary);
+
+      @include not-reduced-motion {
+        transition: background-color 0.15s ease-in-out;
+      }
+    }
+  }
+
+  &[color="secondary"] {
+    background-color: var(--icon-secondary);
+    &::after {
+      background-color: var(--icon-secondary);
+    }
+  }
+
+  &[color="tertiary"] {
+    background-color: var(--icon-tertiary);
+    &::after {
+      background-color: var(--icon-tertiary);
+    }
+  }
+}

src/scss/common/search.scss

@@ -105,3 +105,37 @@ nav.search {
   flex-flow: row nowrap;
   max-width: 520px;
 }
+
+.search-input-icon {
+  $search-button-offset: 50px;
+  > input {
+    border-right: none;
+  }
+
+  > button {
+    // background: white url(/assets/cs/icons/search-jet.svg) no-repeat center;
+    // background-size: 20px 20px;
+    background-color: white;
+    border: 1px solid black;
+    border-left: none;
+    border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    padding: 0;
+    width: $search-button-offset;
+    min-width: 0;
+    &:active {
+      background-color: lightgray !important;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 75%;
+    top: 12.5%;
+    right: $search-button-offset;
+    background: #c2c2c2;
+    z-index: 4;
+  }
+}

src/scss/common/tabs.scss

@@ -39,7 +39,7 @@
     &.active {
       .nav-link {
         font-family: $secondary-font-semi-bold;
-        background-color: var(--sidebar-tab-active, $black);
+        background-color: var(--tab-active, $black);
         color: $white;
         text-decoration: none;
         cursor: default;

src/scss/cs/button.scss

@@ -96,11 +96,11 @@
 
   font-size: 1.111rem;
   &:not(.btn-sm):not(.btn-link) {
-    padding: 0.5rem 2.1rem 0.4rem 2.1rem;
+    padding: 0.5rem 2.1rem;
   }
   @extend .fw-semi-bold;
   &.btn-sm {
-    padding: 0.2rem 0.7rem 0.16rem 0.7rem;
+    padding: 0.2rem 0.7rem;
   }
   min-width: 25px;
 

src/scss/cs/color-theme.scss

@@ -0,0 +1,14 @@
+// TODO: 
+// - move any colour theming from /cs/isaac.scss here
+//   - (including all colour definitions)
+// - copy any required theming from phy/isaac.scss
+// - ensure all variables are named equivalently across the two files
+
+#root {
+    --tab-active: #{$dark-pink-300};
+    --tab-hover: #{$cs-light-gray};
+
+    --icon-primary: #{$dark-pink-300};
+    --icon-secondary: #{$cyan-100};
+    --icon-tertiary: #{$cs-black};
+}

src/scss/cs/fonts.scss

@@ -13,6 +13,7 @@
   src: url('/assets/cs/fonts/poppins-bold.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-bold.woff') format('woff'),
   url('/assets/cs/fonts/poppins-bold.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -22,6 +23,7 @@
   src: url('/assets/cs/fonts/poppins-bolditalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-bolditalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-bolditalic.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -31,6 +33,7 @@
   src: url('/assets/cs/fonts/poppins-italic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-italic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-italic.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -40,6 +43,7 @@
   src: url('/assets/cs/fonts/poppins-light.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-light.woff') format('woff'),
   url('/assets/cs/fonts/poppins-light.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -49,6 +53,7 @@
   src: url('/assets/cs/fonts/poppins-lightitalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-lightitalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-lightitalic.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -58,6 +63,7 @@
   src: url('/assets/cs/fonts/poppins-regular.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-regular.woff') format('woff'),
   url('/assets/cs/fonts/poppins-regular.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -67,6 +73,7 @@
   src: url('/assets/cs/fonts/poppins-semibold.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-semibold.woff') format('woff'),
   url('/assets/cs/fonts/poppins-semibold.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {
@@ -76,6 +83,7 @@
   src: url('/assets/cs/fonts/poppins-semibolditalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-semibolditalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-semibolditalic.ttf') format('truetype');
+  ascent-override: 140%;
 }
 
 @font-face {

src/scss/cs/isaac.scss

@@ -344,6 +344,7 @@ $enable-negative-margins: true;
 
 // Theming
 @import "../common/accessibility";
+@import "color-theme";
 
 // Atoms
 @import "fonts";

src/scss/phy/color-theme.scss

@@ -41,8 +41,8 @@
     // NAVIGATION
     --nav-primary: #{map.get($subject-colors, 500)};
     --nav-secondary: #{map.get($subject-colors, 400)};
-    --sidebar-tab-active: #{map.get($subject-colors, 500)};
-    --sidebar-tab-hover: #{map.get($subject-colors, 300)};
+    --tab-active: #{map.get($subject-colors, 500)};
+    --tab-hover: #{map.get($subject-colors, 300)};
 
     // ICONS
     --icon-primary: #{map.get($subject-colors, 500)};
@@ -75,8 +75,8 @@
       --buttons-light-hover-prefix: #{$color-neutral-200};
 
       --nav-primary: #{$color-brand-500};
-      --sidebar-tab-active: #{$color-brand-500};
-      --sidebar-tab-hover: #{$color-neutral-300};
+      --tab-active: #{$color-brand-500};
+      --tab-hover: #{$color-neutral-300};
 
       --icon-primary: #{$color-brand-500};