Update layout styles

projkov · Jun 30, 2024 · f7f5a32 · f7f5a32
1 parent cea6fbb
commit f7f5a32
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 37 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,5 @@
 .App {
   text-align: center;
-  position: relative;
   height: 100vh;
 }
 
@@ -45,13 +44,13 @@ button {
   min-width: 50px;
   min-height: 50px;
   color: #FFFFFF;
-  background-color: #4CABA6;
+  background-color: #F2C849;
   border: 0px;
   border-radius: 8px;
 }
 
 button:hover {
-  background-color: #1B7F7A;
+  background-color: #F27127;
   cursor: pointer;
 }
 
@@ -63,27 +62,21 @@ button:disabled {
 .input {
   width: 100%;
   padding: 10px;
-  border: 2px solid #4CABA6;
+  border: 2px solid #03588C;
   border-radius: 5px;
   font-size: 16px;
 }
 
 .input:focus {
-  border-color: #1B7F7A;
+  border-color: #F244A4;
   outline: none;
-  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
+  /* box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); */
 }
 
 .buttonsBlock {
-  position: absolute;
-  right: 25px;
-  bottom: 25px;
   display: flex;
   flex-direction: row;
   gap: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: rgba(242, 205, 172, .6);
 }
 
 .resourceBlock {
@@ -97,4 +90,53 @@ button:disabled {
 .editorWrapper {
   padding-top: 12px;
   height: 100vh;
+}
+
+.mainContainer {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 100px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: rgba(4, 217, 217, 0.1);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 48px;
+  padding: 12px;
+  background-color: rgba(4, 217, 217, 0.5);
+}
+
+.searchBlock {
+  display: flex;
+  width: 100%;
+}
+
+.editor {
+  height: 100vh;
+}
+
+.logo {
+  width: 50px;
+  border-radius: 8px;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import "allotment/dist/style.css";
 import { Play, ShareFat, FileArrowDown, Info } from "@phosphor-icons/react";
 import Loader from './components/loader';
 import { Modal } from './components/Modal';
+import logo from './assets/logo.png';
 
 const App: React.FC = () => {
   const { url, handleUrlChange, handleFetch,
@@ -25,35 +26,46 @@ const App: React.FC = () => {
           <p><a href="https://github.com/beda-software/fhirpath-py" target="_blank" rel="noreferrer">FHIRPath</a> engine developed by <a href="https://beda.software" target="_blank" rel="noreferrer">Beda Software</a></p>
         </>
       </Modal>
-      <Allotment defaultSizes={[550, 250]}>
-        <>
-          <div className="resourceBlock">
-            <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
-            <button onClick={handleFetch} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
-          </div>
-          <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
-        </>
-        <div style={{ height: '100vh' }}>
-          <Allotment defaultSizes={[100, 300]} vertical>
-            <div className='editorWrapper'>
-              <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
+      <div className='mainContainer'>
+        <div className='sidebar'>
+          <img src={logo} alt="Logo" className='logo' />
+          <button onClick={() => setInfoModalOpen(true)}><Info fontSize={24} /></button>
+        </div>
+        <div className='content'>
+          <div className='header'>
+            <div className='searchBlock'>
+              <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
             </div>
-
-            <div className='editorWrapper'>
-              <Editor defaultLanguage="json" value={result} options={{
-                formatOnPaste: true,
-                formatOnType: true,
-                readOnly: true,
-              }} />
+            <div className="buttonsBlock">
+              <button onClick={handleFetch} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
+              <button onClick={handleExecute} disabled={!isExecuteActive}><Play fontSize={24} /></button>
+              <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
             </div>
-          </Allotment>
+          </div>
+          <div className='editor'>
+            <Allotment defaultSizes={[550, 250]}>
+              <div className='editorWrapper'>
+                <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
+              </div>
+              <div style={{ height: '100vh' }}>
+                <Allotment defaultSizes={[100, 300]} vertical>
+                  <div className='editorWrapper'>
+                    <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
+                  </div>
+                  <div className='editorWrapper'>
+                    <Editor defaultLanguage="json" value={result} options={{
+                      formatOnPaste: true,
+                      formatOnType: true,
+                      readOnly: true,
+                    }} />
+                  </div>
+                </Allotment>
+              </div>
+            </Allotment>
+          </div>
         </div>
-      </Allotment>
-      <div className="buttonsBlock">
-        <button onClick={() => setInfoModalOpen(true)}><Info fontSize={24} /></button>
-        <button onClick={handleExecute} disabled={!isExecuteActive}><Play fontSize={24} /></button>
-        <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
       </div>
+
     </div>
   );
 };

diff --git a/src/assets/logo.png b/src/assets/logo.png