Add light theme

muhammetselimfe · Feb 13, 2021 · d6da8a9 · d6da8a9
1 parent 3448959
commit d6da8a9
Show file tree

Hide file tree

Showing 19 changed files with 589 additions and 295 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
 NEXT_PUBLIC_APP_URL=https://test.avaxnodes.com
+NEXT_PUBLIC_USE_MOCK_DATA=true
diff --git a/components/Header/index.js b/components/Header/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavDropdown } from 'react-bootstrap'
+import { NavDropdown, Navbar } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import { useDarkMode } from 'next-dark-mode'
 
@@ -10,29 +10,11 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
   const router = useRouter()
   const { darkModeActive, switchToDarkMode, switchToLightMode } = useDarkMode()
 
-  // const findActive = (text) => {
-  //   if (autoModeActive) return text === 'auto'
-  //   else if (darkModeActive) return text === 'dark'
-  //   else return text === 'light'
-  // }
-
-  console.log({darkModeActive})
-
-  // const toggleMode = () => {
-  //   if (darkModeActive) {
-  //     console.log('toggleMode switchToLightMode')
-  //     switchToLightMode()
-  //   } else {
-  //     console.log('toggleMode switchToDarkMode')
-  //     switchToDarkMode()
-  //   }
-  // }
-
   const dropdownLocales = locales.filter(item => item !== currentLocale)
-  console.log(currentRoute, `${currentLocale}-home`)
   const locale = currentLocale === defaultLocale ? undefined : currentLocale
   return (
-    <nav className={`navbar navbar-expand-lg navbar-dark fixed-top ${darkModeActive ? 'bg-dark' : 'bg-light'}`}>
+    <Navbar collapseOnSelect expand="lg" bg={darkModeActive ? 'dark' : 'light'} variant={darkModeActive ? 'dark' : 'light'} fixed="top">
+    {/* <nav className={`navbar navbar-expand-lg navbar-dark fixed-top ${darkModeActive ? 'bg-dark' : 'bg-light'}`}> */}
       <div className="container">
         <Link route={route} params={{ locale }}>
           <a className="navbar-brand">
@@ -44,7 +26,8 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
           </a>
         </Link>
 
-        <div className="collapse navbar-collapse" id="navbarResponsive">
+        <Navbar.Toggle aria-controls="navbarResponsive" />
+        <Navbar.Collapse id="navbarResponsive">
 
           <ul className="navbar-nav">
             <li className={`nav-item ${currentRoute === 'home' ? 'active' : ''}`}>
@@ -65,15 +48,21 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
           </ul>
 
           <ul className="navbar-nav ml-auto">
-            <li className="nav-item toggle-wrap" id="toggel_btn">
-              <input type="checkbox" id="toggle_checkbox" />
+            <li className="nav-item toggle-wrap" id="toggel_btn" onClick={() => {
+              if (darkModeActive) {
+                switchToLightMode()
+              } else {
+                switchToDarkMode()
+              }
+            }}>
+              {/* <input type="checkbox" id="toggle_checkbox" /> */}
               <label htmlFor="toggle_checkbox">
                 {darkModeActive ? (
                   <img src="/static/images/switch1.svg" className="night" />
                 ) : (
-                  <img src="/static/images/light-moon.svg" className="night-light" onClick={() => switchToDarkMode()} />
+                  <img src="/static/images/light-moon.svg" className="night-light" />
                 )}
-                <img src="/static/images/day.svg" className="day" onClick={() => switchToLightMode()} />
+                <img src="/static/images/day.svg" className="day" />
               </label>
             </li>
           </ul>
@@ -89,7 +78,7 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
               border: 'none',
             }}
             title={(
-              <span className="mr-2 d-flex align-items-center text-white">
+              <span className="mr-2 d-flex align-items-center">
                 <img
                   src={`/static/images/icons/flag-${currentLocale}.svg`}
                   width={25}
@@ -130,10 +119,10 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
             ))}
           </NavDropdown>
 
-        </div>
+        </Navbar.Collapse>
 
       </div>
-    </nav>
+    </Navbar>
   )
 }
 

diff --git a/components/Node/index.js b/components/Node/index.js
@@ -146,8 +146,9 @@ export const Node = ({
               </div>
               <div className=" col-3 col-md-4 col-sm-4 ">
                 {item && item.connected && (
-                  <div className="PagesubTitle"><i className="fas fa-circle"></i>
-                  ACTIVE
+                  <div className="PagesubTitle d-flex justify-content-end align-items-center">
+                    <FaCircle fill={item.connected ? '#5DA574' : undefined} fontSize={10} />
+                    <span className="ml-2">{'ACTIVE'}</span>
                   </div>
                 )}
               </div>
@@ -161,8 +162,8 @@ export const Node = ({
                 <p className="progress-title">Available space</p>
                 <div className="progress-bar-wrap relative">
                   <div className="label-wrap">
-                    <label className="available-label"><strong>{numberFormat(maxStaked)}</strong> AVAX total</label>
-                    <label className="total-label"><strong>{numberFormat(leftToStack)}</strong> AVAX free</label>
+                    <label className="available-label"><strong>{numberFormat(maxStaked, 0)}</strong> AVAX total</label>
+                    <label className="total-label"><strong>{numberFormat(leftToStack, 0)}</strong> AVAX free</label>
                   </div>
                   <div className="progress">
                     <div

diff --git a/components/Nodes/index.js b/components/Nodes/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { gql, useQuery } from '@apollo/client';
 import { FaCircle } from "react-icons/fa";
 import moment from 'moment'
+import { useDarkMode } from 'next-dark-mode'
 
 import shortNodeId from '../../utils/shortNodeId';
 import numberFormat from '../../utils/numberFormat';
@@ -111,6 +112,9 @@ const Filters = ({
   setFilter,
   setPage,
 }) => {
+  const [selectFilterOpen, setSelectFilterOpen] = React.useState(false);
+  const [selectFilterOptionsOpen, setSelectFilterOptionsOpen] = React.useState(false);
+  const { darkModeActive } = useDarkMode()
   return (
     <div className="filter-wrapper">
       <div className="search-container">
@@ -127,8 +131,11 @@ const Filters = ({
             }}
           />
           <img src="/static/images/search.svg" alt="search" className="search" />
-          <img src="/static/images/right-arrow.svg" className="right-arrow dark" />
-          <img src="/static/images/search2.svg" className="right-arrow light" />
+          {darkModeActive ? (
+            <img src="/static/images/right-arrow.svg" className="right-arrow" />
+          ): (
+            <img src="/static/images/search2.svg" className="right-arrow" />
+          )}
         </div>
       </div>
       <div className="freespace-wrap">
@@ -147,14 +154,18 @@ const Filters = ({
             aria-haspopup="listbox"
             aria-expanded="false"
             title="Free Space"
+            onClick={() => setSelectFilterOpen(!selectFilterOpen)}
           >
             <div className="filter-option">
               <div className="filter-option-inner">
                 <div className="filter-option-inner-inner">Free Space</div>
               </div>
             </div>
           </button>
-          <div className="dropdown-menu" style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}>
+          <div
+            className={`dropdown-menu ${selectFilterOpen ? 'd-block' : ''}`}
+            style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}
+          >
             <div className="inner show" role="listbox" id="bs-select-1" tabIndex="-1" aria-activedescendant="bs-select-1-0"
               style={{ maxHeight: '570.422px', overflowY: 'auto', minHeight: '0px' }}
             >
@@ -186,16 +197,25 @@ const Filters = ({
             <option>More than 10%</option>
             <option>More than 15%2</option>
           </select>
-          <button type="button" className="btn dropdown-toggle btn-light" data-toggle="dropdown"
-            role="combobox" aria-owns="bs-select-2" aria-haspopup="listbox" aria-expanded="false" title="More than 5%"
+          <button
+            type="button"
+            className="btn dropdown-toggle btn-light"
+            data-toggle="dropdown"
+            role="combobox"
+            aria-owns="bs-select-2"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            title="More than 5%"
+            onClick={() => setSelectFilterOptionsOpen(!selectFilterOptionsOpen)}
           >
             <div className="filter-option">
               <div className="filter-option-inner">
                 <div className="filter-option-inner-inner">More than 5%</div>
               </div>
             </div>
           </button>
-          <div className="dropdown-menu"
+          <div
+            className={`dropdown-menu ${selectFilterOptionsOpen ? 'd-block' : ''}`}
             style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}
           >
             <div className="inner show" role="listbox" id="bs-select-2" tabIndex="-1" aria-activedescendant="bs-select-2-0"
@@ -338,7 +358,7 @@ export const Nodes = ({ currentLocale }) => {
                           <tr key={index}>
                             <td scope="row" style={{ position: 'relative' }}>
                               <Link route={`${currentLocale}-node`} params={{ locale, id: item.nodeID }}>
-                                <a className="stretched-link text-white">
+                                <a className="stretched-link">
 
                                   <span id="code">{shortNodeId(item.nodeID)}</span>
                                   <img

diff --git a/components/TableControls/index.js b/components/TableControls/index.js
@@ -1,3 +1,5 @@
+import { useDarkMode } from 'next-dark-mode'
+
 const maxPagesToShow = 5
 
 const TableControls = ({
@@ -7,6 +9,7 @@ const TableControls = ({
   setPerPage,
   pagination = {},
 }) => {
+  const { darkModeActive } = useDarkMode()
 
   const numberOfPages = Math.ceil(pagination.count / perPage) || 0
 
@@ -53,8 +56,8 @@ const TableControls = ({
           </label>
         </div>
       </div>
-      <div className="col-sm-3"></div>
-      <div className="col-sm-6">
+      <div className="col-sm-1"></div>
+      <div className="col-sm-8">
         <div className="dataTables_paginate paging_simple_numbers" id="datatable_paginate">
           <a
             className={`paginate_button previous ${page === 1 ? 'disabled' : ''}`}
@@ -68,8 +71,11 @@ const TableControls = ({
             }}
           >
             <div>
-              <img src="/static/images/prev.svg" className="dark-angle" />
-              <img src="/static/images/left-angle.svg" className="light-angle" style={{ display: 'none' }} />
+              {darkModeActive ? (
+                <img src="/static/images/prev.svg" className="dark-angle" />
+              ) : (
+                <img src="/static/images/left-angle.svg" className="light-angle" />
+              )}
             </div>
           </a>
           <span>
@@ -104,8 +110,11 @@ const TableControls = ({
             }}
           >
             <div>
-              <img src="/static/images/next.svg" className="dark-angle" />
-              <img src="/static/images/right-angle.svg" className="light-angle" style={{ display: 'none' }} />
+              {darkModeActive ? (
+                <img src="/static/images/next.svg" className="dark-angle" />
+              ) : (
+                <img src="/static/images/right-angle.svg" className="light-angle" />
+              )}
             </div>
           </a>
         </div>

diff --git a/lib/api/fixtures/platform.getCurrentSupply.json b/lib/api/fixtures/platform.getCurrentSupply.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "supply": 10
+  },
+  "id": 1
+}
diff --git a/pages/api/graphql/schemas/nodes.json → ...xtures/platform.getCurrentValidators.json b/pages/api/graphql/schemas/nodes.json → ...xtures/platform.getCurrentValidators.json
diff --git a/lib/api/fixtures/platform.getHeight.json b/lib/api/fixtures/platform.getHeight.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "height": 10
+  },
+  "id": 1
+}
diff --git a/lib/api/fixtures/platform.getTotalStake.json b/lib/api/fixtures/platform.getTotalStake.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "stake": 10
+  },
+  "id": 1
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		NEXT_PUBLIC_APP_URL=https://test.avaxnodes.com
		NEXT_PUBLIC_USE_MOCK_DATA=true