font

msveshnikov · Mar 18, 2024 · 1dda1f4 · 1dda1f4
1 parent edfad80
commit 1dda1f4
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,17 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="Chat with Gemini Pro" />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+            rel="stylesheet"
+        />
         <title>Allchat</title>
     </head>
     <body>

diff --git a/src/App.js b/src/App.js
@@ -162,15 +162,21 @@ function App() {
                             </ListItem>
                         ))}
                     </List>
-                    <ListItem button onClick={clearAllChatHistory} style={{ backgroundColor: "#ffcdd2" }}>
+                    <ListItem button onClick={clearAllChatHistory} style={{ color:"white", backgroundColor: "#F50057" }}>
                         <ListItemText primary="Clear All" />
                     </ListItem>
                 </div>
             </Drawer>
             <Container maxWidth="md" style={{ display: "flex", flexDirection: "column", height: "90vh" }}>
                 <Box flex={1} overflow="auto" padding={2} display="flex" flexDirection="column" ref={chatContainerRef}>
                     {chatHistory.map((chat, index) => (
-                        <Box key={index} display="flex" flexDirection="column" marginBottom={2}>
+                        <Box
+                            style={{ fontFamily: "PT Sans" }}
+                            key={index}
+                            display="flex"
+                            flexDirection="column"
+                            marginBottom={2}
+                        >
                             <Box alignSelf="flex-end" bgcolor="#d4edda" color="#155724" padding={1} borderRadius={2}>
                                 {chat.user}
                             </Box>

diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,5 @@
 body {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-        "Droid Sans", "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-
+import { ThemeProvider } from "@mui/material";
+import theme from "./theme";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+    <ThemeProvider theme={theme("light")}>
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>
+    </ThemeProvider>
 );
diff --git a/src/theme.js b/src/theme.js
@@ -2,17 +2,8 @@ import { createTheme } from "@mui/material/styles";
 
 const theme = (mode) =>
     createTheme({
-        palette: {
-            mode: mode,
-            primary: {
-                main: "#F50057",
-            },
-            secondary: {
-                main: "#673ab7",
-            },
-        },
         typography: {
-            fontFamily: ["cursive"].join(","),
+            fontFamily: "PT Sans, sans-serif",
         },
     });