Feat: Add translations.

src/App.scss

@@ -145,6 +145,25 @@ h6 {
     text-decoration: none;
   }
 
+  .LanguageSwitcher {
+    .button {
+      border: 0;
+      color: #6c757d;
+      cursor: pointer;
+      font-family: 'archia';
+      font-size: 12px;
+      font-weight: 600;
+      margin: 0;
+      padding: 1.5rem;
+      transition: all 0s ease-in-out;
+      width: 3rem;
+
+      &:active {
+        border: 0;
+      }
+    }
+  }
+
   .navbar-left {
     color: $gray;
     cursor: pointer;
@@ -173,8 +192,9 @@ h6 {
     font-size: 12px;
     font-weight: 600;
     padding: 1.5rem;
+    text-align: center;
     transition: all 0s ease-in-out;
-    width: 2rem;
+    width: 3rem;
 
     &:hover {
       background: $pblue;
@@ -250,6 +270,10 @@ h6 {
     margin-right: 2.5rem;
     min-height: 10rem;
   }
+
+  .header {
+    z-index: 99;
+  }
 }
 
 .alert {
@@ -961,6 +985,11 @@ h6 {
     width: calc(100% - 4rem);
   }
 
+  .search-input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
   .search-placeholder {
     color: $gray-mid;
     font-family: 'archia';
@@ -982,7 +1011,7 @@ h6 {
       color: $gray-mid;
       left: .75rem;
       position: absolute;
-      top: 4.15rem;
+      top: 1.25rem;
       transition: all .2s ease-in-out;
     }
 
@@ -1003,7 +1032,7 @@ h6 {
     justify-content: center;
     position: absolute;
     right: 1rem;
-    top: 4.15rem;
+    top: 1.35rem;
     transition: all .2s ease-in-out;
     width: 20px;
 
@@ -1500,6 +1529,9 @@ h6 {
 
   h5 {
     font-weight: 600;
+    overflow-wrap: break-word;
+    text-align: center;
+    width: 100%;
   }
 
   .is-cherry {
@@ -1625,7 +1657,6 @@ table {
     align-items: center;
     display: flex;
     flex-direction: row;
-    height: .9rem;
     justify-content: space-between;
     position: relative;
 
@@ -2199,7 +2230,6 @@ table {
       display: flex;
       flex: 1;
       flex-direction: column;
-      height: 3rem;
       margin-bottom: 1rem;
       margin-left: .25rem;
       margin-right: .25rem;
@@ -2487,6 +2517,8 @@ table {
 
 .TimeSeriesExplorer {
   align-self: center;
+  display: flex;
+  flex-direction: column;
   width: 30rem;
 
   &.stickied {
@@ -2495,28 +2527,9 @@ table {
   }
 
   .alert {
-    margin-bottom: .5rem;
-    margin-left: auto;
-    margin-right: 0;
-    margin-top: .5rem;
-    padding: .25rem;
-    padding-left: .5rem;
-    padding-right: .5rem;
-    width: 16rem;
-
-    & > * {
-      align-self: center;
-    }
-
-    svg {
-      margin: 0 !important;
-      margin-right: .25rem !important;
-      width: 14px !important;
-    }
-
-    .alert-right {
-      width: 100%;
-    }
+    align-self: flex-end;
+    margin: 0;
+    margin-top: 1rem;
   }
 }
 
@@ -4396,6 +4409,54 @@ footer {
   }
 }
 
+.LanguageSwitcher {
+  z-index: 999;
+
+  .button {
+    border: 2px solid $gray-light;
+    border-radius: 0;
+    color: $gray;
+    font-family: 'archia';
+    font-size: .75rem;
+    font-weight: 600;
+    padding: .5rem;
+    text-transform: unset;
+
+    &:hover {
+      background: $gray-hover !important;
+    }
+
+    &:active {
+      border: 2px solid transparent;
+    }
+
+    * {
+      align-self: center;
+    }
+  }
+
+  .select-menu-modal {
+    width: 8.25rem;
+  }
+
+  a {
+    &.select-menu-item {
+      color: $gray;
+      display: flex;
+      flex-direction: row;
+      font-family: 'archia';
+      font-weight: 600;
+      height: 2rem;
+      justify-content: center;
+      width: auto;
+
+      svg {
+        display: none !important;
+      }
+    }
+  }
+}
+
 .Clusters {
   align-self: center;
   width: 100%;
@@ -4483,15 +4544,14 @@ footer {
     position: fixed;
     z-index: 99999;
 
-
     .navbar-left {
       margin-top: auto;
       order: 3;
       padding-left: 0;
       padding-right: 0;
       text-align: center;
       transition: all .2s ease-in-out;
-      width: 5rem;
+      width: 100%;
 
       &:hover {
         background: $gray-hover;
@@ -4539,7 +4599,7 @@ footer {
       border-right: solid 2px $gray-light-opaque;
       flex-direction: column;
       padding-left: 0;
-      padding-top: 5.5rem;
+      padding-top: 9.75rem;
       top: 0;
       width: 15rem;
       z-index: -1 !important;
@@ -4837,6 +4897,25 @@ footer {
       min-width: 1rem;
     }
   }
+
+  .LanguageSwitcher {
+    .select-menu-modal {
+      background: transparent;
+      width: auto;
+
+      div {
+        background: none;
+      }
+    }
+
+    .select-menu-list {
+      align-self: center;
+    }
+
+    .select-menu-item {
+      width: 10rem !important;
+    }
+  }
 }
 
 // Dark Mode
@@ -5150,6 +5229,38 @@ footer {
       filter: invert(1) hue-rotate(180deg) saturate(5);
     }
   }
+
+  .LanguageSwitcher {
+    summary {
+      box-shadow: none;
+    }
+
+    .button {
+      background: #1e1e30;
+    }
+
+    .select-menu-list {
+      background: transparent;
+      border: 0;
+    }
+
+    .select-menu-modal {
+      background: transparent;
+      height: 100%;
+
+      div {
+        background: none;
+        border: 1px solid #1e1e30bb;
+      }
+    }
+
+    a {
+      &.select-menu-item {
+        background: #161625 !important;
+        border: 1px solid #1e1e30bb;
+      }
+    }
+  }
 }
 
 // Animation Support

src/components/choropleth.js

@@ -6,6 +6,7 @@ import {capitalizeAll, formatNumber} from '../utils/commonfunctions';
 import * as d3 from 'd3';
 import React, {useCallback, useEffect, useRef} from 'react';
 import * as Icon from 'react-feather';
+import {useTranslation} from 'react-i18next';
 import * as topojson from 'topojson';
 
 function ChoroplethMap({
@@ -20,7 +21,7 @@ function ChoroplethMap({
 }) {
   const choroplethMap = useRef(null);
   const choroplethLegend = useRef(null);
-
+  const {t} = useTranslation();
   const mapMeta = MAP_META[currentMap.name];
 
   const ready = useCallback(
@@ -466,7 +467,9 @@ function ChoroplethMap({
         mapData[currentMap.name]?.Unknown[mapOption] ? (
           <div className="disclaimer">
             <Icon.AlertCircle />
-            {`District-wise ${mapOption} numbers are under reconciliation`}
+            {t('District-wise {{mapOption}} numbers are under reconciliation', {
+              mapOption: t(mapOption),
+            })}
           </div>
         ) : (
           ''

src/components/footer.js

@@ -26,7 +26,7 @@ function Footer(props) {
         rel="noopener noreferrer"
       >
         <Icon.GitHub />
-        <span>Open Sourced on GitHub</span>
+        <span>{t('Open Sourced on GitHub')}</span>
       </a>
 
       <a
@@ -36,7 +36,7 @@ function Footer(props) {
         rel="noopener noreferrer"
       >
         <Icon.Database />
-        <span>Crowdsourced Patient Database&nbsp;</span>
+        <span>{t('Crowdsourced Patient Database')}</span>
       </a>
 
       <a
@@ -47,7 +47,7 @@ function Footer(props) {
         style={{justifyContent: 'center'}}
       >
         <Icon.Twitter />
-        <span>View updates on Twitter</span>
+        <span>{t('View updates on Twitter')}</span>
       </a>
 
       <a
@@ -57,7 +57,7 @@ function Footer(props) {
         rel="noopener noreferrer"
       >
         <Icon.MessageCircle />
-        <span>Join Telegram to Collaborate!</span>
+        <span>{t('Join Telegram to Collaborate!')}</span>
       </a>
     </footer>
   );

src/components/home.js

@@ -1,5 +1,4 @@
 import Footer from './footer';
-// import LanguageSwitcher from './languageswitcher';
 import Level from './level';
 import MapExplorer from './mapexplorer';
 import Minigraph from './minigraph';
@@ -165,14 +164,13 @@ function Home(props) {
 
         <div className="home-left">
           <div className="header fadeInUp" style={{animationDelay: '1s'}}>
-            {/* <LanguageSwitcher />*/}
             {fetched && <Search districtZones={districtZones} />}
 
             <div className="actions">
               <h5>
                 {isNaN(Date.parse(formatDate(lastUpdated)))
                   ? ''
-                  : formatDateAbsolute(lastUpdated)}
+                  : `${formatDateAbsolute(lastUpdated)} IST`}
               </h5>
               {fetched && !showUpdates && (
                 <div className="bell-icon">