diff --git a/README.md b/README.md index 9125ac1..fce1577 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ https://www.mvdam.dev/email-alias-generator/ Given that you use a catch all e-mail domain you can: -1. Enter your e-mail domain. For example: my-domain.com -2. Enter the service you want to generate an adress for. For example: instagram -3. The suggested alias is shown below the form. For example: instagram@my-domain.com -4. Press to copy the alias to the clipboard or click the "Copy to clipboard" button +1. Enter your e-mail domain. For example: `my-domain.com`. This domain will be stored in LocalStorage for convience. +2. Enter the service you want to generate an adress for. For example: `instagram`. +3. The suggested alias is shown below the form. For example: `instagram.zv4af@my-domain.com`. +4. Press to copy the alias to the clipboard or click the "Copy to clipboard" button. diff --git a/src/App.tsx b/src/App.tsx index 75c0cc4..ad51323 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,40 +26,47 @@ function App() { }; return ( -
-

E-mail alias generator

-
- - setEmailDomain(e.target.value)} - /> -
-
- - setService(e.target.value)} - /> -
-
- {domain && service ? ( - <> -

{alias}

- - - ) : null} -
-
+ <> +
+

E-mail alias generator

+
+ + setEmailDomain(e.target.value)} + /> +
+
+ + setService(e.target.value)} + /> +
+
+ {domain && service ? ( + <> +

{alias}

+ + + ) : null} +
+
+ + + GitHub source + + + ); } diff --git a/src/index.css b/src/index.css index c67a069..41d4e2d 100644 --- a/src/index.css +++ b/src/index.css @@ -22,6 +22,16 @@ a:hover { color: #535bf2; } +small a { + color: white; + text-decoration: underline; +} + +small { + display: block; + margin-top: 20px; +} + body { margin: 0; display: flex;