Fixed the header and theme colors

Ayush-Kaushik · Aug 27, 2023 · 7d45798 · 7d45798 · vercel · Aug 27, 2023
1 parent 33bdfef
commit 7d45798
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 82 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,11 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Boredom Buster</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git 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
@@ -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 (
         <header className={darkMode ? `header dark-header` : `header light-header`}>
@@ -14,7 +14,7 @@ const Header: React.FC = ({ children }) => {
 
             <div className="header-right-content">
                 {children !== null ? children : <></>}
-                <button className={darkMode ? `button dark-button` : `button light-button`} onClick={() => { setDarkMode(!darkMode) }}>{darkMode ? <img alt={"logo"} src={`/images/${themeImages["light"].url}`} /> : <img alt={"logo"} src={`/images/${themeImages["dark"].url}`} />}</button>
+                <button className={darkMode ? `button dark-button` : `button light-button`} onClick={() => { setDarkMode(!darkMode) }}>{darkMode ? <Trans i18nKey="lightModeToggle" id="lightModeToggle"/> : <Trans i18nKey="darkModeToggle" id="darkModeToggle"/>}</button>
             </div>
         </header>
     );

diff --git a/src/components/I8N.tsx b/src/components/I8N.tsx
@@ -18,16 +18,22 @@ 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</1>"
+                    acknowledgement: "Powered by <1>Bored API</1>",
+                    darkModeToggle: "🌙 Dark Mode",
+                    lightModeToggle: "☀️ Light Mode",
+                    language: "🌏 Language"
                 }
             },
             fr: {
                 translation: {
                     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</1>"
+                    covidAlert: "Alerte Covid: veuillez vous abstenir d'activités avec plus d'un participant",
+                    acknowledgement: "Alimenté par <1>Bored API</1>",
+                    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</1>"
+                    acknowledgement: "Unterstützt von <1>Bored API</1>",
+                    darkModeToggle: "🌙 Dunkelmodus",
+                    lightModeToggle: "☀️ Lichtmodus",
+                    language: "🌏 Sprache"
                 }
             },
             hi: {
@@ -45,7 +54,10 @@ i18n
                     copyright: "© 2021 Ayush Kaushik",
                     cta: "चलो इसके बारे में कुछ करते हैं!",
                     covidAlert: "कोविड अलर्ट: कृपया एक से अधिक प्रतिभागियों वाली गतिविधियों से बचें",
-                    acknowledgement: "<1>Bored API</1> द्वारा संचालित"
+                    acknowledgement: "<1>Bored API</1> द्वारा संचालित",
+                    darkModeToggle: "🌙 अँधेरा तरीका",
+                    lightModeToggle: "☀️ रोशनी तरीका",
+                    language: "🌏 भाषा"
                 }
             },
             pa: {
@@ -54,7 +66,10 @@ i18n
                     copyright: "© 2021 Ayush Kaushik",
                     cta: "ਆਓ ਇਸ ਬਾਰੇ ਕੁਝ ਕਰੀਏ!",
                     covidAlert: "ਕੋਵਿਡ ਅਲਰਟ: ਕਿਰਪਾ ਕਰਕੇ ਇੱਕ ਤੋਂ ਵੱਧ ਭਾਗੀਦਾਰਾਂ ਨਾਲ ਗਤੀਵਿਧੀਆਂ ਤੋਂ ਪਰਹੇਜ਼ ਕਰੋ",
-                    acknowledgement: "<1>Bored API</1> ਦੁਆਰਾ ਸੰਚਾਲਿਤ"
+                    acknowledgement: "<1>Bored API</1> ਦੁਆਰਾ ਸੰਚਾਲਿਤ",
+                    darkModeToggle: "🌙 ਹਨੇਰਾ ਮੋਡ",
+                    lightModeToggle: "☀️ ਰੋਸ਼ਨੀ ਮੋਡ",
+                    language: "🌏 ਭਾਸ਼ਾ"
                 }
             }
         },

diff --git 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 (
-            <select className={darkMode ? `dark-selector selector` : `light-selector selector`}
+        <div className={darkMode ? `dark-selector selector` : `light-selector selector`}>
+            <label><Trans i18nKey="language" id="language"/></label>
+            <select
                 value={i18n.language}
                 id={"language-selector"}
                 onChange={(e) => {
@@ -24,6 +26,7 @@ const LanguageSelector: React.FC = () => {
                     </option>
                 ))}
             </select>
+        </div>
     );
 }
 

diff --git 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;
-}