Revise

- Update screenshots
- Remove third-party fonts
- Revise stylesheet and tailwindcss config

CHANGELOG.md

@@ -6,12 +6,9 @@ All notable changes to this project will be documented in this file.
 
 ## [0.1.0] - 2023-11-16
 
-### Added
-
-- Font to maintain consistency across all browsers.
-
 ### Fixed
 
+- Font family to maintain consistency across all browsers.
 - On-page email generation content script to use email format and correctly inject icon.
 
 ### Changed

README.md

@@ -4,13 +4,13 @@
 [![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/oedhkcdedcfloepkpacoocblokifkgjf?style=flat-square&label=Chrome%20Users)][link-cws]
 [![Mozilla Add-on Users](https://img.shields.io/amo/users/email-masker?style=flat-square&label=Firefox%20Users)][link-amo]
 
-> Email Masker is an open-source browser extension that helps you generate and use masked email addresses for your online accounts using [Quick Aliases](https://dub.sh/quick-alias) powered by [Skiff Mail](https://skiff.com/mail?utm_content=readme&utm_medium=extension&utm_source=email_masker).
+> Email Masker is an open-source browser extension that helps you generate and use masked email addresses for your online accounts using [Skiff][link-skiff] [Quick Aliases](https://dub.sh/quick-alias).
 >
 > It helps you protect your privacy and keep your inbox clean from spam.
 
 Extension by [@irazasyed](https://github.com/irazasyed)
 
-<img src=".github/assets/screenshots/hero.jpg" align="center" alt="Email Masker">
+<img src=".github/assets/screenshots/[email protected]" align="center" alt="Email Masker">
 
 [<img src="https://storage.googleapis.com/chrome-gcs-uploader.appspot.com/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/HRs9MPufa1J1h5glNhut.png" alt="for Chrome" height="60px">][link-cws]
 [<img src="https://blog.mozilla.org/addons/files/2020/04/get-the-addon-fx-apr-2020.svg" alt="for Firefox" height="60px">][link-amo]
@@ -66,26 +66,26 @@ If you use another Chromium-based browser like Vivaldi, you can usually install
 <table>
     <tr>
         <th align="center">Highlights</th>
-        <th align="center">Light and Dark Mode</th>
+        <th align="center">Dark and Light Modes</th>
     </tr>
     <tr>
         <td align="center">
-            <img src=".github/assets/screenshots/highlights.jpg" alt="Email Masker Highlights">
+            <img src=".github/assets/screenshots/[email protected]" alt="Email Masker Highlights">
         </td>
         <td align="center">
-            <img src=".github/assets/screenshots/feature-highlight-2.jpg" alt="Light and Dark Modes">
+            <img src=".github/assets/screenshots/[email protected]" alt="Dark and Light Modes">
 		</td>
     </tr>
     <tr>
         <th align="center">Customizable Email Format</th>
-        <th align="center">Flame icon in Email input field</th>
+        <th align="center">On-Page Quick Generation</th>
     </tr>
     <tr>
 		<td align="center">
-            <img src=".github/assets/screenshots/feature-highlight-1.jpg" alt="Customizable Email Format">
+            <img src=".github/assets/screenshots/[email protected]" alt="Customizable Email Format">
 		</td>
 		<td align="center">
-            <img src=".github/assets/on-page.png" width="250" alt="Email Masker On-Page">
+            <img src=".github/assets/screenshots/Feature_On-Page@2x.png" alt="Email Masker On-Page">
         </td>
 	</tr>
 </table>
@@ -180,6 +180,7 @@ MIT
 
 This project is not affiliated with, endorsed by, or sponsored in any way by Skiff.
 
+[link-skiff]: https://dub.sh/skiff-ref 'Sign up for Skiff Mail'
 [link-cws]: https://dub.sh/emailmasker-chrome 'Version published on Chrome Web Store'
 [link-amo]: https://dub.sh/emailmasker-firefox 'Version published on Mozilla Add-ons'
 [link-oas]: https://dub.sh/emailmasker-opera 'Version published on Opera Add-ons'

src/components/layout.tsx

@@ -14,9 +14,10 @@ function Layout({ children }) {
         <Toaster />
         <CardHeader className="space-y-1 py-2 px-4">
           <div className="flex justify-between">
-            <CardTitle className="text-2xl flex items-center gap-2">
-              <img src={icon} alt="Logo" className="h-8 w-8" />
-              {lang('title')} <Version />
+            <CardTitle className="text-2xl flex items-center gap-2 font-bold">
+              <img src={icon} alt="Logo" className="h-10 w-10" />
+              {lang('title')}
+              <Version />
             </CardTitle>
             <div className="flex items-center gap-2">
               <ThemeModeToggle />

src/style.css

@@ -1,31 +1,9 @@
-/**
- * @license
- *
- * Font Family: Switzer
- * Designed by: Jérémie Hornus
- * URL: https://www.fontshare.com/fonts/switzer
- * © 2023 Indian Type Foundry
- *
- * Font Styles:
- * Switzer Variable(Variable font)
- */
-@font-face {
-  font-family: 'Switzer-Variable';
-  src: url('data-base64:~assets/fonts/Switzer-Variable.woff2') format('woff2'),
-  url('data-base64:~assets/fonts/Switzer-Variable.woff') format('woff'),
-  url('data-base64:~assets/fonts/Switzer-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --font-sans: 'Switzer-Variable';
     --background: 0 0% 100%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
@@ -74,7 +52,7 @@
     @apply border-border;
   }
 
-  html, body {
+  html {
     @apply font-sans subpixel-antialiased bg-background text-foreground;
   }
 }

tailwind.config.js

@@ -1,5 +1,3 @@
-const { fontFamily } = require('tailwindcss/defaultTheme')
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
@@ -53,9 +51,6 @@ module.exports = {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)'
       },
-      fontFamily: {
-        sans: ['var(--font-sans)', ...fontFamily.sans]
-      },
       keyframes: {
         'accordion-down': {
           from: { height: '0' },