From 433643b9db8ddf5f2cba71c91685bc75cd82cbee Mon Sep 17 00:00:00 2001
From: ajaysi <ajay.calsoft@gmail.com>
Date: Mon, 3 Jun 2024 20:08:47 +0530
Subject: [PATCH] WIP - Streamlit UI, Porting CLI

---
 alwrity.py                           |   3 +-
 lib/workspace/alwrity_ui_styling.css | 122 +++++++++++++--------------
 2 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/alwrity.py b/alwrity.py
index 36ee2a0a..b6796b7f 100644
--- a/alwrity.py
+++ b/alwrity.py
@@ -20,7 +20,8 @@ from lib.utils.alwrity_streamlit_utils import (
 css_file_path = os.path.join('lib', 'workspace', 'alwrity_ui_styling.css')
 with open(css_file_path) as f:
     custom_css = f.read()
-
+# Set the page configuration
+st.set_page_config(page_title="Alwrity", layout="wide")
 # Inject custom CSS into the Streamlit app
 st.markdown(f'<style>{custom_css}</style>', unsafe_allow_html=True)
 
diff --git a/lib/workspace/alwrity_ui_styling.css b/lib/workspace/alwrity_ui_styling.css
index bc43cc51..3204b0f9 100644
--- a/lib/workspace/alwrity_ui_styling.css
+++ b/lib/workspace/alwrity_ui_styling.css
@@ -10,7 +10,7 @@ body {
     font-size: 2.5em;
     font-weight: bold;
     color: #1565C0;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     text-align: center;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
@@ -20,60 +20,22 @@ body {
     font-size: 1.75em;
     font-weight: bold;
     color: #1976D2;
-    margin-top: 40px;
+    margin-top: 20px;
     margin-bottom: 10px;
     text-align: center;
 }
 
-/* Styling for the application layout */
-.stApp {
-    margin-top: -80px;
-}
-
-/* Option box styling */
-.option-box {
-    border: 2px solid #e0e0e0;
-    padding: 20px;
-    border-radius: 10px;
-    margin-bottom: 20px;
-    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
-    background-color: #f5f5f5;
-}
-
-/* Custom button styling */
-.custom-button {
-    background: #1976D2;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 10px 2px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-    font-weight: bold;
-}
-
-.custom-button:hover {
-    background-color: #1565C0;
-    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-/* Tabs styling */
+/* Navigation tabs styling */
 .stTabs [role="tab"] {
     font-size: 1.2em;
     font-weight: bold;
     color: white;
     background: #1565C0;
-    padding: 10px;
+    padding: 12px 20px;
     margin: 5px;
-    border-radius: 5px;
+    border-radius: 8px;
     border: 2px solid #ddd;
-    transition: background 0.3s ease;
+    transition: background 0.3s ease, padding 0.3s ease;
 }
 
 .stTabs [role="tab"]:hover {
@@ -110,6 +72,59 @@ body {
     background-color: #f8f8f8;
 }
 
+/* Input fields styling */
+input[type="text"] {
+    width: 100%;
+    padding: 12px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    background-color: #f0f8ff;
+}
+
+/* Custom button styling */
+button {
+    background: #1976D2;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px 2px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #1565C0;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar-track {
+    background: #e1ebf9;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #90CAF9;
+    border-radius: 10px;
+    border: 3px solid #e1ebf9;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #64B5F6;
+}
+
+::-webkit-scrollbar {
+    width: 16px;
+}
+
 /* Radio button group styling */
 div.row-widget.stRadio > div {
     flex-direction: row;
@@ -141,22 +156,3 @@ div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
     color: #333;
 }
 
-/* Scrollbar styling */
-::-webkit-scrollbar-track {
-    background: #e1ebf9;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #90CAF9;
-    border-radius: 10px;
-    border: 3px solid #e1ebf9;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #64B5F6;
-}
-
-::-webkit-scrollbar {
-    width: 16px;
-}
-