From 19fc71cc827ee5b17d86bee26cc271a320ea8c00 Mon Sep 17 00:00:00 2001
From: D3vision <d3visionyt@gmail.com>
Date: Sat, 1 Apr 2023 15:22:21 +0200
Subject: [PATCH] - Changed proxy to port 5000 - Role rate limits are now a
 grid of cards - Check boxes are now toggles

---
 src/components/RateLimitsView.js | 24 +++++++++++---------
 src/css/App.css                  | 38 ++++++++++++++++++++++++++++++--
 src/setupProxy.js                |  2 +-
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/components/RateLimitsView.js b/src/components/RateLimitsView.js
index 9666690..f7262d2 100644
--- a/src/components/RateLimitsView.js
+++ b/src/components/RateLimitsView.js
@@ -1,32 +1,34 @@
-import React from "react";
+import React, {Fragment} from "react";
 
 const RateLimit = ({route, limit}) => {
 
-    return <div>
-        <p><b>{route}</b></p>
+    return <Fragment>
+            <p><b>{route}</b></p>
             <label>Limit</label>
             <input min={0} defaultValue={limit.limit} type='number' />
             <label>Time</label>
             <input min={0} defaultValue={limit.time} type='number' />
             <label>Enabled</label>
-            <input defaultValue={!limit.disabled} type='checkbox' />
-    </div>;
+            <div className="check-box">
+                <input defaultValue={!limit.disabled} type='checkbox' />
+            </div>
+        </Fragment>;
 };
 
 export const RateLimits = ({ rateLimits }) => {
     
     const routes = Object.keys(rateLimits);
     const elements = routes.map((route, index) => {
-        return <li key={index}>
-            <RateLimit {...{route, limit:rateLimits[route]}} />
-        </li>;
+        return <div key={index} className="card">
+            <RateLimit {...{route, limit:rateLimits[route], index}} />
+        </div>;
     });
 
-    return <div>
+    return <div className='col-6-lg col-12'>
         <h2>Rate Limits</h2>
-        <ul>
+        <div className="flex flex-wrap">
             {elements}
-        </ul>
+        </div>
         
         <code>
             {JSON.stringify(rateLimits, null, 4)}
diff --git a/src/css/App.css b/src/css/App.css
index adf4922..a76c2b9 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -78,7 +78,7 @@ header {
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
+  bottom: -10px;
   left: 0;
   visibility: hidden;
   opacity: 0;
@@ -101,4 +101,38 @@ header {
   to {
       transform: rotate(359deg);
   }
-}
\ No newline at end of file
+}
+
+.check-box input[type="checkbox"] {
+  position: relative;
+  appearance: none;
+  width: 40px;
+  height: 20px;
+  background: #ccc;
+  border-radius: 50px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: 0.4s;
+}
+
+.check-box input:checked[type="checkbox"] {
+  background: var(--color-primary);
+}
+
+.check-box input[type="checkbox"]::after {
+  position: absolute;
+  content: "";
+  width: 20px;
+  height: 20px;
+  top: 0;
+  left: 0;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  transform: scale(1.1);
+  transition: 0.4s;
+}
+
+.check-box input:checked[type="checkbox"]::after {
+  left: 50%;
+}
diff --git a/src/setupProxy.js b/src/setupProxy.js
index 45365ed..7901416 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -4,7 +4,7 @@ module.exports = (app) => {
     app.use(
         '/api',
         createProxyMiddleware({
-            target: 'http://localhost:4000',
+            target: 'http://localhost:5000',
             changeOrigin: true
         })
     );