FE updates

frontend/public/manifest.json

@@ -7,27 +7,9 @@
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    },
     {
       "src": "Redis_Mark_Red.svg",
       "type": "image/svg"
-    },
-    {
-      "src": "github-mark.svg",
-      "type": "image/svg"
-    },
-    {
-      "src": "x-logo.svg",
-      "type": "image/svg"
     }
   ],
   "start_url": ".",

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { AppRoutes } from './Routes';
-import './App.css';
+import './styles/App.css';
 
 const App: FC = () => <AppRoutes />;
 

frontend/src/styles/App.css

@@ -0,0 +1,4 @@
+html,
+body {
+    font-family: 'Space Grotesk', sans-serif;
+}

frontend/src/styles/Card.css

@@ -0,0 +1,16 @@
+.card {
+    width: 26rem;
+    margin: 1rem;
+    padding: 1rem;
+    border: 1px solid black;
+    border-radius: 0.5rem;
+}
+
+.card-top {
+    padding-top: 1rem;
+}
+
+.card-btns {
+    width: 0.5rem;
+    display: inline-block;
+}

frontend/src/styles/Footer.css

@@ -0,0 +1,5 @@
+.footer {
+    background: #f0f0f0;
+    padding: 2rem;
+    text-align: center;
+}

frontend/src/styles/Header.css

@@ -0,0 +1,21 @@
+.header {
+    background: #091a23;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2.25rem;
+}
+
+.header-logo {
+    height: 2rem;
+}
+
+.header-icon-link {
+    height: 1.5rem;
+    width: 1.5rem;
+    margin-right: 1rem;
+}
+
+.header-cta {
+    background: #dcff1e;
+}

frontend/src/App.css → frontend/src/styles/Home.css

@@ -1,10 +1,5 @@
-html,
-body {
-    font-family: 'Space Grotesk', sans-serif;
-}
-
 .home-padding {
-    padding: 40px 25px 0 25px;
+    padding: 0 25px;
 }
 
 .home-heading {
@@ -16,7 +11,7 @@ body {
 }
 
 .home-filters {
-    padding: 1rem 0;
+    padding: 1rem 0 3rem 0;
 }
 
 .home-search-results {
@@ -32,12 +27,4 @@ body {
 .home-loader {
     display: flex;
     padding: 2rem 5%;
-}
-
-.card {
-    width: 26rem;
-    margin: 1rem;
-    padding: 1rem;
-    border: 1px solid black;
-    border-radius: 0.5rem;
 }

frontend/src/views/Card.tsx

@@ -1,11 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { getSemanticallySimilarPapers } from "../api"
-import useCheckMobileScreen from "../mobile"
 import Tooltip from '@mui/material/Tooltip';
-import Chip from '@mui/material/Chip';
-// import '../styles/Card.css'
-import { makeStyles } from '@material-ui/core/styles';
-import { useNavigate } from 'react-router';
+import '../styles/Card.css'
 
 interface Props {
   paperId: string;

frontend/src/views/Footer.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import '../styles/Footer.css';
 
 export const Footer = () => {
     return (
         <footer>
-            <div style={{ background: "#f0f0f0", padding: "2rem", textAlign: "center" }}>
+            <div className='footer'>
                 <div>
                     All Redis software used in this demo is licensed according to the  <a href="https://redis.io/docs/stack/license/" > Redis Stack License. </a>
                 </div>

frontend/src/views/Header.tsx

@@ -1,85 +1,33 @@
-import React, { useState } from 'react';
-import { Navbar, Container, NavDropdown, Nav } from 'react-bootstrap';
 import { BASE_URL } from "../config";
-import { useNavigate } from 'react-router-dom';
-
-interface Props {
-}
+import '../styles/Header.css';
 
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
-export const Header = (props: Props) => {
-  const [searchText, setText] = useState("");
-  const Navigate = useNavigate();
-
-  // This function is called when the input changes
-  //  const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //    const enteredText = event.target.value;
-  //    setText(enteredText);
-  // };
-
+export const Header = () => {
   return (
     <header>
-      <div style={{ background: "#091a23", display: "flex", justifyContent: "space-between", alignItems: "center", padding: "25px" }}>
+      <div className="header">
         <img
           src={BASE_URL + `/data/redis-logo.png`}
           alt="Redis Logo"
-          style={{
-            height: '2rem',
-          }}>
+          className="header-logo">
         </img>
         <div>
           <a href='https://x.com/Redisinc'>
             <img
               src={"x-logo.svg"}
-              style={{ height: "1.5rem", width: "1.5rem", marginRight: "1rem" }}
+              className="header-icon-link"
             ></img>
           </a>
           <a href='https://github.com/redis-developer/redis-arXiv-search'>
             <img
               src={"github-mark-white.svg"}
-              style={{ height: "1.5rem", width: "1.5rem", marginRight: "1rem" }}
+              className="header-icon-link"
             ></img>
           </a>
-          <a className="btn" style={{ background: "#dcff1e" }}>Talk with us!</a>
+          <a className="btn header-cta">Talk with us!</a>
         </div>
       </div>
-
-      {/* <Navbar expand="lg" bg="dark" variant="dark" style={{ padding: '25px' }} >
-        <Container fluid>
-          <Navbar.Brand style={{ marginRight: "-30rem" }} href="#">
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="navbarScroll" />
-        <Navbar.Collapse id="navbarScroll" style={{top: "5px"}}>
-          <Nav
-            className="me-auto my-2 my-lg-0"
-            style={{ maxHeight: '175px'}}
-            navbarScroll
-          >
-            <NavDropdown title="About" id="navbarScrollingDropdown">
-              <NavDropdown.Item href="https://github.com/RedisVentures/redis-arXiv-search">Code</NavDropdown.Item>
-              <NavDropdown.Item href="https://datasciencedojo.com/blog/ai-powered-document-search/">Blog</NavDropdown.Item>
-              <NavDropdown.Item href="https://github.com/RedisVentures/redis-ai-resources">Redis AI Resources List</NavDropdown.Item>
-              <NavDropdown.Item href="https://redis.com/vss-meeting/" target="_blank">Talk With Us</NavDropdown.Item>
-              <NavDropdown.Divider />
-              <NavDropdown.Item href="https://redis.io/docs/interact/search-and-query/advanced-concepts/vectors/">
-                Vector Search Docs
-              </NavDropdown.Item>
-            </NavDropdown>
-          </Nav>
-          <Nav>
-            <Nav.Link className="btn btn-primary m-2" href="https://redis.com/vss-meeting/" target="_blank">
-              Talk With Us!
-            </Nav.Link>
-          </Nav>
-        </Navbar.Collapse>
-          <Nav>
-            <Nav.Link href="https://redis.com/vss-meeting/" target="_blank">
-              Talk With Us!
-            </Nav.Link>
-          </Nav>
-        </Container>
-      </Navbar> */}
     </header>
   );
 };

frontend/src/views/Home.tsx

@@ -11,14 +11,15 @@ import FormControl from '@mui/material/FormControl';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
 import ListItemText from '@mui/material/ListItemText';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Checkbox from '@mui/material/Checkbox';
 import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 
+import '../styles/Home.css';
+
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
@@ -93,9 +94,9 @@ export const Home = (props: Props) => {
           value={provider}
           onChange={handleChange}
         >
-          <FormControlLabel value="huggingface" control={<Radio />} label="all-mpnet-base-v2" />
-          <FormControlLabel value="openai" control={<Radio />} label="text-embedding-ada-002" />
-          <FormControlLabel value="cohere" control={<Radio />} label="embed-multilingual-v3.0" />
+          <FormControlLabel value="huggingface" control={<Radio />} label="all-mpnet-base-v2 (huggingface)" />
+          <FormControlLabel value="openai" control={<Radio />} label="text-embedding-ada-002 (openai)" />
+          <FormControlLabel value="cohere" control={<Radio />} label="embed-multilingual-v3.0 (cohere)" />
         </RadioGroup>
       </FormControl>
     );