move buttons around on search patients form (#2586)

* make changes

* new files

* [pre-commit.ci] auto fixes from pre-commit hooks

* spacing tweaks

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

containers/tefca-viewer/src/app/query/components/SearchForm.tsx → containers/tefca-viewer/src/app/query/components/searchForm/SearchForm.tsx

@@ -17,13 +17,14 @@ import {
   stateOptions,
   Mode,
   ValueSetItem,
-} from "../../constants";
+} from "../../../constants";
 import {
   UseCaseQueryResponse,
   UseCaseQuery,
   UseCaseQueryRequest,
-} from "../../query-service";
-import { fhirServers } from "../../fhir-servers";
+} from "../../../query-service";
+import { fhirServers } from "../../../fhir-servers";
+import styles from "./searchForm.module.css";
 
 import { FormatPhoneAsDigits } from "@/app/format-service";
 
@@ -148,8 +149,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
       <form className="patient-search-form" onSubmit={HandleSubmit}>
         <h1 className="font-sans-2xl text-bold">Search for a Patient</h1>
         {
-          <div className="usa-summary-box usa-summary-box demo-query-filler">
-            <Label className="usa-label" htmlFor="query">
+          <div className="usa-summary-box demo-query-filler ">
+            <Label className="no-margin-top-important" htmlFor="query">
               <b>Select a sample query and patient to populate the form.</b>
             </Label>
             <Label htmlFor="query">Query</Label>
@@ -175,13 +176,6 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   </option>
                 ))}
               </select>
-              <Button
-                type="button"
-                className="usa-button--outline bg-white query-page-button"
-                onClick={() => handleClick()}
-              >
-                Customize query
-              </Button>
             </div>
             <Label htmlFor="patient">Patient</Label>
             <div className="display-flex flex-align-start query-page-wrapper">
@@ -200,26 +194,34 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   </option>
                 ))}
               </select>
+            </div>
+            <div className={`${styles.searchCallToActionContainer}`}>
               <Button
-                className="usa-button--outline bg-white query-page-button"
+                className={`"usa-button" ${styles.searchCallToActionButton}`}
                 type="button"
-                // value={patientOption}
                 onClick={() => {
                   fillFields(patientOption as PatientType, false);
                 }}
               >
                 Fill fields
               </Button>
+              <Button
+                type="button"
+                className={`usa-button--outline bg-white ${styles.searchCallToActionButton}`}
+                onClick={() => handleClick()}
+              >
+                Customize query
+              </Button>
+              <Button
+                className={`usa-button--unstyled margin-left-auto ${styles.searchCallToActionButton}`}
+                type="button"
+                onClick={() => {
+                  setShowAdvanced(!showAdvanced);
+                }}
+              >
+                Advanced
+              </Button>
             </div>
-            <Button
-              className="usa-button--outline bg-white margin-top-4"
-              type="button"
-              onClick={() => {
-                setShowAdvanced(!showAdvanced);
-              }}
-            >
-              Advanced
-            </Button>
           </div>
         }
         <Fieldset>

containers/tefca-viewer/src/app/query/components/searchForm/searchForm.module.css

@@ -0,0 +1,10 @@
+.searchCallToActionContainer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.searchCallToActionButton {
+  height: 2.5rem;
+}

containers/tefca-viewer/src/app/query/page.tsx

@@ -3,7 +3,7 @@ import React, { Suspense, useEffect, useState } from "react";
 import { UseCaseQueryResponse, UseCaseQueryRequest } from "../query-service";
 import ResultsView from "./components/ResultsView";
 import MultiplePatientSearchResults from "./components/MultiplePatientSearchResults";
-import SearchForm from "./components/SearchForm";
+import SearchForm from "./components/searchForm/SearchForm";
 import NoPatientsFound from "./components/NoPatientsFound";
 import {
   Mode,

containers/tefca-viewer/src/app/query/test/page.tsx

@@ -6,7 +6,7 @@ import { UseCaseQueryResponse, UseCaseQueryRequest } from "../../query-service";
 // @ts-ignore
 import ResultsView from "../components/ResultsView";
 import MultiplePatientSearchResults from "../components/MultiplePatientSearchResults";
-import SearchForm from "../components/SearchForm";
+import SearchForm from "../components/searchForm/SearchForm";
 import NoPatientsFound from "../components/NoPatientsFound";
 import { Mode, USE_CASES, ValueSetItem } from "../../constants";
 

containers/tefca-viewer/src/styles/custom-styles.scss

@@ -407,10 +407,6 @@ html {
   gap: 0px;
   padding-top: 20px;
   padding-bottom: 20px;
-
-  .usa-label {
-    margin-top: 2;
-  }
 }
 
 .test-query-filler {
@@ -429,17 +425,6 @@ html {
   gap: 20px;
 }
 
-.query-page-button {
-  background-color: white;
-  margin-top: 0.5rem;
-  align-self: flex-start;
-  height: 40px;
-  width: 158px;
-  text-align: center;
-  font-size: 16px;
-  font-style: normal;
-}
-
 .usa-button--outline:hover,
 .usa-button--outline.usa-button--hover {
   background-color: white;
@@ -706,3 +691,7 @@ hr.custom-hr {
 .customize-accordion .usa-accordion__content {
   padding: 0rem;
 }
+
+.no-margin-top-important {
+  margin-top: 0 !important;
+}