Hot Fix - For Dynamic Logo Sizes

Its4Nik · Aug 26, 2024 · addebd1 · addebd1
1 parent 74af4b1
commit addebd1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
 
 <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="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -22,13 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+  <title>Dockstat</title>
 </head>
 
 <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 

diff --git a/src/components/ContainerStats.js b/src/components/ContainerStats.js
@@ -3,6 +3,7 @@ import { FaMemory, FaMicrochip, FaArrowDown, FaArrowUp, FaLink } from 'react-ico
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './ContainerStats.css';
+import './LogoSizes.css'
 
 function formatBytesToMB(bytes) {
     return (bytes / (1024 * 1024)).toFixed(2);

diff --git a/src/components/LogoSizes.css b/src/components/LogoSizes.css
@@ -0,0 +1,24 @@
+.w-12 {
+    width: 3rem;
+    /* 48px */
+}
+
+.w-16 {
+    width: 4rem;
+    /* 64px */
+}
+
+.w-20 {
+    width: 5rem;
+    /* 80px */
+}
+
+.w-24 {
+    width: 6rem;
+    /* 96px */
+}
+
+.w-32 {
+    width: 8rem;
+    /* 128px */
+}