adds UserID to Settings (readonly) and found a better yellow

RingoRohe · May 6, 2020 · fa88a20 · fa88a20
1 parent 4686c65
commit fa88a20
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/src/assets/scss/App.scss b/src/assets/scss/App.scss
@@ -5,6 +5,7 @@
 @import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
 @import '@fortawesome/fontawesome-free/scss/solid.scss';
 @import '@fortawesome/fontawesome-free/scss/brands.scss';
+@import '@fortawesome/fontawesome-free/scss/regular.scss';
 
 * {
     outline: none;

diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss
@@ -7,5 +7,4 @@ $lighter: rgb(241, 238, 233);
 $highlight: rgba(235, 94, 40, 1);
 
 $brown: rgb(110, 72, 0);
-$yellow: rgb(195, 192, 0);
-// TODO: Find a better yellow!!
+$yellow: rgb(255, 251, 32);
diff --git a/src/pages/settings/Settings.js b/src/pages/settings/Settings.js
@@ -52,6 +52,21 @@ const Settings = props => {
         });
     }
 
+    const copyText = (e) => {
+        /* Get the text field */
+        var copyText = e.target;
+
+        /* Select the text field */
+        copyText.select();
+        copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+
+        /* Copy the text inside the text field */
+        document.execCommand("copy");
+
+        toast.success('copied to clipboard');
+    }
+
+    // TODO: add managable List of Delegate Users
     return props.currentUser ? (
         <section className="page_settings">
             <article className="card child_name">
@@ -76,6 +91,11 @@ const Settings = props => {
                     inline
                 />
             </article>
+            <article className="card userid">
+                <span className="card_icon far fa-copy fa-3x"></span>
+                <h2>your UserID</h2>
+                <input type="text" value={props.currentUser.realUid} readOnly onClick={copyText} />
+            </article>
             <article className="card nopadding save">
                 <button onClick={saveSettings}>Save Settings</button>
             </article>

diff --git a/src/pages/settings/settings.scss b/src/pages/settings/settings.scss
@@ -44,6 +44,8 @@
     }
 
     .child_birthday {
+        grid-row: 2 / span 2;
+
         &>div {
             text-align: center;
 
@@ -61,6 +63,25 @@
         }
     }
 
+    .userid {
+        input {
+            display: block;
+            min-height: 3rem;
+            width: 100%;
+            height: 80%;
+            text-align: center;
+            font-size: 1rem;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            cursor: pointer;
+
+            @media (max-width: $breakpoints_m) {
+                font-size: .8rem;
+            }
+        }
+    }
+
     .save {
         button {
             width: 100%;