Showing
9 changed files
with
92 additions
and
18 deletions
... | @@ -14,6 +14,7 @@ | ... | @@ -14,6 +14,7 @@ |
14 | "axios": "^0.27.2", | 14 | "axios": "^0.27.2", |
15 | "react": "^18.1.0", | 15 | "react": "^18.1.0", |
16 | "react-dom": "^18.1.0", | 16 | "react-dom": "^18.1.0", |
17 | + "react-icons": "^4.4.0", | ||
17 | "react-router-dom": "^6.3.0", | 18 | "react-router-dom": "^6.3.0", |
18 | "react-scripts": "5.0.1", | 19 | "react-scripts": "5.0.1", |
19 | "sass": "^1.51.0", | 20 | "sass": "^1.51.0", |
... | @@ -13533,6 +13534,14 @@ | ... | @@ -13533,6 +13534,14 @@ |
13533 | "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", | 13534 | "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", |
13534 | "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" | 13535 | "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" |
13535 | }, | 13536 | }, |
13537 | + "node_modules/react-icons": { | ||
13538 | + "version": "4.4.0", | ||
13539 | + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", | ||
13540 | + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", | ||
13541 | + "peerDependencies": { | ||
13542 | + "react": "*" | ||
13543 | + } | ||
13544 | + }, | ||
13536 | "node_modules/react-is": { | 13545 | "node_modules/react-is": { |
13537 | "version": "17.0.2", | 13546 | "version": "17.0.2", |
13538 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", | 13547 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", |
... | @@ -25963,6 +25972,12 @@ | ... | @@ -25963,6 +25972,12 @@ |
25963 | "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", | 25972 | "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", |
25964 | "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" | 25973 | "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" |
25965 | }, | 25974 | }, |
25975 | + "react-icons": { | ||
25976 | + "version": "4.4.0", | ||
25977 | + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", | ||
25978 | + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", | ||
25979 | + "requires": {} | ||
25980 | + }, | ||
25966 | "react-is": { | 25981 | "react-is": { |
25967 | "version": "17.0.2", | 25982 | "version": "17.0.2", |
25968 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", | 25983 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", | ... | ... |
... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
9 | "axios": "^0.27.2", | 9 | "axios": "^0.27.2", |
10 | "react": "^18.1.0", | 10 | "react": "^18.1.0", |
11 | "react-dom": "^18.1.0", | 11 | "react-dom": "^18.1.0", |
12 | + "react-icons": "^4.4.0", | ||
12 | "react-router-dom": "^6.3.0", | 13 | "react-router-dom": "^6.3.0", |
13 | "react-scripts": "5.0.1", | 14 | "react-scripts": "5.0.1", |
14 | "sass": "^1.51.0", | 15 | "sass": "^1.51.0", |
... | @@ -22,10 +23,17 @@ | ... | @@ -22,10 +23,17 @@ |
22 | "eject": "react-scripts eject" | 23 | "eject": "react-scripts eject" |
23 | }, | 24 | }, |
24 | "eslintConfig": { | 25 | "eslintConfig": { |
25 | - "extends": ["react-app", "react-app/jest"] | 26 | + "extends": [ |
27 | + "react-app", | ||
28 | + "react-app/jest" | ||
29 | + ] | ||
26 | }, | 30 | }, |
27 | "browserslist": { | 31 | "browserslist": { |
28 | - "production": [">0.2%", "not dead", "not op_mini all"], | 32 | + "production": [ |
33 | + ">0.2%", | ||
34 | + "not dead", | ||
35 | + "not op_mini all" | ||
36 | + ], | ||
29 | "development": [ | 37 | "development": [ |
30 | "last 1 chrome version", | 38 | "last 1 chrome version", |
31 | "last 1 firefox version", | 39 | "last 1 firefox version", | ... | ... |
... | @@ -7,14 +7,10 @@ import Topbar from "./components/Topbar"; | ... | @@ -7,14 +7,10 @@ import Topbar from "./components/Topbar"; |
7 | import ChatroomBox from "./components/ChatroomBox"; | 7 | import ChatroomBox from "./components/ChatroomBox"; |
8 | 8 | ||
9 | function App() { | 9 | function App() { |
10 | - const [chats, setChats] = useState(null); | ||
11 | - | ||
12 | - useEffect(() => {}, []); | ||
13 | - | ||
14 | return ( | 10 | return ( |
15 | <div> | 11 | <div> |
16 | <Topbar /> | 12 | <Topbar /> |
17 | - <h1>Chatroom page</h1> | 13 | + <h1>Weather Page (home)</h1> |
18 | <div></div> | 14 | <div></div> |
19 | 15 | ||
20 | <Bottombar /> | 16 | <Bottombar /> | ... | ... |
1 | import { NavLink } from "react-router-dom"; | 1 | import { NavLink } from "react-router-dom"; |
2 | // sytles | 2 | // sytles |
3 | import "../styles/bar.scss"; | 3 | import "../styles/bar.scss"; |
4 | +import { FaKiwiBird } from "react-icons/fa"; | ||
5 | +import { GiNestBirds } from "react-icons/gi"; | ||
6 | +import { SiThunderbird } from "react-icons/si"; | ||
4 | 7 | ||
5 | function Bottombar() { | 8 | function Bottombar() { |
6 | return ( | 9 | return ( |
7 | <div className="bottombar"> | 10 | <div className="bottombar"> |
8 | - <nav> | 11 | + <NavLink to="/tell"> |
9 | - <NavLink to="/">Chatroom</NavLink> |{" "} | 12 | + <FaKiwiBird /> |
10 | - <NavLink to="/userroom">Userroom</NavLink> | 13 | + </NavLink> |
11 | - </nav> | 14 | + <NavLink to="/users"> |
15 | + <GiNestBirds /> | ||
16 | + </NavLink> | ||
17 | + <NavLink to="/message"> | ||
18 | + <SiThunderbird /> | ||
19 | + </NavLink> | ||
12 | </div> | 20 | </div> |
13 | ); | 21 | ); |
14 | } | 22 | } |
15 | 23 | ||
24 | +// TODO: message route should be used with another server port | ||
25 | + | ||
16 | export default Bottombar; | 26 | export default Bottombar; | ... | ... |
1 | import { Link } from "react-router-dom"; | 1 | import { Link } from "react-router-dom"; |
2 | // styles | 2 | // styles |
3 | import "../styles/bar.scss"; | 3 | import "../styles/bar.scss"; |
4 | +import { TiWeatherPartlySunny } from "react-icons/ti"; | ||
5 | +import { AiFillSetting } from "react-icons/ai"; | ||
4 | 6 | ||
5 | function Topbar() { | 7 | function Topbar() { |
6 | return ( | 8 | return ( |
7 | <div className="topbar"> | 9 | <div className="topbar"> |
8 | - <Link to="/">LOGO</Link> | 10 | + <Link to="/" className="logo"> |
9 | - <div>Search Bar</div> | 11 | + <TiWeatherPartlySunny /> |
10 | - <Link to="/settings">Settings</Link> | 12 | + </Link> |
13 | + <Link to="/settings" className="settings"> | ||
14 | + <AiFillSetting /> | ||
15 | + </Link> | ||
11 | </div> | 16 | </div> |
12 | ); | 17 | ); |
13 | } | 18 | } | ... | ... |
... | @@ -6,8 +6,10 @@ import App from "./App"; | ... | @@ -6,8 +6,10 @@ import App from "./App"; |
6 | // routes | 6 | // routes |
7 | import Signup from "./routes/signup"; | 7 | import Signup from "./routes/signup"; |
8 | import Login from "./routes/login"; | 8 | import Login from "./routes/login"; |
9 | -import Userroom from "./routes/userroom"; | 9 | +import Users from "./routes/users"; |
10 | import Settings from "./routes/settings"; | 10 | import Settings from "./routes/settings"; |
11 | +import Tell from "./routes/tell"; | ||
12 | +import NotFound from "./routes/notfound"; | ||
11 | // styles | 13 | // styles |
12 | import "./styles/layout.scss"; | 14 | import "./styles/layout.scss"; |
13 | 15 | ||
... | @@ -20,13 +22,17 @@ root.render( | ... | @@ -20,13 +22,17 @@ root.render( |
20 | <Route exact path="/" element={<App />} /> | 22 | <Route exact path="/" element={<App />} /> |
21 | <Route exact path="/login" element={<Login />} /> | 23 | <Route exact path="/login" element={<Login />} /> |
22 | <Route exact path="/signup" element={<Signup />} /> | 24 | <Route exact path="/signup" element={<Signup />} /> |
23 | - <Route exact path="/userroom" element={<Userroom />} /> | 25 | + <Route exact path="/users" element={<Users />} /> |
24 | <Route exact path="/settings" element={<Settings />} /> | 26 | <Route exact path="/settings" element={<Settings />} /> |
27 | + <Route exact path="/tell" element={<Tell />} /> | ||
28 | + <Route path="*" element={<NotFound />} /> | ||
25 | </Routes> | 29 | </Routes> |
26 | </BrowserRouter> | 30 | </BrowserRouter> |
27 | </div> | 31 | </div> |
28 | ); | 32 | ); |
29 | 33 | ||
34 | +// path="/" is for Weather(main) page | ||
35 | + | ||
30 | // If you want to start measuring performance in your app, pass a function | 36 | // If you want to start measuring performance in your app, pass a function |
31 | // to log results (for example: reportWebVitals(console.log)) | 37 | // to log results (for example: reportWebVitals(console.log)) |
32 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals | 38 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals | ... | ... |
client/src/routes/tell.jsx
0 → 100644
... | @@ -2,11 +2,22 @@ | ... | @@ -2,11 +2,22 @@ |
2 | .bottombar { | 2 | .bottombar { |
3 | display: flex; | 3 | display: flex; |
4 | flex-direction: row; | 4 | flex-direction: row; |
5 | + justify-content: space-between; | ||
5 | align-items: center; | 6 | align-items: center; |
6 | - font-size: 1.3rem; | 7 | + text-align: center; |
8 | + padding: 10px; | ||
7 | 9 | ||
8 | a { | 10 | a { |
9 | - font-size: 2rem; | 11 | + width: 45%; |
12 | + height: 90%; | ||
13 | + text-decoration: none; | ||
14 | + color: #008b8b; | ||
15 | + } | ||
16 | + a:hover { | ||
17 | + color: #00ced1; | ||
18 | + } | ||
19 | + .logo { | ||
20 | + color: #008080; | ||
10 | } | 21 | } |
11 | 22 | ||
12 | * { | 23 | * { |
... | @@ -16,7 +27,25 @@ | ... | @@ -16,7 +27,25 @@ |
16 | 27 | ||
17 | .topbar { | 28 | .topbar { |
18 | margin-bottom: 0.5rem; | 29 | margin-bottom: 0.5rem; |
30 | + justify-content: space-between; | ||
31 | + border-bottom: 2px gray solid; | ||
32 | + a { | ||
33 | + font-size: 2.9rem; | ||
34 | + height: 3rem; | ||
35 | + } | ||
36 | + .logo { | ||
37 | + text-align: left; | ||
38 | + } | ||
39 | + .settings { | ||
40 | + text-align: right; | ||
41 | + } | ||
19 | } | 42 | } |
20 | .bottombar { | 43 | .bottombar { |
21 | margin-top: 0.5rem; | 44 | margin-top: 0.5rem; |
45 | + border-top: 2px gray solid; | ||
46 | + font-size: 1.5rem; | ||
47 | + height: 2.8rem; | ||
48 | + a { | ||
49 | + box-shadow: 3px 3px 3px 3px gray; | ||
50 | + } | ||
22 | } | 51 | } | ... | ... |
-
Please register or login to post a comment