Fix UI, clear code

Author: Blari

package.json

@@ -212,5 +212,8 @@
   "resolutions": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "engines": {
+    "node": "14"
   }
 }

src/components/Header/Header.module.scss

@@ -29,7 +29,7 @@
     }
 
     .input-group-prepend-icon {
-      background-color: var(--input-bg);
+      background-color: var(--input-bg-color);
       transition: background-color ease-in-out 0.15s;
       border-top-left-radius: 0.3rem;
       border-bottom-left-radius: 0.3rem;
@@ -40,7 +40,7 @@
     }
 
     .form-control {
-      background-color: var(--input-bg);
+      background: var(--input-bg-color);
       color: var(--input-color);
       &::placeholder {
         color: var(--input-color);

src/components/Helper/Helper.js

@@ -201,7 +201,7 @@ class Helper extends Component {
 
             <h5 className="mt-4 navbar-color-picker">Navbar Color</h5>
             <CustomColorPicker 
-              colors={config.app.colors}
+              colors={config.app.navbarColors}
               activeColor={navbarColor}
               updateColor={this.updateColor}
               customizationItem={"navbar"}
@@ -222,7 +222,7 @@ class Helper extends Component {
 
             <h5 className="mt-4 sidebar-color-picker">Sidebar Color</h5>
             <CustomColorPicker 
-              colors={config.app.colors}
+              colors={config.app.sidebarColors}
               activeColor={sidebarColor}
               updateColor={this.changeTheme}
               customizationItem={"sidebar"}

src/components/Users/changePassword/ChangePasswordForm.js

@@ -51,7 +51,7 @@ class UsersForm extends Component {
 
                 <div className="form-buttons">
                   <button
-                    className="btn btn-primary me-3"
+                    className="btn btn-success me-3"
                     disabled={saveLoading}
                     type="button"
                     onClick={form.handleSubmit}
@@ -61,7 +61,7 @@ class UsersForm extends Component {
                   </button>{' '}
 
                   <button
-                    className="btn btn-light"
+                    className="btn btn-gray-default"
                     type="button"
                     disabled={saveLoading}
                     onClick={() => this.props.onCancel()}

src/components/Users/form/UsersForm.js

@@ -100,7 +100,7 @@ class UsersForm extends Component {
 
                 <div className="form-buttons">
                   <button
-                    className="me-3 btn btn-primary"
+                    className="me-3 btn btn-success"
                     disabled={saveLoading}
                     type="button"
                     onClick={form.handleSubmit}
@@ -109,7 +109,7 @@ class UsersForm extends Component {
                   </button>{' '}{' '}
 
                   <button
-                    className="me-3 btn btn-light"
+                    className="me-3 btn btn-gray-default"
                     type="button"
                     disabled={saveLoading}
                     onClick={form.handleReset}
@@ -118,7 +118,7 @@ class UsersForm extends Component {
                   </button>{' '}{' '}
 
                     <button
-                      className="me-3 btn btn-light"
+                      className="me-3 btn btn-gray-default"
                       type="button"
                       disabled={saveLoading}
                       onClick={() => this.props.onCancel()}

src/components/Users/form/UsersFormPage.js

@@ -69,7 +69,7 @@ class UsersFormPage extends Component {
           <div className="page-top-line">
             <h2 className="page-title">User - <span className="fw-semi-bold">Edit</span></h2>
             <Alert
-              color="primary"
+              color="warning"
               className={cx(s.promoAlert, {[s.showAlert]: this.state.promoAlert})}
             >
               This page is only available in <a className="text-white font-weight-bold" rel="noreferrer noopener" href="https://flatlogic.com/templates/sing-app-react-node-js" target="_blank">Sing App React with NodeJS/.NET</a> integration!

src/components/Users/list/UsersListPage.js

@@ -28,7 +28,7 @@ class UsersListPage extends Component {
         <div className="page-top-line">
           <h2 className="page-title">User - <span className="fw-semi-bold">Management</span></h2>
           <Alert
-            color="primary"
+            color="warning"
             className={cx(s.promoAlert, {[s.showAlert]: this.state.promoAlert})}
           >
             This page is only available in <a className="text-white fw-bold" rel="noreferrer noopener" href="https://flatlogic.com/admin-dashboards/sing-app-react-node-js" target="_blank">Sing App React with Node.js</a> integration!

src/config.js

@@ -15,6 +15,21 @@ export default {
     password: 'password'
   },
   app: {
+    sidebarColors: {
+      first: '#3D3D3D',
+      second: '#4B505F',
+      third: '#483CB6',
+      fourth: '#EFF2F5',
+      fifth: '#20AE8C'
+    },
+    navbarColors: {
+      first: '#ffffff',
+      second: '#E2E7EC',
+      third: '#C9D1FB',
+      fourth: '#C1C3CF',
+      fifth: '#0C2236',
+      sixth: '#6FB0F9'
+    },
     colors: {
       dark: "#002B49",
       light: "#FFFFFF",

src/images/sidebar/basil/Home.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
 const Home = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M13.796 4.13609C12.8136 3.12147 11.1863 3.12147 10.2039 4.13608L5.40546 9.09182C5.12987 9.37643 4.94469 9.73624 4.87323 10.1259C4.29047 13.3039 4.24745 16.5573 4.74599 19.7496L4.92249 20.8798C4.97824 21.2368 5.2857 21.5 5.64701 21.5H8.99997C9.27611 21.5 9.49997 21.2761 9.49997 21V14H14.5V21C14.5 21.2761 14.7238 21.5 15 21.5H18.3529C18.7142 21.5 19.0217 21.2368 19.0774 20.8798L19.2539 19.7496C19.7524 16.5573 19.7094 13.3039 19.1267 10.1259C19.0552 9.73624 18.87 9.37643 18.5944 9.09182L13.796 4.13609Z" fill="currentColor"/>
-    </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5578 5.53423C12.6873 4.69887 11.3127 4.69887 10.4422 5.53423L5.81574 9.97357C5.70239 10.0823 5.62614 10.224 5.5978 10.3785C5.04367 13.4004 5.00277 16.494 5.47681 19.5295L5.58933 20.25H8.56579V14.0387C8.56579 13.6244 8.90158 13.2887 9.31579 13.2887H14.6842C15.0984 13.2887 15.4342 13.6244 15.4342 14.0387V20.25H18.4107L18.5232 19.5295C18.9972 16.494 18.9563 13.4004 18.4022 10.3785C18.3739 10.224 18.2976 10.0823 18.1843 9.97357L13.5578 5.53423ZM9.40363 4.45191C10.8546 3.05965 13.1454 3.05965 14.5964 4.45191L19.2228 8.89125C19.5634 9.21804 19.7925 9.64373 19.8776 10.108C20.4621 13.2956 20.5053 16.559 20.0052 19.7609L19.8245 20.9184C19.7497 21.3971 19.3374 21.75 18.8529 21.75H14.6842C14.27 21.75 13.9342 21.4142 13.9342 21V14.7887H10.0658V21C10.0658 21.4142 9.73 21.75 9.31579 21.75H5.14706C4.66258 21.75 4.25029 21.3971 4.17554 20.9184L3.99478 19.7609C3.49473 16.559 3.53788 13.2956 4.12241 10.108C4.20754 9.64373 4.43662 9.21804 4.77719 8.89125L9.40363 4.45191Z" />
+  </svg>
 )
 
 

src/pages/auth/login/Login.js

@@ -88,7 +88,7 @@ class Login extends React.Component {
                         <p className="widget-auth-info">
                             Use your email to sign in.
                         </p>
-                        <Alert className="alert-sm text-center mt-2" color="secondary">
+                        <Alert className="alert-sm text-center mt-2 bg-primary-300" color="secondary">
                             For user with "admin" role use
                             <br/>
                             <span className="fw-bold">"admin@flatlogic.com / password"</span>
@@ -110,14 +110,14 @@ class Login extends React.Component {
                                 <input className="form-control no-border" value={this.state.password} onChange={this.changePassword} type="password" required name="password" placeholder="Password" />
                             </div>
                             <Link className="d-block text-right mb-3 mt-1 fs-sm" to="forgot">Forgot password?</Link>
-                            <Button type="submit" color="info" className="auth-btn mb-3" size="sm">{this.props.isFetching ? 'Loading...' : 'Login'}</Button>
+                            <Button type="submit" color="primary" className="auth-btn mb-3" size="sm">{this.props.isFetching ? 'Loading...' : 'Login'}</Button>
                             <p className="widget-auth-info">or sign in with</p>
                             <div className="social-buttons">
-                                <Button onClick={this.googleLogin} color="primary" className="social-button mb-2">
+                                <Button onClick={this.googleLogin} color="warning" className="social-button mb-2">
                                     <i className="social-icon social-google"/>
                                     <p className="social-text">GOOGLE</p>
                                 </Button>
-                                <Button onClick={this.microsoftLogin} color="success" className="social-button">
+                                <Button onClick={this.microsoftLogin} color="danger" className="social-button">
                                     <i className="social-icon social-microsoft"
                                        style={{backgroundImage: `url(${microsoft})`}}/>
                                     <p className="social-text">MICROSOFT</p>