feat: ✨ generate and manage access tokens in account settings

Components/UI/CopyButton/CopyButton.js

@@ -1,7 +1,7 @@
 //Lib
 import classes from './CopyButton.module.css';
 import { useState } from 'react';
-import { IconCopy } from '@tabler/icons-react';
+import { IconChecks, IconCopy } from '@tabler/icons-react';
 
 export default function CopyButton(props) {
     //State
@@ -29,11 +29,26 @@ export default function CopyButton(props) {
                 className={classes.copyButton}
                 onClick={() => handleCopy(props.dataToCopy)}
             >
-                <IconCopy color='#65748b' stroke={1.25} size={props.size} />
+                {props.children}
+                {isCopied && props.displayIconConfirmation ? (
+                    <IconChecks
+                        color='#07bc0c'
+                        stroke={props.stroke || 1.25}
+                        size={props.size}
+                    />
+                ) : (
+                    <IconCopy
+                        color='#65748b'
+                        stroke={props.stroke || 1.25}
+                        size={props.size}
+                    />
+                )}
             </button>
-            {isCopied ? (
-                <span className={classes.copyValid}>Copied !</span>
-            ) : null}
+            {isCopied
+                ? !props.displayIconConfirmation && (
+                      <span className={classes.copyValid}>Copied !</span>
+                  )
+                : null}
         </>
     );
 }

Components/UI/CopyButton/CopyButton.module.css

@@ -4,6 +4,15 @@
     border: none;
     background-color: transparent;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.copyButton span {
+    font-size: 0.95rem;
+    color: #6d4aff;
+    margin-right: 5px;
+    user-select: text;
 }
 
 .copyValid {

Components/UI/Info/Info.js

@@ -2,5 +2,13 @@
 import classes from './Info.module.css';
 
 export default function Info(props) {
-    return <div className={classes.infoMessage}>{props.message}</div>;
+    return (
+        <div
+            className={classes.infoMessage}
+            style={{ backgroundColor: props.color }}
+        >
+            {props.message}
+            {props.children}
+        </div>
+    );
 }