From 48252de9f3554bcb13ac622b2de56c0fd702749e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 20 Jul 2023 10:07:47 +0200
Subject: [PATCH] Search CSS

---
 static/css/main.css      |  21 ++++----
 static/images/search.svg | 107 +++++++++++++++++++++++++++++++++++++++
 static/less/main.less    |  22 ++++----
 3 files changed, 129 insertions(+), 21 deletions(-)
 create mode 100644 static/images/search.svg

diff --git a/static/css/main.css b/static/css/main.css
index 63d21b9..d025926 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -55,6 +55,13 @@ button {
   border: 2px solid #000;
   box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.5);
   z-index: 1025;
+  width: min-content;
+}
+#menu .section {
+  padding: 16px 16px 0px 16px;
+  font-weight: bold;
+  white-space: nowrap;
+  color: #c84a37;
 }
 #menu .item {
   padding: 16px;
@@ -137,7 +144,7 @@ button {
 header {
   display: grid;
   grid-area: header;
-  grid-template-columns: min-content 1fr repeat(3, min-content);
+  grid-template-columns: min-content 1fr repeat(4, min-content);
   align-items: center;
   padding: 8px 0px;
   color: #333c11;
@@ -161,17 +168,13 @@ header .name {
   padding-left: 16px;
   font-size: 1.25em;
 }
-header .add {
-  padding-right: 16px;
-  cursor: pointer;
-}
-header .add img {
-  cursor: pointer;
-  height: 24px;
-}
+header .search,
+header .add,
 header .keys {
   padding-right: 16px;
 }
+header .search img,
+header .add img,
 header .keys img {
   cursor: pointer;
   height: 24px;
diff --git a/static/images/search.svg b/static/images/search.svg
new file mode 100644
index 0000000..28b3b5f
--- /dev/null
+++ b/static/images/search.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="191.20831"
+   height="227.46098"
+   viewBox="0 0 50.590532 60.182387"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   sodipodi:docname="search.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient16049">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.36503741;"
+         offset="0"
+         id="stop16045" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop16047" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient16049"
+       id="linearGradient16051"
+       x1="36.007183"
+       y1="8.6465521"
+       x2="12.402377"
+       y2="41.804993"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#5056d3"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="153.08862"
+     inkscape:cy="145.664"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2190"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d6d6d6"
+     showborder="true"
+     showguides="false">
+    <sodipodi:guide
+       position="57.608417,-11.948636"
+       orientation="0.81915204,0.57357644"
+       id="guide5717"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,134,229)" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-2.3771159,-1.8407145)">
+    <path
+       style="color:#000000;overflow:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:8.46667;stroke-linecap:round;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
+       d="m 38.808695,43.970762 9.925619,13.819002"
+       id="path2090" />
+    <path
+       id="circle4774"
+       style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.175;paint-order:markers stroke fill;stop-color:#000000"
+       d="M 25.660449,1.8407145 A 23.283335,23.283335 0 0 0 2.3771159,25.124048 23.283335,23.283335 0 0 0 25.660449,48.407381 23.283335,23.283335 0 0 0 48.944299,25.124048 23.283335,23.283335 0 0 0 25.660449,1.8407145 Z m 0,6.35 A 16.933332,16.933332 0 0 1 42.593783,25.124048 16.933332,16.933332 0 0 1 25.660449,42.057381 16.933332,16.933332 0 0 1 8.7276327,25.124048 16.933332,16.933332 0 0 1 25.660449,8.1907145 Z" />
+    <circle
+       style="color:#000000;overflow:visible;fill:url(#linearGradient16051);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.175;paint-order:markers stroke fill;stop-color:#000000"
+       id="path429"
+       cx="25.660707"
+       cy="25.123877"
+       r="16.933332" />
+  </g>
+</svg>
diff --git a/static/less/main.less b/static/less/main.less
index 7435f57..0a54562 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -56,6 +56,14 @@ button {
 	border: 2px solid #000;
 	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
 	z-index: 1025;
+	width: min-content;
+
+	.section {
+		padding: 16px 16px 0px 16px;
+		font-weight: bold;
+		white-space: nowrap;
+		color: @accent_3;
+	}
 
 	.item {
 		padding: 16px;
@@ -154,7 +162,7 @@ button {
 header {
 	display: grid;
 	grid-area: header;
-	grid-template-columns: min-content 1fr repeat(3, min-content);
+	grid-template-columns: min-content 1fr repeat(4, min-content);
 	align-items: center;
 	padding: 8px 0px;
 	color: darken(@accent_1, 35%);
@@ -181,17 +189,7 @@ header {
 		font-size: 1.25em;
 	}
 
-	.add {
-		padding-right: 16px;
-		cursor: pointer;
-
-		img {
-			cursor: pointer;
-			height: 24px;
-		}
-	}
-
-	.keys {
+	.search, .add, .keys {
 		padding-right: 16px;
 
 		img {