Add improvements
This commit is contained in:
parent
372881cead
commit
b5d643f8f1
7 changed files with 59 additions and 22 deletions
|
|
@ -2,8 +2,31 @@
|
|||
|
||||
** vNEXT
|
||||
|
||||
**** Refresh flag icons
|
||||
The flag icons have been improved
|
||||
**** Replace ISP details with location details
|
||||
We now show the location details associated with an IP -
|
||||
usually a city and country
|
||||
|
||||
**** Add ~src/fonts/kanit-regular.ttf~
|
||||
Add a custom font
|
||||
|
||||
**** Center-align content
|
||||
Align content to the center.
|
||||
Both horizontal and vertical
|
||||
|
||||
**** Apply minimum width
|
||||
A minimum width is now applied
|
||||
to ~browseraction.html~ via ~App.tsx~
|
||||
|
||||
**** Remove horizontal scrollbar
|
||||
Remove a horizontal scrollbar that could appear
|
||||
when the extension's browser action appeared for
|
||||
the first time
|
||||
|
||||
**** Change primary color
|
||||
Change the primary / background color to ~#FFF~
|
||||
|
||||
**** Re-import flag icons
|
||||
The flag icons have been re-imported
|
||||
|
||||
** v0.6.1
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
:root {
|
||||
/* Colors */
|
||||
--primary-color: #E3F2FD;
|
||||
--primary-color: #FFF;
|
||||
--secondary-color: #333333;
|
||||
--accent-color: #007BFF;
|
||||
}
|
||||
|
||||
#root {
|
||||
@font-face {
|
||||
font-family: "Kanit Regular";
|
||||
src: url("/fonts/kanit-regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Kanit Regular";
|
||||
background: var(--primary-color);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
|
|
|||
BIN
src/fonts/kanit-regular.ttf
Normal file
BIN
src/fonts/kanit-regular.ttf
Normal file
Binary file not shown.
|
|
@ -4,8 +4,8 @@
|
|||
<link rel="stylesheet" href="/css/tail.min.css"/>
|
||||
<link rel="stylesheet" href="/css/index.css"/>
|
||||
</head>
|
||||
<body class="h-12 w-full">
|
||||
<div id="root"></div>
|
||||
<body>
|
||||
<main></main>
|
||||
<script src="/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,26 +5,31 @@ export function App() {
|
|||
const [response, error] = useWebService();
|
||||
if (response) {
|
||||
return (
|
||||
<div data-testid="response" className="font-sans p-2 flex">
|
||||
<img className="w-8 h-8" src={`/images/flags/${response.countryCode}.svg`} />
|
||||
<div className="flex flex-col ml-3">
|
||||
<span className="text-xs">{response.IPAddress}</span>
|
||||
<span className="text-xs">{response.ISP}</span>
|
||||
<div data-testid="response" className="h-14 flex flex-col justify-center">
|
||||
<div className="flex h-full justify-center items-center min-w-48">
|
||||
<img className="w-8 h-8" src={`/images/flags/${response.CountryCode}.svg`} />
|
||||
<div className="flex flex-col ml-3">
|
||||
<span className="text-sm">{response.IPAddress}</span>
|
||||
<span className="text-xs">{response.Location}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (error) {
|
||||
return (
|
||||
<div data-testid="error" className="font-sans p-2 flex items-center w-full h-full">
|
||||
<img className="w-8 h-8" src={`/images/icon.svg`} />
|
||||
<span className="ml-3 text-xs">{t("error")}</span>
|
||||
<div data-testid="error" className="h-14 flex flex-col justify-center">
|
||||
<div className="p-2 flex items-center w-full h-full min-w-48 justify-center">
|
||||
<img className="w-8 h-8" src={`/images/icon.svg`} />
|
||||
<span className="ml-3 text-xs">{t("error")}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div data-testid="loading" className="font-sans p-2 flex items-center w-full h-full">
|
||||
<img className="w-8 h-8" src={`/images/icon.svg`} />
|
||||
<span className="ml-3 text-xs">{t("loading")}</span>
|
||||
<div data-testid="loading" className="h-14 flex flex-col justify-center">
|
||||
<div className="flex flex-col items-center h-full min-w-48 justify-center">
|
||||
<img className="w-8 h-8" src={`/images/icon.svg`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ import { render } from "preact";
|
|||
import { App } from "~/components/App";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const el: HTMLElement = document.getElementById("root")!;
|
||||
const el: HTMLElement = document.querySelector("main")!;
|
||||
render(<App />, el);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@ export type TResponse = {
|
|||
ISP: string;
|
||||
City: string;
|
||||
Country: string;
|
||||
countryCode: string;
|
||||
isTorExitNode: boolean;
|
||||
CountryCode: string;
|
||||
Location: string;
|
||||
IsTorExitNode: boolean;
|
||||
};
|
||||
|
||||
export type TServerResponse = {
|
||||
|
|
@ -13,6 +14,7 @@ export type TServerResponse = {
|
|||
YourCity: string;
|
||||
YourCountry: string;
|
||||
YourCountryCode: string;
|
||||
YourLocation: string;
|
||||
YourTorExit: boolean;
|
||||
};
|
||||
|
||||
|
|
@ -23,8 +25,9 @@ export function Response(res: TServerResponse): TResponse {
|
|||
self.ISP = res.YourISP;
|
||||
self.City = res.YourCity;
|
||||
self.Country = res.YourCountry;
|
||||
self.countryCode = res.YourCountryCode;
|
||||
self.isTorExitNode = res.YourTorExit;
|
||||
self.CountryCode = res.YourCountryCode;
|
||||
self.Location = res.YourLocation;
|
||||
self.IsTorExitNode = res.YourTorExit;
|
||||
|
||||
return self;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue