refactor: frame design changes

playground/src/App.js

@@ -1,10 +1,20 @@
-import React from "react";
+import React, {useEffect} from "react";
 import AppRouter from "./router/Router";
 import {Layout} from "./utility/context/Layout"
 import {Provider} from 'react-redux'
 import {ConfigProvider, theme} from 'antd';
 
 function App({store}) {
+
+    const params = new URLSearchParams(window.location.search);
+
+    useEffect(() => {
+        let p = params.get('t')
+        if (p && p === "f") {
+            document.documentElement.style.setProperty('--background-base', "#000000");
+        }
+    }, []);
+
     return (
         <ConfigProvider
             theme={{

playground/src/_assets/less/App.less

@@ -444,10 +444,17 @@ code {
   background-color: #141517 !important;
 }
 
+.wasm-loader-background {
+  background-color: #000000;
+  opacity: 1;
+  background-image: radial-gradient(#434343 0.55px, #000000 0.55px);
+  background-size: 11px 11px;
+}
+
 .spot-background {
-  background-color: #141517;
+  background-color: var(--background-base);
   opacity: 1;
-  background-image: radial-gradient(#434343 0.55px, #141517 0.55px);
+  background-image: radial-gradient(#434343 0.55px, var(--background-base) 0.55px);
   background-size: 11px 11px;
 }
 
@@ -476,3 +483,7 @@ code {
 .ant-radio-wrapper .ant-radio-inner::after{
   background-color: var(--background-base) !important;
 }
+
+.ant-radio-button-wrapper{
+  background-color: var(--background-base) !important;
+}

playground/src/layout/sides/outputs/frameOutput.js

@@ -12,7 +12,7 @@ import {shallowEqual, useSelector} from "react-redux";
 import Share from "../../components/Modals/Share";
 
 function FrameOutput(props) {
-    const [selected, setSelected] = useState('schema');
+    const [selected, setSelected] = useState('model');
     const shape = useSelector((state) => state.shape, shallowEqual);
 
     const [shareModalVisibility, setShareModalVisibility] = React.useState(false);
@@ -52,8 +52,8 @@ function FrameOutput(props) {
 
             <div className="ml-12 mr-12">
                 <div className="mt-12 mb-12">
-                    <Radio.Group defaultValue="schema" buttonStyle="solid" onChange={onChange}>
-                        <Radio.Button value="schema">Schema</Radio.Button>
+                    <Radio.Group defaultValue="model" buttonStyle="solid" onChange={onChange}>
+                        <Radio.Button value="model">Model</Radio.Button>
                         <Radio.Button value="data">Data</Radio.Button>
                         <Radio.Button value="visualizer">Visualizer</Radio.Button>
                         <Radio.Button value="enforcement">Enforcement</Radio.Button>
@@ -64,8 +64,8 @@ function FrameOutput(props) {
                 </div>
                 {!props.loading &&
                     <>
-                        <AuthorizationModel title="Authorization Model" hidden={selected !== 'schema'} isReady={isReady} initialValue={props.shape.schema}/>
-                        <AuthorizationData title="Authorization Data" hidden={selected !== 'data'} isModelReady={isModelReady} initialValue={props.shape.relationships}/>
+                        <AuthorizationModel title="Model" hidden={selected !== 'model'} isReady={isReady} initialValue={props.shape.schema}/>
+                        <AuthorizationData title="Data" hidden={selected !== 'data'} isModelReady={isModelReady} initialValue={props.shape.relationships}/>
                         <Visualizer title="Visualizer" hidden={selected !== 'visualizer'}/>
                         <Enforcement title="Enforcement" hidden={selected !== 'enforcement'}/>
                     </>

playground/src/layout/sides/particials/subjectFilter.js

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import {Alert, Button, Input, Spin, Typography} from "antd";
-import {FilterEntity, FilterSubject} from "../../../services/permission";
+import {FilterSubject} from "../../../services/permission";
 
 const {Paragraph} = Typography;
 

playground/src/loadWasm/index.tsx

@@ -23,7 +23,7 @@ export const LoadWasm: React.FC<React.PropsWithChildren<{}>> = (props) => {
 
     if (isLoading) {
         return (
-            <div className="spot-background h-screen">
+            <div className="wasm-loader-background h-screen">
                 <div className="center-of-screen">
                     <SVG src={toAbsoluteUrl("/media/svg/rocket.svg")}/>
                 </div>

playground/src/pkg/Editor/theme.js

@@ -1,4 +1,5 @@
 function Theme() {
+    let bg = window.getComputedStyle(document.documentElement).getPropertyValue('--background-base').trim()
     return {
         base: 'vs-dark',
         inherit: true,
@@ -11,7 +12,7 @@ function Theme() {
             {token: 'type', foreground: '93F1EE'},
         ],
         colors: {
-            "editor.background": '#141517',
+            "editor.background": bg,
         }
     }
 }