Organize scss files (#832)

* Prepare consolidation of component styles

* Prefix partials

* Move dialogs/about

* Move dialog

* Move CheckboxControl

* Move EditableList

* Move NoteEditor

* Move Icons

* Move NavigationBar

* Move NoteInfo

* Move NoteList

* Move RevisionSelector

* Move SearchField

* Move SettingsDialog

* Move ShareDialog

* Move Spinner

* Move TagInput

* Move TagList

* Move TagField

* Change TagField className to match component

* Move TagChip

* Move orphaned TagInput styles

* Move orphaned TagField styles

* Move EmailToolTip

* Move ToggleControl

* Move NoteDetail

* Move Auth

* Import TagField styles

* Keep scrollbar.scss as partial

* Load vendor stylesheets first

* Reset normalize.css to original vendor state

* Move out rules in selection.scss

* Rename app.scss to style.scss

* Add TODOs to master stylesheet

lib/auth.jsx → lib/auth/index.jsx

@@ -4,13 +4,13 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import cryptoRandomString from 'crypto-random-string';
 import { get } from 'lodash';
-import getConfig from '../get-config';
-import SimplenoteLogo from './icons/simplenote';
-import Spinner from './components/spinner';
-import WordPressLogo from './icons/wordpress';
+import getConfig from '../../get-config';
+import SimplenoteLogo from '../icons/simplenote';
+import Spinner from '../components/spinner';
+import WordPressLogo from '../icons/wordpress';
 
-import { hasInvalidCredentials, hasLoginError } from './state/auth/selectors';
-import { setWPToken } from './state/settings/actions';
+import { hasInvalidCredentials, hasLoginError } from '../state/auth/selectors';
+import { setWPToken } from '../state/settings/actions';
 
 export class Auth extends Component {
   static propTypes = {

lib/boot.js

@@ -18,6 +18,8 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { some } from 'lodash';
 
+import '../scss/style.scss';
+
 import { content as welcomeMessage } from './welcome-message';
 
 import appState from './flux/app-state';
@@ -29,8 +31,6 @@ const cookie = parse(document.cookie);
 const auth = new Auth(config.app_id, config.app_key);
 const appProvider = 'simplenote.com';
 
-require('../scss/app.scss');
-
 const token = cookie.token || localStorage.access_token;
 const appId = config.app_id;
 

lib/components/tag-chip/style.scss

@@ -0,0 +1,31 @@
+.tag-chip {
+  flex: none;
+  margin: 2px 12px 3px 0;
+  padding: 1px 14px 3px 14px;
+  border-radius: 14px;
+  line-height: 1.25em;
+  white-space: nowrap;
+  background: lighten($gray, 30%);
+  color: darken($gray, 20%);
+  text-decoration: none;
+  font-size: 14px;
+  -webkit-tap-highlight-color: transparent;
+
+  &.selected,
+  &:hover {
+    background: $gray;
+    color: $white;
+  }
+}
+
+.theme-dark {
+  .tag-chip {
+    background: darken($gray, 25%);
+    color: lighten($gray, 10%);
+
+    &.selected {
+      background: lighten($gray, 10%);
+      color: darken($gray, 30%);
+    }
+  }
+}

lib/dialogs/about.jsx → lib/dialogs/about/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import SimplenoteLogo from '../icons/simplenote';
-import CrossIcon from '../icons/cross';
-import TopRightArrowIcon from '../icons/arrow-top-right';
-import Dialog from '../dialog';
+import SimplenoteLogo from '../../icons/simplenote';
+import CrossIcon from '../../icons/cross';
+import TopRightArrowIcon from '../../icons/arrow-top-right';
+import Dialog from '../../dialog';
 
 const appVersion = config.version; // eslint-disable-line no-undef
 

lib/dialogs/settings.jsx → lib/dialogs/settings/index.jsx

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import TabbedDialog from '../tabbed-dialog';
-import { viewExternalUrl } from '../utils/url-utils';
-import TopRightArrowIcon from '../icons/arrow-top-right';
+import TabbedDialog from '../../tabbed-dialog';
+import { viewExternalUrl } from '../../utils/url-utils';
+import TopRightArrowIcon from '../../icons/arrow-top-right';
 
-import RadioGroup from './radio-settings-group';
-import ToggleGroup from './toggle-settings-group';
-import SettingsGroup, { Item } from './settings-group';
+import RadioGroup from '../radio-settings-group';
+import ToggleGroup from '../toggle-settings-group';
+import SettingsGroup, { Item } from '../settings-group';
 
-import { setWPToken } from '../state/settings/actions';
+import { setWPToken } from '../../state/settings/actions';
 
 const settingTabs = ['account', 'display'];
 

lib/dialogs/share.jsx → lib/dialogs/share/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import createHash from 'create-hash/browser';
-import isEmailTag from '../utils/is-email-tag';
-import TabbedDialog from '../tabbed-dialog';
-import ToggleControl from '../controls/toggle';
+import isEmailTag from '../../utils/is-email-tag';
+import TabbedDialog from '../../tabbed-dialog';
+import ToggleControl from '../../controls/toggle';
 import { includes, isEmpty } from 'lodash';
 
 const shareTabs = ['collaborate', 'publish'];

lib/editable-list.jsx → lib/editable-list/index.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import SmallCrossOutlineIcon from './icons/cross-outline-small';
-import ReorderIcon from './icons/reorder';
+import SmallCrossOutlineIcon from '../icons/cross-outline-small';
+import ReorderIcon from '../icons/reorder';
 
 export class EditableList extends Component {
   static displayName = 'EditableList';

lib/navigation-bar.jsx → lib/navigation-bar/index.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import onClickOutside from 'react-onclickoutside';
-import TagList from './tag-list';
-import NotesIcon from './icons/notes';
-import TrashIcon from './icons/trash';
-import SettingsIcon from './icons/settings';
-import { viewExternalUrl } from './utils/url-utils';
+import TagList from '../tag-list';
+import NotesIcon from '../icons/notes';
+import TrashIcon from '../icons/trash';
+import SettingsIcon from '../icons/settings';
+import { viewExternalUrl } from '../utils/url-utils';
 import classNames from 'classnames';
-import appState from './flux/app-state';
+import appState from '../flux/app-state';
 
 const {
   selectAllNotes,

lib/note-detail.jsx → lib/note-detail/index.jsx

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import highlight from 'highlight.js';
 import { get, debounce, invoke, noop } from 'lodash';
-import analytics from './analytics';
-import { viewExternalUrl } from './utils/url-utils';
-import NoteContentEditor from './note-content-editor';
+import analytics from '../analytics';
+import { viewExternalUrl } from '../utils/url-utils';
+import NoteContentEditor from '../note-content-editor';
 
-import { renderNoteToHtml } from './utils/render-note-to-html';
+import { renderNoteToHtml } from '../utils/render-note-to-html';
 
 const saveDelay = 2000;
 

lib/note-editor.jsx → lib/note-editor/index.jsx

@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import NoteDetail from './note-detail';
-import TagField from './tag-field';
-import NoteToolbar from './note-toolbar';
-import RevisionSelector from './revision-selector';
+import NoteDetail from '../note-detail';
+import TagField from '../tag-field';
+import NoteToolbar from '../note-toolbar';
+import RevisionSelector from '../revision-selector';
 import { get, property } from 'lodash';
 
-import { renderNoteToHtml } from './utils/render-note-to-html';
+import { renderNoteToHtml } from '../utils/render-note-to-html';
 
 export class NoteEditor extends Component {
   static displayName = 'NoteEditor';

lib/note-info.jsx → lib/note-info/index.jsx

@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import onClickOutside from 'react-onclickoutside';
 import { includes, isEmpty } from 'lodash';
-import ToggleControl from './controls/toggle';
+import ToggleControl from '../controls/toggle';
 import moment from 'moment';
-import CrossIcon from './icons/cross';
+import CrossIcon from '../icons/cross';
 import { connect } from 'react-redux';
-import appState from './flux/app-state';
-import { setMarkdown } from './state/settings/actions';
-import filterNotes from './utils/filter-notes';
+import appState from '../flux/app-state';
+import { setMarkdown } from '../state/settings/actions';
+import filterNotes from '../utils/filter-notes';
 
 export class NoteInfo extends Component {
   static propTypes = {

lib/note-list.jsx → lib/note-list/index.jsx

@@ -15,14 +15,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { AutoSizer, List } from 'react-virtualized';
-import PublishIcon from './icons/feed';
+import PublishIcon from '../icons/feed';
 import classNames from 'classnames';
 import { debounce, escapeRegExp, get, isEmpty } from 'lodash';
 import { connect } from 'react-redux';
-import appState from './flux/app-state';
-import { tracks } from './analytics';
-import filterNotes from './utils/filter-notes';
-import noteTitle from './utils/note-utils';
+import appState from '../flux/app-state';
+import { tracks } from '../analytics';
+import filterNotes from '../utils/filter-notes';
+import noteTitle from '../utils/note-utils';
 
 AutoSizer.displayName = 'AutoSizer';
 List.displayName = 'List';

lib/search-field.jsx → lib/search-field/index.jsx

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import SmallCrossIcon from './icons/cross-small';
-import appState from './flux/app-state';
-import { tracks } from './analytics';
+import SmallCrossIcon from '../icons/cross-small';
+import appState from '../flux/app-state';
+import { tracks } from '../analytics';
 
 const { search, setSearchFocus } = appState.actionCreators;
 const { recordEvent } = tracks;

lib/email-tooltip.jsx → lib/tag-email-tooltip/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import appState from './flux/app-state';
+import appState from '../flux/app-state';
 
 export const EmailToolTip = ({ openShareDialog }) => (
   <div className="tag-email-tooltip">

lib/tag-email-tooltip/style.scss

@@ -0,0 +1,32 @@
+.tag-email-tooltip {
+  position: absolute;
+  bottom: 40px;
+  padding: 5px 0;
+  max-width: 360px;
+  margin-left: 20px;
+  margin-right: 20px;
+  z-index: 100000;
+  opacity: 0.99999;
+}
+
+.tag-email-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: solid transparent;
+  opacity: 0.75;
+  bottom: 0;
+  left: 50px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #000;
+}
+
+.tag-email-tooltip__inside {
+  padding: 6px 8px;
+  color: #fff;
+  text-align: center;
+  border-radius: 3px;
+  background-color: #000;
+  opacity: 0.75;
+}

lib/tag-field.jsx → lib/tag-field/index.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
-import isEmailTag from './utils/is-email-tag';
-import EmailToolTip from './email-tooltip';
-import TagChip from './components/tag-chip';
-import TagInput from './tag-input';
+import isEmailTag from '../utils/is-email-tag';
+import EmailToolTip from '../tag-email-tooltip';
+import TagChip from '../components/tag-chip';
+import TagInput from '../tag-input';
 import classNames from 'classnames';
-import analytics from './analytics';
+import analytics from '../analytics';
 import {
   differenceBy,
   intersectionBy,
@@ -178,7 +178,7 @@ export class TagField extends Component {
     const { selectedTag, showEmailTooltip, tagInput } = this.state;
 
     return (
-      <div className="tag-entry theme-color-border">
+      <div className="tag-field theme-color-border">
         <div
           className={classNames('tag-editor', {
             'has-selection': this.hasSelection(),

lib/tag-field/style.scss

@@ -0,0 +1,30 @@
+.tag-field {
+  border-left: 1px solid lighten($gray, 30%);
+}
+
+.tag-editor {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  line-height: 1.75em;
+  white-space: nowrap;
+  overflow: visible;
+  max-height: 120px;
+	padding: 8px 12px;
+
+  &:focus {
+    outline: none;
+  }
+
+  .hidden-tag {
+    width: 0;
+    height: 0;
+    border: 0;
+    padding: 0;
+    opacity: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

scss/tag-input.scss → lib/tag-input/style.scss

@@ -1,7 +1,18 @@
 .tag-input {
   display: flex;
+  flex: 1 0 auto;
   overflow: visible;
   min-height: 26px;
+
+  input {
+    width: 100%;
+    height: 1.75em;
+    min-width: 140px;
+    outline: none;
+    font: 14px/1.5 $sans;
+    color: darken($gray, 20%);
+    background: transparent;
+  }
 }
 
 .tag-input__entry {

lib/tag-list.jsx → lib/tag-list/index.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import EditableList from './editable-list';
+import EditableList from '../editable-list';
 import { get } from 'lodash';
-import appState from './flux/app-state';
-import { tracks } from './analytics';
+import appState from '../flux/app-state';
+import { tracks } from '../analytics';
 
 const {
   editTags,

scss/_components.scss

@@ -0,0 +1,21 @@
+@import 'auth/style';
+@import 'components/spinner/style';
+@import 'components/tag-chip/style';
+@import 'controls/checkbox/style';
+@import 'controls/toggle/style';
+@import 'dialog/style';
+@import 'dialogs/about/style';
+@import 'dialogs/settings/style';
+@import 'dialogs/share/style';
+@import 'editable-list/style';
+@import 'icons/style';
+@import 'navigation-bar/style';
+@import 'note-editor/style';
+@import 'note-info/style';
+@import 'note-list/style';
+@import 'revision-selector/style';
+@import 'search-field/style';
+@import 'tag-email-tooltip/style';
+@import 'tag-field/style';
+@import 'tag-input/style';
+@import 'tag-list/style';