Style: Place language switcher in appropriate place.

covid19india · May 12, 2020 · aeecf86 · aeecf86
1 parent be46494
commit aeecf86
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 69 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -153,6 +153,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;
@@ -181,8 +200,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;
@@ -901,7 +921,6 @@ h6 {
           align-items: center;
           display: flex;
           flex-direction: row;
-          height: .9rem;
           justify-content: space-between;
           position: relative;
 
@@ -994,7 +1013,6 @@ h6 {
             align-items: center;
             display: flex;
             flex-direction: row;
-            height: .9rem;
             justify-content: space-between;
             position: relative;
 
@@ -1221,6 +1239,11 @@ h6 {
     width: calc(100% - 4rem);
   }
 
+  .search-input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
   .search-placeholder {
     color: $gray-mid;
     font-family: 'archia';
@@ -1242,7 +1265,7 @@ h6 {
       color: $gray-mid;
       left: .75rem;
       position: absolute;
-      top: 4.15rem;
+      top: 1.25rem;
       transition: all .2s ease-in-out;
     }
 
@@ -1263,7 +1286,7 @@ h6 {
     justify-content: center;
     position: absolute;
     right: 1rem;
-    top: 4.15rem;
+    top: 1.35rem;
     transition: all .2s ease-in-out;
     width: 20px;
 
@@ -1831,7 +1854,6 @@ table {
     align-items: center;
     display: flex;
     flex-direction: row;
-    height: .9rem;
     justify-content: space-between;
     position: relative;
 
@@ -4602,16 +4624,26 @@ footer {
 }
 
 .LanguageSwitcher {
+  z-index: 999;
+
   .button {
     border: 2px solid $gray-light;
-    border-radius: 5px;
+    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;
     }
@@ -4623,6 +4655,7 @@ footer {
 
   a {
     &.select-menu-item {
+      color: $gray;
       display: flex;
       flex-direction: row;
       font-family: 'archia';
@@ -4725,7 +4758,6 @@ footer {
     position: fixed;
     z-index: 99999;
 
-
     .navbar-left {
       margin-top: auto;
       order: 3;
@@ -4781,7 +4813,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;
@@ -5332,6 +5364,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
@@ -5754,6 +5805,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

diff --git a/src/components/home.js b/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';
@@ -190,7 +189,6 @@ function Home(props) {
                 </div>
               )}
               {fetched && showUpdates && BellOff}
-              <LanguageSwitcher />
             </div>
           </div>
 

diff --git a/src/components/languageswitcher.js b/src/components/languageswitcher.js
@@ -21,7 +21,7 @@ export default function LanguageSwitcher() {
           {locales[language]}
         </Button>
         <SelectMenu.Modal className="select-menu-modal">
-          <SelectMenu.List>
+          <SelectMenu.List className="select-menu-list">
             {Object.entries(locales).map(([key, language]) => (
               <SelectMenu.Item
                 key={key}

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -1,3 +1,5 @@
+import LanguageSwitcher from './languageswitcher';
+
 import anime from 'animejs';
 import React, {useState, useRef} from 'react';
 import * as Icon from 'react-feather';
@@ -34,15 +36,18 @@ function Navbar({pages, darkMode, setDarkMode}) {
 
   return (
     <div className="Navbar">
-      <div
-        className="navbar-left"
-        onClick={() => {
-          setDarkMode((prevMode) => !prevMode);
-          setIsThemeSet(true);
-        }}
-      >
-        {darkMode ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />}
-      </div>
+      <LanguageSwitcher />
+      {window.innerWidth > 769 && (
+        <div
+          className="navbar-left"
+          onClick={() => {
+            setDarkMode((prevMode) => !prevMode);
+            setIsThemeSet(true);
+          }}
+        >
+          {darkMode ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />}
+        </div>
+      )}
       <div className="navbar-middle">
         <Link
           to="/"
@@ -110,19 +115,35 @@ function Navbar({pages, darkMode, setDarkMode}) {
         )}
       </div>
 
-      {expand && <Expand expand={expand} pages={pages} setExpand={setExpand} />}
+      {expand && (
+        <Expand
+          expand={expand}
+          pages={pages}
+          setExpand={setExpand}
+          darkMode={darkMode}
+          setIsThemeSet={setIsThemeSet}
+          setDarkMode={setDarkMode}
+        />
+      )}
     </div>
   );
 }
 
-function Expand({expand, pages, setExpand}) {
+function Expand({
+  expand,
+  pages,
+  setExpand,
+  darkMode,
+  setIsThemeSet,
+  setDarkMode,
+}) {
   const expandElement = useRef(null);
   const {t} = useTranslation();
 
   useEffectOnce(() => {
     anime({
       targets: expandElement.current,
-      translateX: '10rem',
+      translateX: '10.5rem',
       easing: 'easeOutExpo',
       duration: 250,
     });
@@ -157,6 +178,19 @@ function Expand({expand, pages, setExpand}) {
         return null;
       })}
 
+      {window.innerWidth < 768 && (
+        <div
+          className="fadeInUp"
+          style={{animationDelay: '0.9s'}}
+          onClick={() => {
+            setDarkMode((prevMode) => !prevMode);
+            setIsThemeSet(true);
+          }}
+        >
+          <div>{darkMode ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />}</div>
+        </div>
+      )}
+
       <div className="expand-bottom fadeInUp" style={{animationDelay: '1s'}}>
         <h5>{t('A crowdsourced initiative.')}</h5>
       </div>