From 1bf303695e596a9eeefcf815bf75bd3983766f20 Mon Sep 17 00:00:00 2001
From: Aswin C <realc@protonmail.com>
Date: Sat, 20 Apr 2024 11:14:58 +0530
Subject: [PATCH] Add more helpful titles for buttons.

---
 src/App.css             | 20 ++++++++++++++++----
 src/App.js              |  8 +++++++-
 src/components/Card.jsx |  6 +++---
 src/components/List.jsx |  2 +-
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4a04f94..dba87fa 100644
--- a/src/App.css
+++ b/src/App.css
@@ -41,7 +41,7 @@
   overflow: auto; /* Enable scrolling for overflow content */
   box-shadow: 2px 2px 2px #555;
   background-color: #f5f3f3;
-  border-radius: 4%;
+  border-radius: 3.5%;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: transparent;
@@ -195,22 +195,34 @@ textarea::-webkit-scrollbar-thumb:hover {
   font-size: 30px;
 }
 
+.help-button-container {
+  position: fixed;
+  top: 40px; /* Adjust top position as needed */
+  right: 50px; /* Adjust right position as needed */
+  display: flex;
+  align-items: center;
+  font-size: 30px;
+}
+
 .add-card-form {
   display: flex;
   align-items: center;
 }
 
 .token-input-container {
-  /* Add styles for the token input container */
-  display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; 
   transition: all 3s ease; /* Add transition for smooth animation */  
+  width: 500px;
+  margin: 0 5px;
 }
 
 .token-input {
   width: 235px; /* Adjust width as needed */
   padding: 5px;
+  /* Center the input box inside token input container */
+  margin: 0 auto;
+
 }
 
 .token-provided {
diff --git a/src/App.js b/src/App.js
index 79130e7..4f05b76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,10 +34,16 @@ function TokenInput({ onTokenChange, tokenProvided }) {
         tokenProvided ? "token-provided" : ""
       }`}
     >
+      <h4>snapgist is a snappy frontend for GitHub gists.</h4>
+      <p className="token-description">
+        To use snapgist, you need to provide a GitHub token with the{" "}
+        <code>gist</code> scope. Generate one <a href="https://github.com/settings/tokens/new">here.</a>
+
+      </p>
       <input
         type="password"
         className="token-input"
-        placeholder="Enter your GitHub token with gist scope"
+        placeholder="Paste your token here"
         onChange={onTokenChange}
       />
     </div>
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index f6da3b0..5756ee4 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -82,13 +82,13 @@ const Card = (props) => {
         >
 
         <div className="icon">
-            {isEditing ? <MdOutlineSave /> : <MdCreate />}
+            {isEditing ? <MdOutlineSave title="Save locally" /> : <MdCreate />}
           </div>
         </button>
 
         <button className="cardoperationsbutton" onClick={handleCommit}>
           <div className="icon">
-            <MdOutlineUploadFile />
+            <MdOutlineUploadFile title="Save to Gist (Upload)" />
           </div>
         </button>
 
@@ -97,7 +97,7 @@ const Card = (props) => {
           onClick={() => props.deleteCard(props.id)}
         >
           <div className="icon">
-            <MdDelete />
+            <MdDelete title="Delete (locally)" />
           </div>
         </button>
 
diff --git a/src/components/List.jsx b/src/components/List.jsx
index 2363f7b..1e2ef33 100644
--- a/src/components/List.jsx
+++ b/src/components/List.jsx
@@ -164,7 +164,7 @@ const List = (props) => {
   return (
     <div className="list">
       <div className="add-card-container">
-        <CgAddR onClick={addCard}></CgAddR>
+        <CgAddR onClick={addCard} title="Create new Gist"></CgAddR>
       </div>
       <div className="card-container">
         {cards.map((card) => (