#3698: Fix home page

NCI-Agency · Aug 11, 2021 · 4c525ed · 4c525ed
1 parent 623428c
commit 4c525ed
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 42 deletions.
diff --git a/client/src/index.css b/client/src/index.css
@@ -298,11 +298,10 @@ button.home-tile.btn {
   font-weight: 900;
 }
 
-.home-tile:hover {
+.home-tile-col:hover {
   background: #dae3ee;
 }
-.home-tile:hover,
-.home-tile:focus {
+.home-tile-col:focus {
   text-decoration: none;
 }
 
@@ -1077,6 +1076,10 @@ header.searchPagination {
   transform: translate(0, 150px);
 }
 
+.fade.in.modal {
+  opacity: 1;
+}
+
 @page {
   margin: 0;
 }

diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
@@ -25,14 +25,7 @@ import { Person, Report } from "models"
 import { superUserTour, userTour } from "pages/HopscotchTour"
 import PropTypes from "prop-types"
 import React, { useContext, useState } from "react"
-import {
-  Button,
-  ControlLabel,
-  FormControl,
-  FormGroup,
-  Grid,
-  Row
-} from "react-bootstrap"
+import { Button, Col, Container, Form, Row } from "react-bootstrap"
 import { connect } from "react-redux"
 import { useHistory, useLocation } from "react-router-dom"
 import { RECURSE_STRATEGY } from "searchUtils"
@@ -129,12 +122,13 @@ const HomeTiles = ({ currentUser, setSearchQuery, pageDispatchers }) => {
         {queries
           .filter(q => q.query !== null)
           .map((query, index) => (
-            <HomeTile
-              key={index}
-              query={query}
-              setSearchQuery={setSearchQuery}
-              pageDispatchers={pageDispatchers}
-            />
+            <Col key={index} className="home-tile-col">
+              <HomeTile
+                query={query}
+                setSearchQuery={setSearchQuery}
+                pageDispatchers={pageDispatchers}
+              />
+            </Col>
           ))}
       </Row>
     </Grid>
@@ -329,33 +323,41 @@ const SavedSearches = ({ setSearchQuery, pageDispatchers }) => {
   return (
     <>
       <Messages error={stateError} />
-      <FormGroup controlId="savedSearchSelect">
-        <ControlLabel>Select a saved search</ControlLabel>
-        <FormControl componentClass="select" onChange={onSaveSearchSelect}>
-          {savedSearches &&
-            savedSearches.map(savedSearch => (
-              <option value={savedSearch.uuid} key={savedSearch.uuid}>
-                {savedSearch.name}
-              </option>
-            ))}
-        </FormControl>
-      </FormGroup>
+      <Form.Group as={Row} className="mb-3" controlId="savedSearchSelect">
+        <Form.Label column sm={2}>
+          <b>Select a saved search</b>
+        </Form.Label>
+        <Col sm={10}>
+          <Form.Control as="select" onChange={onSaveSearchSelect}>
+            {savedSearches &&
+              savedSearches.map(savedSearch => (
+                <option value={savedSearch.uuid} key={savedSearch.uuid}>
+                  {savedSearch.name}
+                </option>
+              ))}
+          </Form.Control>
+        </Col>
+      </Form.Group>
 
       {selectedSearch && (
         <div>
-          <div className="pull-right">
-            <Button style={{ marginRight: 12 }} onClick={showSearch}>
-              Show Search
-            </Button>
-            <ConfirmDestructive
-              onConfirm={onConfirmDelete}
-              objectType="search"
-              objectDisplay={selectedSearch.name}
-              bsStyle="danger"
-              buttonLabel="Delete Search"
-            />
-          </div>
-          <SavedSearchTable search={selectedSearch} />
+          <Row>
+            <Col sm={8}>
+              <SavedSearchTable search={selectedSearch} />
+            </Col>
+            <Col className="text-end">
+              <Button style={{ marginRight: 12 }} onClick={showSearch}>
+                Show Search
+              </Button>
+              <ConfirmDestructive
+                onConfirm={onConfirmDelete}
+                objectType="search"
+                objectDisplay={selectedSearch.name}
+                variant="danger"
+                buttonLabel="Delete Search"
+              />
+            </Col>
+          </Row>
         </div>
       )}
     </>
@@ -417,7 +419,7 @@ const Home = ({ setSearchQuery, pageDispatchers }) => {
 
   return (
     <div>
-      <div className="pull-right">
+      <div style={{ width: "inherit" }} className="float-end">
         <GuidedTour
           title="Take a guided tour of the home page."
           tour={currentUser.isSuperUser() ? superUserTour : userTour}