Skip to content

Commit

Permalink
💄 improve ui amd styling (#15)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pank1999
pank1999 authored Feb 7, 2024
1 parent ef5d16d commit 4b7717b
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 124 deletions.
82 changes: 55 additions & 27 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,56 @@
padding: 0;
margin: 0;
}

.heading {
text-align: center;
color: rgb(133, 32, 222);
margin-bottom: 0.5rem;
}
textarea {
width: 100%;
color: rgb(0, 255, 13);
background-color: rgb(49, 49, 49);
color: rgb(35, 35, 35);
border: none;
background-color: rgb(232, 232, 232);
padding: 20px;
border-radius: 10px;
/* border: 1px solid rgb(158, 47, 255); */
}

textarea:focus {
outline: 4px solid rgba(255, 255, 255, 0.37);
outline: 2px solid rgb(133, 32, 222);
}

#wrapper {
font-family: 'Paytone One', sans-serif;
color: rgb(0, 255, 13);
font-size: x-large;
padding: 20px 10px;
color: rgb(103, 103, 103);
font-size: medium;
padding-bottom: 1.5rem;
text-align: center;
}

.text-small {
font-size: medium;
color: rgb(0, 255, 13);
padding: 10px;
font-size: large;
color: rgb(35, 35, 35);
margin-bottom: 10px;
}

.btn-container {
margin-top: 1rem;
}

#r {
background-color: rgb(49, 49, 49);
height: 20%;
background-color: rgb(232, 232, 232);
height: 26%;
width: 100%;
padding: 20px;
border: none;
border-radius: 10px;
overflow-x: scroll;
margin: 10px 0px;
color: rgb(0, 255, 13);
color: rgb(35, 35, 35);
}

#decoded {
background-color: rgb(0, 173, 52);
background-color: gb(35, 35, 35);
height: 20%;
width: 100%;
padding: 20px;
Expand All @@ -60,13 +69,25 @@ textarea:focus {
}

body {
background-color: #141414;
background-color: white;
font-family: 'Paytone One', sans-serif;
}

.container {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
height: 75vh;
}

.right {
padding-left: 5%;
}
.inputs {
background-color: rgb(49, 49, 49);
color: rgb(0, 255, 13);
background-color: rgb(234, 234, 234);
color: rgb(35, 35, 35);
font-size: large;
padding: 10px;
border: none;
Expand All @@ -78,34 +99,36 @@ body {
}

.btn {
background: rgb(17, 255, 48);
color: rgb(36, 36, 36);
background: rgb(133, 32, 222);
color: rgb(250, 250, 250);
font-size: large;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
}

.btn:hover {
background: rgb(30, 30, 30);
color: rgb(0, 255, 13);
box-shadow: 0px 2px 5px rgb(0, 255, 13);
color: rgb(244, 244, 244);
box-shadow: 0px 2px 5px rgb(35, 35, 35);
}

.btn:disabled{
background: rgb(127, 206, 150);
background: rgb(133, 32, 222);
color: rgb(68, 68, 68);
box-shadow: 0px 2px 5px rgb(0, 0, 0);
}


::-webkit-scrollbar {
width: 5px;
height: 5px;
}

::-webkit-scrollbar-thumb {
background: rgb(0, 104, 31);
background: rgb(133, 32, 222);
border-radius: 10px;
}

Expand All @@ -124,7 +147,7 @@ body {
}

#forkongithub a:hover {
background: rgb(0, 219, 18);
background: rgb(133, 32, 222);
color: #fff;
}

Expand Down Expand Up @@ -182,8 +205,13 @@ body {
right: 50%;
transform: translate(50%, -50%);
}

@media screen and (max-width:720px) {
.container {
flex-direction: column;
}
}
@media screen and (min-width:800px) {

#forkongithub {
position: fixed;
display: block;
Expand All @@ -209,5 +237,5 @@ body {
}

a{
color:rgb(4, 242, 255);
color: rgb(133, 32, 222);
}
204 changes: 107 additions & 97 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,109 +173,119 @@ function App() {
return (
<div className="App" onKeyDown={handleTextInput}>
<span id="forkongithub">
<a href="https://github.com/himanshurajora/ShareMyText/issues" target="_blank">
<a
href="https://github.com/himanshurajora/ShareMyText/issues"
target="_blank"
>
Raise a suggestion 🙋
</a>
</span>
<h1 className="heading">Share_My_Text</h1>
<h3 id="wrapper">
<abbr title='Hi there! ShareMyText is going to have a good future. We are soon going to make some changes regarding data security. If you have any suggestions in your mide, please raise an issues.'>
{heading}
</abbr>
{' '} Made by <a href="https://github.com/himanshurajora">@himanshurajora</a></h3>
<code>
<div className="data-section">
<input
type="file"
name=""
id=""
onChange={handleFileDrop}
onDragLeave={handleFileDragOut}
ref={fileInput}
/>
<textarea
className="input-text"
rows={20}
ref={textInput}
onDragEnter={handleFileDrag}
onKeyDown={handleTextInput}
onChange={(e) => {
setData(e.target.value);
}}
value={data}
placeholder={"Enter You Text Here, Press Ctrl + Enter to share"}
></textarea>
</div>
</code>
<p>
<br />{" "}
<input
type="text"
id="enc"
className="inputs"
placeholder="Encryption Code (Optional)"
onChange={(e) => {
setencypcode(e.target.value);
}}
/>{" "}
<input
id="room"
className="inputs"
type="text"
placeholder="Room Id (Optional)"
value={room}
onChange={(e) => {
setroom(e.target.value);
setdecoded("");
}}
/>{" "}
<span>
{" "}
<button className="btn" onClick={shareData}>
{!disable ? "Share" : "Sending In Progress..."}
<abbr title="Hi there! ShareMyText is going to have a good future. We are soon going to make some changes regarding data security. If you have any suggestions in your mide, please raise an issues.">
{heading}
</abbr>{" "}
Made by <a href="https://github.com/himanshurajora">@himanshurajora</a>
</h3>
<div className="container">
<div className="left">
<p className="text-small">Send Data</p>
<code>
<div className="data-section">
<input
type="file"
name=""
id=""
onChange={handleFileDrop}
onDragLeave={handleFileDragOut}
ref={fileInput}
/>
<textarea
className="input-text"
rows={19}
ref={textInput}
onDragEnter={handleFileDrag}
onKeyDown={handleTextInput}
onChange={(e) => {
setData(e.target.value);
}}
value={data}
placeholder={"Enter You Text Here, Press Ctrl + Enter to share"}
></textarea>
</div>
</code>
<div className="btn-container">
<input
type="text"
id="enc"
className="inputs"
placeholder="Encryption Code (Optional)"
onChange={(e) => {
setencypcode(e.target.value);
}}
/>{" "}
<input
id="room"
className="inputs"
type="text"
placeholder="Room Id (Optional)"
value={room}
onChange={(e) => {
setroom(e.target.value);
setdecoded("");
}}
/>{" "}
<span>
{" "}
<button className="btn" onClick={shareData}>
{!disable ? "Share" : "Sending In Progress..."}
</button>
</span>
</div>
<p className="text-small">{message}</p>
<button className="btn" onClick={copyOutput}>
Copy Output
</button>
<button className="btn" onClick={copyDecodedToData}>
Copy Output To TextArea
</button>
</span>
</p>
<p className="text-small">{message}</p>
<button className="btn" onClick={copyOutput}>
Copy Output
</button>
<button className="btn" onClick={copyDecodedToData}>
Copy Output To TextArea
</button>
<button onClick={Download} className="btn" aria-disabled="true">
Download
</button>
<br />
<p className="text-small">Recieved data here:</p>
<ReactLinkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a target="blank" href={decoratedHref} key={key}>
{decoratedText}
</a>
)}
>
<pre id={"r"}>{r}</pre>
</ReactLinkify>
<p>
{" "}
<input
className="inputs"
type="text"
placeholder="Decryption Code"
onChange={(e) => {
setdecryptcode(e.target.value);
}}
/>{" "}
<span>
{" "}
<button className="btn" onClick={decryptData}>
{"Decrypt Data"}
<button onClick={Download} className="btn" aria-disabled="true">
Download
</button>
</span>
</p>
<ReactLinkify>
<pre id={"decoded"}>{decoded}</pre>
</ReactLinkify>
</div>
<div className="right">
<p className="text-small">Received Data</p>
<ReactLinkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a target="blank" href={decoratedHref} key={key}>
{decoratedText}
</a>
)}
>
<pre id={"r"}>{r}</pre>
</ReactLinkify>
<div className="btn-container">
{" "}
<input
className="inputs"
type="text"
placeholder="Decryption Code"
onChange={(e) => {
setdecryptcode(e.target.value);
}}
/>{" "}
<span>
{" "}
<button className="btn" onClick={decryptData}>
{"Decrypt Data"}
</button>
</span>
</div>
<ReactLinkify>
<pre id={"decoded"}>{decoded}</pre>
</ReactLinkify>
</div>
</div>
</div>
);
}
Expand Down

0 comments on commit 4b7717b

Please sign in to comment.