App: refactor style

README.md

@@ -1,4 +1,4 @@
-# Qwik Speak ⚡️
+# Qwik Speak ![logo](https://user-images.githubusercontent.com/14012361/230638591-98477fff-2c07-47fd-ac2a-cc5c81098f60.png)
 [![Node.js CI](https://github.com/robisim74/qwik-speak/actions/workflows/node.js.yml/badge.svg)](https://github.com/robisim74/qwik-speak/actions/workflows/node.js.yml) [![Playwright](https://github.com/robisim74/qwik-speak/actions/workflows/playwright.yml/badge.svg)](https://github.com/robisim74/qwik-speak/actions/workflows/playwright.yml)
 
 > Internationalization (i18n) library to translate texts, dates and numbers in Qwik apps
@@ -158,6 +158,9 @@ Formats a relative time using [Intl.RelativeTimeFormat](https://developer.mozill
 - `formatNumber(value: number | string, options?: Intl.NumberFormatOptions, locale?: SpeakLocale, lang?: string, currency?: string)`
 Formats a number using [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API
 
+- `displayName(code: string, options: Intl.DisplayNamesOptions, locale?: SpeakLocale, lang?: string)`
+Returns the translation of language, region, script or currency display names using [Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) API
+
 ## Development Builds
 ### Library & tools
 #### Build

src/components/change-locale/change-locale.css

@@ -0,0 +1,27 @@
+.change-locale {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  border-radius: 6px;
+}
+
+.change-locale h2 {
+  margin-bottom: 20px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.change-locale .names {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.change-locale .names button.active {
+  background-color: #327335;
+  color: #fff;
+}

src/components/change-locale/change-locale.tsx

@@ -1,7 +1,7 @@
 import { $, component$, useStyles$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 import type { SpeakLocale } from 'qwik-speak';
-import { $translate as t, useSpeakLocale, useSpeakConfig } from 'qwik-speak';
+import { $translate as t, displayName as dn, useSpeakLocale, useSpeakConfig } from 'qwik-speak';
 
 import styles from './change-locale.css?inline';
 
@@ -32,12 +32,14 @@ export const ChangeLocale = component$(() => {
   return (
     <div class="change-locale">
       <h2>{t('app.changeLocale')}</h2>
-      {config.supportedLocales.map(value => (
-        <div class={{ active: value.lang == locale.lang, button: true }}
-          onClick$={async () => await navigateByLocale$(value)}>
-          {value.lang}
-        </div>
-      ))}
+      <div class="names">
+        {config.supportedLocales.map(value => (
+          <button class={{ active: value.lang == locale.lang }}
+            onClick$={async () => await navigateByLocale$(value)}>
+            {dn(value.lang, { type: 'language' })}
+          </button>
+        ))}
+      </div>
     </div>
   );
 });

src/components/header/header.css

@@ -1,52 +1,52 @@
-header {
-  background-color: #006fb3;
-}
-
-header .header-inner {
-  display: grid;
-  grid-template-columns: 1fr auto;
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 10px;
-  max-width: 800px;
-  margin: 0 auto;
 }
 
-header a {
-  color: white;
-  text-decoration: none;
-  padding: 4px 8px;
-  margin-right: 5px;
-  border-radius: 4px;
+.logo {
+  width: 160px;
 }
 
-header a:hover {
-  background-color: #ffffff30;
+.header ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-header .active {
-  background-color: #ffffff15;
+.header li {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
 }
 
-.change-locale {
-  padding: 8px;
-  color: white;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.header li a {
+  font-weight: 700;
+  color: #000000;
+  display: inline-block;
+  padding: 0 0.5em;
+  text-decoration: none;
 }
 
-.change-locale .button {
-  color: white;
-  text-decoration: none;
-  padding: 4px 8px;
-  margin-right: 5px;
-  border-radius: 4px;
-  cursor: pointer;
+.header li a:hover {
+  color: #3e8e41;
 }
 
-.change-locale .button:hover {
-  background-color: #ffffff30;
+.header li a.active {
+  color: #327335;
 }
 
-.change-locale .active {
-  background-color: #ffffff15;
+@media (min-width: 768px) {
+  .header {
+    padding: 20px 70px;
+  }
+
+  .logo {
+    width: 200px;
+  }
+
+  .header li a {
+    padding: 0 1em;
+  }
 }

src/components/header/header.tsx

@@ -2,7 +2,8 @@ import { component$, useStyles$ } from '@builder.io/qwik';
 import { Link, useLocation } from '@builder.io/qwik-city';
 import { $translate as t, useSpeakConfig, useSpeakLocale } from 'qwik-speak';
 
-import { ChangeLocale } from './change-locale';
+import { ChangeLocale } from '../change-locale/change-locale';
+import { SpeakLogo } from '../icons/speak';
 
 import styles from './header.css?inline';
 
@@ -18,23 +19,29 @@ export const Header = component$(() => {
   };
 
   return (
-    <header>
-      <div class="header-inner">
-        <section class="logo">
-          <Link href={getHref('/')}>Qwik Speak ⚡️</Link>
-        </section>
-        <nav>
-          <Link href={getHref('/')}
-            class={{ active: pathname === '/' || config.supportedLocales.some(x => pathname.endsWith(`${x.lang}/`)) }}>
-            {t('app.nav.home')}
+    <>
+      <header class="header">
+        <div class="logo">
+          <Link href={getHref('/')} title={t('app.nav.home')}>
+            <SpeakLogo />
           </Link>
-          <Link href={getHref('/page')}
-            class={{ active: pathname.endsWith('/page/') }}>
-            {t('app.nav.page')}
-          </Link>
-        </nav>
-        <ChangeLocale />
-      </div>
-    </header>
+        </div>
+        <ul>
+          <li>
+            <Link href={getHref('/')}
+              class={{ active: pathname === '/' || config.supportedLocales.some(x => pathname.endsWith(`${x.lang}/`)) }}>
+              {t('app.nav.home')}
+            </Link>
+          </li>
+          <li>
+            <Link href={getHref('/page')}
+              class={{ active: pathname.endsWith('/page/') }}>
+              {t('app.nav.page')}
+            </Link>
+          </li>
+        </ul>
+      </header>
+      <ChangeLocale />
+    </>
   );
 });

src/components/icons/speak.tsx

@@ -0,0 +1,20 @@
+export const SpeakLogo = () => (
+  <svg viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="gradient">
+        <stop stop-color="#00AEEF" offset="0%" />
+        <stop stop-color="#22B573" offset="25%" />
+        <stop stop-color="#FDB813" offset="50%" />
+        <stop stop-color="#F37021" offset="75%" />
+        <stop stop-color="#ED1C24" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g>
+      <text id="svg_1" fill="#000" font-weight="bold" font-size="70" y="70" x="90">Qwik</text>
+      <text id="svg_2" font-weight="bold" font-size="70" y="70" x="260">
+        <tspan id="svg_3" fill="url(#gradient)">Speak</tspan>
+      </text>
+      <path id="svg_4" fill="url(#gradient)" d="m3,41c0,-21.5 17.5,-39 39,-39s39,17.5 39,39c0,14.4 -8.2,27.1 -20.1,33.4c0.2,1.1 0.4,2.2 0.4,3.5c0,10.3 -8.3,18.6 -18.6,18.6s-18.6,-8.3 -18.6,-18.6c0,-1.3 0.1,-2.6 0.4,-3.5c-13.3,-6.3 -21.5,-19 -21.5,-33.4z" />
+    </g>
+  </svg>
+);

src/global.css

@@ -1,12 +1,58 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-    sans-serif;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  background-color: #f2f2f2;
 }
 
 main {
-  padding: 10px 20px;
-  max-width: 800px;
   margin: 0 auto;
+  padding: 10px 10px 50px 10px;
+  background-color: #fff;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+}
+
+main .content {
+  padding: 10px;
+  text-align: center;
+}
+
+button {
+  display: inline-block;
+  padding: 5px 10px;
+  margin: 5px 10px;
+  border-radius: 5px;
+  border-width: 1px;
+  background-color: #fff;
+  font-size: 14px;
+  text-decoration: none;
+}
+
+button:hover {
+  background-color: #f2f2f2;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  body {
+    font-size: 16px;
+  }
+
+  main {
+    max-width: 1000px;
+    padding: 20px;
+  }
+
+  main .content {
+    padding: 20px 70px;
+  }
+
+  button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    text-decoration: none;
+  }
 }

src/routes/[...lang]/index.tsx

@@ -16,7 +16,7 @@ export const Home = component$(() => {
   const count = useSignal(0);
 
   return (
-    <>
+    <div class="content">
       <h1>{t('app.title')}</h1>
       <h2>{t('app.subtitle')}</h2>
 
@@ -27,8 +27,8 @@ export const Home = component$(() => {
       <p dangerouslySetInnerHTML={t('home.text')}></p>
 
       <h3>{t('home.plural')}</h3>
-      <button class="btn-counter" onClick$={() => count.value++}>{t('home.increment')}</button>
       <p class="counter">{p(count.value, 'home.devs')}</p>
+      <button class="btn-counter" onClick$={() => count.value++}>{t('home.increment')}</button>
 
       <h3>{t('home.dates')}</h3>
       <p>{fd(Date.now(), { dateStyle: 'full', timeStyle: 'short' })}</p>
@@ -38,7 +38,7 @@ export const Home = component$(() => {
       <p>{fn(1000000)}</p>
       <p>{fn(1000000, { style: 'currency' })}</p>
       <p>{fn(1, { style: 'unit', unit: units['length'] })}</p>
-    </>
+    </div>
   );
 });