style

.streamlit/config.toml

@@ -0,0 +1,2 @@
+[theme]
+base="light"

streamlit_app.py

@@ -19,7 +19,12 @@ def load_css(file_name):
         st.error(f"CSS file not found: {file_name}. Make sure it's in the same directory as app.py.")
     except Exception as e:
         st.error(f"Error loading CSS file {file_name}: {e}")
-        
+
+st.markdown("""
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+""", unsafe_allow_html=True)
 load_css("style.css")
 
 os.environ['GOOGLE_API_KEY'] = st.secrets['GOOGLE_API_KEY']
@@ -60,6 +65,14 @@ def main():
     """Main function that loops and can record audio and dispaly the messages from gemini"""
     st.title("Streamlit Voice Recorder")
 
+    logo_path = "zega_logo.svg"
+    if os.path.exists(logo_path):
+        with open(logo_path, "r", encoding="utf-8") as f:
+            svg_content = f.read()
+            
+        st.sidebar.markdown(svg_content,unsafe_allow_html=True)
+    else:
+        st.sidebar.warning("Logo zega_logo.PNG not found.")
     if "messages" not in st.session_state:
         st.session_state.messages = []
     

style.css

@@ -0,0 +1,72 @@
+body {
+	font-family: 'Inter Tight', Arial, Helvetica, sans-serif !important;
+	font-size: 14px !important;
+	text-align: left !important;
+}
+
+/* Headings */
+h1, h2, h3 {
+	font-family: "Space Grotesk", sans-serif !important;
+  font-optical-sizing: auto !important;
+	font-weight: 500 !important;
+  font-style: normal !important;
+}
+h1, h2 {
+	letter-spacing: -2px !important;
+}
+h1 {
+	font-size: 34px !important;
+}
+h2 {
+	font-size: 21px !important;
+}
+h3 {
+	font-size: 17px !important;
+}
+h4 {
+	font-size: 14px !important;
+}
+
+/* Butoane */
+
+button {
+	font-weight: 600 !important;
+}
+button:hover {
+	color: #FA6C03 !important;
+	border-color: #FA6C03 !important;
+}
+button:focus {
+	color: #fff !important;
+	background-color: #FA6C03 !important;
+}
+
+/* Buton sidebar */
+[data-testid="stSidebar"] .stButton>button {
+	background-color: #4169E1 !important;
+}
+
+/* Bara loading */
+.st-emotion-cache-1dp5vir {
+	background-image: linear-gradient(90deg, rgb(65, 105, 225), rgb(0, 255, 255)) !important;
+}
+
+/* Bara stanga */
+.st-emotion-cache-vmpjyt {
+	background-color: #f5f5f5 !important;
+}
+
+/* Select */
+.st-ae {
+	font-family: inherit !important;
+}
+
+/* File Select */
+.st-emotion-cache-1gulkj5 {
+	background-color: #f5f5f5 !important;
+}
+
+/* Other fonts */
+p {
+	font-family: 'Inter Tight', Arial, Helvetica, sans-serif !important;
+}