thedevs-network/kutt-extension
1
0
Fork 0
mirror of https://github.com/thedevs-network/kutt-extension.git synced 2026-02-03 13:53:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui : Redesigned Popup UI

Browse Source
This commit is contained in:
Ashik Meerankutty
2020-02-13 08:08:19 +05:30
parent f4a40bf9b7
commit 33aec2d574
11 changed files with 100 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Popup/Header.tsx
View File

@@ -79,7 +79,7 @@ const Header: React.FC<HeaderProperties> = ({ userConfig, pageReloadFlag, setPag
<>
<header id="header">
<div className="logo__holder">
<img src="assets/logo.png" alt="logo" style={{ width: '22px', height: '22px' }} />
<img src="assets/logo.png" alt="logo" />
</div>
<div className="action__buttons--holder">
<button
@@ -97,6 +97,7 @@ const Header: React.FC<HeaderProperties> = ({ userConfig, pageReloadFlag, setPag
>
{/* eslint-disable no-nested-ternary */}
<Icon
className="refresh__icon"
name={
loading
? 'spinner'

15
src/Popup/PopupBody.tsx
View File

@@ -26,16 +26,17 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
return (
<>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div className="popup__body">
{!error && (
<div>
<button
className="icon__button"
type="button"
onClick={(): void => {
return setQRView(!QRView);
}}
>
<Icon name="qrcode" />
<Icon className="qr__icon" name="qrcode" />
</button>
<CopyToClipboard
@@ -45,11 +46,13 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
}}
>
{!copied ? (
<button type="button">
<Icon name="copy" />
<button className="icon__button" type="button">
<Icon className="copy__icon" name="copy" />
</button>
) : (
<Icon name="tick" />
<button type="button">
<Icon name="tick" />
</button>
)}
</CopyToClipboard>
</div>
@@ -59,7 +62,7 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
</div>
{!error && QRView && (
<div>
<div className="qr__holder">
<QRCode size={128} value={message} />
</div>
)}

17
src/Popup/PopupForm.tsx
View File

@@ -25,21 +25,18 @@ const InnerForm: React.FC<PopupFormProperties & FormikProps<PopupFormValuesPrope
return (
<>
{!isSubmitting ? (
<Form onSubmit={handleSubmit} autoComplete="off" id="popup__form">
<Form onSubmit={handleSubmit} autoComplete="off" className="popup__form">
<div>
<Field
name="domain"
type="text"
component={SelectField}
label="Domain"
options={domainOptions}
/>
<h4>Domain:</h4>
<Field name="domain" type="text" component={SelectField} options={domainOptions} />
</div>
<div>
<Field name="customurl" type="text" component={TextField} label="Custom URL" />
<h4>kutt.it/</h4>
<Field name="customurl" type="text" component={TextField} />
</div>
<div>
<Field name="password" type="password" component={TextField} label="Password" />
<h4>Password:</h4>
<Field name="password" type="password" component={TextField} />
</div>
<button type="submit" disabled={isSubmitting}>

76
src/Popup/styles.scss
View File

@@ -10,35 +10,67 @@ body {
min-height: 300px;
min-width: 250px;
font-size: 1.125em;
text-align: center;
#popup__form {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
div {
padding: 5px 10px;
width: 100%;
.error {
font-size: 11px;
padding: 2px 10px;
}
.popup__form {
padding: 15px 15px;
h4 {
padding: 10px 0px 5px 0px;
font-size: 0.9em;
font-weight: 500;
color: #294756;
}
button {
padding: 7px 22px;
margin: 15px auto;
background: linear-gradient(to right, rgb(126, 87, 194), rgb(98, 0, 234));
margin-top: 15px;
margin-bottom: 5px;
width: 100%;
border-radius: 5px;
padding: 10px;
color: #fff;
cursor: pointer;
background-color: lightblue;
}
.error {
font-size: 11px;
padding: 2px 10px;
}
}
.popup__body {
display: flex;
justify-content: center;
padding: 15px 15px 0px 15px;
p {
padding-top: 5px;
text-decoration: underline;
font-size: 1.2em;
}
.icon__button {
cursor: pointer;
.copy__icon {
display: block;
padding-right: 5px;
cursor: pointer;
}
.qr__icon {
display: block;
padding-right: 5px;
padding-top: 5px;
cursor: pointer;
}
}
}
.qr__holder {
display: flex;
justify-content: center;
padding-top: 10px;
}
}
#header {
padding: 5px;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -60,5 +92,9 @@ body {
background-color: transparent !important;
cursor: pointer;
}
.refresh__icon {
cursor: pointer;
padding-right: 5px;
}
}
}
}

15
src/components/Icon/Copy.tsx
View File

@@ -3,13 +3,18 @@ import React from 'react';
const Copy: React.FC = () => {
return (
<svg
viewBox="-3 -2 24 24"
width={24}
height={24}
viewBox="-2 -2 30 30"
width={20}
height={20}
fill="none"
strokeWidth="2"
stroke="#b9b9b9"
strokeLinecap="round"
strokeLinejoin="round"
preserveAspectRatio="xMinYMin"
className="files_svg__jam files_svg__jam-files"
>
<path d="M6 15H2a2 2 0 01-2-2V2a2 2 0 012-2h8a2 2 0 012 2v3h3l3 3v10a2 2 0 01-2 2H8a2 2 0 01-2-2v-3zm0-2V7a2 2 0 012-2h2V2H2v11h4zm8.172-6H8v11h8V8.828L14.172 7z" />
<rect width="13" height="13" x="9" y="9" rx="2" ry="2" />
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
</svg>
);
};

7
src/components/Icon/QRCode.tsx
View File

@@ -3,9 +3,10 @@ import React from 'react';
const QRCode: React.FC = () => {
return (
<svg
viewBox="-2 -2 24 24"
width={24}
height={24}
viewBox="-2 -2 30 30"
width={20}
height={20}
fill="#b9b9b9"
preserveAspectRatio="xMinYMin"
className="qr-code_svg__jam qr-code_svg__jam-qr-code"
>

3
src/components/Icon/Refresh.tsx
View File

@@ -3,9 +3,10 @@ import React from 'react';
const Refresh: React.FC = () => {
return (
<svg
viewBox="-1.5 -2.5 24 24"
viewBox="-2 -2 24 24"
width={24}
height={24}
fill="#b8b8b8"
preserveAspectRatio="xMinYMin"
className="refresh_svg__jam refresh_svg__jam-refresh"
>

5
src/components/Icon/Settings.tsx
View File

@@ -4,8 +4,9 @@ const Settings: React.FC = () => {
return (
<svg
viewBox="-2 -2 24 24"
width="32"
height="32"
width={24}
height={24}
fill="#b8b8b8"
preserveAspectRatio="xMinYMin"
className="cog_svg__jam cog_svg__jam-cog"
>

2
src/components/Icon/Spinner.tsx
View File

@@ -11,7 +11,7 @@ const Spinner: React.FC = () => {
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke="#b8b8b8"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"

1
src/components/Icon/Tick.tsx
View File

@@ -6,6 +6,7 @@ const Check: React.FC = () => {
viewBox="-5 -7 24 24"
width={24}
height={24}
fill="#b8b8b8"
preserveAspectRatio="xMinYMin"
className="check_svg__jam check_svg__jam-check"
>

13
src/components/Input/styles.scss
View File

@@ -1,21 +1,18 @@
input {
height: 35px;
width: 100%;
display: flex;
position: relative;
margin: 0px;
border-radius: 100px;
border: 5px solid rgb(245, 245, 245);
border-radius: 5px;
padding: 0px 10px !important;
background-color: #EBEBEB;
}
select {
height: 35px;
padding: 10px 15px;
padding: 0px 10px;
width: 100%;
display: flex;
position: relative;
margin: 0px;
border-radius: 100px;
border-radius: 5px;
background-color: rgb(245, 245, 245);
option {