Replaced double quotes with single quotes in sass imports

src/App.scss

@@ -1,4 +1,4 @@
-@import "./utils/base";
+@import './utils/base';
 
 .app {
   padding-top: $headerHeight;

src/common/AsideMenu.scss

@@ -1,4 +1,4 @@
-@import "../utils/base";
+@import '../utils/base';
 
 .aside-menu {
   background-color: #f7f7f7;

src/common/DateInput.scss

@@ -1,4 +1,4 @@
-@import "../utils/mixins/vertical-align";
+@import '../utils/mixins/vertical-align';
 
 .date-input-container {
   position: relative;

src/common/Home.scss

@@ -1,4 +1,4 @@
-@import "../utils/base";
+@import '../utils/base';
 
 .home-container {
   text-align: center;

src/common/MainHeader.scss

@@ -1,4 +1,4 @@
-@import "../utils/base";
+@import '../utils/base';
 
 .main-header.main-header {
   background-color: $mainColor !important;

src/index.scss

@@ -1,4 +1,4 @@
-@import "./utils/base";
+@import './utils/base';
 
 * {
   outline: none !important;

src/servers/CreateServer.scss

@@ -1,4 +1,4 @@
-@import "../utils/base";
+@import '../utils/base';
 
 .create-server {
   padding: 40px 20px;

src/short-urls/CreateShortUrl.scss

@@ -1,6 +1,6 @@
-@import "../../node_modules/react-tag-autocomplete/example/styles.css";
+@import '../../node_modules/react-tag-autocomplete/example/styles.css';
-@import "../utils/mixins/box-shadow";
+@import '../utils/mixins/box-shadow';
-@import "../utils/mixins/border-radius";
+@import '../utils/mixins/border-radius';
 
 .create-short-url__btn:not(:first-child) {
   margin-left: 5px;

src/short-urls/SearchBar.scss

@@ -1,4 +1,4 @@
-@import "../utils/mixins/vertical-align";
+@import '../utils/mixins/vertical-align';
 
 .search-bar {
   position: relative;

src/short-urls/ShortUrlsList.scss

@@ -1,4 +1,4 @@
-@import "../utils/base";
+@import '../utils/base';
 
 .short-urls-list__header {
   @media (max-width: $smMax) {

src/short-urls/helpers/PreviewModal.scss

@@ -1,4 +1,4 @@
-@import "../../utils/mixins/horizontal-align";
+@import '../../utils/mixins/horizontal-align';
 
 .preview-modal__img {
   max-width: 100%;

src/short-urls/helpers/ShortUrlsRow.js

@@ -6,7 +6,7 @@ import './ShortUrlsRow.scss';
 import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
 
 export class ShortUrlsRow extends React.Component {
-  state = { displayMenu: false, copiedToClipboard: false };
+  state = { copiedToClipboard: false };
 
   renderTags(tags) {
     if (isEmpty(tags)) {
@@ -25,11 +25,7 @@ export class ShortUrlsRow extends React.Component {
     const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
 
     return (
-      <tr
+      <tr className="short-urls-row">
-        className="short-urls-row"
-        onMouseEnter={() => this.setState({displayMenu: true})}
-        onMouseLeave={() => this.setState({displayMenu: false})}
-      >
         <td className="nowrap short-urls-row__cell" data-th="Created at: ">
           <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
         </td>
@@ -49,7 +45,6 @@ export class ShortUrlsRow extends React.Component {
             Copied short URL!
           </small>
           <ShortUrlsRowMenu
-            display={this.state.displayMenu}
             shortUrl={completeShortUrl}
             selectedServer={selectedServer}
             shortCode={shortUrl.shortCode}

src/short-urls/helpers/ShortUrlsRow.scss

@@ -1,11 +1,12 @@
-@import "../../utils/base";
+@import '../../utils/base';
-@import "../../utils/mixins/vertical-align";
+@import '../../utils/mixins/vertical-align';
 
 .short-urls-row {
   @media (max-width: $smMax) {
     display: block;
     margin-bottom: 10px;
     border-bottom: 1px solid $lightGrey;
+    position: relative;
   }
 }
 
@@ -25,7 +26,11 @@
     }
 
     &:last-child {
-      display: none;
+      position: absolute;
+      top: 3px;
+      right: .5rem;
+      width: auto;
+      padding: 0;
     }
   }
 }

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -17,16 +17,14 @@ export class ShortUrlsRowMenu extends React.Component {
   toggle = () => this.setState({ isOpen: !this.state.isOpen });
 
   render() {
-    const { display, shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
+    const { shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
     const serverId = selectedServer ? selectedServer.id : '';
-    const baseClass = 'short-urls-row-menu__dropdown-toggle';
-    const toggleClass = !display ? `${baseClass} short-urls-row-menu__dropdown-toggle--hidden` : baseClass;
     const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
     const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
-        <DropdownToggle color="white" size="sm" caret className={toggleClass}>
+        <DropdownToggle color="white" size="sm" caret className="short-urls-row-menu__dropdown-toggle">
           &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
         </DropdownToggle>
         <DropdownMenu>