icons

Author: maxchistt

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^4.6.0",
+    "bootstrap-icons": "^1.4.1",
     "jquery": "^3.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package.json

@@ -199,9 +199,15 @@ function App() {
               <img src={logo} className="App-logo" alt="logo" />
               <h1 className="h2 m-0">{testText}</h1>
             </div>
-            <div className="text-center d-flex p-1 align-items-center ml-auto">
-              <button className="btn btn-light " onClick={() => setOpenLogin(true)}>
-                {logged ? `Login: ${userName}` : "LOG IN"}
+            <div className="text-center d-flex p-0 align-items-center flex-wrap ml-auto">
+              {logged &&
+                <button className="btn btn-light m-1" onClick={loadDataFromServer}>
+                  <i className="bi bi-arrow-clockwise px-1"></i>
+                  <span className='d-lg-inline d-none'>Update data</span>
+                </button>
+              }
+              <button className="btn btn-light m-1" onClick={() => setOpenLogin(true)}>
+                {logged ? `Login: ${userName}` : <span><i className="bi bi-arrow-right-circle"></i> LOG IN</span>}
               </button>
             </div>
           </nav>

src/App.js

@@ -49,11 +49,11 @@ function AddCard({ onCreate, onDeleteAll }) {
                 </div>
 
                 <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-                    <button className="btn btn-success btn-block" onClick={submitHandler}>Add card</button>
+                    <button className="btn btn-success btn-block" onClick={submitHandler}><i className="bi bi-clipboard-plus"></i> Add card</button>
                 </div>
 
                 <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-                    <button className="btn btn-danger btn-block" onClick={onDeleteAll}>Delete All</button>
+                    <button className="btn btn-danger btn-block" onClick={onDeleteAll}><i className="bi bi-x-square"></i> Delete All</button>
                 </div>
 
             </div>

src/Cards/AddCard.js

@@ -88,9 +88,10 @@ function ModalLogin(props) {
 
                 <div className='bg-light form-group mb-2'>
                     <div className='mb-1'>
-                        {userName ? `Login: "${userName}" ` : ``}
+
+                        {userName ? <span>Login: {userName} </span> : ``}
                         <span className={logged ? `badge badge-success` : `badge badge-danger`}>
-                            {logged ? 'AUTORISED' : 'UNAUTORISED'}
+                            {logged ? <span><i className="bi bi-key"> </i>AUTORISED</span> : 'UNAUTORISED'}
                         </span>
                     </div>
                 </div>
@@ -109,14 +110,14 @@ function ModalLogin(props) {
                 </div>
 
                 <div className='bg-light form-group form-row'>
-                    <div className="col">
-                        <button className="btn btn-primary col" onClick={tryLogin}>Log in</button>
+                    <div className="col-12 col-sm-4 col-md-5 p-1">
+                        <button className="btn btn-primary col" onClick={tryLogin}><i className="bi bi-person-check"></i> Log in</button>
                     </div>
-                    <div className="col">
-                        <button className="btn btn-danger col" onClick={tryLogout}>Logout</button>
+                    <div className="col col-sm-4 col-md-4 p-1">
+                        <button className="btn btn-danger col" onClick={tryLogout}><i className="bi bi-person-x"></i> Logout</button>
                     </div>
-                    <div className="col">
-                        <button className="btn btn-secondary col" onClick={tryClose}>Close</button>
+                    <div className="col-5  col-sm-4 col-md-3 p-1">
+                        <button className="btn btn-secondary col" onClick={tryClose}><i className="bi bi-x"></i> Close</button>
                     </div>
                 </div>
 

src/Modal/ModalLogin.js

@@ -5,6 +5,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 
 ReactDOM.render(
   <React.StrictMode>