feat(design): icon actions

algolia · Apr 4, 2020 · 6eca639 · 6eca639
1 parent 164a0ce
commit 6eca639
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/src/icons/SelectIcon.tsx b/src/icons/SelectIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export function SelectIcon() {
   return (
-    <svg width="20" height="20">
+    <svg width="20" height="20" viewBox="0 0 20 20">
       <g
         stroke="currentColor"
         fill="none"

diff --git a/src/icons/StarIcon.tsx b/src/icons/StarIcon.tsx
@@ -4,9 +4,8 @@ export function StarIcon() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20">
       <path
-        d="M10 14.236866l-4.98073469 2.6185272.95123569-5.5461296-4.02949901-3.92779079 5.56863067-.8091694L10 1.52626803l2.4903673 5.04603538 5.5686307.8091694-4.029499 3.92779079.9512357 5.5461296z"
+        d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z"
         stroke="currentColor"
-        strokeWidth="2"
         fill="none"
         fillRule="evenodd"
         strokeLinejoin="round"

diff --git a/src/style.css b/src/style.css
@@ -454,23 +454,51 @@ html[data-theme='dark'] {
 
 .DocSearch-Hit-icon,
 .DocSearch-Hit-action {
-  height: 20px;
-  width: 20px;
   color: var(--docsearch-muted-color);
   stroke-width: var(--docsearch-icon-stroke-width);
 }
 
+.DocSearch-Hit-icon {
+  height: 20px;
+  width: 20px;
+}
+
+.DocSearch-Hit-action {
+  height: 22px;
+  width: 22px;
+}
+
+.DocSearch-Hit-action svg{
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
 .DocSearch-Hit-action + .DocSearch-Hit-action {
-  margin-left: 5px;
+  margin-left: 6px;
 }
 
 .DocSearch-Hit-action-button {
   appearance: none;
   background: none;
   color: inherit;
   border: none;
-  padding: 0;
+  padding: 2px;
   cursor: pointer;
+  border-radius: 50%;
+}
+
+.DocSearch-Hit-action-button:hover {
+  transition: background-color .1s ease-in;
+  background: rgba(0,0,0,0.2);
+}
+
+.DocSearch-Hit-action-button:active {
+  transform: scale(1.2);
+}
+
+.DocSearch-Hit-action-button:hover path{
+  fill: white;
 }
 
 .DocSearch-Hit-content-wrapper {
@@ -553,6 +581,7 @@ html[data-theme='dark'] {
   .DocSearch-Commands {
     display: none;
   }
+
   .DocSearch-Hit-Tree {
     display: none;
   }