Improve Sass class names and imports

yuheng222 · Nov 15, 2019 · 324b705 · 324b705
1 parent a421f35
commit 324b705
Show file tree

Hide file tree

Showing 47 changed files with 69 additions and 75 deletions.
diff --git a/web/.env b/web/.env
@@ -1,2 +1,2 @@
-NODE_PATH=src/
-SASS_PATH=src/
+NODE_PATH=src
+SASS_PATH=./node_modules;./src
diff --git a/web/src/components/Accounts/Single/index.js b/web/src/components/Accounts/Single/index.js
@@ -4,7 +4,7 @@ import { chunker } from 'tools';
 
 const SingleAccount = ({ singleAcc }) => {
    return (
-      <section className="single-account module">
+      <section className="module single-account">
          <h1>{singleAcc.type} account</h1>
          <ul>
             <li>Sortcode: {chunker(singleAcc.sortcode, 2, '-')}</li>

diff --git a/web/src/components/Cards/LimitsChange/index.js b/web/src/components/Cards/LimitsChange/index.js
@@ -7,7 +7,7 @@ import Form from './Form';
 const LimitsChange = props => {
    return (
       <div className="col-sm-6 col-sm-offset-3">
-         <section className="limits-change module">
+         <section className="module limits-change">
             <h1>Limits change</h1>
             <p>
                <strong>{props.singleCard.type} card</strong>
@@ -44,7 +44,4 @@ const mapDispatchToProps = (dispatch, ownProps) => {
    };
 };
 
-export default connect(
-   mapStateToProps,
-   mapDispatchToProps
-)(LimitsChange);
+export default connect(mapStateToProps, mapDispatchToProps)(LimitsChange);
diff --git a/web/src/components/Cards/PINChange/index.js b/web/src/components/Cards/PINChange/index.js
@@ -7,7 +7,7 @@ import Form from './Form';
 const PINChange = props => {
    return (
       <div className="col-sm-6 col-sm-offset-3">
-         <section className="pin-change module">
+         <section className="module pin-change">
             <h1>PIN change</h1>
             <p>
                <strong>{props.singleCard.type} card</strong>
@@ -36,7 +36,4 @@ const mapDispatchToProps = (dispatch, ownProps) => {
    };
 };
 
-export default connect(
-   mapStateToProps,
-   mapDispatchToProps
-)(PINChange);
+export default connect(mapStateToProps, mapDispatchToProps)(PINChange);
diff --git a/web/src/components/CurrencyStats/CurrencyBox/style.scss b/web/src/components/CurrencyStats/CurrencyBox/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .currency-box {
    text-align: center;

diff --git a/web/src/components/CurrencyStats/CurrencySettings/style.scss b/web/src/components/CurrencyStats/CurrencySettings/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .currency-settings-form {
    display: flex;

diff --git a/web/src/components/CurrencyStats/Header/style.scss b/web/src/components/CurrencyStats/Header/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .currency-stats-header {
    margin: 0 0 2.5rem;

diff --git a/web/src/components/CurrencyStats/List/style.scss b/web/src/components/CurrencyStats/List/style.scss
@@ -1,3 +1,3 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .currency-boxes-container {}
diff --git a/web/src/components/Help/index.js b/web/src/components/Help/index.js
@@ -2,26 +2,26 @@ import React from 'react';
 import ContactForm from './Form';
 
 const Help = () => (
-  <div className="row panel-content">
-    <div className="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-      <section className="help module">
-        <h1>Do you need help?</h1>
+   <div className="row panel-content">
+      <div className="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
+         <section className="module help">
+            <h1>Do you need help?</h1>
 
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Et beatae temporibus quasi
-          natus consectetur illum perferendis commodi neque molestiae recusandae.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Et beatae temporibus quasi
-          natus consectetur illum perferendis commodi neque molestiae recusandae.
-        </p>
+            <p>
+               Lorem ipsum dolor sit amet consectetur adipisicing elit. Et beatae temporibus quasi
+               natus consectetur illum perferendis commodi neque molestiae recusandae.
+            </p>
+            <p>
+               Lorem ipsum dolor sit amet consectetur adipisicing elit. Et beatae temporibus quasi
+               natus consectetur illum perferendis commodi neque molestiae recusandae.
+            </p>
 
-        <h2>Contact us</h2>
+            <h2>Contact us</h2>
 
-        <ContactForm />
-      </section>
-    </div>
-  </div>
+            <ContactForm />
+         </section>
+      </div>
+   </div>
 );
 
 export default Help;
diff --git a/web/src/components/Home/Features/style.scss b/web/src/components/Home/Features/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .home-features {
    display: flex;

diff --git a/web/src/components/Home/Header/style.scss b/web/src/components/Home/Header/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .home-header {
    margin-bottom: 4rem;

diff --git a/web/src/components/Home/NewFeatures/style.scss b/web/src/components/Home/NewFeatures/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .home-new-features-box {
    margin: 3.5rem 0 0;

diff --git a/web/src/components/Infobox/AccountDetails/style.scss b/web/src/components/Infobox/AccountDetails/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .account-name {
    text-align: center;

diff --git a/web/src/components/Infobox/AccountInfobox/index.js b/web/src/components/Infobox/AccountInfobox/index.js
@@ -9,7 +9,7 @@ import AccountSummary from '../AccountSummary';
 
 const CardInfobox = () => {
    return (
-      <section className="infobox account-infobox module">
+      <section className="module infobox account-infobox">
          <header>
             <AccountDetails />
          </header>

diff --git a/web/src/components/Infobox/AccountInfobox/style.scss b/web/src/components/Infobox/AccountInfobox/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .account-infobox {
 

diff --git a/web/src/components/Infobox/AccountName/style.scss b/web/src/components/Infobox/AccountName/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .account-name {
    text-align: center;

diff --git a/web/src/components/Infobox/AccountSummary/style.scss b/web/src/components/Infobox/AccountSummary/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .account-summary {
 

diff --git a/web/src/components/Infobox/CardDetails/style.scss b/web/src/components/Infobox/CardDetails/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 // Card details
 

diff --git a/web/src/components/Infobox/CardInfobox/index.js b/web/src/components/Infobox/CardInfobox/index.js
@@ -22,7 +22,7 @@ const CardInfobox = ({
    currentUrl
 }) => {
    return (
-      <section className="infobox card-infobox module">
+      <section className="module infobox card-infobox">
          <header>
             <CardLogos type="visa" />
             <CardDetails number={number} expiresMonth={expiresMonth} expiresYear={expiresYear} />

diff --git a/web/src/components/Infobox/CardInfobox/style.scss b/web/src/components/Infobox/CardInfobox/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .card-infobox {
 

diff --git a/web/src/components/Infobox/CardLogos/style.scss b/web/src/components/Infobox/CardLogos/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 // Card company info
 

diff --git a/web/src/components/Infobox/style.scss b/web/src/components/Infobox/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .infobox {
    max-width: 36.5rem;

diff --git a/web/src/components/Messages/Single/index.js b/web/src/components/Messages/Single/index.js
@@ -6,7 +6,7 @@ const SingleMessage = ({ singleMessage: { title, sentDate, content } }) => {
    sentDate = formatDate(sentDate, 'dd/MM/yyyy HH:mm');
 
    return (
-      <section className="single-message module">
+      <section className="module single-message">
          <h1>{title}</h1>
          <p>Date: {sentDate}</p>
 

diff --git a/web/src/components/Navigation/Header/style.scss b/web/src/components/Navigation/Header/style.scss
@@ -1,5 +1,5 @@
-@import '~components/App/variables';
-@import '~components/App/mixins';
+@import 'components/App/variables';
+@import 'components/App/mixins';
 
 // Navigation header
 .navigation-header {

diff --git a/web/src/components/Navigation/MainNavigation/style.scss b/web/src/components/Navigation/MainNavigation/style.scss
@@ -1,5 +1,5 @@
-@import '~components/App/variables';
-@import '~components/App/mixins';
+@import 'components/App/variables';
+@import 'components/App/mixins';
 
 // Main navigation
 

diff --git a/web/src/components/NewsletterBox/style.scss b/web/src/components/NewsletterBox/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .newsletter-box {
    display: none;

diff --git a/web/src/components/Profile/Header/style.scss b/web/src/components/Profile/Header/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .profile-header {
    background-image: linear-gradient(to right, $light-blue 0%, $dark-blue 100%);

diff --git a/web/src/components/Profile/Links/style.scss b/web/src/components/Profile/Links/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .profile-links {
    display: flex;

diff --git a/web/src/components/Profile/Stats/style.scss b/web/src/components/Profile/Stats/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .profile-stats {
    display: flex;

diff --git a/web/src/components/Transfers/New/index.js b/web/src/components/Transfers/New/index.js
@@ -16,7 +16,7 @@ class NewTransfer extends Component {
       return (
          <div className="row">
             <div className="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-               <section className="new-transfer module">
+               <section className="module new-transfer">
                   <h1>New transfer</h1>
 
                   <Form

diff --git a/web/src/components/Transfers/Single/index.js b/web/src/components/Transfers/Single/index.js
@@ -6,7 +6,7 @@ const SingleTransfer = ({ singleTrans: { type, date, payeeName, amount, status }
    date = formatDate(date, 'dd/MM/yyyy HH:mm');
 
    return (
-      <section className="single-transfer module">
+      <section className="module single-transfer">
          <h1>{type}</h1>
          <ul>
             <li>Date: {date}</li>

diff --git a/web/src/components/UI/Buttons/style.scss b/web/src/components/UI/Buttons/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .btn-bold {
    text-transform: uppercase;

diff --git a/web/src/components/UI/FormBoxes/Small/index.js b/web/src/components/UI/FormBoxes/Small/index.js
@@ -3,7 +3,7 @@ import loginIcon from '../login-icon.png';
 import './style.scss';
 
 const SmallFormBox = props => (
-   <section className="small-form-module module">
+   <section className="module small-form-module">
       <section className="login-icon">
          <div className="icon-container">
             <img src={loginIcon} className="img-responsive" alt="Login icon" />

diff --git a/web/src/components/UI/FormBoxes/Small/style.scss b/web/src/components/UI/FormBoxes/Small/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .small-form-module {
    max-width: 36.5rem;

diff --git a/web/src/components/Widgets/Charts/IncomeChart/style.scss b/web/src/components/Widgets/Charts/IncomeChart/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .income-chart-container {
    height: 23rem;

diff --git a/web/src/components/Widgets/IconedList/index.js b/web/src/components/Widgets/IconedList/index.js
@@ -14,7 +14,7 @@ const IconedList = props => {
 
    // Show list
    return (
-      <section className="iconed-list module">
+      <section className="module iconed-list">
          <ul>{listItems}</ul>
       </section>
    );

diff --git a/web/src/components/Widgets/IconedList/style.scss b/web/src/components/Widgets/IconedList/style.scss
@@ -1,5 +1,5 @@
-@import '~components/App/variables';
-@import '~components/App/mixins';
+@import 'components/App/variables';
+@import 'components/App/mixins';
 
 .iconed-list {
    max-width: 36.5rem;

diff --git a/web/src/components/Widgets/SingleMessage/index.js b/web/src/components/Widgets/SingleMessage/index.js
@@ -8,7 +8,7 @@ import './style.scss';
 
 const SingleMessage = props => {
    return (
-      <section className="message module">
+      <section className="module message">
          <header className="message-header">
             <h3>{props.title}</h3>
 

diff --git a/web/src/components/Widgets/SingleMessage/style.scss b/web/src/components/Widgets/SingleMessage/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .message {
    max-width: 36.5rem;

diff --git a/web/src/containers/CurrencyStats/index.js b/web/src/containers/CurrencyStats/index.js
@@ -28,7 +28,7 @@ class CurrencyStats extends Component {
          return (
             <div className="row">
                <div className="col-xs-12">
-                  <section className="currency-stats module container-module">
+                  <section className="module container-module currency-stats">
                      <div className="currency-stats-header text-center">
                         <Header />
                         <CurrencySettings

diff --git a/web/src/containers/CurrencyStats/style.scss b/web/src/containers/CurrencyStats/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .currency-stats-leave-section {
    margin: 4.5rem 0 0;

diff --git a/web/src/containers/Home/index.js b/web/src/containers/Home/index.js
@@ -19,7 +19,7 @@ class Home extends Component {
          return (
             <div className="row">
                <div className="col-xs-12">
-                  <section className="home module">
+                  <section className="module home">
                      <Header clientsCount={this.state.clientsCount} />
                      <Features />
                      <NewFeatures />

diff --git a/web/src/containers/Home/style.scss b/web/src/containers/Home/style.scss
@@ -1,4 +1,4 @@
-@import '~components/App/variables';
+@import 'components/App/variables';
 
 .home {
    max-width: 50rem;

diff --git a/web/src/containers/Navigation/index.js b/web/src/containers/Navigation/index.js
@@ -11,7 +11,7 @@ class Navigation extends Component {
       return (
          <div className="row">
             <div className="col-xs-12">
-               <section className="navigation module">
+               <section className="module navigation">
                   <NavigationHeader toggleMobileNav={this.toggleMobileNav} user={this.props.user} />
                   <MainNavigation isMobileNavVisible={this.state.isMobileNavVisible} />
                </section>

diff --git a/web/src/containers/Profile/index.js b/web/src/containers/Profile/index.js
@@ -20,7 +20,7 @@ const Profile = props => {
    return (
       <div className="row panel-content">
          <div className="col-xs-12">
-            <section className="profile module">
+            <section className="module profile">
                <ProfileHeader profile={props.profile} />
                <ProfileStats stats={props.profile.stats} />
                <ProfileLinks links={links} />

diff --git a/web/src/index.js b/web/src/index.js
@@ -7,7 +7,7 @@ import App from 'components/App';
 import * as serviceWorker from './serviceWorker';
 
 // Styles
-import './vendor/custom-bootstrap.scss';
+import 'vendor/custom-bootstrap.scss';
 
 // Store
 import configureStore, { history } from 'store';

diff --git a/web/src/vendor/custom-bootstrap.scss b/web/src/vendor/custom-bootstrap.scss
@@ -5,7 +5,7 @@
  */
 
 // Core variables and mixins
-@import '~components/App/variables';
+@import 'components/App/variables';
 // @import "bootstrap/variables";
 @import 'bootstrap/mixins';