icons

matterofabstract · Jul 14, 2023 · e79407b · e79407b
1 parent a84e33e
commit e79407b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 24 deletions.
diff --git a/src/lib/IconEdit.svelte b/src/lib/IconEdit.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="15"
+  height="15"
+  viewBox="0 0 24 24"
+  fill="#585858"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="feather feather-edit-2"
+>
+  <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+</svg>
diff --git a/src/lib/IconSearch.svelte b/src/lib/IconSearch.svelte
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
+  width="15"
+  height="15"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

diff --git a/src/lib/IconSettings.svelte b/src/lib/IconSettings.svelte
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="15"
+  height="15"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="feather feather-settings"
+>
+  <circle cx="12" cy="12" r="3" />
+  <path
+    d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+  />
+</svg>
diff --git a/src/lib/IconXcircle.svelte b/src/lib/IconXcircle.svelte
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
+  width="15"
+  height="15"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -5,7 +5,9 @@
   import DownloadNotesZip from './DownloadNotesZip.svelte';
   import ImportNotesZip from './ImportNotesZip.svelte';
   import IconSearch from './IconSearch.svelte';
+  import IconEdit from './IconEdit.svelte';
   import IconXcircle from './IconXcircle.svelte';
+  import IconSettings from './IconSettings.svelte';
 
   import { omniMode, omniText, selectedNote, db } from './store';
 
@@ -41,15 +43,15 @@
 
 <svelte:window on:keydown={clearSelection}/>
 
-<div class="omnibar">
-  <ImportNotesZip />
-  <DownloadNotesZip />
-  <div class="input-wrapper">
+<div class="omnibar flex items-center">
+  <!-- <ImportNotesZip />
+  <DownloadNotesZip /> -->
+  <div class="input-wrapper flex-grow">
     <div class="icon left" >
       {#if $omniMode === 'search'}
         <IconSearch />
       {:else}
-        [E]
+        <IconEdit />
       {/if}
     </div>
     {#if $omniText !== ''}
@@ -71,18 +73,20 @@
     on:keydown={handleTitleEnter}
     on:focus={omniInput.select()}
     type="text"
-    class="flex-grow py-0.5 px-1 m-1.5"
+    class="flex-grow py-0.5 px-1"
     placeholder="Search or Create"
   />
   </div>
+  <div class="flex items-center" style="margin: 0 3px">
+    <IconSettings />
+  </div>
 </div>
 
 <style>
   .omnibar {
     box-sizing: border-box;
-    padding: 4px 3px 0 3px;
-    height: 56px;
-    border-bottom: 1px solid #8b8b8b;
+    padding-right: 3px;
+    border-bottom: 1px solid #959595;
     background: linear-gradient(0deg, rgba(206, 206, 207, 1) 0%, rgba(228, 227, 229, 1) 100%);
   }
   .input-wrapper {
@@ -92,29 +96,25 @@
   input {
     width: 100%;
     box-sizing: border-box;
-    border: 1px solid #474747;
+    border: 1px solid #747474;
     border-radius: 5px;
     padding: 2px 4px 2px 20px;
   }
   .icon {
     position: absolute;
-    color: #585858;
+    color: #4b4b4b;
   }
   .left {
-    top: 7px;
+    top: 8px;
     left: 10px;
-    width: 12px;
-    height: 12px;
   }
   .right {
-    color: #adadad;
-    top: 8px;
-    right: 9px;
+    top: 13.5px;
+    right: 3px;
+    background: transparent;
     cursor: pointer;
-    width: 14px;
-    height: 14px;
   }
   .right:hover {
-    color: #9b9b9b;
+    color: #202020;
   }
 </style>