boop

upside down

load fake results

working on rainbow

rainbow

small change

secret life

remove fake results

src/components/grid/grid.jsx

@@ -9,7 +9,9 @@ const thumbnailUrl = require('../../lib/user-thumbnail');
 require('./grid.scss');
 
 const Grid = props => (
-    <div className={classNames('grid', props.className)}>
+    <div
+        className={classNames('grid', props.className, )}
+    >
         <FlexRow>
             {props.items.map((item, key) => {
                 const href = `/${props.itemType}/${item.id}/`;
@@ -19,6 +21,7 @@ const Grid = props => (
                             avatar={thumbnailUrl(item.author.id)}
                             creator={item.author.username}
                             favorites={item.stats.favorites}
+                            isUpsideDown={props.isUpsideDown}
                             href={href}
                             key={key}
                             loves={item.stats.loves}
@@ -38,6 +41,7 @@ const Grid = props => (
                 return (
                     <Thumbnail
                         href={href}
+                        isUpsideDown={props.isUpsideDown}
                         key={key}
                         owner={item.owner}
                         src={item.image}
@@ -52,6 +56,7 @@ const Grid = props => (
 
 Grid.propTypes = {
     className: PropTypes.string,
+    isUpsideDown: PropTypes.bool,
     itemType: PropTypes.string,
     items: PropTypes.arrayOf(PropTypes.object),
     showAvatar: PropTypes.bool,

src/components/grid/grid.scss

@@ -11,6 +11,16 @@
     $project-height: 208px;
     $gallery-height: 164px;
 
+    &.cat {
+        background-image: url("/svgs/space-cat.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+
+        .thumbnail {
+            opacity: .85;
+        }
+    }
+
     .flex-row {
         margin: 0 auto;
         padding: 12px 0;

src/components/thumbnail/thumbnail.jsx

@@ -110,12 +110,16 @@ const Thumbnail = props => {
             </a>
         );
     }
+
+    const surpriseClass = props.isUpsideDown ? 'upsideDown' : '';
+
     return (
         <div
             className={classNames(
                 'thumbnail',
                 props.type,
-                props.className
+                props.className,
+                surpriseClass
             )}
         >
             {imgElement}
@@ -136,6 +140,7 @@ Thumbnail.propTypes = {
     className: PropTypes.string,
     creator: PropTypes.string,
     favorites: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    isUpsideDown: PropTypes.bool,
     href: PropTypes.string,
     linkTitle: PropTypes.bool,
     loves: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

src/components/thumbnail/thumbnail.scss

@@ -112,4 +112,8 @@
             height: $gallery-height;
         }
     }
+
+    &.upsideDown {
+        transform: rotate(180deg);
+    }
 }

src/views/search/search.jsx

@@ -17,6 +17,7 @@ const Tabs = require('../../components/tabs/tabs.jsx');
 
 const Page = require('../../components/page/www/page.jsx');
 const render = require('../../lib/render.jsx');
+const classNames = require('classnames');
 
 const ACCEPTABLE_MODES = ['trending', 'popular'];
 
@@ -29,7 +30,8 @@ class Search extends React.Component {
             'getSearchState',
             'handleChangeSortMode',
             'handleGetSearchMore',
-            'getTab'
+            'getTab',
+            'tick'
         ]);
         this.state = this.getSearchState();
         this.state.loaded = [];
@@ -38,6 +40,12 @@ class Search extends React.Component {
         this.state.offset = 0;
         this.state.loadMore = false;
 
+        this.state.isUpsideDown = false;
+        this.state.isRainbow = false;
+        this.state.isSecret = false;
+
+        this.state.elapsed = 0;
+
         let mode = '';
         const query = window.location.search;
         const m = query.lastIndexOf('mode=');
@@ -54,7 +62,6 @@ class Search extends React.Component {
         if (ACCEPTABLE_MODES.indexOf(mode) !== -1) {
             this.state.mode = mode;
         }
-
     }
     componentDidMount () {
         // just in case there's a URL in the wild with pluses to indicate spaces,
@@ -86,13 +93,22 @@ class Search extends React.Component {
             // Error means that term was not URI encoded and decoding failed.
             // We can silence this error because not all query strings are intended to be decoded.
         }
+
         this.props.dispatch(navigationActions.setSearchTerm(term));
     }
     componentDidUpdate (prevProps) {
         if (this.props.searchTerm !== prevProps.searchTerm) {
+            this.setEasterEggs(this.props.searchTerm);
             this.handleGetSearchMore();
         }
     }
+
+    tick () {
+        this.setState(prevState => (
+            {elapsed: (prevState.elapsed + 10) % 360}
+        ));
+    }
+
     encodeSearchTerm () {
         let termText = '';
         if (this.props.searchTerm) {
@@ -122,6 +138,23 @@ class Search extends React.Component {
             window.location = newLocation;
         }
     }
+
+    setEasterEggs (term) {
+        if (term === 'upside down' || term === 'upsidedown' || term === 'upside-down') {
+            this.setState({isUpsideDown: true});
+        }
+
+        if (term.includes('rainbow')) {
+            this.setState({isRainbow: true});
+            setInterval(this.tick, 200);
+        }
+
+        if (term.includes('secret life')) {
+            this.setState({isSecret: true});
+            setInterval(this.tick, 200);
+        }
+    }
+
     handleGetSearchMore () {
         const termText = this.encodeSearchTerm();
         const locale = this.props.intl.locale;
@@ -180,11 +213,14 @@ class Search extends React.Component {
         }
         return allTab;
     }
+
     getProjectBox () {
         const results = (
             <Grid
                 cards
+                className={this.state.isSecret ? 'cat' : null}
                 showAvatar
+                isUpsideDown={this.state.isUpsideDown}
                 itemType={this.state.tab}
                 items={this.state.loaded}
                 showFavorites={false}
@@ -193,6 +229,7 @@ class Search extends React.Component {
             />
         );
         let searchAction = null;
+
         if (this.state.loaded.length === 0 && this.state.offset !== 0) {
             searchAction = <h2 className="search-prompt"><FormattedMessage id="general.searchEmpty" /></h2>;
         } else if (this.state.loadMore) {
@@ -208,16 +245,30 @@ class Search extends React.Component {
             <div
                 id="projectBox"
                 key="projectBox"
+                style={this.fancyStyle()}
             >
                 {results}
                 {searchAction}
             </div>
         );
     }
+
+    fancyStyle () {
+        if (this.state.isRainbow) {
+            return {
+                filter: `hue-rotate(${this.state.elapsed}deg) saturate(400%)`
+            };
+        }
+
+        return {};
+    }
+
     render () {
         return (
             <div>
-                <div className="outer">
+                <div
+                    className="outer"
+                >
                     <TitleBanner className="masthead">
                         <div className="inner">
                             <h1 className="title-banner-h1">