Feature/quick search style (#116)

* feat: search menu styles * feat: search menu styles
librarian-org · Jan 13, 2022 · 5cd16ef · 5cd16ef
1 parent bffa063
commit 5cd16ef
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/src/app/components/RoundedButton/index.tsx b/src/app/components/RoundedButton/index.tsx
@@ -17,7 +17,7 @@ const RoundedButton: React.FC<RoundedButtonProps> = ({
 }) => {
   return (
     <Container className={color} style={buttonStyle} {...rest}>
-      {<Icon size={20} />}
+      {<Icon size={16} />}
     </Container>
   );
 };

diff --git a/src/app/components/RoundedButton/styles.ts b/src/app/components/RoundedButton/styles.ts
@@ -2,7 +2,8 @@ import { shade } from 'polished';
 import styled from 'styled-components';
 
 export const Container = styled.button`
-  background: #D7D7DD;
+  background: transparent;
+  color: ${props => props.theme.colors.text};
   border-radius: 100%;
   border: 0;
   font-weight: 500;
@@ -13,8 +14,9 @@ export const Container = styled.button`
   line-height: 18px;
   color: #555;
   font-weight: bold;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
+  padding-top: 3px;
 
   &:hover {
     background: ${() => shade(0.2, '#D7D7DD')};

diff --git a/src/app/components/SearchMenu/MenuItem/index.tsx b/src/app/components/SearchMenu/MenuItem/index.tsx
@@ -38,7 +38,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
         </span>
         {item.iconAction && (
           <RoundedButton
-            className={selectedItem === order ? 'primary selected' : 'primary'}
+            className={selectedItem === order ? 'selected' : ''}
             onClick={(e: React.MouseEvent) => item.action.onClick(e)}
             onKeyDown={keyPress}
             tabIndex={order}

diff --git a/src/app/util/DefaultEntities.ts b/src/app/util/DefaultEntities.ts
@@ -1,6 +1,6 @@
-import { FaHandshake } from 'react-icons/fa';
+import { FaHandshake, FaPen, FaPlus } from 'react-icons/fa';
 import { IconBaseProps } from 'react-icons';
-import { FiBook, FiPlus, FiSettings, FiUser } from 'react-icons/fi';
+import { FiBook, FiSettings, FiUser } from 'react-icons/fi';
 import i18n from '../i18n';
 import { trigger } from './EventHandler';
 import { AppEvent } from '../../common/AppEvent';
@@ -38,7 +38,7 @@ export const entities: SearchSource[] = [
     label: i18n.t('borrow.label'),
     icon: FaHandshake,
     iconColor: '#50fa7b',
-    iconAction: FiPlus,
+    iconAction: FaPlus,
     handler: {
       onClick: (): void => {
         trigger(AppEvent.quickSearch);
@@ -59,7 +59,7 @@ export const entities: SearchSource[] = [
     label: i18n.t('person.label'),
     icon: FiUser,
     iconColor: '#ff78f7',
-    iconAction: FiPlus,
+    iconAction: FaPlus,
     handler: {
       onClick: (): void => {
         trigger(AppEvent.quickSearch);
@@ -86,7 +86,7 @@ export const entities: SearchSource[] = [
     label: i18n.t('title.label'),
     icon: FiBook,
     iconColor: '#4ad0ff',
-    iconAction: FiPlus,
+    iconAction: FaPlus,
     handler: {
       onClick: (): void => {
         trigger(AppEvent.quickSearch);
@@ -113,7 +113,7 @@ export const entities: SearchSource[] = [
     label: i18n.t('settings.label'),
     icon: FiSettings,
     iconColor: '#e3bb06',
-    iconAction: FiSettings,
+    iconAction: FaPen,
     handler: {
       onClick: (): void => {
         trigger(AppEvent.quickSearch);