Use built-in Sass support from Create React App

This change updates the frontend to use the built-in Sass support
provided by Create React App to simplify the development pipeline.

19 files changed, 19 insertions, 19 deletions

diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index 54709482..7cbb45c0 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import './ScaleIndicatorComponent.css'
+import './ScaleIndicatorComponent.sass'
 
 const ScaleIndicatorComponent = ({ scale }) => (
     <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e0e4d554..f372734d 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
 import ExportCanvasComponent from './ExportCanvasComponent'
-import './ToolPanelComponent.css'
+import './ToolPanelComponent.sass'
 
 const ToolPanelComponent = () => (
     <div className="tool-panel">
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index e1760d5e..f7368f54 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React from 'react'
-import './Sidebar.css'
+import './Sidebar.sass'
 
 class Sidebar extends React.Component {
     static propTypes = {
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index aa7a4f8f..12be26bd 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
-import './MachineListComponent.css'
+import './MachineListComponent.sass'
 
 const MachineListComponent = ({ machineIds }) => {
     return (
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index d7127114..ca41bf57 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -3,7 +3,7 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology
 import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
 import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
 import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import './RackSidebarComponent.css'
+import './RackSidebarComponent.sass'
 import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
 
 const RackSidebarComponent = () => {
diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index 095fb939..42bdab8a 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import './ContactSection.css'
+import './ContactSection.sass'
 import ContentSection from './ContentSection'
 
 const ContactSection = () => (
diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js
index ba2e4ec3..9d4832d9 100644
--- a/frontend/src/components/home/ContentSection.js
+++ b/frontend/src/components/home/ContentSection.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import './ContentSection.css'
+import './ContentSection.sass'
 
 const ContentSection = ({ name, title, children }) => (
     <div id={name} className={classNames(name + '-section', 'content-section')}>
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index f7af4cd9..7b410679 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './JumbotronHeader.css'
+import './JumbotronHeader.sass'
 
 const JumbotronHeader = () => (
     <section className="jumbotron-header">
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index d0ff54bd..c987d5d0 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import ContentSection from './ContentSection'
-import './ScreenshotSection.css'
+import './ScreenshotSection.sass'
 
 const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
index 293049e1..7a1c2462 100644
--- a/frontend/src/components/navigation/AppNavbarComponent.js
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
 import Navbar, { NavItem } from './Navbar'
-import './Navbar.css'
+import './Navbar.sass'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 798d1b97..e22933af 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import Navbar from './Navbar'
-import './Navbar.css'
+import './Navbar.sass'
 
 const ScrollNavItem = ({ id, name }) => (
     <li className="nav-item">
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index b1f1f7ae..164a2309 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -5,7 +5,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.css'
+import './Navbar.sass'
 
 export const NAVBAR_HEIGHT = 60
 
diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js
index bc2d2366..dbdba212 100644
--- a/frontend/src/components/not-found/BlinkingCursor.js
+++ b/frontend/src/components/not-found/BlinkingCursor.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './BlinkingCursor.css'
+import './BlinkingCursor.sass'
 
 const BlinkingCursor = () => <span className="blinking-cursor">_</span>
 
diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js
index 6783d6a8..bcc522c9 100644
--- a/frontend/src/components/not-found/CodeBlock.js
+++ b/frontend/src/components/not-found/CodeBlock.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './CodeBlock.css'
+import './CodeBlock.sass'
 
 const CodeBlock = () => {
     const textBlock =
diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js
index 490fd4c7..a25e558a 100644
--- a/frontend/src/components/not-found/TerminalWindow.js
+++ b/frontend/src/components/not-found/TerminalWindow.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
-import './TerminalWindow.css'
+import './TerminalWindow.sass'
 
 const TerminalWindow = () => (
     <div className="terminal-window">
diff --git a/frontend/src/components/projects/FilterPanel.js b/frontend/src/components/projects/FilterPanel.js
index 0970f573..2b9795d0 100644
--- a/frontend/src/components/projects/FilterPanel.js
+++ b/frontend/src/components/projects/FilterPanel.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.css'
+import './FilterPanel.sass'
 
 const FilterPanel = () => (
     <div className="btn-group filter-panel mb-2">
diff --git a/frontend/src/index.js b/frontend/src/index.js
index c49e0b68..0971b1e6 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
-import './index.css'
+import './index.sass'
 import Routes from './routes'
 import configureStore from './store/configure-store'
 
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 5000ebfe..6fc940c0 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -9,7 +9,7 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import './Home.css'
+import './Home.sass'
 
 function Home() {
     return (
diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js
index f72c7d01..72be7342 100644
--- a/frontend/src/pages/NotFound.js
+++ b/frontend/src/pages/NotFound.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import DocumentTitle from 'react-document-title'
 import TerminalWindow from '../components/not-found/TerminalWindow'
-import './NotFound.css'
+import './NotFound.sass'
 
 const NotFound = () => (
     <DocumentTitle title="Page Not Found - OpenDC">