Merge pull request #30 from Vinyl-Davyl/ui-improvement

feat(UI): minor UI improvement on major playground and desktop responsiveness

src/App.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import { App as AntdApp, Typography, Col, Collapse, Row } from 'antd';
-import { Layout, theme } from 'antd';
+import { useEffect, useState } from "react";
+import { App as AntdApp, Typography, Col, Collapse, Row } from "antd";
+import { Layout, theme } from "antd";
 const { Header, Content } = Layout;
 
-import AgreementData from './AgreementData';
-import AgreementHtml from './AgreementHtml';
-import './App.css';
-import Errors from './Errors';
-import TemplateMarkdown from './TemplateMarkdown';
-import TemplateModel from './TemplateModel';
-import useAppStore from './store';
-import SampleDropdown from './SampleDropdown';
-import Links from './Links';
+import AgreementData from "./AgreementData";
+import AgreementHtml from "./AgreementHtml";
+import "./App.css";
+import Errors from "./Errors";
+import TemplateMarkdown from "./TemplateMarkdown";
+import TemplateModel from "./TemplateModel";
+import useAppStore from "./store";
+import SampleDropdown from "./SampleDropdown";
+import Links from "./Links";
 
 function App() {
   const init = useAppStore((state) => state.init);
@@ -27,63 +27,85 @@ function App() {
 
   useEffect(() => {
     void init();
-  }, [init])
+  }, [init]);
 
   const panels = [
     {
       key: "templateMark",
-      label: 'TemplateMark',
-      children: <TemplateMarkdown />
+      label: "TemplateMark",
+      children: <TemplateMarkdown />,
     },
     {
       key: "model",
-      label: 'Concerto Model',
-      children: <TemplateModel />
+      label: "Concerto Model",
+      children: <TemplateModel />,
     },
     {
       key: "data",
-      label: 'Preview Data',
-      children: <AgreementData />
-    }
-  ]
+      label: "Preview Data",
+      children: <AgreementData />,
+    },
+  ];
 
   return (
     <AntdApp>
       <Layout>
         <Layout>
-          <Header style={{ textAlign: 'center', padding: 0, background: colorBgContainer }}>
-            <Typography.Title level={2}>Template Playground (beta)</Typography.Title>
+          <Header
+            style={{
+              textAlign: "center",
+              padding: 0,
+              background: colorBgContainer,
+            }}
+          >
+            <Typography.Title level={2} style={{ fontWeight: 700 }}>
+              Template Playground{" "}
+              <span style={{ fontSize: "80%", color: "#87CEEB" }}>(BETA)</span>
+            </Typography.Title>
           </Header>
           <Content>
-            <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
+            <div
+              style={{
+                padding: 24,
+                minHeight: 360,
+                background: colorBgContainer,
+              }}
+            >
               <Row>
                 <Col span={4}>
-                  <SampleDropdown/>
+                  <SampleDropdown />
                 </Col>
                 <Col span={14}>
                   <Errors />
                 </Col>
                 <Col span={6}>
-                <Links/>
-                </Col>
-              </Row>
-              <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
-              <Row gutter={24}>
-                <Col span={16}>
-                  <Collapse defaultActiveKey={activePanel} onChange={onChange} items={panels} />
-                </Col>
-                <Col span={8}>
-                  <AgreementHtml />
+                  <Links />
                 </Col>
               </Row>
+              <div
+                style={{
+                  padding: 24,
+                  minHeight: 360,
+                  background: colorBgContainer,
+                }}
+              >
+                <Row gutter={24}>
+                  <Col span={16}>
+                    <Collapse
+                      defaultActiveKey={activePanel}
+                      onChange={onChange}
+                      items={panels}
+                    />
+                  </Col>
+                  <Col span={8}>
+                    <AgreementHtml />
+                  </Col>
+                </Row>
               </div>
             </div>
           </Content>
         </Layout>
       </Layout>
-      {/* <Footer style={{ textAlign: 'center' }}>
-        Accord Project
-      </Footer> */}
     </AntdApp>
   );
 }

src/Links.tsx

@@ -1,19 +1,33 @@
-import { Button, Space } from 'antd';
+import { Button, Space } from "antd";
 
 function Links() {
-  return <div style={{ paddingLeft: 40}}>
-    <Space>
-      <a href="https://github.com/accordproject/template-engine/blob/main/README.md" target="_blank" rel="noopener noreferrer">
-        <Button type="primary">Documentation</Button>
-      </a>
-      <a href="https://discord.com/invite/Zm99SKhhtA" target="_blank" rel="noopener noreferrer">
-        <Button type="primary">Community</Button>
-      </a>
-      <a href="https://github.com/accordproject/template-playground/issues" target="_blank" rel="noopener noreferrer">
-        <Button type="primary">Issues</Button>
-      </a>
-    </Space>
-  </div>
+  return (
+    <div style={{ paddingLeft: 10 }}>
+      <Space>
+        <a
+          href="https://github.com/accordproject/template-engine/blob/main/README.md"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button type="primary">Documentation</Button>
+        </a>
+        <a
+          href="https://discord.com/invite/Zm99SKhhtA"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button type="primary">Community</Button>
+        </a>
+        <a
+          href="https://github.com/accordproject/template-playground/issues"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button type="primary">Issues</Button>
+        </a>
+      </Space>
+    </div>
+  );
 }
 
 export default Links;