From 667ade0185cb976d5ce7cfc0ac7388c1ecd1a2f2 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Wed, 7 Feb 2024 14:40:19 -0500 Subject: [PATCH] UI Base --- src/assets/images/belden-logo.png | Bin 0 -> 28501 bytes src/assets/stylesheets/app.scss | 23 +++++++++-- src/assets/stylesheets/home.scss | 7 ++++ src/assets/stylesheets/navbar.scss | 61 +++++++++++++++++++++++++++++ src/components/HomeComponent.js | 12 ++++++ src/components/NavBar.js | 31 +++++++++++++++ src/index.js | 39 +++++++++++++++++- src/routes/HomeRoute.js | 9 +++-- src/routes/SearchRoute.js | 18 +++++++++ src/routes/SettingsRoute.js | 18 +++++++++ 10 files changed, 210 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/belden-logo.png create mode 100644 src/assets/stylesheets/home.scss create mode 100644 src/assets/stylesheets/navbar.scss create mode 100644 src/components/HomeComponent.js create mode 100644 src/components/NavBar.js create mode 100644 src/routes/SearchRoute.js create mode 100644 src/routes/SettingsRoute.js diff --git a/src/assets/images/belden-logo.png b/src/assets/images/belden-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..4ab1d53e0d4187a94a43938914317a32c1bafaa4 GIT binary patch literal 28501 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 literal 0 HcmV?d00001 diff --git a/src/assets/stylesheets/app.scss b/src/assets/stylesheets/app.scss index a3e9b93..a33a678 100644 --- a/src/assets/stylesheets/app.scss +++ b/src/assets/stylesheets/app.scss @@ -1,5 +1,20 @@ * { - margin: 0px; - padding: 0px; - background-color: azure; -} \ No newline at end of file + margin: 0px; + padding: 0px; + background-image: linear-gradient(#004990, #002554); + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.container { + background-image: none; + margin: 20px; + padding: 0px; + width: calc(100% - 40px); + height: calc(100% - 40px); + outline: solid white 1px; + border-radius: 20px; + display: flex; + flex-direction: row; +} diff --git a/src/assets/stylesheets/home.scss b/src/assets/stylesheets/home.scss new file mode 100644 index 0000000..d30ad2d --- /dev/null +++ b/src/assets/stylesheets/home.scss @@ -0,0 +1,7 @@ +.home { + background-image: none; + background-color: white; + border-radius: 20px; + width: 80%; + height: 100%; +} diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss new file mode 100644 index 0000000..09a78b0 --- /dev/null +++ b/src/assets/stylesheets/navbar.scss @@ -0,0 +1,61 @@ +.navbar { + background-image: none; + width: 20%; + height: 100%; + display: flex; + position: relative; + border-radius: 20px; + flex-direction: column; + outline: white solid 1px; + border-radius: 20px; +} + +.navbar-top { + background-image: none; + width: 100%; + height: 14%; + padding: 5px; + display: flex; + justify-content: center; + align-items: center; + background-color: white; +} + +.navbar-top-logo { + background-image: none; + height: 120px; + width: auto; + aspect-ratio: 2333/1003; + background-color: transparent; + border-radius: 20px; +} + +.navbar-list { + background-image: none; + width: 100%; + height: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + margin: 0px; + padding: 0px; +} + +.navbar-list-item { + background-image: none; + width: 90%; + height: 10%; + margin: 20px 0px 20px 0px; + background-color: rgb(255, 255, 255); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar-list-item-label { + background-image: none; + width: auto; + height: auto; +} diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js new file mode 100644 index 0000000..48e92c3 --- /dev/null +++ b/src/components/HomeComponent.js @@ -0,0 +1,12 @@ +import React, { Component } from "react"; +import "../assets/stylesheets/home.scss"; + +export default class HomeComponent extends Component { + // constructor(props) { + // super(props); + // } + + render() { + return
; + } +} diff --git a/src/components/NavBar.js b/src/components/NavBar.js new file mode 100644 index 0000000..ddb40d4 --- /dev/null +++ b/src/components/NavBar.js @@ -0,0 +1,31 @@ +import React, { Component } from "react"; +import { NavLink } from "react-router-dom"; +import BeldenLogo from "../assets/images/belden-logo.png"; +import "../assets/stylesheets/navbar.scss"; + +export default class NavBar extends Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+
+ Belden +
+
    + + Home + + + Search + + + Settings + +
+
+ ); + } +} diff --git a/src/index.js b/src/index.js index cfa0389..85f7cf1 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,8 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import HomeRoute from "./routes/HomeRoute"; +import SearchRoute from "./routes/SearchRoute"; +import SettingsRoute from "./routes/SettingsRoute"; const root = ReactDOM.createRoot(document.getElementById("root")); @@ -11,10 +13,45 @@ const router = createBrowserRouter([ element: , // errorElement: , }, + { + path: "/home", + element: , + // errorElement: , + }, + { + path: "/search", + element: , + // errorElement: , + }, + { + path: "/settings", + element: , + // errorElement: , + }, ]); root.render( + + + Jukebox Draft UI (not styled yet) + + -); \ No newline at end of file +); diff --git a/src/routes/HomeRoute.js b/src/routes/HomeRoute.js index 7010ace..f4cb075 100644 --- a/src/routes/HomeRoute.js +++ b/src/routes/HomeRoute.js @@ -1,4 +1,6 @@ import React, { Component } from "react"; +import NavBar from "../components/NavBar"; +import HomeComponent from "../components/HomeComponent"; import "../assets/stylesheets/app.scss"; export default class HomeRoute extends Component { @@ -9,9 +11,10 @@ export default class HomeRoute extends Component { render() { return ( -
- +
+ +
); } -} \ No newline at end of file +} diff --git a/src/routes/SearchRoute.js b/src/routes/SearchRoute.js new file mode 100644 index 0000000..30a75a0 --- /dev/null +++ b/src/routes/SearchRoute.js @@ -0,0 +1,18 @@ +import React, { Component } from "react"; +import NavBar from "../components/NavBar"; +import "../assets/stylesheets/app.scss"; + +export default class SearchRoute extends Component { + constructor(props) { + super(props); + document.title = "ITR - Search"; + } + + render() { + return ( +
+ +
+ ); + } +} diff --git a/src/routes/SettingsRoute.js b/src/routes/SettingsRoute.js new file mode 100644 index 0000000..95e1617 --- /dev/null +++ b/src/routes/SettingsRoute.js @@ -0,0 +1,18 @@ +import React, { Component } from "react"; +import NavBar from "../components/NavBar"; +import "../assets/stylesheets/app.scss"; + +export default class SettingsRoute extends Component { + constructor(props) { + super(props); + document.title = "ITR - Settings"; + } + + render() { + return ( +
+ +
+ ); + } +}