Improve UI on Teams, Saved Filters, Watch & Trusted users pages

src/components/customURL.js

@@ -1,19 +1,27 @@
 import React from 'react';
 
-export function CustomURL({ href, children, iconName, className }: Object) {
+export function CustomURL({
+  href,
+  children,
+  iconName,
+  className,
+  title
+}: Object) {
   return (
     <a
       href={href}
       className={`${className ||
-        ''} btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition`}
+        ''} btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken5 bg-lighten25-on-hover color-gray transition`}
       target="_blank"
       rel="noopener noreferrer"
+      title={title}
     >
       {iconName && (
-        <svg className={'icon inline-block align-middle'}>
+        <svg className={'icon txt-m mb3 inline-block align-middle'}>
           <use xlinkHref={`#icon-${iconName}`} />
         </svg>
       )}
+      {children}
     </a>
   );
 }

src/components/teams/new_team.js

@@ -184,24 +184,30 @@ const NewTeam = props => {
                     disabled={!props.userIsOwner}
                   />
                 </label>
-                <label className="px3">
-                  <br></br>
+                <div className="px3">
+                  <br />
                   <Button
                     disabled={teamUsers.length === 1}
                     onClick={e => {
                       e.preventDefault();
                       onClickRemoveUser(k);
                     }}
-                    className="input col w-1/5"
+                    className="mt3 bg-transparent border--0 col w-1/5"
+                    title="Remove user"
                   >
                     <svg className="icon w24 h24">
                       <use xlinkHref="#icon-trash" />
                     </svg>
                   </Button>
-                </label>
+                </div>
               </form>
             ))}
-            <Button onClick={onClickAddAnotherUser}>Add another user</Button>
+            <Button className="mt6 mb2" onClick={onClickAddAnotherUser}>
+              <svg className="icon txt-m mb3 inline-block align-middle">
+                <use xlinkHref="#icon-plus" />
+              </svg>
+              Add user
+            </Button>
 
             <p className="txt-light txt-truncate pt6">
               The mapping team members are <strong>public</strong> and can be
@@ -223,7 +229,7 @@ const NewTeam = props => {
               {props.activeTeam ? (
                 <Link
                   to={{ pathname: '/teams' }}
-                  className="mx3 btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition input wmax120 ml6"
+                  className="input mx3 wmax120 bg-transparent border--white btn btn--s border--1-on-hover border--darken5 border--darken25-on-hover round bg-darken5-on-hover color-gray transition"
                 >
                   Back to teams
                 </Link>
@@ -240,8 +246,14 @@ const NewTeam = props => {
         </>
       ) : (
         <>
-          <Button className="input wmax120" onClick={() => setEditing(true)}>
-            Add+
+          <Button
+            className="input wmax120 mt12"
+            onClick={() => setEditing(true)}
+          >
+            <svg className={'icon txt-m mb3 inline-block align-middle'}>
+              <use xlinkHref="#icon-plus" />
+            </svg>
+            New team
           </Button>
         </>
       )}

src/components/user/save_user.js

@@ -32,10 +32,13 @@ export class SaveUser extends React.PureComponent {
           </span>
         ) : (
           <Button
-            className="input wmax120 ml12"
+            className="input wmax120 ml12 mt12"
             onClick={() => this.setState({ showInput: true })}
           >
-            Add+
+            <svg className={'icon txt-m mb3 inline-block align-middle'}>
+              <use xlinkHref="#icon-plus" />
+            </svg>
+            Add User
           </Button>
         )}
       </span>

src/components/user/watchlist_user.js

@@ -23,20 +23,13 @@ export class WatchListUser extends React.Component {
   };
   fetchUsername = (username: string) =>
     fetch(
-      `https://www.openstreetmap.org/api/0.6/changesets?display_name=${this.state.username}`
+      `https://www.openstreetmap.org/api/0.6/changesets.json?display_name=${this.state.username}`
     )
       .then(handleErrors)
-      .then(r => r.text())
+      .then(r => r.json())
       .then(r => {
         try {
-          const parser = new DOMParser();
-          const xml = parser.parseFromString(r, 'text/xml');
-          return (
-            xml.getElementsByTagName('osm')[0] &&
-            xml
-              .getElementsByTagName('osm')[0]
-              .firstElementChild.getAttribute('uid')
-          );
+          return r.changesets[0].uid;
         } catch (e) {
           handleErrors();
         }
@@ -126,6 +119,7 @@ export class WatchListUser extends React.Component {
       <span className="flex-parent flex-parent--row">
         <input
           className={`input ${this.state.isValidUsername ? '' : errorClass}`}
+          style={{ marginRight: '6px !important' }}
           value={this.state.username}
           onChange={this.setUsername}
           placeholder="Username"
@@ -138,7 +132,10 @@ export class WatchListUser extends React.Component {
           placeholder="UID"
           type="text"
         />
-        <Button className={'btn max120 ml12 '} onClick={this.verifyInput}>
+        <Button
+          className={'wmax180 ml12 bg-transparent border--0'}
+          onClick={this.verifyInput}
+        >
           {this.state.verified ? 'Verified' : 'Verify'}
         </Button>
         <Button

src/views/navbar_sidebar.js

@@ -105,17 +105,17 @@ class NavbarSidebar extends React.PureComponent {
         options={[
           { label: 'Account settings', url: '/user' },
           {
-            label: 'My changesets',
+            label: 'My Changesets',
             url: '/my-changesets'
           },
           {
-            label: 'My reviews',
+            label: 'My Reviews',
             url: '/my-reviews'
           },
-          { label: 'My saved filters', url: '/saved-filters' },
-          { label: 'My teams', url: '/teams' },
-          { label: 'My trusted users list', url: '/trusted-users' },
-          { label: 'My watchlist', url: '/watchlist' },
+          { label: 'My Saved Filters', url: '/saved-filters' },
+          { label: 'My Teams', url: '/teams' },
+          { label: 'My Trusted Users List', url: '/trusted-users' },
+          { label: 'My Watchlist', url: '/watchlist' },
           { label: 'Logout', url: '/logout' }
         ]}
         onChange={this.onUserMenuSelect}

src/views/saved_filters.js

@@ -49,12 +49,14 @@ class SaveButton extends React.PureComponent {
       this.clicked = false;
     }
   };
+
   onSave = event => {
     this.setState({
       editing: false
     });
     this.props.onCreate(this.state.value);
   };
+
   render() {
     return (
       <span>
@@ -78,8 +80,8 @@ class SaveButton extends React.PureComponent {
             </Button>
           </span>
         ) : (
-          <Button className="input wmax120 ml12" onClick={this.onClick}>
-            Add+
+          <Button className="input wmax120 ml12 mt12" onClick={this.onClick}>
+            Save Filter
           </Button>
         )}
       </span>
@@ -89,33 +91,39 @@ class SaveButton extends React.PureComponent {
 
 const AOIsBlock = ({ data, activeAoiId, removeAoi }) => (
   <BlockMarkup>
-    <span>
-      <span
-        className={`${activeAoiId === data.getIn(['id']) ? 'txt-bold' : ''}`}
-      >
+    <Link
+      className="mx3"
+      to={{
+        search: `aoi=${data.getIn(['id'])}`,
+        pathname: '/filters'
+      }}
+    >
+      <span className="txt-bold">
         {data.getIn(['properties', 'name'])}
-        {activeAoiId === data.getIn(['id']) ? '*' : ''}
+        {activeAoiId === data.getIn(['id']) && (
+          <span class="ml12 btn btn--s px6 py0 bg-darken25 events-none">
+            Active
+          </span>
+        )}
       </span>
-      <span className="txt-em color-gray pl6">({data.getIn(['id'])})</span>
-    </span>
+    </Link>
     <span>
-      <Link
-        className="mx3 btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition"
-        to={{
-          search: `aoi=${data.getIn(['id'])}`,
-          pathname: '/filters'
-        }}
-      >
-        {activeAoiId === data.getIn(['id']) ? 'Active' : 'Load'}
-      </Link>
-      <Button className="mr3" onClick={() => removeAoi(data.getIn(['id']))}>
-        Remove
-      </Button>
       <CustomURL
         href={`${API_URL}/aoi/${data.getIn(['id'])}/changesets/feed/`}
         className="mr3"
         iconName="rss"
-      />
+      >
+        RSS Feed
+      </CustomURL>
+      <Button
+        className="mr3 bg-transparent border--0"
+        onClick={() => removeAoi(data.getIn(['id']))}
+      >
+        <svg className={'icon txt-m mb3 inline-block align-middle color-gray'}>
+          <use xlinkHref="#icon-trash" />
+        </svg>
+        Delete
+      </Button>
     </span>
   </BlockMarkup>
 );
@@ -247,9 +255,6 @@ class SavedFilters extends React.PureComponent<any, propsType, any> {
             {this.props.token && (
               <div>
                 <div className="mt24 mb12">
-                  <h2 className="pl12 txt-xl mr6 txt-bold border-b border--gray-light border--1">
-                    My saved filters
-                  </h2>
                   <ListFortified
                     data={this.props.data.getIn(['aoi', 'features'], List())}
                     TargetBlock={AOIsBlock}
@@ -287,7 +292,7 @@ SavedFilters = connect(
     token: state.auth.get('token'),
     userDetails: state.auth.getIn(['userDetails'], Map()),
     avatar: state.auth.getIn(['userDetails', 'avatar']),
-    aoiId: state.filters.getIn(['aoi', 'id'], null)
+    aoiId: state.aoi.getIn(['aoi', 'id'], null)
   }),
   {
     applyFilters,

src/views/teams.js

@@ -43,13 +43,19 @@ const TeamsBlock = ({ data, removeTeam, editTeam }) => (
         Filter team changesets
       </Link>
       <Link
-        className="mx3 btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition"
+        className="mx3 btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken5 bg-lighten25-on-hover color-gray transition"
         to={{ pathname: `/teams/${data.getIn(['id'])}` }}
       >
         Edit
       </Link>
-      <Button className="mr3" onClick={() => removeTeam(data.getIn(['id']))}>
-        Remove
+      <Button
+        className="mr3 bg-transparent border--0"
+        onClick={() => removeTeam(data.getIn(['id']))}
+      >
+        <svg className={'icon txt-m mb3 inline-block align-middle'}>
+          <use xlinkHref="#icon-trash" />
+        </svg>
+        Delete
       </Button>
     </span>
   </BlockMarkup>
@@ -152,9 +158,6 @@ class MappingTeams extends React.PureComponent<any, propsType, any> {
             {this.props.token && (
               <div>
                 <div className="mt24 mb12">
-                  <h2 className="pl12 txt-xl mr6 txt-bold border-b border--gray-light border--1">
-                    My mapping teams
-                  </h2>
                   <ListFortified
                     data={this.props.data.getIn(['teams'], List())}
                     TargetBlock={TeamsBlock}

src/views/trusted_users.js

@@ -37,9 +37,15 @@ const TrustedListBlock = ({ data, removeFromTrustedList }) => (
           })
         }}
       >
-        OSMCha
+        Changesets
       </Link>
-      <Button className="mr3" onClick={() => removeFromTrustedList(data)}>
+      <Button
+        className="mr3 bg-transparent border--0"
+        onClick={() => removeFromTrustedList(data)}
+      >
+        <svg className={'icon txt-m mb3 inline-block align-middle'}>
+          <use xlinkHref="#icon-trash" />
+        </svg>
         Remove
       </Button>
     </span>
@@ -95,6 +101,7 @@ class TrustedUsers extends React.PureComponent<any, propsType, any> {
       userValues: value
     });
   };
+
   render() {
     let trustedUsers = this.props.trustedList ? this.props.trustedList : List();
     trustedUsers = trustedUsers.sortBy(
@@ -106,7 +113,7 @@ class TrustedUsers extends React.PureComponent<any, propsType, any> {
     return (
       <div
         className={`flex-parent flex-parent--column changesets-filters bg-white${
-          mobile ? 'viewport-full' : ''
+          mobile ? ' viewport-full' : ''
         }`}
       >
         <SecondaryPagesHeader
@@ -118,9 +125,6 @@ class TrustedUsers extends React.PureComponent<any, propsType, any> {
             {this.props.token && (
               <div>
                 <div className="mt24 mb12">
-                  <h2 className="pl12 txt-xl mr6 txt-bold mt24 mb12 border-b border--gray-light border--1">
-                    My trusted users list
-                  </h2>
                   <ListFortified
                     data={trustedUsers}
                     TargetBlock={TrustedListBlock}