Update features

web/src/components/Header/SearchBar/index.tsx

@@ -24,7 +24,7 @@ import * as filtersLib from 'jslib/helpers/filters';
 import * as queriesLib from 'jslib/helpers/queries';
 import { getSearchDest } from 'web/libs/search';
 import { usePrevious } from 'web/libs/hooks';
-import { useFilters, useSelector } from '../../../store';
+import { useFilters } from '../../../store';
 import SearchInput from '../../Common/SearchInput';
 import AdvancedPanel from './AdvancedPanel';
 import styles from './SearchBar.scss';
@@ -41,19 +41,13 @@ const SearchBar: React.FunctionComponent<Props> = ({ location, history }) => {
   const [value, setValue] = useState(initialValue);
   const [expanded, setExpanded] = useState(false);
 
-  const { user } = useSelector(state => {
-    return {
-      user: state.auth.user.data
-    };
-  });
-
   const handleSearch = useCallback(
     (queryText: string) => {
       const queries = queriesLib.parse(queryText);
       const dest = getSearchDest(location, queries);
       history.push(dest);
     },
-    [history, location, user]
+    [history, location]
   );
 
   const prevFilters = usePrevious(filters);

web/src/components/Icons/Box.tsx

@@ -41,8 +41,9 @@ SOFTWARE.
 */
 
 import React from 'react';
+import { IconProps } from './types';
 
-const Icon = ({ fill, width, height, className }) => {
+const Icon = ({ fill, width, height, className }: IconProps) => {
   const h = `${height}px`;
   const w = `${width}px`;
 

web/src/components/Subscription/Plan/Core.tsx

@@ -18,14 +18,14 @@
 
 import React from 'react';
 
-import BoxIcon from '../../Icons/Box';
+import BookIcon from '../../Icons/Book';
 import Plan from './internal';
 
 const selfHostedPerks = [
   {
     id: 'own-machine',
-    icon: <BoxIcon width="16" height="16" fill="#6e6e6e" />,
-    value: 'Host on your own machine'
+    icon: <BookIcon width={16} height={16} fill="#6e6e6e" className="" />,
+    value: 'Ideal for occasional note taking'
   }
 ];
 

web/src/components/Subscription/Plan/Pro.tsx

@@ -25,12 +25,12 @@ import GlobeIcon from '../../Icons/Globe';
 const proPerks = [
   {
     id: 'hosted',
-    icon: <ServerIcon width="16" height="16" fill="#4d4d8b" />,
-    value: 'Fully hosted and managed'
+    icon: <ServerIcon width={16} height={16} fill="#4d4d8b" />,
+    value: 'Ideal for maximizing memory retention'
   },
   {
     id: 'support',
-    icon: <GlobeIcon width="16" height="16" fill="#4d4d8b" />,
+    icon: <GlobeIcon width={16} height={16} fill="#4d4d8b" />,
     value: 'Support the Dnote community and development'
   }
 ];

web/src/components/Subscription/Plan/internal.tsx

@@ -19,9 +19,25 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import styles from './Plan.module.scss';
+import styles from './Plan.scss';
 
-function Plan({
+interface Perk {
+  id: string;
+  icon: JSX.Element;
+  value: string;
+}
+
+interface Props {
+  name: string;
+  price: string;
+  bottomContent: string;
+  ctaContent: React.ReactElement;
+  interval?: string;
+  perks: Perk[];
+  wrapperClassName: string;
+}
+
+const Plan: React.FunctionComponent<Props> = ({
   name,
   price,
   bottomContent,
@@ -29,7 +45,7 @@ function Plan({
   interval,
   perks,
   wrapperClassName
-}) {
+}) => {
   return (
     <div className={classnames(styles.wrapper, wrapperClassName)}>
       <div
@@ -63,6 +79,6 @@ function Plan({
       {bottomContent}
     </div>
   );
-}
+};
 
 export default Plan;

web/src/components/Subscription/index.tsx

@@ -36,11 +36,7 @@ const proFeatures = [
   },
   {
     id: 'host',
-    label: <div>Hosting</div>
-  },
-  {
-    id: 'auto',
-    label: <div>Automatic update and migration</div>
+    label: <div>Automated Spaced Repetition</div>
   },
   {
     id: 'email-support',
@@ -49,6 +45,10 @@ const proFeatures = [
 ];
 
 const baseFeatures = [
+  {
+    id: 'oss',
+    label: <div>Open source</div>
+  },
   {
     id: 'sync',
     label: <div>Multi-device sync</div>
@@ -57,25 +57,13 @@ const baseFeatures = [
     id: 'cli',
     label: <div>Command line interface</div>
   },
-  {
-    id: 'atom',
-    label: <div>Atom plugin</div>
-  },
   {
     id: 'web',
-    label: <div>Web client</div>
-  },
-  {
-    id: 'digest',
-    label: <div>Automated email digest</div>
+    label: <div>Web application</div>
   },
   {
     id: 'ext',
-    label: <div>Firefox/Chrome extension</div>
-  },
-  {
-    id: 'foss',
-    label: <div>Free and open source</div>
+    label: <div>Chrome/Firefox extension</div>
   },
   {
     id: 'forum-support',
@@ -130,7 +118,7 @@ const Subscription: React.FunctionComponent<Props> = () => {
       <div className={styles.hero}>
         <div className="container">
           <h1 className={styles.heading}>
-            You can self-host or sign up for the hosted version.
+            Dnote has simple plans for everyone.
           </h1>
         </div>
       </div>