From fe8de18019763a1d774168aab6ad7deda2c78311 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 14 Jun 2023 17:12:08 +0200
Subject: [PATCH] feat: add submit button; some styles

---
 src/components/AddressBar.astro | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index 098ed6d..b21725b 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -8,13 +8,16 @@ const { url } = Astro.props;
 
 <div class="address-bar">
   <form>
-    <button type="button" id="app-home" name="app-home" onclick="window.location.href = '/';">
+    <button class="left-button" type="button" id="app-home" name="app-home" onclick="window.location.href = '/';">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
     </button>
     <input type="text" id="app-url" name="url" value={url} placeholder="Type a URL here" />
-    <button type="button" id="gh-link" onclick="window.location.href ='https://github.com/ayoayco/cozy';">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.375 8.174c.163-.4.688-1.987-.163-4.137c0 0-1.312-.413-4.3 1.625c-1.25-.35-2.587-.4-3.912-.4c-1.325 0-2.662.05-3.912.4c-2.988-2.05-4.3-1.625-4.3-1.625c-.85 2.15-.325 3.737-.163 4.137C2.612 9.262 2 10.662 2 12.362c0 6.437 4.162 7.887 9.975 7.887S22 18.799 22 12.362c0-1.7-.613-3.1-1.625-4.188ZM12 19.024c-4.125 0-7.475-.187-7.475-4.187c0-.95.475-1.85 1.275-2.588c1.338-1.225 3.625-.575 6.2-.575c2.588 0 4.85-.65 6.2.575c.813.738 1.275 1.625 1.275 2.588c0 3.987-3.35 4.187-7.475 4.187Zm-3.137-6.262c-.825 0-1.5 1-1.5 2.225s.674 2.237 1.5 2.237c.825 0 1.5-1 1.5-2.237c0-1.238-.675-2.225-1.5-2.225Zm6.274 0c-.825 0-1.5.987-1.5 2.225c0 1.237.675 2.237 1.5 2.237s1.5-1 1.5-2.237c0-1.238-.662-2.225-1.5-2.225Z"/></svg>
-    </a>
+    <button class="right-button" type="submit" id="submit">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z"/></svg>
+    </button>
+    <button class="right-button" type="button" id="gh-link" onclick="window.location.href = 'https://github.com/ayoayco/cozy'">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1227.83" height="1000" viewBox="0 0 1227.825 1000"><path fill="currentColor" d="M1078.94-.985c-33.192-.491-110.295 10.777-239.027 96.936c-70.161-17.535-144.812-26.188-219.591-26.188c-82.278 0-165.425 10.448-242.965 31.719C192.534-24.605 110.955 1.234 110.955 1.234c-53.258 133.183-20.347 231.788-10.344 256.277C38.014 325.069-.2 411.338-.2 517.07c0 79.822 9.085 151.416 31.281 213.653c1.231 4.803.832 3.732 2.906 7.844c4.89 12.884 10.327 25.39 16.438 37.468c2.094 4.346 4 7.563 4 7.563c62.395 116.307 185.396 191.438 404.244 215.028l330.995.375c233.392-23.144 345.386-98.499 396.994-215.591l3.281-7.625c4.89-11.828 9.153-24.135 20.813-65.562c11.659-41.427 16.875-113.172 16.875-193.185c0-114.755-43.1-206.577-113.092-276.434c12.231-39.48 28.57-127.158-16.313-239.402c0 0-6.293-1.995-19.281-2.188zM818.1 420.133c53.893-.117 100.057 9.136 134.717 45.499v.031c43.369 45.541 68.749 100.525 68.749 159.778c0 276.658-177.932 284.183-397.4 284.183c-219.506 0-397.4-38.336-397.4-284.183c0-58.861 25.009-113.516 67.843-158.872c71.451-75.59 192.365-35.562 329.558-35.562c70.423-.011 136.564-10.75 193.935-10.875zm-408.807 81.468c-45.666 0-82.687 61.741-82.687 137.936c0 76.206 37.019 137.967 82.687 137.967c45.666 0 82.687-61.761 82.687-137.967c0-76.184-37.019-137.881-82.687-137.936zm443.649 0c-45.666 0-82.687 61.741-82.687 137.936c0 76.206 37.019 137.967 82.687 137.967c45.666 0 82.687-61.761 82.687-137.967c0-76.184-37.019-137.881-82.687-137.936z"/></svg>
+    </button>
   </form>
 </div>
 
@@ -37,25 +40,27 @@ const { url } = Astro.props;
     padding: 0.5rem;
     text-align: center;
     border-radius: 5px;
-    border: 1px solid #555;
+    border: 1px solid #ccc;
     background-color: #f5f5f5;
-    box-shadow: 0 1px 3px 1px #ccc;
+    box-shadow: 0 1px 3px 1px #eee;
     display: flex;
 
     :global(input[type="text"]) {
       flex: 3;
-      background-color: transparent;
-      border: 0px;
+      background-color: white;
+      border-radius: 5px;
+      border: 1px solid #eee;
       padding: 0.5rem;
     }
 
     :global(button#app-home),
+    :global(button#submit),
     :global(button#gh-link) {
       border: 0px;
       background-color: transparent;
       padding: 0px;
       cursor: pointer;
-      color: #555;
+      color: #888;
 
       :global(svg) {
           border: 0px;
@@ -65,13 +70,11 @@ const { url } = Astro.props;
       }
     }
 
-    :global(button#app-home) {
+    :global(.left-button) {
       margin-right: 0.5rem;
     }
-    :global(button#gh-link) {
+    :global(.right-button) {
       margin-left: 0.5rem;
-      text-align: center;
     }
-
   }
 </style>