- Changed proxy to port 5000

- Role rate limits are now a grid of cards
- Check boxes are now toggles

src/components/RateLimitsView.js

@@ -1,32 +1,34 @@
-import React from "react";
+import React, {Fragment} from "react";
 
 const RateLimit = ({route, limit}) => {
 
-    return <div>
+    return <Fragment>
-        <p><b>{route}</b></p>
+            <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 className="check-box">
-    </div>;
+                <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}>
+        return <div key={index} className="card">
-            <RateLimit {...{route, limit:rateLimits[route]}} />
+            <RateLimit {...{route, limit:rateLimits[route], index}} />
-        </li>;
+        </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)}

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;
@@ -102,3 +102,37 @@ header {
       transform: rotate(359deg);
   }
 }
+
+.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%;
+}

src/setupProxy.js

@@ -4,7 +4,7 @@ module.exports = (app) => {
     app.use(
         '/api',
         createProxyMiddleware({
-            target: 'http://localhost:4000',
+            target: 'http://localhost:5000',
             changeOrigin: true
         })
     );