Adds fix for scrolling and searching; Renames app to Shape

Author: kaptron

.env.example

@@ -8,9 +8,9 @@ OKTA_DOMAIN=oktapreview
 FILESTACK_API_KEY=XXXXXX
 AWS_ACCESS_KEY_ID=XXXX
 AWS_SECRET_ACCESS_KEY=XXXXX
-S3_UPLOADS_BUCKET=oie-2-uploads-production
+S3_UPLOADS_BUCKET=shape-uploads-production
 
-APPSIGNAL_APP_NAME=oie-2
+APPSIGNAL_APP_NAME=shape
 APPSIGNAL_PUSH_API_KEY=xxxxxxxx
 
 YOUTUBE_V3_API_KEY=xxxx

.ruby-gemset

@@ -1 +1 @@
-oie
+shape

README.md

@@ -14,10 +14,10 @@ brew install postgresql
 Clone the app and install the gems:
 ```
 git clone <clone URL>
-cd oie-2/
+cd shape/
 rvm install ruby 2.4.3
 cd ..
-cd oie-2/
+cd shape/
 gem install bundler
 bundle install
 yarn install

app.json

@@ -1,5 +1,5 @@
 {
-  "name": "OIE 2.0",
+  "name": "Shape",
   "description": "The future of work is here.",
   "buildpacks": [
     {

app/javascript/ui/grid/blankContentTool/GridCardBlank.js

@@ -8,6 +8,7 @@ import AddTextIcon from '~/ui/icons/AddTextIcon'
 import AddCollectionIcon from '~/ui/icons/AddCollectionIcon'
 import AddImageIcon from '~/ui/icons/AddImageIcon'
 import AddVideoIcon from '~/ui/icons/AddVideoIcon'
+import CloseIcon from '~/ui/icons/CloseIcon'
 import v, { ITEM_TYPES } from '~/utils/variables'
 import FilestackUpload from '~/utils/FilestackUpload'
 import { StyledGridCard } from '~/ui/grid/GridCard'
@@ -36,10 +37,13 @@ const StyledGridCardBlank = StyledGridCard.extend`
 const StyledGridCardInner = styled.div`
   button.close {
     position: absolute;
+    top: 5px;
+    right: 10px;
     color: #9b9b9b;
-    font-size: 1.75rem;
-    top: 0rem;
-    right: 0.33rem;
+    .icon {
+      width: 12px;
+      height: 12px;
+    }
 
     &:hover {
       color: black;
@@ -226,7 +230,7 @@ class GridCardBlank extends React.Component {
         <StyledGridCardInner>
           {this.renderInner()}
           <button className="close" onClick={this.closeBlankContentTool}>
-            &times;
+            <CloseIcon />
           </button>
         </StyledGridCardInner>
       </StyledGridCardBlank>

app/javascript/ui/icons/CloseIcon.js

@@ -2,8 +2,8 @@ import Icon from './Icon'
 
 const CloseIcon = () => (
   <Icon fill>
-    <svg width="29" height="28" viewBox="0 0 29 28" xmlns="http://www.w3.org/2000/svg">
-      <path d="M16.584 13.897L27.836 2.645c.586-.585.586-1.536 0-2.121-.586-.586-1.535-.586-2.121 0L14.463 11.776 3.211.524c-.586-.586-1.535-.586-2.121 0-.586.585-.586 1.536 0 2.121l11.252 11.252L1.09 25.149c-.586.585-.586 1.536 0 2.121.293.293.677.439 1.061.439.384 0 .767-.146 1.06-.439l11.252-11.252L25.715 27.27c.293.293.677.439 1.061.439.384 0 .767-.146 1.06-.439.586-.585.586-1.536 0-2.121L16.584 13.897" fill="#9b9b9b" fillRule="evenodd" />
+    <svg viewBox="0 0 29 28" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16.584 13.897L27.836 2.645c.586-.585.586-1.536 0-2.121-.586-.586-1.535-.586-2.121 0L14.463 11.776 3.211.524c-.586-.586-1.535-.586-2.121 0-.586.585-.586 1.536 0 2.121l11.252 11.252L1.09 25.149c-.586.585-.586 1.536 0 2.121.293.293.677.439 1.061.439.384 0 .767-.146 1.06-.439l11.252-11.252L25.715 27.27c.293.293.677.439 1.061.439.384 0 .767-.146 1.06-.439.586-.585.586-1.536 0-2.121L16.584 13.897" fillRule="evenodd" />
     </svg>
   </Icon>
 )

app/javascript/ui/layout/Logo.js

@@ -1,15 +1,16 @@
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
+import v from '~/utils/variables'
 
 const StyledLogo = styled.div`
   font-size: 0.75rem;
   letter-spacing: 0.5px;
-  font-family: 'Gotham';
+  font-family: ${v.fonts.sans};
   text-transform: uppercase;
 `
 const Logo = () => (
   <StyledLogo>
-    <FormattedMessage id="Logo.name" defaultMessage="Innovation OS" />
+    <FormattedMessage id="Logo.name" defaultMessage="Shape" />
   </StyledLogo>
 )
 

app/javascript/ui/layout/SearchBar.js

@@ -8,16 +8,23 @@ import styled from 'styled-components'
 
 import v from '~/utils/variables'
 import SearchIcon from '~/ui/icons/SearchIcon'
+import CloseIcon from '~/ui/icons/CloseIcon'
 
 const StyledSearchBar = styled.div`
   border-bottom: 1px solid ${props => (props.focused ? v.colors.blackLava : v.colors.cloudy)};
   color: ${props => (props.focused ? v.colors.blackLava : v.colors.cloudy)};
   height: 28px;
   margin-right: 16px;
   position: relative;
+  width: 205px;
+  @media only screen and (max-width: ${v.responsive.smallBreakpoint}px) {
+    width: 140px;
+  }
+
 
   input {
     display: inline-block;
+    width: 60%;
     font-size: 1rem;
     padding-left: 14px;
     background: none;
@@ -39,12 +46,11 @@ const StyledSearchBar = styled.div`
   }
   .close {
     position: absolute;
-    right: 0;
-    bottom: -4px;
-    font-size: 2.25rem;
+    right: 2px;
+    bottom: 10px;
     color: ${v.colors.cloudy};
     &:hover {
-      color: ${v.colors.linkHover};
+      color: black;
     }
   }
 `
@@ -118,9 +124,11 @@ class SearchBar extends React.Component {
           onBlur={this.handleFocus(false)}
           onChange={this.handleTextChange}
         />
-        <button onClick={this.clearSearch} className="close">
-          &times;
-        </button>
+        {this.searchText &&
+          <button onClick={this.clearSearch} className="close">
+            <CloseIcon />
+          </button>
+        }
       </StyledSearchBar>
     )
   }

app/javascript/ui/pages/CollectionPage.js

@@ -3,6 +3,7 @@ import ReactRouterPropTypes from 'react-router-prop-types'
 import { inject, observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import { Flex, Box } from 'reflexbox'
 import styled from 'styled-components'
+import { animateScroll as scroll } from 'react-scroll'
 
 import v from '~/utils/variables'
 import PageWithApi from '~/ui/pages/PageWithApi'
@@ -33,6 +34,11 @@ const StyledTitleAndRoles = styled(Flex)`
 @inject('apiStore', 'uiStore')
 @observer
 class CollectionPage extends PageWithApi {
+  componentDidMount() {
+    super.componentDidMount()
+    scroll.scrollToTop({ duration: 0 })
+  }
+
   componentWillReceiveProps(nextProps) {
     super.componentWillReceiveProps(nextProps)
     // when navigating between collections, close BCT

app/javascript/ui/pages/ItemPage.js

@@ -3,6 +3,7 @@ import ReactRouterPropTypes from 'react-router-prop-types'
 import { inject, observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
+import { animateScroll as scroll } from 'react-scroll'
 
 import PageWithApi from '~/ui/pages/PageWithApi'
 import PageContainer from '~/ui/layout/PageContainer'
@@ -12,6 +13,7 @@ import Breadcrumb from '~/ui/layout/Breadcrumb'
 import TextItem from '~/ui/items/TextItem'
 import ImageItem from '~/ui/items/ImageItem'
 import VideoItem from '~/ui/items/VideoItem'
+import CloseIcon from '~/ui/icons/CloseIcon'
 import v, { ITEM_TYPES } from '~/utils/variables'
 import EditableName from './shared/EditableName'
 
@@ -32,18 +34,26 @@ const CloseLink = styled(Link)`
   text-decoration: none;
   color: ${v.colors.cloudy};
   &:hover {
-    color: ${v.colors.linkHover};
+    color: black;
   }
   padding: 0;
   height: auto;
   position: relative;
   top: -6px;
-  font-size: 1.75rem;
+  .icon {
+    width: 12px;
+    height: 12px;
+  }
 `
 
 @inject('apiStore')
 @observer
 class ItemPage extends PageWithApi {
+  componentDidMount() {
+    super.componentDidMount()
+    scroll.scrollToTop({ duration: 0 })
+  }
+
   get item() {
     const { match, apiStore } = this.props
     if (!apiStore.items.length) return null
@@ -98,7 +108,7 @@ class ItemPage extends PageWithApi {
             {this.content}
             <StyledRightColumn>
               <CloseLink to={item.parentPath}>
-                &times;
+                <CloseIcon />
               </CloseLink>
             </StyledRightColumn>
           </PageContainer>