feat: improvements (#70)

* fix: clear search button character

* fix: replace substr with slice

* fix: importing svg files

* fix: move svg files to assets/svg

* fix: rename components/*.js to components/*.jsx

* chore: increment version

* chore: build

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

app/components/AuthEntry.js → app/components/AuthEntry.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { totp } from '@Lib/otp';
 import CountdownPie from '@Components/CountdownPie';
 import AuthMenu from '@Components/AuthMenu';
-import DragIndicator from '@Components/DragIndicator';
+import DragIndicator from '../assets/svg/drag-indicator.svg';
 import { getEntryColor, getVarColorForContrast, hexColorToRGB } from '@Lib/utils';
 
 export default class AuthEntry extends React.Component {
@@ -154,8 +154,8 @@ export default class AuthEntry extends React.Component {
             </div>
             <div className="auth-token-info">
               <div className="auth-token" onClick={() => this.copyToClipboard(token)}>
-                <div>{token.substr(0, 3)}</div>
-                <div>{token.substr(3, 3)}</div>
+                <div>{token.slice(0, 3)}</div>
+                <div>{token.slice(3, 6)}</div>
               </div>
               <div className="auth-countdown">
                 <CountdownPie

app/components/Home.js → app/components/Home.jsx

@@ -5,7 +5,7 @@ import ViewEntries from '@Components/ViewEntries';
 import ConfirmDialog from '@Components/ConfirmDialog';
 import DataErrorAlert from '@Components/DataErrorAlert';
 import EditorKit from '@standardnotes/editor-kit';
-import ReorderIcon from '@Components/ReorderIcon';
+import ReorderIcon from '../assets/svg/reorder-icon.svg';
 
 const initialState = {
   text: '',
@@ -281,7 +281,7 @@ export default class Home extends React.Component {
               />
               {searchValue && (
                 <div onClick={this.clearSearchValue} className="sk-button danger">
-                  <div className="sk-label">X</div>
+                  <div className="sk-label">✕</div>
                 </div>
               )}
             </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sn-token-vault",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "main": "dist/dist.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -21,6 +21,7 @@
     "@babel/preset-react": "^7.12.13",
     "@standardnotes/editor-kit": "2.1.4",
     "@standardnotes/eslint-config-extensions": "^1.0.1",
+    "@svgr/webpack": "^6.1.2",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.1.3",
     "eslint": "^7.21.0",

webpack.config.js

@@ -37,7 +37,14 @@ module.exports = {
         use: ['babel-loader']
       },
       {
-        test: /\.svg$/,
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: ['@svgr/webpack'],
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.s[ac]ss$/i,
         exclude: /node_modules/,
         use: [
           {