From 50aff9f7b967650554d0ac7f49b8f5238f90f760 Mon Sep 17 00:00:00 2001
From: Alejandro Cabeza Romero <alex93cabeza@gmail.com>
Date: Wed, 23 Apr 2025 15:32:36 +0200
Subject: [PATCH] Improve stylings.

---
 .../uniswap/nomiswap/src/App.css              | 133 ++++++++++++++----
 .../uniswap/nomiswap/src/NavBar/NavBar.css    | 104 ++++++++++++--
 2 files changed, 194 insertions(+), 43 deletions(-)

diff --git a/sz-poc-offsite-2025/uniswap/nomiswap/src/App.css b/sz-poc-offsite-2025/uniswap/nomiswap/src/App.css
index 15d00a3..b55ba6b 100644
--- a/sz-poc-offsite-2025/uniswap/nomiswap/src/App.css
+++ b/sz-poc-offsite-2025/uniswap/nomiswap/src/App.css
@@ -1,71 +1,146 @@
+/* ===== Color Variables ===== */
+:root {
+  --bg-color: #f8f9fa;
+  /* Light neutral background */
+  --text-primary: #1a202c;
+  /* Dark slate for primary text */
+  --text-secondary: #4a5568;
+  /* Slightly lighter text */
+  --border-color: #e2e8f0;
+  /* Soft border color */
+  --accent-color: #dc2626;
+  /* Refined red for accents */
+  --hover-bg: #b91c1c;
+  /* Darker red for hover states */
+  --text-hover: #ffffff;
+  /* White text on colored bg */
+  --container-border: #cbd5e0;
+  /* Container border */
+  --input-bg: #ffffff;
+  /* White input backgrounds */
+  --border-radius: 6px;
+  /* Slightly rounded corners */
+}
+
+
+/* ===== Base Styles ===== */
 body {
-  background-color: #f4f4f4;
-  color: #555555;
-
-  font-family: Arial, Helvetica, sans-serif;
-
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-family: 'Space Grotesk', sans-serif;
   font-size: 15px;
-  font-weight: normal;
-
-  line-height: 1em;
+  line-height: 1.6em;
   margin: 0;
 }
 
+/* ===== Layout Containers ===== */
 .outer {
-  padding: 10px;
+  padding: 0.75rem;
 }
 
 .container {
   width: 80%;
-  margin: auto;
-  border: 5px #333333 solid;
-  padding: 10px;
-  border-radius: 25px;
-}
-
-.input {
-  width: 1;
-  color: #777;
-  padding: 8;
-  margin: 10;
-  width: 200;
+  margin: 2rem auto;
+  border: 2px solid var(--container-border);
+  padding: 1.25rem;
+  border-radius: 12px;
+  background: var(--input-bg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+/* ===== Form Elements ===== */
 .myform {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .myform input[type="text"],
-.myform textarea {
-  padding: 8px;
+.myform textarea,
+.input {
   width: 100%;
+  padding: 0.625rem 0.75rem;
+  margin: 0.5rem 0;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1rem;
+  color: var(--text-primary);
+  background: var(--input-bg);
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
 }
 
+.myform input[type="text"]:focus,
+.myform textarea:focus {
+  border-color: var(--accent-color);
+  background-color: #fff8f8;
+  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
+  outline: none;
+}
+
+/* ===== Column Layouts ===== */
 .column {
-  padding: 20px;
+  padding: 1.25rem;
   float: left;
   width: 50%;
+  box-sizing: border-box;
 }
 
 .column_aut {
-  padding: 20px;
+  padding: 1.25rem;
   float: left;
-  width: 33%;
+  width: 33.33%;
+  box-sizing: border-box;
 }
 
+/* ===== Components ===== */
 .Token_message {
   display: inline;
+  color: #2d3748;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .swap {
-  padding: 10px;
+  padding: 0.75rem 0;
 }
 
 .swap_button {
   float: right;
+  background-color: var(--accent-color);
+  color: white;
+  padding: 0.625rem 1.25rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.swap_button:hover {
+  background-color: #c53030;
+  transform: scale(1.03);
+}
+
+.swap_button:active {
+  transform: scale(0.98);
 }
 
 .markdown {
   width: 80%;
-  margin: auto;
+  margin: 2rem auto;
+  line-height: 1.6em;
 }
+
+@media (max-width: 768px) {
+
+  .column,
+  .column_aut {
+    width: 100%;
+    float: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
\ No newline at end of file
diff --git a/sz-poc-offsite-2025/uniswap/nomiswap/src/NavBar/NavBar.css b/sz-poc-offsite-2025/uniswap/nomiswap/src/NavBar/NavBar.css
index 9bad71f..9c35978 100644
--- a/sz-poc-offsite-2025/uniswap/nomiswap/src/NavBar/NavBar.css
+++ b/sz-poc-offsite-2025/uniswap/nomiswap/src/NavBar/NavBar.css
@@ -1,13 +1,40 @@
+/* ===== Color Variables ===== */
+:root {
+  --bg-color: #f8f9fa;
+  --text-primary: #1a202c;
+  --text-secondary: #4a5568;
+  /* Slightly lighter text */
+  --border-color: #e2e8f0;
+  /* Soft border color */
+  --accent-color: #dc2626;
+  /* Refined red for accents */
+  --hover-bg: #d32222;
+  /* Darker red for hover states */
+  --text-hover: #ffffff;
+  /* White text on colored bg */
+  --container-border: #cbd5e0;
+  /* Container border */
+  --input-bg: #ffffff;
+  /* White input backgrounds */
+  --border-radius: 6px;
+  /* Slightly rounded corners */
+}
+
+
+/* ===== Title Bar ===== */
 .Title {
-  background: #f4f4f4;
+  background: var(--bg-color);
   height: 50px;
   text-align: left;
   margin-left: 25%;
   font-size: 1rem;
+  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
+  color: var(--text-primary);
 }
 
+/* ===== Main Nav Container ===== */
 .NavbarItems {
-  background: #f4f4f4;
+  background: var(--bg-color);
   height: 80px;
   display: flex;
   justify-content: left;
@@ -16,19 +43,28 @@
   width: 75%;
   text-align: left;
   margin-left: 25%;
+  font-family: 'Inter', -apple-system, sans-serif;
 }
 
+/* ===== Logo Styles ===== */
 .navbar-logo {
-  color: rgb(226, 23, 23);
+  color: var(--accent-color);
   justify-self: start;
   margin-left: 0px;
   cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.navbar-logo:hover {
+  opacity: 0.9;
 }
 
 .logo {
   width: 230px;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
 }
 
+/* ===== Navigation Menu ===== */
 .nav-menu {
   display: grid;
   grid-template-columns: repeat(5, auto);
@@ -38,25 +74,65 @@
   justify-content: end;
   padding-top: 1rem;
   padding-left: 0rem;
-  font-size: 25px;
+  font-size: 1.1rem;
+  font-weight: 500;
 }
 
+/* ===== Link Styles ===== */
 .nav-links {
-  color: rgb(73, 73, 73);
+  color: var(--text-primary);
   text-decoration: none;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--border-radius);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-links:hover,
+.nav-links:focus-visible {
+  color: var(--text-hover);
+  background-color: var(--hover-bg);
+  text-decoration: none;
+  border-radius: var(--border-radius);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.nav-links:focus-visible {
+  outline: 2px dashed var(--accent-color);
+  outline-offset: 2px;
 }
 
 .nav-links-clicked {
-  color: white;
-  background-color: red;
+  color: var(--text-hover);
+  background-color: var(--accent-color);
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 4px rgba(229, 62, 62, 0.2);
 }
 
-.nav-links:hover {
-  color: white;
-  background-color: red;
-  text-decoration: none;
-  border-radius: 4px;
-  transition: all 0.2s ease-out;
+/* ===== Responsive Nav ===== */
+@media (max-width: 768px) {
+
+  .NavbarItems,
+  .Title {
+    margin-left: 0;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .nav-menu {
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 20px;
+    justify-content: center;
+  }
 }
+
+/* ===== Motion Reduction ===== */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
\ No newline at end of file