fix(design): icons

algolia · Apr 2, 2020 · 3219559 · 3219559
1 parent 4c0aa3b
commit 3219559
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 61 deletions.
diff --git a/src/EmptyScreen/EmptyScreen.tsx b/src/EmptyScreen/EmptyScreen.tsx
@@ -8,10 +8,10 @@ import { RecentDocSearchHit } from '../types';
 
 interface EmptyScreenProps
   extends AutocompleteApi<
-    RecentDocSearchHit,
-    React.FormEvent,
-    React.MouseEvent,
-    React.KeyboardEvent
+  RecentDocSearchHit,
+  React.FormEvent,
+  React.MouseEvent,
+  React.KeyboardEvent
   > {
   state: AutocompleteState<RecentDocSearchHit>;
   hasSuggestions: boolean;
@@ -52,10 +52,9 @@ export function EmptyScreen(props: EmptyScreenProps) {
                     <a href={item.url}>
                       <div className="DocSearch-Hit-Container">
                         <div className="DocSearch-Hit-icon">
-                          <svg width="20" height="20">
+                          <svg width="20" height="20" viewBox="0 0 20 20">
                             <g
                               stroke="currentColor"
-                              strokeWidth="2"
                               fill="none"
                               fillRule="evenodd"
                               strokeLinecap="round"
@@ -119,17 +118,7 @@ export function EmptyScreen(props: EmptyScreenProps) {
                             }}
                           >
                             <svg width="20" height="20">
-                              <g
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                              >
-                                <path
-                                  d="M10,10 L15.0853291,4.91467086 L10,10 L15.0853291,15.0853291 L10,10 Z M10,10 L4.91467086,4.91467086 L10,10 L4.91467086,15.0853291 L10,10 Z"
-                                  transform="translate(10.000000, 10.000000) rotate(-360.000000) translate(-10.000000, -10.000000) "
-                                ></path>
-                              </g>
+
                             </svg>
                           </button>
                         </div>

diff --git a/src/Results/ActionIcon.tsx b/src/Results/ActionIcon.tsx
@@ -5,14 +5,13 @@ export function SelectIcon() {
     <svg width="20" height="20">
       <g
         stroke="currentColor"
-        strokeWidth="2"
         fill="none"
         fillRule="evenodd"
         strokeLinecap="round"
         strokeLinejoin="round"
       >
-        <path d="M16 2v5c0 2-1 4-4 4H4" />
-        <path d="M8 16l-5-5 5-4" />
+        <path d="M18 3v4c0 2-2 4-4 4H2" />
+        <path d="M8 17l-6-6 6-6" />
       </g>
     </svg>
   );

diff --git a/src/Results/Results.tsx b/src/Results/Results.tsx
@@ -60,7 +60,6 @@ export function Results(props: ResultsProps) {
                           <svg className="DocSearch-Hit-Tree">
                             <g
                               stroke="currentColor"
-                              strokeWidth="2"
                               fill="none"
                               fillRule="evenodd"
                               strokeLinecap="round"

diff --git a/src/Results/SourceIcon.tsx b/src/Results/SourceIcon.tsx
@@ -15,9 +15,8 @@ function LvlIcon() {
   return (
     <svg width="20" height="20">
       <path
-        d="M17 6h-4-1V1l5 5v11l-1 2H4l-1-1V2l1-1h8l5 5z"
+        d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5h-4c-.59 0-1-.4-1-1V1l5 5z"
         stroke="currentColor"
-        strokeWidth="2"
         fill="none"
         fillRule="evenodd"
         strokeLinejoin="round"
@@ -32,7 +31,6 @@ function AnchorIcon() {
       <path
         d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
         stroke="currentColor"
-        strokeWidth="2"
         fill="none"
         fillRule="evenodd"
         strokeLinecap="round"
@@ -48,7 +46,6 @@ function ContentIcon() {
       <path
         d="M17 5H3h14zm0 5H3h14zm0 5H3h14z"
         stroke="currentColor"
-        strokeWidth="2"
         fill="none"
         fillRule="evenodd"
         strokeLinejoin="round"

diff --git a/src/SearchBox/ResetIcon.tsx b/src/SearchBox/ResetIcon.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 
 export function ResetIcon() {
   return (
-    <svg viewBox="0 0 10 10">
+    <svg width="20" height="20" viewBox="0 0 20 20">
       <path
-        d="M5 4.12L8.93.18a.62.62 0 1 1 .89.89L5.88 5l3.94 3.93a.62.62 0 1 1-.89.89L5 5.88 1.07 9.82a.62.62 0 1 1-.89-.89L4.12 5 .18 1.07a.62.62 0 1 1 .89-.89L5 4.12z"
-        fill="currentColor"
+        d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+        stroke="currentColor"
+        fill="none"
         fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

diff --git a/src/SearchBox/SearchIcon.tsx b/src/SearchBox/SearchIcon.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 
 export function SearchIcon() {
   return (
-    <svg viewBox="0 0 18 18">
+    <svg
+      width="20"
+      height="20"
+      className="DocSearch-Search-Icon"
+      viewBox="0 0 20 20"
+    >
       <path
-        d="M13.14 13.14L17 17l-3.86-3.86A7.11 7.11 0 1 1 3.08 3.08a7.11 7.11 0 0 1 10.06 10.06z"
+        d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
         stroke="currentColor"
-        strokeWidth="1.3"
         fill="none"
         fillRule="evenodd"
         strokeLinecap="round"

diff --git a/src/SearchButton/SearchButton.tsx b/src/SearchButton/SearchButton.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { SearchIcon } from '../SearchBox/SearchIcon';
 
 interface SearchButtonProps {
   onClick(): void;
@@ -32,24 +33,8 @@ export function SearchButton(props: SearchButtonProps) {
       className="DocSearch-SearchButton"
       onClick={props.onClick}
     >
-      <svg
-        className="DocSearch-SearchButton-Icon"
-        width={18}
-        viewBox="0 0 18 18"
-      >
-        <path
-          d="M13.14 13.14L17 17l-3.86-3.86A7.11 7.11 0 1 1 3.08 3.08a7.11 7.11 0 0 1 10.06 10.06z"
-          stroke="currentColor"
-          strokeWidth="1.78"
-          fill="none"
-          fillRule="evenodd"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        ></path>
-      </svg>
-
+      <SearchIcon />
       <span className="DocSearch-SearchButton-Placeholder">Search</span>
-
       <span className="DocSearch-SearchButton-Key">{key}</span>
       <span className="DocSearch-SearchButton-Key">K</span>
     </button>

diff --git a/src/style.css b/src/style.css
@@ -4,7 +4,7 @@
   --docsearch-input-color: var(--ifm-color-emphasis-800);
   --docsearch-highlight-color: var(--ifm-color-primary);
   --docsearch-placeholder-color: rgb(150, 155, 175);
-  --docsearch-container-background: rgb(60, 65, 85, 0.8);
+  --docsearch-container-background: rgba(101, 108, 133, 0.8);
   --docsearch-modal-background: var(--ifm-color-emphasis-100);
   --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
     0px 3px 8px 0px rgba(85, 90, 100, 1);
@@ -31,6 +31,7 @@
   --docsearch-hit-height: 56px;
   --docsearch-footer-height: 44px;
   --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.6;
 }
 
 /* Darkmode */
@@ -86,12 +87,12 @@ html[data-theme='dark'] {
   box-shadow: var(--docsearch-searchbox-shadow);
 }
 
-.DocSearch-SearchButton-Icon {
-  color: var(--docsearch-highlight-color);
+.DocSearch-Search-Icon {
+  stroke-width: var(--docsearch-icon-stroke-width);
 }
 
 .DocSearch-SearchButton-Placeholder {
-  margin: 0 8px;
+  margin: 0 1em 0 .5em;
   font-size: 1rem;
 }
 
@@ -222,8 +223,6 @@ html[data-theme='dark'] {
 .DocSearch-LoadingIndicator,
 .DocSearch-MagnifierLabel,
 .DocSearch-Reset {
-  height: 20px;
-  width: 20px;
   margin: 0;
   padding: 0;
 }
@@ -248,7 +247,14 @@ html[data-theme='dark'] {
   border-radius: 50%;
   background: none;
   cursor: pointer;
+  stroke-width: var(--docsearch-icon-stroke-width);
   color: var(--docsearch-icon);
+  animation: reset-button .2s ease-in forwards;
+}
+
+@keyframes reset-button {
+  0% {opacity: 0}
+  100% { opacity: 1}
 }
 
 .DocSearch-Reset[hidden] {
@@ -259,15 +265,10 @@ html[data-theme='dark'] {
   outline: none;
 }
 
-.DocSearch-Reset svg {
-  height: 10px;
-  width: 10px;
-}
-
 .DocSearch-LoadingIndicator svg,
 .DocSearch-MagnifierLabel svg {
-  height: 24px;
-  width: 24px;
+  width:24px;
+  height:24px;
 }
 
 .DocSearch-MagnifierLabel {
@@ -445,6 +446,7 @@ html[data-theme='dark'] {
   height: 20px;
   width: 20px;
   color: var(--docsearch-muted-color);
+  stroke-width: var(--docsearch-icon-stroke-width);
 }
 
 .DocSearch-Hit-action-button {
@@ -524,6 +526,7 @@ html[data-theme='dark'] {
     font-weight: 500;
     color: var(--docsearch-highlight-color);
     animation: cancel-button ease-out 0.2s forwards;
+    outline: none;
   }
 
   @keyframes cancel-button {

diff --git a/src/svg/icon_action_clear.svg b/src/svg/icon_action_clear.svg
diff --git a/src/svg/icon_action_microphone.svg b/src/svg/icon_action_microphone.svg
diff --git a/src/svg/icon_search_primary.svg b/src/svg/icon_search_primary.svg