insert logos into app, add static asset loader

oslabs-beta · Apr 12, 2022 · 6f700d8 · 6f700d8
1 parent 0319d1c
commit 6f700d8
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/components/Launch.jsx b/src/components/Launch.jsx
@@ -13,6 +13,7 @@ import {
   TextField,
 } from '@mui/material';
 import { ipcRenderer } from 'electron';
+import Logo from '../assets/app-logo.png';
 
 export default function Launch() {
   const [brokers, setBrokers] = useState(1);
@@ -97,8 +98,7 @@ export default function Launch() {
   return (
     <center>
       <div id="launch-header">
-        {/* logo placeholder */}
-        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/100px-Wikimedia-logo.png"></img>
+        <img src={Logo}></img>
       </div>
       <form style={{ padding: '0px 40px' }} onSubmit={handleSubmit}>
         <h2>Cluster Broker Count</h2>
@@ -298,7 +298,7 @@ export default function Launch() {
         <FormGroup sx={{ mb: 4 }}>
           <FormControlLabel
             control={<Checkbox name="log_info" />}
-            label="Alert me"
+            label="Email me about key cluster issues"
             onChange={() => setEmailDisabled(!emailDisabled)}
           />
           <TextField

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -12,6 +12,7 @@ import {
 } from '@mui/material';
 import { Equalizer, Home, Settings, TrendingUp } from '@mui/icons-material';
 import { ipcRenderer } from 'electron';
+import WhiteIcon from '../assets/white-icon.png';
 
 export default function Sidebar() {
   const handleShutdown = () => {
@@ -21,11 +22,8 @@ export default function Sidebar() {
   return (
     <Drawer id="sidebar" variant="permanent">
       <center>
-        <img
-          id="main-logo"
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/100px-Wikimedia-logo.png"
-        ></img>
-        <h2>Kaffia</h2>
+        <img id="main-logo" src={WhiteIcon}></img>
+        <h2 style={{ marginTop: 0 }}>Kaffia</h2>
         <Button sx={{ mb: 3 }} onClick={handleShutdown} variant="contained">
           Stop Cluster
         </Button>

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -41,21 +41,25 @@ body::-webkit-scrollbar-thumb {
 }
 
 #launch-header {
-  height: 70px;
-  background-color: blue;
+  height: 90px;
+  background-color: white;
   position: sticky;
   z-index: 2;
   top: 0;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #launch-header > img {
   height: 70px;
 }
 
 #main-logo {
-  height: 100px;
-  width: 100px;
+  margin-top: 10px;
+  height: 150px;
+  width: 150px;
 }
 
 #loading {

diff --git a/webpack.config.js b/webpack.config.js
@@ -40,6 +40,12 @@ module.exports = {
         exclude: /node_modules/,
         use: ['style-loader', 'css-loader', 'sass-loader'],
       },
+      {
+        test: /\.(jpg|png|gif)$/,
+        use: {
+          loader: 'url-loader',
+        },
+      },
     ],
   },
   resolve: {