diff --git a/public/index.html b/public/index.html index 7aff564..93dd768 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,11 @@ content="Web site created using create-react-app" /> - - Boredom Buster
- diff --git a/src/components/ActivityBody.tsx b/src/components/ActivityBody.tsx index 2873953..2cb24b7 100644 --- a/src/components/ActivityBody.tsx +++ b/src/components/ActivityBody.tsx @@ -12,7 +12,7 @@ const ActivityBody: React.FC = () => { const {activity, link} = activityState.bored; const {shouldWarn} = activityState.covidWarning; const image: ActivityImage = activityState.image; - const { t } = useTranslation() + const { t } = useTranslation(); const getNewActivity = () => { axios.get('https://www.boredapi.com/api/activity').then(({data}) => { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3d8dff2..a87780e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { useTheme } from '../context/ThemeContext'; -import { themeImages } from '../constants'; -import { Trans } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; const Header: React.FC = ({ children }) => { const { darkMode, setDarkMode } = useTheme(); + const { t } = useTranslation(); return (
@@ -14,7 +14,7 @@ const Header: React.FC = ({ children }) => {
{children !== null ? children : <>} - +
); diff --git a/src/components/I8N.tsx b/src/components/I8N.tsx index 45736b6..e0a976f 100644 --- a/src/components/I8N.tsx +++ b/src/components/I8N.tsx @@ -18,7 +18,10 @@ i18n copyright: "© 2021 Ayush Kaushik", cta: "Lets do something about it!", covidAlert: "Covid Alert: Please refrain from activities with more than one participant", - acknowledgement: "Powered by <1>Bored API" + acknowledgement: "Powered by <1>Bored API", + darkModeToggle: "🌙 Dark Mode", + lightModeToggle: "☀️ Light Mode", + language: "🌏 Language" } }, fr: { @@ -26,8 +29,11 @@ i18n title: "Ennuyé?", copyright: "© 2021 Ayush Kaushik", cta: "Faisons quelque chose à ce sujet !", - covidAlert: "Alerte Covid : veuillez vous abstenir d'activités avec plus d'un participant", - acknowledgement: "Alimenté par <1>Bored API" + covidAlert: "Alerte Covid: veuillez vous abstenir d'activités avec plus d'un participant", + acknowledgement: "Alimenté par <1>Bored API", + darkModeToggle: "🌙 Mode Sombre", + lightModeToggle: "☀️ Mode Lumière", + language: "🌏 Langue" } }, de: { @@ -36,7 +42,10 @@ i18n copyright: "© 2021 Ayush Kaushik", cta: "Lasst uns etwas dagegen tun!", covidAlert: "Covid Alert: Bitte sehen Sie von Aktivitäten mit mehr als einem Teilnehmer ab", - acknowledgement: "Unterstützt von <1>Bored API" + acknowledgement: "Unterstützt von <1>Bored API", + darkModeToggle: "🌙 Dunkelmodus", + lightModeToggle: "☀️ Lichtmodus", + language: "🌏 Sprache" } }, hi: { @@ -45,7 +54,10 @@ i18n copyright: "© 2021 Ayush Kaushik", cta: "चलो इसके बारे में कुछ करते हैं!", covidAlert: "कोविड अलर्ट: कृपया एक से अधिक प्रतिभागियों वाली गतिविधियों से बचें", - acknowledgement: "<1>Bored API द्वारा संचालित" + acknowledgement: "<1>Bored API द्वारा संचालित", + darkModeToggle: "🌙 अँधेरा तरीका", + lightModeToggle: "☀️ रोशनी तरीका", + language: "🌏 भाषा" } }, pa: { @@ -54,7 +66,10 @@ i18n copyright: "© 2021 Ayush Kaushik", cta: "ਆਓ ਇਸ ਬਾਰੇ ਕੁਝ ਕਰੀਏ!", covidAlert: "ਕੋਵਿਡ ਅਲਰਟ: ਕਿਰਪਾ ਕਰਕੇ ਇੱਕ ਤੋਂ ਵੱਧ ਭਾਗੀਦਾਰਾਂ ਨਾਲ ਗਤੀਵਿਧੀਆਂ ਤੋਂ ਪਰਹੇਜ਼ ਕਰੋ", - acknowledgement: "<1>Bored API ਦੁਆਰਾ ਸੰਚਾਲਿਤ" + acknowledgement: "<1>Bored API ਦੁਆਰਾ ਸੰਚਾਲਿਤ", + darkModeToggle: "🌙 ਹਨੇਰਾ ਮੋਡ", + lightModeToggle: "☀️ ਰੋਸ਼ਨੀ ਮੋਡ", + language: "🌏 ਭਾਸ਼ਾ" } } }, diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index 40dc6ff..ef3db33 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTranslation } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import { useTheme } from '../context/ThemeContext'; import { languages, ILanguage } from '../constants'; @@ -12,7 +12,9 @@ const LanguageSelector: React.FC = () => { } return ( - { @@ -24,6 +26,7 @@ const LanguageSelector: React.FC = () => { ))} + ); } diff --git a/src/index.css b/src/index.css index ca67d9c..d0b00a7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); + :root { --font-size-small: 14px; --font-size-medium: 16px; @@ -12,9 +14,7 @@ body { overflow: hidden; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'Josefin Sans'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -27,10 +27,12 @@ code { .header { width: 100%; color: #FFF; - font-weight: bold; position: relative; overflow: hidden; + + display: flex; + justify-content: space-around; } .light-header { @@ -39,26 +41,52 @@ code { .dark-header { background-color: #222B45; - border-bottom: 2px solid #000; } -.header img { - height: 30px; - width: 30px; +.header-right-content { + float: right; + padding: 15px; } -.header-left-content { - float: none; - position: absolute; - top: 50%; - left: 0%; - transform: translate(10%, -50%); +.light-selector { + color: #FFF; } -.header-right-content { - float: right; - padding: 5px; +.dark-selector { + color: #FFF; +} + +.selector { + font-size: var(--font-size-medium); + display: inline-block; + + padding: 10px 24px; + border-radius: 34px; + + border: 2px solid #FFF; + margin-right: 15px; +} + +.selector select { + margin-right: 15px; + margin-left: 10px; + + padding: 10px 24px; + border-radius: 34px; + + font-size: var(--font-size-medium); + + color: #FFF; + border-color: #FFF; +} + +.light-selector select { + background-color: #3873D6; +} + +.dark-selector select { + background-color: #222B45; } .activity-body { @@ -68,18 +96,17 @@ code { text-align: center; padding: 50px; height: 100vh; + font-weight: bold; } .dark-body { background-color: #151A30; color: #FFF; - font-weight: bold; } .light-body { background-color: #E9F1FF; color: #000; - font-weight: bold; } .activity-body img { @@ -88,10 +115,11 @@ code { } .covid-warning { - background-color: #F9235C; + background-color: rgb(180, 0, 0); color: #FFF; - padding: 5px; - border-radius: 20px; + font-size: var(--font-size-medium); + padding: 10px 24px; + border-radius: 34px; } .footer { @@ -113,7 +141,7 @@ code { } .light-footer a { - color: #00D68F; + color: rgb(39, 187, 54); } .dark-footer { @@ -122,42 +150,29 @@ code { } .dark-footer a { - color: #ec6a1e; + color: rgb(39, 187, 54); } .button { - border-radius: 10px; + cursor: pointer; + padding: 10px 24px; + border-radius: 34px; padding: 15px; - font-size: var(--font-size-large); + font-size: var(--font-size-medium); font-weight: 400; + border: none; } .dark-button { - background-color: #00D68F; - border-color: #00D68F; + background-color: rgb(0, 124, 15); + color: #d4d4d4; + font-weight: bold; } .light-button { - background-color: #55D255; - border-color: #61A461; -} - -.light-selector { - background-color: #3873D6; + background-color: rgb(39, 187, 54); color: #FFF; - border-color: #FFF; + font-weight: bolder; } -.dark-selector { - background-color: #222B45; - color: #FFF; - border-color: #FFF; -} -.selector { - border-radius: 10px; - padding: 15px; - font-size: medium; - font-weight: 400; - margin: 10px; -} \ No newline at end of file