design_frontend vagabond-systems#2

sextant/src/App.css

@@ -1,35 +1,9 @@
 .App {
   text-align: center;
+  font-family: Monospace;
 }
 
-.cards_container {
-  padding: 38px 55px;
-  margin: 100px;
-  position: center;
-  background-color: bisque;
-  border: #282c34;
-  border-radius: 15px;
-  box-shadow: inset;
-  width: 50vh;
-  /* height: 15vh; */
-}
 @media (prefers-reduced-motion: no-preference) {
-
-}
-
-.banner {
-  background-color: #282c34;
-  min-height: 20vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(20px + 5vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
 }
 
 @keyframes App-logo-spin {

sextant/src/App.js

@@ -1,33 +1,20 @@
+import React, { Component } from 'react';
 import './App.css';
+import Banner from './banner';
+import Exhibit from './exhibit';
 
-function Card(props) {
-  return (
-    <div className={'Card Card-' + props.color}>
-      <h1 classname="title">
-        {props.title}
-      </h1>
-      <p classname="content">
-        {props.content}
-      </p>
-    </div>
-  )
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <Banner bannerText="Sextant" />
+                <Exhibit name="Exhibit #1"></Exhibit>
+                <Exhibit name="Exhibit #222"></Exhibit>
+                <Exhibit name="Exhibit #4444"></Exhibit>
+                <Exhibit name="Exhibit #12324324: One more"></Exhibit>
+            </div>
+        );
+    }
 }
 
-function App() {
-  return (
-    <div className="App">
-      <div className="banner">
-        Sextant
-      </div>
-      <div className="cards_container">
-        <Card color="blue"
-          title="Card #1"
-          content="Information about Card#1 will be displayed here."
-        >
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+export default App;

sextant/src/banner.css

@@ -0,0 +1,8 @@
+.Banner {
+    padding: 2vw 2vw;
+    text-align: center;
+    font-weight: bold;
+    font-size: 2vw;
+    color: #ffffff;
+    background-color: #2b3976;
+}

sextant/src/banner.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './banner.css';
+
+class Banner extends Component {
+    render() {
+        return (
+            <div className="Banner">
+                <h1>{this.props.bannerText}</h1>
+            </div>
+        );
+    }
+}
+
+export default Banner;

sextant/src/exhibit.css

@@ -0,0 +1,26 @@
+.Exhibit {
+    float: left;
+    margin: 2vw;
+    padding: 0vw 2vw 0vw 2vw;
+    text-align: center;
+    color: #ffffff;
+    background-color: #0531f6;
+    border: 0.1vw solid #005266;
+    border-radius: 1vw;
+}
+
+.ExhibitHeading {
+    font-weight: bold;
+    font-size: 1.75vw;
+}
+
+.ExhibitContent {
+    margin: 0.5vw;
+    padding: 1vw 1vw 1vw 1vw;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.5vw;
+    color: #002933;
+    background-color: #9dff3c;
+    border-radius: 2vw;
+}

sextant/src/exhibit.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import './exhibit.css';
+
+class Exhibit extends Component {
+    render() {
+        return (
+            <div className="Exhibit">
+                <h2 className="ExhibitHeading">{this.props.name}</h2>
+                <div className="ExhibitContent">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Exhibit;

sextant/src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -11,7 +10,4 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+