From 321955979f44bf63f24cd2537a2200a4e325460f Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 2 Apr 2020 18:15:00 +0200 Subject: [PATCH] fix(design): icons --- src/EmptyScreen/EmptyScreen.tsx | 23 ++++++----------------- src/Results/ActionIcon.tsx | 5 ++--- src/Results/Results.tsx | 1 - src/Results/SourceIcon.tsx | 5 +---- src/SearchBox/ResetIcon.tsx | 9 ++++++--- src/SearchBox/SearchIcon.tsx | 10 +++++++--- src/SearchButton/SearchButton.tsx | 19 ++----------------- src/style.css | 29 ++++++++++++++++------------- src/svg/icon_action_clear.svg | 11 +++++++++++ src/svg/icon_action_microphone.svg | 13 +++++++++++++ src/svg/icon_search_primary.svg | 11 +++++++++++ 11 files changed, 75 insertions(+), 61 deletions(-) create mode 100644 src/svg/icon_action_clear.svg create mode 100644 src/svg/icon_action_microphone.svg create mode 100644 src/svg/icon_search_primary.svg diff --git a/src/EmptyScreen/EmptyScreen.tsx b/src/EmptyScreen/EmptyScreen.tsx index c2bbb7f3..159ef3fe 100644 --- 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; hasSuggestions: boolean; @@ -52,10 +52,9 @@ export function EmptyScreen(props: EmptyScreenProps) {
- + - - - +
diff --git a/src/Results/ActionIcon.tsx b/src/Results/ActionIcon.tsx index 15e955e0..3027c50d 100644 --- a/src/Results/ActionIcon.tsx +++ b/src/Results/ActionIcon.tsx @@ -5,14 +5,13 @@ export function SelectIcon() { - - + + ); diff --git a/src/Results/Results.tsx b/src/Results/Results.tsx index d63b024b..4d12fbcf 100644 --- a/src/Results/Results.tsx +++ b/src/Results/Results.tsx @@ -60,7 +60,6 @@ export function Results(props: ResultsProps) { + ); diff --git a/src/SearchBox/SearchIcon.tsx b/src/SearchBox/SearchIcon.tsx index fab22ae7..b95097de 100644 --- a/src/SearchBox/SearchIcon.tsx +++ b/src/SearchBox/SearchIcon.tsx @@ -2,11 +2,15 @@ import React from 'react'; export function SearchIcon() { return ( - + - - - - + Search - {key} K diff --git a/src/style.css b/src/style.css index 27d5eb4f..50040876 100644 --- 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 new file mode 100644 index 00000000..be16976c --- /dev/null +++ b/src/svg/icon_action_clear.svg @@ -0,0 +1,11 @@ + + + + 2b0d15d6-5f05-49e4-8d6b-a70e8854fdaf@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/src/svg/icon_action_microphone.svg b/src/svg/icon_action_microphone.svg new file mode 100644 index 00000000..5955319a --- /dev/null +++ b/src/svg/icon_action_microphone.svg @@ -0,0 +1,13 @@ + + + + 026603da-1296-49a5-8a02-d1059668a8c1@1.00x + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/svg/icon_search_primary.svg b/src/svg/icon_search_primary.svg new file mode 100644 index 00000000..833528d3 --- /dev/null +++ b/src/svg/icon_search_primary.svg @@ -0,0 +1,11 @@ + + + + a9ce3a89-b607-4099-acb0-89761f0cf8fa@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file