change design for ConfigurationPage, use Ant Design

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.3.7",
     "@glidejs/glide": "^3.6.0",
     "@google-cloud/text-to-speech": "^5.0.0",
     "@stomp/stompjs": "^7.0.0",

src/components/ConfigurationPage/Toolbar.tsx

@@ -32,13 +32,6 @@ export default function Toolbar({ page }: { page: Page }) {
         <span className="material-symbols-sharp">language</span>
         <span className="toolbar-button-title">Donation page</span>
       </button>
-      <button
-        className={`toolbar-button ${page === Page.GATEWAYS ? "active" : ""}`}
-        onClick={() => navigate(`/configuration/gateways`)}
-      >
-        <span className="material-symbols-sharp">credit_card</span>
-        <span className="toolbar-button-title">Payment Gateways</span>
-      </button>
     </div>
   );
 }

src/components/ConfigurationPage/WidgetConfiguration.tsx

@@ -10,9 +10,13 @@ import "./css/WidgetSettings.css";
 import PaymentAlertSettings from "./settings/PaymentAlertsSettings";
 import { WidgetsContext } from "./WidgetsContext";
 import BaseSettings from "./settings/BaseSettings";
-import { socket } from "../../socket";
+import { publish, socket } from "../../socket";
 import ReelWidgetSettings from "../../pages/Reel/ReelWidgetSettings";
 import { log } from "../../logging";
+import { Button } from "antd";
+import { useLoaderData } from "react-router";
+import { WidgetData } from "../../types/WidgetData";
+import TextAlertButton from "./settings/TestAlertButton";
 
 interface WidgetConfigurationProps {
   id: string;
@@ -26,9 +30,9 @@ function getSettingsWidget(id: string, type: string, onChange: Function) {
     case "payment-alerts":
       return <PaymentAlertSettings id={id} onChange={onChange} />;
     case "reel":
-      return <ReelWidgetSettings id={id}/>;
+      return <ReelWidgetSettings id={id} />;
     default:
-      return <BaseSettings id={id}/>;
+      return <BaseSettings id={id} />;
   }
 }
 
@@ -45,6 +49,7 @@ export default function WidgetConfiguration({
   reload,
 }: WidgetConfigurationProps) {
   const { config, setConfig, updateConfig } = useContext(WidgetsContext);
+  const { conf } = useLoaderData() as WidgetData;
   const [settingsHidden, setSettingsHidden] = useState<boolean>(true);
   const [hasChanges, setHasChanges] = useState<boolean>(false);
   const [showWidgetMenu, setShowWidgetMenu] = useState(false);
@@ -88,7 +93,7 @@ export default function WidgetConfiguration({
         value: prop.value,
       };
     });
-    log.debug({updated: props}, "sending props");
+    log.debug({ updated: props }, "sending props");
     const request = {
       name: newName,
       config: {
@@ -102,6 +107,24 @@ export default function WidgetConfiguration({
     );
   }
 
+  function getProperty(name: string): any {
+    return config.get(id)?.properties.find((prop) => prop.name === name)?.value;
+  }
+
+  function getRndInteger(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+  function runReel() {
+    const optionList = getProperty("optionList");
+    const choosenIndex = getRndInteger(0, optionList.length - 1);
+    publish(conf.topic.reel, {
+      type: "trigger",
+      selection: optionList[choosenIndex],
+      widgetId: id,
+    });
+  }
+
   return (
     <div className={`widget ${settingsHidden ? "collapsed" : "extended"}`}>
       <div className="widget-header">
@@ -116,49 +139,51 @@ export default function WidgetConfiguration({
             />
           )}
         </div>
-        <div className="widget-button-list">
-          {hasChanges && (
-            <>
-              <button
-                className="widget-button widget-button-accept"
-                onClick={() => {
-                  setHasChanges(false);
-                  setRenaming(false);
-                  saveSettings().then((ignore) => reload.apply({}));
-                  socket.publish({
-                    destination: "/topic/commands",
-                    body: JSON.stringify({
-                      id: id,
-                      command: "reload",
-                    }),
-                  });
-                }}
-              >
-                <span className="material-symbols-sharp">check</span>
-              </button>
-              <button
-                className="widget-button widget-button-decline"
-                onClick={() => {
-                  setHasChanges(false);
-                  setRenaming(false);
-                  reload.apply({});
-                }}
-              >
-                <span className="material-symbols-sharp">close</span>
-              </button>
-            </>
-          )}
-          {!hasChanges && (
-            <>
+        {!hasChanges && type === "reel" && <Button onClick={runReel} className="oda-btn-default">Крутить</Button>}
+        {!hasChanges && type === "payment-alerts" && <TextAlertButton config={config}/>}
+        {hasChanges && (
+          <>
+            <button
+              className="widget-button widget-button-accept"
+              onClick={() => {
+                setHasChanges(false);
+                setRenaming(false);
+                saveSettings().then((ignore) => reload.apply({}));
+                socket.publish({
+                  destination: "/topic/commands",
+                  body: JSON.stringify({
+                    id: id,
+                    command: "reload",
+                  }),
+                });
+              }}
+            >
+              <div className="blinker">Сохранить</div>
+            </button>
+            <button
+              className="widget-button widget-button-decline"
+              onClick={() => {
+                setHasChanges(false);
+                setRenaming(false);
+                reload.apply({});
+              }}
+            >
+              <div className="blinker">Отменить</div>
+            </button>
+          </>
+        )}
+        {!hasChanges && (
+          <>
+            <div className="widget-button-list">
               <button
                 onClick={() => setShowWidgetMenu(!showWidgetMenu)}
                 className="widget-button widget-button-more"
               >
-                <span className="material-symbols-sharp">menu</span>
+                <span className="material-symbols-sharp">more_vert</span>
               </button>
-            </>
-          )}
-        </div>
+            </div>
+          </>
+        )}
       </div>
       <div ref={menuRef}>
         <div

src/components/ConfigurationPage/css/Toolbar.css

@@ -1,7 +1,8 @@
 .toolbar {
   position: fixed;
   height: 100%;
-  width: 250px;
+  width: 200px;
+  border-right: 1px solid #674afd;
 }
 
 .toolbar .material-symbols-sharp {
@@ -16,22 +17,20 @@
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
-  margin-left: 10px;
+  padding-left: 10px;
   margin-top: 10px;
   padding-top: 8px;
   padding-bottom: 8px;
-  width: 90%;
+  width: 100%;
   text-align: left;
 }
 
 .toolbar-button:hover {
 	background: #111529;
-  border-radius: 5px;
 }
 
 .toolbar-button.active {
   background: #684aff;
-  border-radius: 5px;
 }
 
 .toolbar-title {

src/components/ConfigurationPage/css/Widget.css

@@ -1,34 +1,39 @@
 .widget {
+  max-width: 900px;
   background-color: #2b3566;
   border-radius: 5px;
   margin-top: 10px;
   border: 1px solid #674afd;
   position: relative;
 }
 
-.widget-settings .ant-tabs-top >.ant-tabs-nav::before {
+.widget-settings .ant-tabs-top > .ant-tabs-nav::before {
   border-bottom: 1px solid #674afd;
 }
 
-.widget-settings .ant-tabs-card >.ant-tabs-nav .ant-tabs-tab-active{
+.widget-settings .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
   background-color: #684aff;
   border: 1px solid #684aff;
-
 }
 
-.widget-settings .ant-tabs-card >.ant-tabs-nav .ant-tabs-tab {
+.widget-settings .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
   border: 1px solid #684aff;
 }
 
-.widget-settings .ant-tabs-card >.ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn{
+.widget-settings
+  .ant-tabs-card
+  > .ant-tabs-nav
+  .ant-tabs-tab-active
+  .ant-tabs-tab-btn {
   color: white;
 }
 
 .widget-header {
   display: flex;
   border-radius: 5px;
-  background-image: linear-gradient(180deg, #0c122e, #2b3566);
+  /* background-image: linear-gradient(180deg, #0c122e, #2b3566); */
   justify-content: space-between;
+  align-items: baseline;
   padding-left: 15px;
   padding-right: 15px;
   user-select: none;
@@ -145,18 +150,19 @@
   /* background-color: #684aff; */
   background-color: #2b3566;
   margin-left: 10px;
-	color: #45d3c2;
-	border-bottom: 2px solid #684aff;
+  color: #45d3c2;
+  border-bottom: 2px solid #684aff;
 }
 
 .new-name-input:focus {
   outline: none;
 }
 
 .audio-button-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .sound-container {
@@ -167,15 +173,15 @@
 }
 
 .current-sound {
-	display: inline-block;
-	padding-top: 5px;
-	vertical-align: middle;
-	margin-right: 20px;
-	margin-left: 10px;
+  display: inline-block;
+  padding-top: 5px;
+  vertical-align: middle;
+  margin-right: 20px;
+  margin-left: 10px;
 }
 
 .current-sound:hover {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .audio-name {
@@ -185,30 +191,33 @@
 }
 
 .new-alert.payment-alerts-previews-item .payment-alert-image-preview {
-	border: none;
-	background-color: #2b3566;
-	color: #684aff;
+  border: none;
+  background-color: #2b3566;
+  color: #684aff;
 }
 
 .new-alert.payment-alerts-previews-item .payment-alert-image-preview:hover {
   background-image: linear-gradient(180deg, #0c122e, #2b3566);
 }
 
 .new-alert.payment-alerts-previews-item .material-symbols-sharp {
-	font-size: 60px;
+  font-size: 60px;
 }
 
 .alert-delete-button {
-	position: absolute;
-	top: 12px;
-	right: 12px;
-	padding-bottom: 1px;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding-bottom: 1px;
 }
+
 .alert-delete-button .material-symbols-sharp {
-	vertical-align:middle;
+  vertical-align: middle;
 }
 
 .alert-delete-button:hover {
-	background-color: #684aff;
-	cursor: pointer;
+  cursor: pointer;
+  color: white;
+  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 9px 0;
+  transform: translateY(-2px);
 }