Skip to content

Commit

Permalink
Add more helpful titles for buttons.
Browse files Browse the repository at this point in the history
  • Loading branch information
officialcjunior committed Apr 20, 2024
1 parent 9d580ff commit 1bf3036
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 9 deletions.
20 changes: 16 additions & 4 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
8 changes: 7 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Card.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -97,7 +97,7 @@ const Card = (props) => {
onClick={() => props.deleteCard(props.id)}
>
<div className="icon">
<MdDelete />
<MdDelete title="Delete (locally)" />
</div>
</button>

Expand Down
2 changes: 1 addition & 1 deletion src/components/List.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down

0 comments on commit 1bf3036

Please sign in to comment.