From f2aa7d4526efad490d3ab5f8e31306642c8b4556 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 14:22:37 +0530
Subject: [PATCH 01/19] Feat: overhaul dark theme

---
 src/dark-theme.scss | 2219 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 2219 insertions(+)
 create mode 100644 src/dark-theme.scss

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
new file mode 100644
index 0000000000..89baee7d83
--- /dev/null
+++ b/src/dark-theme.scss
@@ -0,0 +1,2219 @@
+$blue: #007bff;
+$blue-light: #007bff10;
+$blue-hover: #007bff30;
+$blue-light-opaque: #eff7ff;
+$blue-mid: #007bff99;
+$pblue: #4c75f2;
+$pblue-light: #4c75f230;
+$pblue-hover: #4c75f250;
+$pblue-light-opaque: #eff7ff;
+$pblue-mid: #4c75f299;
+$cherry: #ff073a;
+$cherry-mid: #ff073add;
+$cherry-light: #ff073a20;
+$cherry-hover: #ff073a30;
+$cherry-light-opaque: #ffe0e6;
+$red: #dc3545;
+$red-light: #dc354520;
+$red-mid: #dc354599;
+$red-hover: #dc354530;
+$orange: #fd7e14;
+$orange-mid: #fd7e1499;
+$orange-light: #fd7e1420;
+$orange-hover: #fd7e1430;
+$orange-light-opaque: #ffefe2;
+$yellow: #ffc107;
+$yellow-light: #ffc10720;
+$yellow-hover: #ffc10730;
+$yellow-mid: #ffc10799;
+$yellow-light-opaque: #fff7e0;
+$green: #28a745;
+$green-light: #28a74520;
+$green-hover: #28a74530;
+$green-mid: #28a745dd;
+$teal: #20c997;
+$cyan: #17a2b8;
+$white: #fff;
+$gray: #ababab;
+$gray-light: #ababab10;
+$gray-light-opaque: var(--dark-background);
+$gray-hover: #ababab20;
+$gray-mid: #abababdd;
+$gray-dark: #343a40;
+$gray-opaque: #f0ffff;
+$light: #f8f9fa;
+$dark: #343a40;
+$purple: #9370dbdd;
+$purple-light: #9370db20;
+$purple-hover: #9370db30;
+$purple-mid: #9370db99;
+$purple-light-opaque: #e3e2f3;
+$pink: #fb5581;
+$pink-light: #ffa8cb30;
+$pink-hover: #ffa8cb60;
+$pink-mid: #fb558199;
+$brown: #b6854d;
+$brown-light: #b6854d10;
+$brown-hover: #b6854d30;
+$brown-mid: #b6854d99;
+$brick: #e23028;
+$brick-light: #e2302810;
+
+$default-primary: var(--primary-color);
+
+.dark-mode {
+  background-color: var(--dark-background);
+  color: #fff;
+
+  .dark-hotspot-border > path {
+    stroke: #f0ffffaa;
+  }
+
+  .arrow-up {
+    border-bottom: 5px solid $gray-mid;
+  }
+
+  .arrow-down {
+    border-top: 5px solid $gray-mid;
+  }
+
+  .Navbar {
+    .navbar-left {
+      color: $gray-mid;
+
+      &:hover {
+        color: $gray;
+      }
+    }
+
+    .navbar-middle {
+      color: $gray;
+
+      span {
+        color: var(--primary-color);
+      }
+    }
+
+    .navbar-right {
+      color: $gray-mid;
+
+      &:hover {
+        color: $gray;
+      }
+    }
+
+    .expand {
+      background: var(--dark-background);
+      color: $gray;
+
+      & > * {
+        // border-bottom: 1px solid $gray-light;
+        // border-top: 1px solid $gray-light;
+        border: 0;
+
+        &:hover {
+          background: $gray-hover;
+        }
+
+        span {
+          &.focused {
+            background: none !important;
+            color: var(--primary-color);
+          }
+        }
+      }
+
+      .expand-bottom {
+        &:hover {
+          background: none;
+        }
+      }
+    }
+  }
+
+  .alert {
+    background: $gray-light;
+    color: $gray;
+
+    svg {
+      color: $gray-mid;
+    }
+
+    .alert-right {
+      a {
+        background: $gray-light;
+        color: $gray;
+
+        &:hover {
+          background: $gray-hover;
+        }
+      }
+    }
+
+    &.is-green {
+      background: $green-light;
+      color: $green;
+
+      svg {
+        stroke: $green-mid;
+      }
+    }
+  }
+
+  .State {
+    .header {
+      .header-left {
+        h1 {
+          color: $brick;
+        }
+
+        h5 {
+          color: $gray;
+        }
+      }
+
+      .header-right {
+        color: $purple-mid;
+
+        h2 {
+          color: $purple;
+        }
+
+        a {
+          background: $purple-light;
+
+          &:hover {
+            background: $purple-hover;
+          }
+        }
+      }
+    }
+
+    .to-essentials {
+      background: $gray-light;
+
+      &:hover {
+        background: $gray-hover;
+      }
+
+      h2 {
+        color: $gray-mid;
+      }
+
+      svg {
+        color: $gray-mid;
+      }
+    }
+  }
+
+  .StateMeta {
+    &.population {
+      h1,
+      h3 {
+        color: $gray;
+      }
+    }
+
+    &.confirmed {
+      background: $cherry-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $cherry-mid;
+      }
+
+      h1 {
+        color: $cherry;
+      }
+    }
+
+    &.active {
+      background: $blue-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $blue-mid;
+      }
+
+      h1 {
+        color: $blue;
+      }
+    }
+
+    &.recovery {
+      background: $green-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $green-mid;
+      }
+
+      h1 {
+        color: $green;
+      }
+    }
+
+    &.mortality {
+      background: $gray-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $gray-mid;
+      }
+
+      h1 {
+        color: $gray;
+      }
+    }
+
+    &.cpm {
+      background: $yellow-light;
+
+      h3,
+      h5,
+      svg {
+        color: $orange-mid;
+      }
+
+      h1 {
+        color: $orange;
+      }
+    }
+
+    &.tpm {
+      background: $purple-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $purple-mid;
+      }
+
+      h1 {
+        color: $purple;
+      }
+    }
+
+    &.ptr {
+      background: $pink-light;
+
+      h3,
+      h5,
+      svg,
+      p {
+        color: $pink-mid;
+      }
+
+      h1 {
+        color: $pink;
+      }
+    }
+
+    &.gr {
+      background: $brown-light;
+
+      h3,
+      h5,
+      p,
+      svg {
+        color: $brown-mid;
+      }
+
+      h1 {
+        color: $brown;
+      }
+    }
+  }
+
+  .StateDropdown {
+    .state-name {
+      background: $brick-light;
+    }
+
+    .dropdown {
+      background: $white;
+
+      .item {
+        color: $red;
+
+        &:hover {
+          background: $red-hover;
+        }
+      }
+    }
+
+    .backdrop {
+      background: $red-light;
+    }
+  }
+
+  .Essentials {
+    button {
+      background: $yellow-light;
+      color: $orange;
+
+      &:hover {
+        background: $yellow-hover;
+      }
+    }
+
+    .address {
+      color: $gray;
+
+      svg {
+        stroke: $gray-mid;
+      }
+    }
+
+    .essential-result {
+      background: $gray-light;
+    }
+  }
+
+  .labels {
+    .label {
+      background: $gray-light !important;
+      color: $gray-mid !important;
+
+      &.is-selected {
+        background: $yellow-hover !important;
+        color: $orange-mid !important;
+
+        &:hover {
+          background: $yellow-hover !important;
+          color: $orange-mid !important;
+        }
+      }
+
+      @media not all and (pointer: coarse) {
+        &:hover {
+          background: $yellow-light !important;
+          color: $orange-mid !important;
+        }
+      }
+    }
+  }
+
+  .Banner {
+    background: $purple-light;
+    color: $purple;
+  }
+
+  .Search {
+    label {
+      color: $gray;
+    }
+
+    .line {
+      background: $gray-light;
+    }
+
+    input {
+      background: var(--dark-background);
+      border: 1px solid;
+      color: $gray;
+    }
+
+    .search-placeholder {
+      color: $gray-mid;
+    }
+
+    .search-button {
+      svg {
+        color: var(--primary-color);
+      }
+    }
+
+    .close-button {
+      background: $gray-light !important;
+
+      &:hover {
+        background: $gray-hover !important;
+      }
+
+      svg {
+        stroke: $gray-mid;
+      }
+
+      &.custom {
+        background: $pink-light !important;
+
+        svg {
+          stroke: $pink !important;
+        }
+      }
+    }
+
+    .feature {
+      background: $pink-light;
+      color: $pink;
+    }
+
+    .expanded {
+      h4,
+      h3 {
+        color: $gray;
+      }
+
+      h3 {
+        color: var(--primary-color);
+      }
+    }
+
+    .results {
+      .pan-divider {
+        color: $gray;
+      }
+
+      .result,
+      .essential-result {
+        border-bottom: 2px solid $gray-light;
+        color: $gray;
+
+        &:hover {
+          background: $gray-light;
+        }
+
+        .result-type {
+          background: $yellow-light;
+          color: $orange;
+
+          &:hover {
+            background: $yellow-hover;
+          }
+
+          svg {
+            stroke: $orange-mid;
+          }
+        }
+
+        .result-zone {
+          &.is-red {
+            background: $cherry-light;
+            border: 2px solid $cherry-mid;
+          }
+
+          &.is-orange {
+            background: $orange-light;
+            border: 2px solid $orange-mid;
+          }
+
+          &.is-green {
+            background: $green-light;
+            border: 2px solid $green-mid;
+          }
+        }
+      }
+
+      .essential-result {
+        .result-top {
+          .result-top-left {
+            .result-distance {
+              color: $green;
+            }
+          }
+        }
+
+        .result-category {
+          background: $pink-light;
+          color: $pink;
+
+          &:hover {
+            background: $pink-hover;
+          }
+        }
+
+        .result-contact {
+          background: $gray-light;
+          color: $gray;
+
+          &:hover {
+            background: $gray-hover;
+          }
+
+          svg {
+            stroke: $gray-mid;
+          }
+        }
+      }
+    }
+
+    .suggestions {
+      .suggestion {
+        color: $gray-mid;
+      }
+    }
+  }
+
+  .header {
+    .actions {
+      &.timeline {
+        .highlight {
+          color: $brown !important;
+        }
+      }
+
+      h5 {
+        color: $gray;
+      }
+
+      svg {
+        color: $gray-mid;
+
+        &:hover {
+          stroke: $gray;
+        }
+      }
+
+      .timeline-icon {
+        svg {
+          fill: #a6abb0 !important;
+
+          stroke: #a6abb0 !important;
+
+          &:hover {
+            fill: $gray !important;
+            stroke: $gray !important;
+          }
+        }
+      }
+
+      .bell-icon {
+        .indicator {
+          background: var(--primary-color);
+        }
+      }
+    }
+  }
+
+  .Timeline {
+    .day {
+      h5 {
+        color: $gray-mid;
+
+        &:hover {
+          color: $gray !important;
+        }
+      }
+    }
+  }
+
+  .button {
+    background: $blue-light;
+
+    color: $blue-mid;
+
+    &.is-purple {
+      background: $purple-light;
+      color: $purple-mid;
+
+      &:hover {
+        background: $purple-hover;
+      }
+    }
+
+    &.is-green {
+      background: $green-light;
+      color: $green-mid;
+
+      &:hover {
+        background: $green-hover;
+      }
+    }
+
+    &:hover {
+      background: $blue-hover;
+    }
+  }
+
+  .telegram {
+    background: $gray-light !important;
+    color: #08c !important;
+
+    &:hover {
+      background: $gray-hover !important;
+    }
+  }
+
+  .github {
+    background: #000 !important;
+    color: #fff !important;
+
+    &:hover {
+      background: $gray-dark !important;
+    }
+  }
+
+  .excel {
+    background: #33a66730;
+    color: #33a667;
+
+    &:hover {
+      background: #33a66750;
+    }
+  }
+
+  .map-switcher {
+    .highlight {
+      background: $cherry-light;
+
+      &.active {
+        background: $blue-light;
+      }
+
+      &.recovered {
+        background: $green-light;
+      }
+
+      &.deceased {
+        background: $gray-light;
+      }
+    }
+  }
+
+  .Level {
+    .is-confirmed {
+      h1,
+      h5 {
+        color: $cherry;
+      }
+
+      h4 {
+        color: $cherry-mid;
+      }
+    }
+
+    .is-active {
+      h1,
+      h5 {
+        color: $blue;
+      }
+
+      h4 {
+        color: $blue-mid;
+      }
+    }
+
+    .is-recovered {
+      h1,
+      h5 {
+        color: $green;
+      }
+
+      h4 {
+        color: $green-mid;
+      }
+    }
+
+    .is-deceased {
+      h1,
+      h5 {
+        color: $gray;
+      }
+
+      h4 {
+        color: $gray-mid;
+      }
+    }
+  }
+
+  abbr {
+    text-decoration: none;
+
+    &.is-cherry {
+      color: $cherry;
+    }
+
+    &.is-blue {
+      color: $blue;
+    }
+
+    &.is-green {
+      color: $green;
+    }
+
+    &.is-gray {
+      color: $gray;
+    }
+  }
+
+  .table-fineprint {
+    color: $gray-mid;
+
+    a {
+      border-bottom: 2px solid $gray-hover;
+
+      &:hover {
+        background: $gray-hover;
+      }
+    }
+  }
+
+  table {
+    thead {
+      background: $gray-light;
+      color: $gray;
+
+      th {
+        background: $gray-light-opaque;
+
+        &:hover {
+          background: #ecedee;
+        }
+      }
+    }
+
+    .heading-content {
+      abbr {
+        color: $gray;
+
+        &.is-confirmed {
+          color: $cherry;
+        }
+
+        &.is-active {
+          color: $blue;
+        }
+
+        &.is-recovered {
+          color: $green;
+        }
+
+        &.is-deaths {
+          color: $gray;
+        }
+      }
+    }
+
+    tbody {
+      color: $gray;
+
+      tr {
+        &:nth-child(odd) {
+          background: $gray-light;
+        }
+
+        &.is-highlighted {
+          background: $gray-hover !important;
+        }
+
+        &.is-odd {
+          background: $gray-light !important;
+        }
+
+        &.is-total {
+          background: $gray-hover;
+        }
+
+        &:hover {
+          background: $gray-hover !important;
+
+          .dropdown {
+            background: $gray-hover;
+          }
+        }
+      }
+
+      td {
+        .delta {
+          &.is-confirmed {
+            color: $cherry;
+          }
+
+          &.is-active {
+            color: $blue;
+          }
+
+          &.is-recovered {
+            color: $green;
+          }
+
+          &.is-deaths {
+            color: $gray;
+          }
+        }
+
+        &.is-Orange {
+          background: $yellow-light;
+          border-left: 5px solid $orange-mid;
+          color: $orange;
+
+          svg {
+            color: $orange !important;
+          }
+        }
+
+        &.is-Red {
+          background: $cherry-light;
+          border-left: 5px solid $cherry-mid;
+          color: $cherry;
+
+          svg {
+            color: $cherry !important;
+          }
+        }
+
+        &.is-Green {
+          background: $green-light;
+          border-left: 5px solid $green-mid;
+          color: $green;
+
+          svg {
+            color: $green !important;
+          }
+        }
+      }
+
+      .title-chevron {
+        .title-icon {
+          svg {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      .state-last-update {
+        color: $green !important;
+
+        .disclaimer {
+          background: $gray-light;
+
+          color: $gray;
+        }
+
+        .state-page-link {
+          background: $yellow-light !important;
+          color: $orange;
+
+          &:hover {
+            background: $yellow-hover !important;
+          }
+        }
+      }
+
+      .district-heading {
+        background: $gray-light;
+
+        &:hover {
+          background: $gray-light !important;
+        }
+
+        td {
+          background: $gray-light;
+          color: $gray-dark;
+        }
+      }
+    }
+
+    .affected-count {
+      color: $gray-mid;
+    }
+
+    .unknown {
+      svg {
+        color: $gray-mid;
+      }
+    }
+
+    .dropdown {
+      background: $gray-light;
+
+      &:hover {
+        background: $gray-hover;
+      }
+    }
+  }
+
+  .anchor {
+    svg {
+      color: $gray-mid;
+
+      &:hover {
+        color: $gray;
+      }
+    }
+
+    &.stickied {
+      svg {
+        color: $gray;
+      }
+    }
+  }
+
+  .MapExplorer {
+    .header {
+      color: $gray;
+    }
+
+    .svg-parent {
+      svg {
+        text {
+          fill: $gray;
+        }
+      }
+    }
+
+    .last-update {
+      h6 {
+        color: $green-mid;
+      }
+
+      h3 {
+        color: $green;
+      }
+    }
+
+    .map-button {
+      background: $yellow-light;
+
+      color: $orange;
+
+      &:hover {
+        background: $yellow-hover;
+      }
+
+      svg {
+        stroke: $orange-mid;
+      }
+    }
+
+    .meta {
+      h2 {
+        &.confirmed {
+          color: $brick;
+        }
+
+        &.active {
+          color: $blue;
+        }
+
+        &.recovered {
+          color: $green;
+        }
+
+        &.deceased {
+          color: $gray;
+        }
+
+        &.tested {
+          color: $purple;
+        }
+
+        &.Red {
+          color: #d73027;
+        }
+
+        &.Orange {
+          color: #fee08b;
+        }
+
+        &.Green {
+          color: #66bd63;
+        }
+      }
+
+      h4 {
+        color: $gray-mid;
+      }
+
+      .district {
+        &.confirmed {
+          color: $brick;
+        }
+
+        &.active {
+          color: $blue;
+        }
+
+        &.recovered {
+          color: $green;
+        }
+
+        &.deceased {
+          color: $gray;
+        }
+
+        &.tested {
+          color: $purple;
+        }
+      }
+    }
+
+    .map-stats {
+      h3 {
+        color: $gray-mid;
+      }
+
+      .stats {
+        &.confirmed {
+          background: $cherry-light;
+
+          h5,
+          h6 {
+            color: $cherry-mid;
+          }
+
+          h1 {
+            color: $cherry;
+          }
+        }
+
+        &.recovered {
+          background: $green-light;
+
+          h5,
+          h6 {
+            color: $green-mid;
+          }
+
+          h1 {
+            color: $green;
+          }
+        }
+
+        &.active {
+          background: $blue-light;
+
+          h5,
+          h6 {
+            color: $blue-mid;
+          }
+
+          h1 {
+            color: $blue;
+          }
+        }
+
+        &.deceased {
+          background: $gray-light;
+
+          h5,
+          h6 {
+            color: $gray-mid;
+          }
+
+          h1 {
+            color: $gray;
+          }
+        }
+
+        &.tested {
+          background: $purple-light;
+
+          h5,
+          h6 {
+            color: $purple-mid;
+          }
+
+          h1 {
+            color: $purple;
+          }
+
+          svg {
+            stroke: $purple-mid;
+
+            &:hover {
+              stroke: $purple;
+            }
+          }
+        }
+
+        &.is-yellow {
+          background: $yellow;
+
+          h5,
+          h6 {
+            color: $white;
+          }
+
+          h1 {
+            color: $white;
+          }
+        }
+      }
+    }
+
+    .disclaimer {
+      background: $gray-light;
+
+      color: $gray-dark;
+    }
+  }
+
+  .tabs {
+    .tab {
+      background: $gray-light;
+
+      color: $gray-mid;
+
+      &:hover {
+        background: $gray-hover;
+      }
+
+      &.focused {
+        background: $gray-opaque;
+        color: #000;
+      }
+    }
+  }
+
+  .tabs-map {
+    .tab {
+      background: $gray-light;
+
+      color: $gray-mid;
+
+      &:hover {
+        background: $gray-hover;
+      }
+
+      &.focused {
+        background: $gray-opaque;
+        color: #000;
+      }
+
+      &.disabled {
+        background: $gray-opaque;
+        color: $gray-mid;
+      }
+    }
+  }
+
+  .timeseries-header {
+    h1 {
+      color: $gray;
+    }
+
+    .scale-modes {
+      color: $gray;
+      font-weight: 500;
+
+      label {
+        color: $gray-mid;
+      }
+
+      &:hover {
+        label {
+          &.main {
+            color: $gray;
+          }
+        }
+      }
+    }
+  }
+
+  .disabled {
+    input {
+      &.switch {
+        background: $gray-light !important;
+        border: $gray-light 2px solid !important;
+      }
+    }
+  }
+
+  input {
+    &.switch {
+      background-color: #fff;
+      border: 2px solid #d9dadc;
+
+      &::after {
+        background-color: $gray-mid;
+      }
+
+      &:checked {
+        background-color: $gray-light;
+
+        &::after {
+          background-color: $light;
+        }
+      }
+    }
+  }
+
+  .trends-state-name {
+    select {
+      background-color: $gray-opaque;
+
+      background-image: linear-gradient(45deg, transparent 50%, #808080 50%),
+      linear-gradient(135deg, #808080 50%, transparent 50%);
+
+      border: 2px solid #e8e8e9;
+
+      color: #000;
+    }
+  }
+
+  .TimeSeries,
+  .Minigraph {
+    .stats {
+      h2,
+      h5,
+      h6 {
+        color: $cherry-mid;
+      }
+
+      h5 {
+        &.title {
+          color: $cherry;
+        }
+      }
+
+      h2,
+      h6 {
+        color: $cherry;
+      }
+
+      &.is-recovered {
+        h5 {
+          color: $green-mid;
+
+          &.title {
+            color: $green;
+          }
+        }
+
+        h2,
+        h6 {
+          color: $green;
+        }
+      }
+
+      &.is-deceased {
+        h5 {
+          color: $gray-mid;
+
+          &.title {
+            color: $gray;
+          }
+        }
+
+        h2,
+        h6 {
+          color: $gray;
+        }
+      }
+
+      &.is-active {
+        h5 {
+          color: $blue-mid;
+
+          &.title {
+            color: $blue;
+          }
+        }
+
+        h2,
+        h6 {
+          color: $blue;
+        }
+      }
+
+      &.is-tested {
+        h5 {
+          color: $purple-mid;
+
+          &.title {
+            color: $purple;
+          }
+        }
+
+        h2,
+        h6 {
+          color: $purple;
+        }
+      }
+    }
+  }
+
+  .svg-parent {
+    svg {
+      .domain,
+      .tick,
+      line {
+        stroke: $cherry;
+      }
+
+      text {
+        color: $cherry-mid;
+      }
+    }
+
+    &.is-recovered {
+      background: $green-light;
+
+      svg {
+        .domain,
+        .tick,
+        line {
+          stroke: $green;
+        }
+
+        text {
+          color: $green-mid;
+        }
+      }
+    }
+
+    &.is-deceased {
+      background: $gray-light;
+
+      svg {
+        .domain,
+        .tick,
+        line {
+          stroke: $gray;
+        }
+
+        text {
+          color: $gray-mid;
+        }
+      }
+    }
+
+    &.is-active {
+      background: $blue-light;
+
+      svg {
+        .domain,
+        .tick,
+        line {
+          stroke: $blue;
+        }
+
+        text {
+          color: $blue-mid;
+        }
+      }
+    }
+
+    &.is-tested {
+      background: $purple-light;
+
+      svg {
+        .domain,
+        .tick,
+        line {
+          stroke: $purple-mid !important;
+        }
+
+        circle {
+          stroke: $purple !important;
+        }
+
+        text {
+          color: $purple-mid;
+        }
+      }
+    }
+  }
+
+  .floating-buttons {
+    button {
+      background: $yellow-mid;
+      color: $orange;
+
+      &:hover {
+        background: #ffa500;
+
+        svg {
+          stroke: #ffa500;
+        }
+      }
+
+      svg {
+        stroke: $orange;
+      }
+    }
+  }
+
+  .link {
+    a {
+      background: $blue-light;
+      color: $blue;
+
+      &:hover {
+        background: $blue-hover;
+      }
+    }
+
+    h3 {
+      color: $gray-dark;
+    }
+  }
+
+  footer {
+    h5 {
+      color: $gray;
+    }
+  }
+
+  .Summary {
+    h5 {
+      color: $gray;
+    }
+
+    .summary-bottom {
+      & > * {
+        align-self: center;
+      }
+    }
+  }
+
+  .FAQ {
+    .question {
+      color: $gray-dark;
+    }
+
+    .answer {
+      color: $blue;
+    }
+
+    a {
+      background: $blue-light;
+      color: $blue;
+    }
+  }
+
+  .Demographics {
+    .select {
+      .react-date-picker {
+        background-color: var(--dark-background);
+        // border: 2px solid #e8e8e9 !important;
+
+        color: #ababab;
+      }
+
+      .react-calendar {
+        background: var(--dark-background);
+
+        button {
+          &:disabled {
+            background: var(--dark-background);
+            color: $gray-mid;
+          }
+        }
+      }
+
+      .react-date-picker__wrapper {
+        svg {
+          stroke: $gray-mid;
+
+          &:hover {
+            stroke: $gray;
+          }
+        }
+      }
+
+      .react-calendar__tile--active {
+        background: $pblue-light;
+        color: $pblue !important;
+
+        &:hover {
+          background: $pblue-hover;
+          color: $pblue !important;
+        }
+      }
+
+      .react-calendar__month-view__days__day--weekend,
+      .react-calendar__month-view__days__day {
+        color: $gray;
+      }
+
+      .react-calendar__navigation__label {
+        color: $gray !important;
+      }
+
+      .react-calendar__navigation__arrow {
+        color: $gray;
+      }
+
+      .react-date-picker__inputGroup > * {
+        color: $gray !important;
+      }
+
+      select {
+        background-color: var(--dark-background);
+
+        background-image: linear-gradient(45deg, transparent 50%, #808080 50%),
+        linear-gradient(135deg, #808080 50%, transparent 50%);
+
+        border: 2px solid #e8e8e9;
+
+        color: $gray;
+      }
+    }
+
+    .reminder {
+      background: $pblue-light;
+
+      color: var(--primary-color);
+
+      svg {
+        stroke: $pblue-mid;
+
+        &:hover {
+          stroke: var(--primary-color);
+        }
+      }
+    }
+
+    .header {
+      h1 {
+        color: var(--primary-color);
+      }
+
+      h3 {
+        color: $pblue-mid;
+      }
+
+      h6 {
+        &.disclaimer {
+          color: $gray-mid;
+        }
+      }
+
+      .deep-dive {
+        h5 {
+          color: $gray;
+        }
+      }
+    }
+
+    .patientdb-wrapper {
+      .no-result {
+        h5 {
+          color: $gray;
+
+          span {
+            color: $pblue !important;
+          }
+        }
+      }
+    }
+  }
+
+  .Patients {
+    h5 {
+      &.daylabel {
+        color: var(--primary-color);
+      }
+    }
+
+    .patient-card {
+      background: $gray-light;
+
+      &:hover {
+        background: $gray-hover;
+      }
+
+      h3 {
+        color: $gray-mid;
+      }
+
+      &.is-small {
+        background: $gray-hover;
+
+        &:hover {
+          background: $gray-mid;
+        }
+
+        &.is-femme {
+          background: $pink;
+        }
+
+        &.is-male {
+          background: var(--primary-color);
+        }
+
+        &.is-local {
+          background: $cherry;
+        }
+
+        &.is-imported {
+          background: $purple;
+        }
+      }
+
+      &.is-femme {
+        background: $pink-mid;
+
+        h3 {
+          color: $pink;
+        }
+
+        &:hover {
+          background: $pink-hover;
+        }
+      }
+
+      &.is-male {
+        background: $pblue-light;
+
+        h3 {
+          color: var(--primary-color);
+        }
+
+        &:hover {
+          background: $pblue-hover;
+        }
+      }
+
+      &.is-local {
+        background: $cherry-light;
+
+        h3 {
+          color: $cherry;
+        }
+
+        &:hover {
+          background: $cherry-hover;
+        }
+      }
+
+      &.is-imported {
+        background: $purple-light;
+
+        h3 {
+          color: $purple;
+        }
+
+        &:hover {
+          background: $purple-hover;
+        }
+      }
+
+      &.is-in {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-uk {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-us {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-th {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-ph {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-it {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-ca {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-id {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.is-mm {
+        &:hover {
+          background: $gray-light;
+
+          h3 {
+            color: $gray-mid;
+          }
+        }
+      }
+
+      &.age1-9 {
+        background: #006400;
+      }
+
+      &.age10-19 {
+        background: #00008b;
+      }
+
+      &.age20-29 {
+        background: #b03060;
+      }
+
+      &.age30-39 {
+        background: #ff4500;
+      }
+
+      &.age40-49 {
+        background: #ff0;
+      }
+
+      &.age50-59 {
+        background: #deb887;
+      }
+
+      &.age60-69 {
+        background: #0f0;
+      }
+
+      &.age70-79 {
+        background: #0ff;
+      }
+
+      &.age80-89 {
+        background: #f0f;
+      }
+
+      &.age90-99 {
+        background: #6495ed;
+      }
+    }
+  }
+
+  .DownloadBlock {
+    code {
+      color: $orange-mid;
+      font-family: 'archia';
+    }
+
+    a {
+      color: $orange-mid;
+    }
+
+    .button {
+      background: $orange-light;
+
+      &:hover {
+        background: $orange-hover;
+      }
+    }
+
+    svg {
+      stroke: $orange-mid;
+    }
+  }
+
+  .modal {
+    background: $pblue-mid;
+
+    .modal-content {
+      background: var(--dark-background);
+
+      svg {
+        stroke: $pblue-mid;
+
+        &:hover {
+          stroke: var(--primary-color);
+        }
+      }
+
+      h1 {
+        color: var(--primary-color);
+      }
+
+      h3 {
+        color: var(--primary-color);
+      }
+
+      h5 {
+        color: $pblue-mid;
+      }
+
+      .meta {
+        h3 {
+          &:hover {
+            background: $pblue-light;
+          }
+        }
+      }
+    }
+
+    .link {
+      a {
+        background: $pblue-light;
+        color: var(--primary-color);
+
+        &:hover {
+          background: $pblue-hover;
+        }
+      }
+    }
+  }
+
+  .patients-summary {
+    h1 {
+      color: $gray-dark;
+    }
+
+    h6 {
+      color: $gray;
+    }
+
+    .button {
+      background: $pblue-light;
+      color: var(--primary-color);
+
+      &:hover {
+        background: $pblue-hover;
+      }
+    }
+  }
+
+  .select {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      color: $gray-mid;
+      font-size: 0.75rem;
+      font-weight: 900;
+      margin-bottom: 0.25rem;
+      text-transform: uppercase;
+    }
+  }
+
+  .filters {
+    background: var(--dark-background) !important;
+    border-radius: 5px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1a1a1a;
+  }
+
+  .pills {
+    > button {
+      background-color: $yellow-light;
+      border: 2px $yellow-light solid;
+
+      color: $orange;
+
+      &:hover {
+        background: $yellow-hover;
+      }
+
+      &.selected {
+        background-color: $yellow-mid;
+        color: #000;
+      }
+    }
+  }
+
+  .legend {
+    background: var(--dark-background);
+
+    h5 {
+      color: $gray;
+
+      &.is-female {
+        color: $pink;
+      }
+
+      &.is-male {
+        color: var(--primary-color);
+      }
+
+      &.is-local {
+        color: $cherry;
+      }
+
+      &.is-imported {
+        color: $purple;
+      }
+    }
+
+    .circle {
+      background: $gray-mid;
+
+      &.is-female {
+        background: $pink;
+      }
+
+      &.is-male {
+        background: var(--primary-color);
+      }
+
+      &.is-local {
+        background: $cherry;
+      }
+
+      &.is-imported {
+        background: $purple;
+      }
+    }
+  }
+
+  .updates-header {
+    color: $gray-dark;
+
+    h2 {
+      color: var(--primary-color);
+    }
+  }
+
+  .updates {
+    .update {
+      background: $gray-light;
+
+      &:hover {
+        background: $gray-hover;
+      }
+
+      h5 {
+        color: $gray-mid;
+      }
+
+      h4 {
+        color: $gray;
+      }
+    }
+
+    .button {
+      background: $pblue-light;
+      color: var(--primary-color);
+
+      &:hover {
+        background: $pblue-hover;
+      }
+    }
+  }
+
+  .district-bar {
+    h2 {
+      &.confirmed {
+        color: $red;
+      }
+
+      &.active {
+        color: $blue;
+      }
+
+      &.recovered {
+        color: $green;
+      }
+
+      &.deceased {
+        color: $gray;
+      }
+    }
+
+    .district-bar-left {
+      .button {
+        background: $gray-light;
+        color: $gray;
+
+        &:hover {
+          background: $gray-hover;
+        }
+      }
+    }
+
+    .districts {
+      .district {
+        h2,
+        h5 {
+          color: $gray;
+        }
+
+        .delta {
+          h6 {
+            &.confirmed {
+              color: $red-mid;
+            }
+
+            &.active {
+              color: $blue-mid;
+            }
+
+            &.recovered {
+              color: $green-mid;
+            }
+
+            &.deceased {
+              color: $gray-mid;
+            }
+          }
+
+          svg {
+            &.confirmed {
+              color: $red-mid;
+            }
+
+            &.active {
+              color: $blue-mid;
+            }
+
+            &.recovered {
+              color: $green-mid;
+            }
+
+            &.deceased {
+              color: $gray-mid;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .LanguageSwitcher {
+    h3 {
+      color: var(--primary-color);
+    }
+
+    .close-button {
+      background: $pblue-light;
+
+      &:hover {
+        background: $pblue-hover;
+      }
+
+      svg {
+        color: $pblue-mid;
+
+        &:hover {
+          color: var(--primary-color);
+        }
+      }
+    }
+
+    .languages {
+      .language {
+        color: $pblue-mid;
+
+        &:hover {
+          color: var(--primary-color);
+        }
+
+        &.is-highlighted {
+          background: $pblue-light;
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+
+  .cards-container {
+    .cards {
+      .card {
+        .charts-header {
+          .chart-title {
+            color: #ababab;
+          }
+
+          .chart-note {
+            color: $gray;
+          }
+        }
+      }
+    }
+  }
+
+  .Tooltip {
+    .message {
+      background: #000;
+
+      p {
+        color: $white !important;
+      }
+    }
+  }
+
+  @media (min-width: 769px) {
+    .Navbar {
+      background: $gray-light-opaque;
+
+      .navbar-right {
+        background: $gray-light-opaque;
+
+        &:hover {
+          background: $gray-light-opaque !important;
+        }
+
+        & > span {
+          svg {
+            stroke: $gray;
+          }
+        }
+      }
+
+      .expand {
+        background: $gray-light-opaque;
+
+        & > * {
+          color: $gray;
+        }
+      }
+    }
+  }
+}
+
+.lights-out {
+  .Patients {
+    .patient-card {
+      background: $gray-hover;
+
+      &:hover {
+        background: $gray-light !important;
+      }
+
+      .is-small {
+        background: $gray-dark !important;
+
+        &:hover {
+          background: $gray !important;
+        }
+      }
+    }
+  }
+}

From 5f27ba840eca644f272b670c579168109050d74a Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 14:23:29 +0530
Subject: [PATCH 02/19] Feat: add primary color in light theme

---
 src/App.scss | 422 ++++++++-------------------------------------------
 1 file changed, 65 insertions(+), 357 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index b0ecc3ba23..ba976cad88 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -68,6 +68,16 @@ $dark-m-white: #e1e1e1;
 $dark-m-purple: #7ba1ea;
 $dark-m-blue: #3391ff;
 
+@mixin root-prop($prop: null, $value: null) {
+  @if ($prop and $value) {
+    #{$prop}: $value;
+  }
+}
+
+:root {
+  @include root-prop(--primary-color, $pblue);
+}
+
 html {
   overflow-x: hidden;
   width: 100vw;
@@ -172,7 +182,7 @@ h6 {
     text-transform: uppercase;
 
     span {
-      color: $pblue;
+      color: var(--primary-color);
     }
   }
 
@@ -224,7 +234,7 @@ h6 {
       span {
         &.focused {
           background: $pblue-light;
-          color: $pblue;
+          color: var(--primary-color);
           padding: 0.25rem;
         }
       }
@@ -297,7 +307,7 @@ h6 {
   }
 
   .alert-right {
-    margin-left: .25rem;
+    margin-left: 0.25rem;
     text-align: right;
     width: 5rem;
 
@@ -361,7 +371,7 @@ h6 {
       h5 {
         color: $gray;
         font-weight: 600;
-        margin-top: .5rem;
+        margin-top: 0.5rem;
       }
     }
 
@@ -721,15 +731,15 @@ h6 {
     background: $brick-light;
     border-radius: 5px;
     cursor: pointer;
-    padding: .25rem;
-    transform: translate3d(-.25rem, 0, 0);
+    padding: 0.25rem;
+    transform: translate3d(-0.25rem, 0, 0);
   }
 
   .dropdown {
     background: $white;
     border-radius: 5px;
     height: 25rem;
-    left: -.25rem;
+    left: -0.25rem;
     overflow-y: scroll;
     position: absolute;
     top: 2.75rem;
@@ -796,7 +806,7 @@ h6 {
     font-weight: 400;
     justify-content: center;
     margin: 0;
-    padding: .75rem;
+    padding: 0.75rem;
     text-transform: unset;
 
     * {
@@ -804,7 +814,7 @@ h6 {
     }
 
     svg {
-      margin-left: .5rem;
+      margin-left: 0.5rem;
       padding-right: 0;
     }
 
@@ -862,8 +872,8 @@ h6 {
     font-family: 'archia' !important;
     font-size: 14px;
     margin-bottom: 0.25rem;
-    margin-right: .25rem;
-    padding: .25rem .5rem;
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem;
     text-transform: capitalize;
 
     &.is-selected {
@@ -1046,8 +1056,8 @@ h6 {
     color: $pink;
     cursor: pointer;
     font-family: 'archia';
-    font-size: .75rem;
-    padding: .75rem;
+    font-size: 0.75rem;
+    padding: 0.75rem;
     text-align: center;
   }
 
@@ -1072,7 +1082,7 @@ h6 {
     }
 
     h3 {
-      color: $pblue;
+      color: var(--primary-color);
       margin-bottom: 0.75rem;
     }
   }
@@ -1235,7 +1245,7 @@ h6 {
       .result-description {
         align-self: flex-start;
         font-size: 0.75rem;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         margin-top: 1rem;
       }
 
@@ -1255,7 +1265,7 @@ h6 {
         flex-direction: row;
         font-size: 0.75rem;
         height: 1rem;
-        margin-right: .25rem;
+        margin-right: 0.25rem;
         margin-top: 0.25rem;
         padding: 0.25rem;
         text-align: right;
@@ -1396,7 +1406,7 @@ h6 {
       position: relative;
 
       .indicator {
-        background: $pblue;
+        background: var(--primary-color);
         border-radius: 50%;
         height: 7px;
         position: absolute;
@@ -3300,7 +3310,7 @@ footer {
     align-self: center !important;
     background: $pblue-light;
     border-radius: 5px;
-    color: $pblue;
+    color: var(--primary-color);
     font-family: 'archia';
     font-size: 0.9rem;
     font-weight: 600;
@@ -3324,7 +3334,7 @@ footer {
       width: 16px;
 
       &:hover {
-        stroke: $pblue;
+        stroke: var(--primary-color);
       }
     }
   }
@@ -3338,7 +3348,7 @@ footer {
     width: calc(100% - 10rem);
 
     h1 {
-      color: $pblue;
+      color: var(--primary-color);
     }
 
     h3 {
@@ -3414,7 +3424,7 @@ footer {
 
   h5 {
     &.daylabel {
-      color: $pblue;
+      color: var(--primary-color);
     }
   }
 
@@ -3464,7 +3474,7 @@ footer {
       }
 
       &.is-male {
-        background: $pblue;
+        background: var(--primary-color);
       }
 
       &.is-local {
@@ -3492,7 +3502,7 @@ footer {
       background: $pblue-light;
 
       h3 {
-        color: $pblue;
+        color: var(--primary-color);
       }
 
       &:hover {
@@ -3789,7 +3799,7 @@ footer {
       width: 20px;
 
       &:hover {
-        stroke: $pblue;
+        stroke: var(--primary-color);
       }
     }
 
@@ -3800,7 +3810,7 @@ footer {
     }
 
     h1 {
-      color: $pblue;
+      color: var(--primary-color);
     }
 
     h5,
@@ -3810,7 +3820,7 @@ footer {
     }
 
     h3 {
-      color: $pblue;
+      color: var(--primary-color);
       margin-bottom: 0.5rem;
     }
 
@@ -3865,7 +3875,7 @@ footer {
 
       a {
         background: $pblue-light;
-        color: $pblue;
+        color: var(--primary-color);
         transition: background 0.2s ease-in-out;
 
         &:hover {
@@ -3913,7 +3923,7 @@ footer {
 
   .button {
     background: $pblue-light;
-    color: $pblue;
+    color: var(--primary-color);
     display: flex;
     flex-direction: row;
     height: 3rem;
@@ -4075,7 +4085,7 @@ footer {
     }
 
     &.is-male {
-      color: $pblue;
+      color: var(--primary-color);
     }
 
     &.is-local {
@@ -4099,7 +4109,7 @@ footer {
     }
 
     &.is-male {
-      background: $pblue;
+      background: var(--primary-color);
     }
 
     &.is-local {
@@ -4163,7 +4173,7 @@ footer {
   width: 30rem;
 
   h2 {
-    color: $pblue;
+    color: var(--primary-color);
     font-weight: 900;
   }
 }
@@ -4205,7 +4215,7 @@ footer {
 
   .button {
     background: $pblue-light;
-    color: $pblue;
+    color: var(--primary-color);
     display: flex;
     flex-direction: row;
     height: 3rem;
@@ -4415,7 +4425,7 @@ footer {
 
   h3 {
     align-self: center;
-    color: $pblue;
+    color: var(--primary-color);
     font-weight: 600;
     margin-bottom: 2rem;
   }
@@ -4442,7 +4452,7 @@ footer {
       stroke-width: 2.5px;
 
       &:hover {
-        color: $pblue;
+        color: var(--primary-color);
       }
     }
   }
@@ -4466,12 +4476,12 @@ footer {
       user-select: none;
 
       &:hover {
-        color: $pblue;
+        color: var(--primary-color);
       }
 
       &.is-highlighted {
         background: $pblue-light;
-        color: $pblue;
+        color: var(--primary-color);
       }
     }
   }
@@ -4546,7 +4556,7 @@ footer {
     font-weight: 400;
     justify-content: flex-end;
     min-width: 15rem;
-    padding: .5rem;
+    padding: 0.5rem;
     pointer-events: none;
     right: 0;
     top: 0;
@@ -4575,7 +4585,7 @@ footer {
     z-index: 999;
 
     .navbar-left {
-      margin-bottom: .5rem;
+      margin-bottom: 0.5rem;
       margin-top: auto;
       order: 3;
       text-align: center;
@@ -4637,14 +4647,26 @@ footer {
     }
   }
 
-  .dark-mode {
+  .dim {
     .Navbar,
     .expand {
-      background: #1e1e30 !important;
+      background: #1b1f23 !important;
     }
 
     .navbar-right {
-      background: #1e1e30 !important;
+      background: #1b1f23 !important;
+    }
+  }
+
+  .lights-out {
+    .Navbar {
+      .expand {
+        background-color: #000 !important;
+      }
+    }
+
+    .navbar-right {
+      background-color: #000 !important;
     }
   }
 }
@@ -4671,7 +4693,7 @@ footer {
   }
 
   .Home,
-  .State, {
+  .State {
     display: flex;
     flex-direction: column;
     margin-left: 0;
@@ -4772,7 +4794,7 @@ footer {
   }
 
   .cards-container {
-    padding: .5rem;
+    padding: 0.5rem;
 
     .cards {
       .card {
@@ -4947,320 +4969,6 @@ footer {
   }
 }
 
-// Dark Mode
-
-.dark-mode {
-  background: #161625 !important;
-  color: #bdbdbd;
-
-  .switch-wrapper > div {
-    background: #161625 !important;
-  }
-
-  .expand {
-    background: #1e1e30 !important;
-  }
-
-  .Navbar,
-  .expand {
-    border-right: 0;
-
-    .navbar-middle {
-      color: #bdbdbd;
-    }
-
-    .navbar-right {
-      background: #1e1e30 !important;
-    }
-  }
-
-  table {
-    th {
-      background: #1e1e30 !important;
-    }
-
-    .is-odd {
-      background: #1e1e30 !important;
-    }
-
-    .state-page-link {
-      background: #161625 !important;
-    }
-
-    .heading-content {
-      color: #bdbdbd !important;
-    }
-
-    .spacer {
-      background: #161625 !important;
-    }
-  }
-
-  .Search {
-    input {
-      background: #1e1e30 !important;
-    }
-  }
-
-  .State {
-    .header-right {
-      h5 {
-        color: #9673b9bb !important;
-      }
-
-      h2 {
-        color: #9673b9 !important;
-      }
-
-      a {
-        background: #40008050 !important;
-      }
-    }
-
-    .breadcrumb {
-      ul {
-        background: #1e1e30 !important;
-
-        &::after {
-          border-bottom-color: #1e1e30 !important;
-        }
-
-        li {
-          a {
-            color: $gray !important;
-
-            &:hover {
-              color: $white !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .MapExplorer {
-    #chart,
-    #legend {
-      &.zone {
-        filter: none;
-      }
-
-      &:not(.zone) {
-        filter: invert(1) hue-rotate(180deg) saturate(1.5) url('#balance-color');
-      }
-    }
-
-    .maplegend {
-      background: #161625 !important;
-    }
-
-    .meta {
-      h1 {
-        &.tested {
-          color: #9673b9 !important;
-        }
-      }
-
-      h2 {
-        &.tested {
-          color: #9673b9 !important;
-        }
-      }
-    }
-
-    .stats {
-      &.tested {
-        background: #40008050 !important;
-
-        h1 {
-          color: #9673b9 !important;
-        }
-
-        h5,
-        h6 {
-          color: #9673b9bb !important;
-        }
-
-        svg {
-          stroke: #9673b9bb !important;
-
-          &:hover {
-            stroke: #9673b9 !important;
-          }
-        }
-      }
-    }
-
-    .disclaimer {
-      color: $gray-light-opaque;
-    }
-  }
-
-  .TimeSeries,
-  .Minigraph {
-    .stats {
-      &.is-tested {
-        h5 {
-          color: #9673b9bb !important;
-
-          &.title {
-            color: #9673b9 !important;
-          }
-        }
-
-        h2,
-        h6 {
-          color: #9673b9 !important;
-        }
-      }
-    }
-
-    .svg-parent {
-      &.is-tested {
-        background: #40008050 !important;
-
-        svg {
-          circle,
-          .domain,
-          .tick {
-            stroke: #9673b9 !important;
-          }
-
-          circle {
-            fill: #9673b9 !important;
-          }
-
-          .trend,
-          line {
-            stroke: #9673b999 !important;
-          }
-
-          text {
-            color: #9673b9bb !important;
-            stroke: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  .tpm {
-    background: #40008050 !important;
-
-    h3,
-    h5,
-    svg,
-    p {
-      color: #9673b9bb !important;
-    }
-
-    h1 {
-      color: #9673b9 !important;
-    }
-  }
-
-  .tab {
-    &.focused {
-      background: #1e1e30 !important;
-      color: #bdbdbd !important;
-    }
-  }
-
-  .pills {
-    button {
-      &.selected {
-        background: #{$yellow}50;
-      }
-    }
-  }
-
-  .trends-state-name,
-  .select {
-    select {
-      background: #1e1e30;
-      background-image: linear-gradient(45deg, transparent 50%, $gray 50%),
-      linear-gradient(135deg, $gray 50%, transparent 50%);
-      background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
-      background-repeat: no-repeat;
-      background-size: 5px 5px, 5px 5px;
-      border-color: #9494941a;
-    }
-  }
-
-  input {
-    &.switch {
-      background-color: #161625 !important;
-      border: 2px solid $gray-mid !important;
-
-      &:checked {
-        background-color: #6c757d99 !important;
-
-        &::after {
-          background-color: #cfcfcf !important;
-        }
-      }
-
-      &::after {
-        background-color: #cfcfcf !important;
-      }
-    }
-  }
-
-  .disabled {
-    input {
-      &.switch {
-        background: $dark !important;
-        border: $gray-light 2px solid !important;
-        opacity: 0.7;
-
-        &::after {
-          background: $gray !important;
-        }
-      }
-    }
-  }
-
-  .button {
-    &.github {
-      color: #bdbdbd !important;
-
-      svg {
-        stroke: #bdbdbd !important;
-      }
-    }
-  }
-
-  .FAQ {
-    .question {
-      color: $gray !important;
-    }
-  }
-
-  .Demographics {
-    .filters {
-      background: #1e1e30 !important;
-      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1e1e30;
-    }
-
-    .legend {
-      background: #1e1e30 !important;
-    }
-
-    .react-date-picker {
-      background: #1e1e30;
-      border-color: #9494941a !important;
-    }
-
-    .modal-content {
-      background: #1e1e30 !important;
-    }
-
-    .modal {
-      background: #1e1e30bb !important;
-    }
-  }
-}
-
 // Animation Support
 
 .fadeInUp {

From c0d1ac321c9f1dbd58eddacf0d9e450bd7018062 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 14:24:51 +0530
Subject: [PATCH 03/19] Chore: Add dark background and primary colors

---
 src/constants.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/constants.js b/src/constants.js
index eaff4e9e11..97b6ab6ff9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -439,3 +439,17 @@ export const INITIAL_DATA = {
     notes: '',
   },
 };
+
+export const DARK_BACKGROUND_COLORS = Object.freeze({
+  DIM: '#1B1F23',
+  LIGHTS_OUT: '#000',
+});
+
+export const PRIMARY_COLORS = Object.freeze([
+  'rgb(29, 161, 242)',
+  'rgb(255, 173, 31)',
+  '#E43f5A',
+  'rgb(121, 75, 196)',
+  'rgb(255, 127, 80)',
+  '#17b794',
+]);

From 5fa52a0a03259353a070b68d55482d7736915a5d Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 14:25:25 +0530
Subject: [PATCH 04/19] Fix: color of state borders on dark theme

---
 src/components/mapvisualizer.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/mapvisualizer.js b/src/components/mapvisualizer.js
index a98398ff85..2c852229d1 100644
--- a/src/components/mapvisualizer.js
+++ b/src/components/mapvisualizer.js
@@ -457,7 +457,13 @@ function MapVisualizer({
           ref={svgRef}
         >
           <g className="regions" />
-          <g className="state-borders" />
+          <g
+            className={`state-borders ${
+              currentMap.option === MAP_OPTIONS.HOTSPOTS
+                ? 'dark-hotspot-border'
+                : null
+            }`}
+          />
           {currentMap.view === MAP_VIEWS.DISTRICTS && (
             <g className="district-borders" />
           )}

From 42f17500508aa9f30f4ab8cf3033e69a2abb2df0 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:01:59 +0530
Subject: [PATCH 05/19] Feat: add react-modal for theme-chooser

---
 package-lock.json   |  29 +++++++++++
 package.json        |   1 +
 src/App.scss        | 114 +++++++++++++++++++++++++++++++++++---------
 src/dark-theme.scss |  32 ++++++++-----
 4 files changed, 141 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6bd3bebf6e..ab93fa2222 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6525,6 +6525,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -13495,6 +13500,22 @@
         }
       }
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -17363,6 +17384,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
diff --git a/package.json b/package.json
index 47849cc61a..9c951c65a5 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-helmet": "^6.0.0",
     "react-i18next": "^11.5.0",
     "react-is-visible": "^1.1.0",
+    "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
diff --git a/src/App.scss b/src/App.scss
index ba976cad88..2e2e337a1e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -76,6 +76,7 @@ $dark-m-blue: #3391ff;
 
 :root {
   @include root-prop(--primary-color, $pblue);
+  @include root-prop(--background-color, #fff);
 }
 
 html {
@@ -248,6 +249,7 @@ h6 {
       justify-content: center;
 
       h5 {
+        color: var(--primary-color);
         margin: 0;
       }
 
@@ -4646,29 +4648,6 @@ footer {
       }
     }
   }
-
-  .dim {
-    .Navbar,
-    .expand {
-      background: #1b1f23 !important;
-    }
-
-    .navbar-right {
-      background: #1b1f23 !important;
-    }
-  }
-
-  .lights-out {
-    .Navbar {
-      .expand {
-        background-color: #000 !important;
-      }
-    }
-
-    .navbar-right {
-      background-color: #000 !important;
-    }
-  }
 }
 
 @media (max-width: 769px) {
@@ -5030,3 +5009,92 @@ footer {
     transform: translateY(20px);
   }
 }
+
+.ReactModal__Overlay--after-open {
+  z-index: 99999;
+}
+
+.theme-chooser-modal {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .title {
+    font-family: 'archia';
+    text-align: center;
+  }
+
+  .done-btn {
+    background: var(--primary-color);
+    border-radius: 12px;
+    color: #000;
+    cursor: pointer;
+    font-family: 'archia';
+    margin-top: 16px;
+    padding: 12px;
+    text-align: center;
+  }
+
+  .color-chooser {
+    margin-top: 16px;
+
+    .title {
+      font-family: 'archia';
+    }
+
+    .colors {
+      background: rgb(245, 248, 250);
+      cursor: pointer;
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      height: 20%;
+      justify-content: center;
+      margin-top: 8px;
+
+      .circle {
+        align-items: center;
+        border-radius: 50%;
+        display: flex;
+        height: 50px;
+        justify-content: center;
+        margin: 8px;
+        width: 50px;
+
+        .checked-icon {
+          color: #000;
+        }
+
+        .selected {
+          fill: var(--primary-color);
+        }
+
+        &:hover {
+          transform: scale(1.1);
+          transition-duration: 0.2s;
+        }
+      }
+
+      .outlined {
+        border-radius: 4px;
+        justify-content: space-evenly;
+        width: 30%;
+
+        .bg-color-name {
+          color: #fff;
+          font-family: 'archia';
+        }
+
+        .light {
+          color: #000 !important;
+        }
+      }
+    }
+  }
+}
+
+.moto {
+  border-color: var(--primary-color);
+  width: 30%;
+}
diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index 89baee7d83..6ff56e9ba8 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -36,7 +36,7 @@ $cyan: #17a2b8;
 $white: #fff;
 $gray: #ababab;
 $gray-light: #ababab10;
-$gray-light-opaque: var(--dark-background);
+$gray-light-opaque: var(--background-color);
 $gray-hover: #ababab20;
 $gray-mid: #abababdd;
 $gray-dark: #343a40;
@@ -62,7 +62,7 @@ $brick-light: #e2302810;
 $default-primary: var(--primary-color);
 
 .dark-mode {
-  background-color: var(--dark-background);
+  background-color: var(--background-color);
   color: #fff;
 
   .dark-hotspot-border > path {
@@ -103,7 +103,7 @@ $default-primary: var(--primary-color);
     }
 
     .expand {
-      background: var(--dark-background);
+      background: var(--background-color);
       color: $gray;
 
       & > * {
@@ -418,9 +418,9 @@ $default-primary: var(--primary-color);
     }
 
     input {
-      background: var(--dark-background);
+      background: var(--background-color);
       border: 1px solid;
-      color: $gray;
+      color: #fff;
     }
 
     .search-placeholder {
@@ -1486,18 +1486,18 @@ $default-primary: var(--primary-color);
   .Demographics {
     .select {
       .react-date-picker {
-        background-color: var(--dark-background);
+        background-color: var(--background-color);
         // border: 2px solid #e8e8e9 !important;
 
         color: #ababab;
       }
 
       .react-calendar {
-        background: var(--dark-background);
+        background: var(--background-color);
 
         button {
           &:disabled {
-            background: var(--dark-background);
+            background: var(--background-color);
             color: $gray-mid;
           }
         }
@@ -1541,7 +1541,7 @@ $default-primary: var(--primary-color);
       }
 
       select {
-        background-color: var(--dark-background);
+        background-color: var(--background-color);
 
         background-image: linear-gradient(45deg, transparent 50%, #808080 50%),
         linear-gradient(135deg, #808080 50%, transparent 50%);
@@ -1850,7 +1850,7 @@ $default-primary: var(--primary-color);
     background: $pblue-mid;
 
     .modal-content {
-      background: var(--dark-background);
+      background: var(--background-color);
 
       svg {
         stroke: $pblue-mid;
@@ -1926,7 +1926,7 @@ $default-primary: var(--primary-color);
   }
 
   .filters {
-    background: var(--dark-background) !important;
+    background: var(--background-color) !important;
     border-radius: 5px;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1a1a1a;
   }
@@ -1950,7 +1950,7 @@ $default-primary: var(--primary-color);
   }
 
   .legend {
-    background: var(--dark-background);
+    background: var(--background-color);
 
     h5 {
       color: $gray;
@@ -2196,6 +2196,14 @@ $default-primary: var(--primary-color);
       }
     }
   }
+
+  .theme-chooser-modal {
+    .color-chooser {
+      .colors {
+        background: #aeaeae10;
+      }
+    }
+  }
 }
 
 .lights-out {

From 91595f3b535f6862c70fff5a1f383b64b7f643ba Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:03:52 +0530
Subject: [PATCH 06/19] Refactor: update background color properties

---
 src/constants.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 97b6ab6ff9..8c32956dbf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -440,9 +440,19 @@ export const INITIAL_DATA = {
   },
 };
 
-export const DARK_BACKGROUND_COLORS = Object.freeze({
-  DIM: '#1B1F23',
-  LIGHTS_OUT: '#000',
+export const BACKGROUND_COLORS = Object.freeze({
+  DEFAULT: {
+    name: 'Default',
+    color: '#FFF',
+  },
+  DIM: {
+    name: 'Dim',
+    color: '#1B1F23',
+  },
+  LIGHTS_OUT: {
+    name: 'Lights out',
+    color: '#000',
+  },
 });
 
 export const PRIMARY_COLORS = Object.freeze([

From 534076761612086b4c06f6691429da036200a4d0 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:04:31 +0530
Subject: [PATCH 07/19] Feat: Add theme chooser modal

---
 src/components/themechooser.js | 97 ++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 src/components/themechooser.js

diff --git a/src/components/themechooser.js b/src/components/themechooser.js
new file mode 100644
index 0000000000..613ed193fc
--- /dev/null
+++ b/src/components/themechooser.js
@@ -0,0 +1,97 @@
+import {PRIMARY_COLORS, BACKGROUND_COLORS} from '../constants';
+
+import {CheckCircleIcon} from '@primer/octicons-v2-react';
+import React from 'react';
+import Modal from 'react-modal';
+
+const customStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+    background: 'var(--background-color)',
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+};
+
+const ThemeChooser = ({
+  isOpen,
+  onClose,
+  pColor,
+  bgColor,
+  onPColorChange,
+  onBgColorChange,
+}) => {
+  console.log(isOpen);
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onClose} style={customStyles}>
+      <div className="theme-chooser-modal">
+        <h2 className="title">Customise you view</h2>
+        <div className="color-chooser">
+          <span className="title">Colors</span>
+          <div className="colors">
+            {PRIMARY_COLORS.map((color, idx) => (
+              <div
+                className="circle"
+                key={idx}
+                onClick={() => onPColorChange(color)}
+                style={{background: color}}
+              >
+                {pColor === color && (
+                  <CheckCircleIcon size={24} className="checked-icon" />
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="color-chooser">
+            <span className="title">Background</span>
+            <div className="colors">
+              {Object.keys(BACKGROUND_COLORS).map((colorKey, idx) => {
+                const {color, name} = BACKGROUND_COLORS[colorKey];
+                const isDefault = color === BACKGROUND_COLORS.DEFAULT.color;
+                const isSelected = color === bgColor;
+
+                console.warn(color, isDefault);
+                return (
+                  <div
+                    className="circle outlined"
+                    key={idx}
+                    onClick={() => onBgColorChange(color)}
+                    style={{
+                      background: color,
+                      border: isSelected
+                        ? '1px solid var(--primary-color)'
+                        : '',
+                    }}
+                  >
+                    {isSelected && (
+                      <CheckCircleIcon
+                        size={24}
+                        className="checked-icon selected"
+                      />
+                    )}
+                    <span
+                      className={`bg-color-name ${isDefault ? 'light' : ''}`}
+                    >
+                      {name}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <span className="done-btn" onClick={onClose}>
+          Done
+        </span>
+      </div>
+    </Modal>
+  );
+};
+
+export default ThemeChooser;

From 6e8798c95bc1caa222fb6eac67fcab0c4c804c08 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:05:03 +0530
Subject: [PATCH 08/19] Improv: Add line beneath the moto text

---
 src/components/footer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/footer.js b/src/components/footer.js
index d83b1838c1..9d7816bb4f 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -8,6 +8,7 @@ function Footer(props) {
   return (
     <footer className="fadeInUp" style={{animationDelay: '2s'}}>
       <h5>{t('We stand with everyone fighting on the frontlines')}</h5>
+      <hr className="moto" />
 
       <div className="link">
         <a

From f45f3cd41d0a755a6270798e91a0a463e1b030bc Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:05:56 +0530
Subject: [PATCH 09/19] Feat: update theme selector and remember chosen styles

---
 src/App.js               | 158 ++++++++++++++++++++++++++++-----------
 src/components/navbar.js |  22 +++---
 2 files changed, 129 insertions(+), 51 deletions(-)

diff --git a/src/App.js b/src/App.js
index f6e43c0286..bc565d876e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,12 @@
 import './App.scss';
+import './dark-theme.scss';
 import LanguageSwitcher from './components/languageswitcher';
 import Navbar from './components/navbar';
+import ThemeChooser from './components/themechooser';
+import {PRIMARY_COLORS, BACKGROUND_COLORS} from './constants';
 import ScrollToTop from './utils/ScrollToTop';
 
-import React, {lazy, useState, Suspense} from 'react';
+import React, {lazy, useState, Suspense, useEffect, useCallback} from 'react';
 import {Helmet} from 'react-helmet';
 import {
   BrowserRouter as Router,
@@ -11,7 +14,6 @@ import {
   Redirect,
   Switch,
 } from 'react-router-dom';
-import useDarkMode from 'use-dark-mode';
 
 const Home = lazy(() =>
   import('./components/home' /* webpackChunkName: "Home" */)
@@ -38,9 +40,68 @@ const schemaMarkup = {
   image: 'https://www.covid19india.org/thumbnail.png',
 };
 
+const colorKeys = Object.freeze({
+  P_COLOR: 'p-color',
+  BG_COLOR: 'bg-color',
+});
+
 function App() {
-  const darkMode = useDarkMode(false);
   const [showLanguageSwitcher, setShowLanguageSwitcher] = useState(false);
+  const [showThemeChooser, setShowThemeChooser] = useState(false);
+  const [pColor, setPColor] = useState('');
+  const [bgColor, setBgColor] = useState('');
+
+  useEffect(() => {
+    const cachedPColor =
+      localStorage?.getItem(colorKeys.P_COLOR) ?? PRIMARY_COLORS[0];
+    const cachedBgColor =
+      localStorage?.getItem(colorKeys.BG_COLOR) ??
+      BACKGROUND_COLORS.DEFAULT.color;
+
+    setPColor(cachedPColor);
+    setBgColor(cachedBgColor);
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--primary-color', pColor);
+  }, [pColor]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--background-color', bgColor);
+    let className;
+
+    if (bgColor === BACKGROUND_COLORS.LIGHTS_OUT.color) {
+      className = 'dark-mode dim';
+    } else if (bgColor === BACKGROUND_COLORS.DIM.color) {
+      className = 'dark-mode lights-out';
+    } else {
+      className = 'light-theme';
+    }
+
+    document.getElementsByTagName('body')[0].className = className;
+  }, [bgColor]);
+
+  const cacheColor = (key, color) => {
+    localStorage.setItem(key, color);
+  };
+
+  const handleOnPColorChange = useCallback(
+    (newColor) => {
+      setPColor(newColor);
+      cacheColor(colorKeys.P_COLOR, newColor);
+    },
+    [setPColor]
+  );
+
+  const handleOnBgColorChange = useCallback(
+    (newColor) => {
+      setBgColor(newColor);
+      cacheColor(colorKeys.BG_COLOR, newColor);
+    },
+    [setBgColor]
+  );
 
   const pages = [
     {
@@ -76,45 +137,58 @@ function App() {
   ];
 
   return (
-    <div className="App">
-      <Helmet>
-        <script type="application/ld+json">
-          {JSON.stringify(schemaMarkup)}
-        </script>
-      </Helmet>
-
-      <LanguageSwitcher {...{showLanguageSwitcher, setShowLanguageSwitcher}} />
-
-      <Suspense fallback={<div />}>
-        <Router>
-          <ScrollToTop />
-          <Navbar
-            pages={pages}
-            {...{darkMode}}
-            {...{showLanguageSwitcher, setShowLanguageSwitcher}}
-          />
-          <Route
-            render={({location}) => (
-              <React.Fragment>
-                <Switch location={location}>
-                  {pages.map((page, index) => {
-                    return (
-                      <Route
-                        exact
-                        path={page.pageLink}
-                        render={({match}) => <page.view />}
-                        key={index}
-                      />
-                    );
-                  })}
-                  <Redirect to="/" />
-                </Switch>
-              </React.Fragment>
-            )}
-          />
-        </Router>
-      </Suspense>
-    </div>
+    <>
+      {showThemeChooser && (
+        <ThemeChooser
+          isOpen={showThemeChooser}
+          onClose={() => setShowThemeChooser(false)}
+          onPColorChange={handleOnPColorChange}
+          onBgColorChange={handleOnBgColorChange}
+          {...{pColor, bgColor}}
+        />
+      )}
+      <div className="App">
+        <Helmet>
+          <script type="application/ld+json">
+            {JSON.stringify(schemaMarkup)}
+          </script>
+        </Helmet>
+
+        <LanguageSwitcher
+          {...{showLanguageSwitcher, setShowLanguageSwitcher}}
+        />
+
+        <Suspense fallback={<div />}>
+          <Router>
+            <ScrollToTop />
+            <Navbar
+              pages={pages}
+              setShowThemeChooser={setShowThemeChooser}
+              {...{showLanguageSwitcher, setShowLanguageSwitcher}}
+            />
+            <Route
+              render={({location}) => (
+                <React.Fragment>
+                  <Switch location={location}>
+                    {pages.map((page, index) => {
+                      return (
+                        <Route
+                          exact
+                          path={page.pageLink}
+                          render={({match}) => <page.view />}
+                          key={index}
+                        />
+                      );
+                    })}
+                    <Redirect to="/" />
+                  </Switch>
+                </React.Fragment>
+              )}
+            />
+          </Router>
+        </Suspense>
+      </div>
+    </>
   );
 }
 
diff --git a/src/components/navbar.js b/src/components/navbar.js
index 7343e4ba21..3ad262b805 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -10,7 +10,7 @@ import {useEffectOnce, useLockBodyScroll, useWindowSize} from 'react-use';
 
 function Navbar({
   pages,
-  darkMode,
+  setShowThemeChooser,
   showLanguageSwitcher,
   setShowLanguageSwitcher,
 }) {
@@ -87,20 +87,24 @@ function Navbar({
               </Link>
             </span>
             <span>
-              {window.innerWidth > 768 && <SunMoon {...{darkMode}} />}
+              {window.innerWidth > 768 && (
+                <SunMoon {...{setShowThemeChooser}} />
+              )}
             </span>
           </React.Fragment>
         )}
       </div>
 
       {expand && (
-        <Expand {...{expand, pages, setExpand, darkMode, windowSize}} />
+        <Expand
+          {...{expand, pages, setExpand, setShowThemeChooser, windowSize}}
+        />
       )}
     </animated.div>
   );
 }
 
-function Expand({expand, pages, setExpand, darkMode, windowSize}) {
+function Expand({expand, pages, setExpand, setShowThemeChooser, windowSize}) {
   const expandElement = useRef(null);
   const {t} = useTranslation();
 
@@ -142,7 +146,7 @@ function Expand({expand, pages, setExpand, darkMode, windowSize}) {
         return null;
       })}
 
-      {window.innerWidth < 768 && <SunMoon {...{darkMode}} />}
+      {window.innerWidth < 768 && <SunMoon {...{setShowThemeChooser}} />}
 
       <div className="expand-bottom fadeInUp" style={{animationDelay: '1s'}}>
         <h5>{t('A crowdsourced initiative.')}</h5>
@@ -162,20 +166,20 @@ const navLinkProps = (path, animationDelay) => ({
 
 const activeNavIcon = (path) => ({
   style: {
-    stroke: window.location.pathname === path ? '#4c75f2' : '',
+    stroke: window.location.pathname === path ? 'var(--primary-color)' : '',
   },
 });
 
-const SunMoon = ({darkMode}) => {
+const SunMoon = ({setShowThemeChooser}) => {
   return (
     <div
       className="SunMoon"
       onClick={() => {
-        darkMode.toggle();
+        setShowThemeChooser(true);
       }}
     >
       <div>
-        {darkMode.value ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />}
+        <Icon.Sun color={'#ffc107'} />
       </div>
     </div>
   );

From 2deb76f441467c706ef0be9fb93edfda7231eb16 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 19:19:25 +0530
Subject: [PATCH 10/19] Fix: dark on dark color issue

---
 src/dark-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index 6ff56e9ba8..3d7fe40faf 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -1470,7 +1470,7 @@ $default-primary: var(--primary-color);
 
   .FAQ {
     .question {
-      color: $gray-dark;
+      color: #eee;
     }
 
     .answer {

From 8ec7f6512d084580e025004a3e2551ec786d47d2 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Sun, 21 Jun 2020 20:09:02 +0530
Subject: [PATCH 11/19] Fix:  table cell styles

---
 src/dark-theme.scss | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index 3d7fe40faf..714520959d 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -746,14 +746,27 @@ $default-primary: var(--primary-color);
     }
   }
 
-  .table-fineprint {
-    color: $gray-mid;
+  .fineprint {
+    .text {
+      color: #eee;
+    }
+  }
 
-    a {
-      border-bottom: 2px solid $gray-hover;
+  .table {
+    .cell {
+      &:first-child {
+        background: var(--background-color) !important;
+      }
 
-      &:hover {
-        background: $gray-hover;
+      &.heading {
+        background: var(--background-color) !important;
+      }
+    }
+
+    .is-highlighted,
+    .is-total {
+      .cell {
+        background: var(--background-color) !important;
       }
     }
   }

From 0d9ef8fbcf424933634a6669d8988fab77e187e3 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Mon, 22 Jun 2020 17:37:52 +0530
Subject: [PATCH 12/19] Chore: Remove log

---
 src/components/themechooser.js | 115 ++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 61 deletions(-)

diff --git a/src/components/themechooser.js b/src/components/themechooser.js
index 613ed193fc..61bebde36f 100644
--- a/src/components/themechooser.js
+++ b/src/components/themechooser.js
@@ -26,72 +26,65 @@ const ThemeChooser = ({
   bgColor,
   onPColorChange,
   onBgColorChange,
-}) => {
-  console.log(isOpen);
-  return (
-    <Modal isOpen={isOpen} onRequestClose={onClose} style={customStyles}>
-      <div className="theme-chooser-modal">
-        <h2 className="title">Customise you view</h2>
+}) => (
+  <Modal isOpen={isOpen} onRequestClose={onClose} style={customStyles}>
+    <div className="theme-chooser-modal">
+      <h2 className="title">Customise you view</h2>
+      <div className="color-chooser">
+        <span className="title">Colors</span>
+        <div className="colors">
+          {PRIMARY_COLORS.map((color, idx) => (
+            <div
+              className="circle"
+              key={idx}
+              onClick={() => onPColorChange(color)}
+              style={{background: color}}
+            >
+              {pColor === color && (
+                <CheckCircleIcon size={24} className="checked-icon" />
+              )}
+            </div>
+          ))}
+        </div>
         <div className="color-chooser">
-          <span className="title">Colors</span>
+          <span className="title">Background</span>
           <div className="colors">
-            {PRIMARY_COLORS.map((color, idx) => (
-              <div
-                className="circle"
-                key={idx}
-                onClick={() => onPColorChange(color)}
-                style={{background: color}}
-              >
-                {pColor === color && (
-                  <CheckCircleIcon size={24} className="checked-icon" />
-                )}
-              </div>
-            ))}
-          </div>
-          <div className="color-chooser">
-            <span className="title">Background</span>
-            <div className="colors">
-              {Object.keys(BACKGROUND_COLORS).map((colorKey, idx) => {
-                const {color, name} = BACKGROUND_COLORS[colorKey];
-                const isDefault = color === BACKGROUND_COLORS.DEFAULT.color;
-                const isSelected = color === bgColor;
+            {Object.keys(BACKGROUND_COLORS).map((colorKey, idx) => {
+              const {color, name} = BACKGROUND_COLORS[colorKey];
+              const isDefault = color === BACKGROUND_COLORS.DEFAULT.color;
+              const isSelected = color === bgColor;
 
-                console.warn(color, isDefault);
-                return (
-                  <div
-                    className="circle outlined"
-                    key={idx}
-                    onClick={() => onBgColorChange(color)}
-                    style={{
-                      background: color,
-                      border: isSelected
-                        ? '1px solid var(--primary-color)'
-                        : '',
-                    }}
-                  >
-                    {isSelected && (
-                      <CheckCircleIcon
-                        size={24}
-                        className="checked-icon selected"
-                      />
-                    )}
-                    <span
-                      className={`bg-color-name ${isDefault ? 'light' : ''}`}
-                    >
-                      {name}
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
+              console.warn(color, isDefault);
+              return (
+                <div
+                  className="circle outlined"
+                  key={idx}
+                  onClick={() => onBgColorChange(color)}
+                  style={{
+                    background: color,
+                    border: isSelected ? '1px solid var(--primary-color)' : '',
+                  }}
+                >
+                  {isSelected && (
+                    <CheckCircleIcon
+                      size={24}
+                      className="checked-icon selected"
+                    />
+                  )}
+                  <span className={`bg-color-name ${isDefault ? 'light' : ''}`}>
+                    {name}
+                  </span>
+                </div>
+              );
+            })}
           </div>
         </div>
-        <span className="done-btn" onClick={onClose}>
-          Done
-        </span>
       </div>
-    </Modal>
-  );
-};
+      <span className="done-btn" onClick={onClose}>
+        Done
+      </span>
+    </div>
+  </Modal>
+);
 
 export default ThemeChooser;

From 6bb356d3b0c78df2bca652bfb11140b87a08f734 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Tue, 30 Jun 2020 17:10:32 +0530
Subject: [PATCH 13/19] fix: Fix a typo

---
 src/components/themechooser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/themechooser.js b/src/components/themechooser.js
index 61bebde36f..7752f1b061 100644
--- a/src/components/themechooser.js
+++ b/src/components/themechooser.js
@@ -29,7 +29,7 @@ const ThemeChooser = ({
 }) => (
   <Modal isOpen={isOpen} onRequestClose={onClose} style={customStyles}>
     <div className="theme-chooser-modal">
-      <h2 className="title">Customise you view</h2>
+      <h2 className="title">Customise your view</h2>
       <div className="color-chooser">
         <span className="title">Colors</span>
         <div className="colors">

From 212dd73efd9e2bc743ce6fa6b089b38a826cbc93 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Tue, 30 Jun 2020 17:11:45 +0530
Subject: [PATCH 14/19] chore: Cleanup not required libs

---
 package-lock.json | 22 ----------------------
 package.json      |  3 +--
 2 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 67f6da559a..e1a6aefd4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2154,11 +2154,6 @@
         }
       }
     },
-    "@use-it/event-listener": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.3.tgz",
-      "integrity": "sha512-UCHkLOVU+xj3/1R8jXz8GzDTowkzfIDPESOBlVC2ndgwUSBEqiFdwCoUEs2lcGhJOOiEdmWxF+T23C5+60eEew=="
-    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -17096,23 +17091,6 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
-    "use-dark-mode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.1.tgz",
-      "integrity": "sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==",
-      "requires": {
-        "@use-it/event-listener": "^0.1.2",
-        "use-persisted-state": "^0.3.0"
-      }
-    },
-    "use-persisted-state": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/use-persisted-state/-/use-persisted-state-0.3.0.tgz",
-      "integrity": "sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==",
-      "requires": {
-        "@use-it/event-listener": "^0.1.2"
-      }
-    },
     "user-home": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
diff --git a/package.json b/package.json
index 0100292126..585d0cff1a 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,7 @@
     "react-use-gesture": "^7.0.15",
     "source-map-explorer": "^2.4.2",
     "swr": "^0.2.2",
-    "topojson": "^3.0.2",
-    "use-dark-mode": "^2.3.1"
+    "topojson": "^3.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

From 9d76a7285c7b9f62d7eefefc44440e1ceb1e4744 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Fri, 3 Jul 2020 18:50:51 +0530
Subject: [PATCH 15/19] style: Update classes after last merge into master

---
 src/App.scss                    |  10 +-
 src/components/Footer.js        |  64 ++++
 src/components/MapVisualizer.js | 543 ++++++++++++++++++++++++++++++++
 src/components/Timeline.js      |   2 +-
 src/dark-theme.scss             | 468 +++++++++++++++++++--------
 5 files changed, 941 insertions(+), 146 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/MapVisualizer.js

diff --git a/src/App.scss b/src/App.scss
index f624112039..1ffe2be6a0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3168,7 +3168,12 @@ footer {
     color: $gray;
     font-weight: 600;
     margin: 0;
+  }
+
+  .moto {
+    border-color: var(--primary-color);
     margin-bottom: 3.5rem;
+    width: 10%;
   }
 
   svg {
@@ -4165,8 +4170,3 @@ footer {
     }
   }
 }
-
-.moto {
-  border-color: var(--primary-color);
-  width: 30%;
-}
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000000..c8a978b1e6
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import {Twitter, GitHub, Database, Mail} from 'react-feather';
+import {useTranslation} from 'react-i18next';
+
+function Footer(props) {
+  const {t} = useTranslation();
+
+  return (
+    <footer>
+      <div className="link">
+        <a
+          href="https://github.com/covid19india"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          covid19india
+        </a>
+      </div>
+
+      <h5>{t('We stand with everyone fighting on the frontlines')}</h5>
+      <hr className="moto" />
+
+      <div className="links">
+        <a
+          href="https://github.com/covid19india/covid19india-react"
+          className="github"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <GitHub />
+        </a>
+
+        <a
+          className="api"
+          href="https://api.covid19india.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Database />
+        </a>
+
+        <a
+          href="https://twitter.com/covid19indiaorg"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="twitter"
+        >
+          <Twitter />
+        </a>
+
+        <a
+          href="mailto:hello@covid19india.org"
+          className="mail"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Mail />
+        </a>
+      </div>
+    </footer>
+  );
+}
+
+export default React.memo(Footer);
diff --git a/src/components/MapVisualizer.js b/src/components/MapVisualizer.js
new file mode 100644
index 0000000000..072bc1ca60
--- /dev/null
+++ b/src/components/MapVisualizer.js
@@ -0,0 +1,543 @@
+import MapLegend from './MapLegend';
+
+import {
+  COLORS,
+  D3_TRANSITION_DURATION,
+  MAP_META,
+  MAP_TYPES,
+  MAP_VIEWS,
+  MAP_VIZS,
+  STATE_CODES,
+  STATE_NAMES,
+  UNKNOWN_DISTRICT_KEY,
+} from '../constants';
+import {
+  capitalizeAll,
+  formatNumber,
+  getStatistic,
+} from '../utils/commonFunctions';
+
+import classnames from 'classnames';
+import {max} from 'd3-array';
+import {json} from 'd3-fetch';
+import {geoIdentity, geoPath} from 'd3-geo';
+import {scaleSqrt, scaleSequential} from 'd3-scale';
+// eslint-disable-next-line
+// import worker from 'workerize-loader!../workers/mapVisualizer';
+import {
+  interpolateReds,
+  interpolateBlues,
+  interpolateGreens,
+  interpolateGreys,
+  interpolatePurples,
+} from 'd3-scale-chromatic';
+import {select, event} from 'd3-selection';
+import {transition} from 'd3-transition';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import * as Icon from 'react-feather';
+import {useTranslation} from 'react-i18next';
+import {useHistory} from 'react-router-dom';
+import useSWR from 'swr';
+import * as topojson from 'topojson';
+
+const [width, height] = [432, 488];
+
+const colorInterpolator = {
+  confirmed: (t) => interpolateReds(t * 0.85),
+  active: (t) => interpolateBlues(t * 0.85),
+  recovered: (t) => interpolateGreens(t * 0.85),
+  deceased: (t) => interpolateGreys(t * 0.85),
+  tested: (t) => interpolatePurples(t * 0.85),
+};
+
+const getTotalStatistic = (data, statistic) => {
+  return getStatistic(data, 'total', statistic);
+};
+
+function MapVisualizer({
+  mapCode,
+  mapView,
+  mapViz,
+  data,
+  changeMap,
+  regionHighlighted,
+  setRegionHighlighted,
+  statistic,
+  isCountryLoaded,
+}) {
+  const {t} = useTranslation();
+  const svgRef = useRef(null);
+
+  const mapMeta = MAP_META[mapCode];
+  const history = useHistory();
+
+  const {data: geoData} = useSWR(
+    mapMeta.geoDataFile,
+    async (file) => {
+      return await json(file);
+    },
+    {suspense: false, revalidateOnFocus: false}
+  );
+
+  const statisticMax = useMemo(() => {
+    const stateCodes = Object.keys(data).filter(
+      (stateCode) =>
+        stateCode !== 'TT' && Object.keys(MAP_META).includes(stateCode)
+    );
+
+    return mapView === MAP_VIEWS.STATES
+      ? max(stateCodes, (stateCode) =>
+          getTotalStatistic(data[stateCode], statistic)
+        )
+      : max(stateCodes, (stateCode) =>
+          data[stateCode]?.districts
+            ? max(Object.values(data[stateCode].districts), (districtData) =>
+                getTotalStatistic(districtData, statistic)
+              )
+            : 0
+        );
+  }, [data, mapView, statistic]);
+
+  const statisticTotal = useMemo(() => {
+    return getTotalStatistic(data[mapCode], statistic);
+  }, [data, mapCode, statistic]);
+
+  const mapScale = useMemo(() => {
+    if (mapViz === MAP_VIZS.BUBBLES) {
+      return scaleSqrt([0, Math.max(statisticMax, 1)], [0, 40])
+        .clamp(true)
+        .nice(3);
+    } else {
+      return scaleSequential(
+        [0, Math.max(1, statisticMax)],
+        colorInterpolator[statistic]
+      ).clamp(true);
+    }
+  }, [mapViz, statistic, statisticMax]);
+
+  const path = useMemo(() => {
+    if (!geoData) return null;
+    return geoPath(geoIdentity());
+  }, [geoData]);
+
+  const fillColor = useCallback(
+    (d) => {
+      const stateCode = STATE_CODES[d.properties.st_nm];
+      const district = d.properties.district;
+      const stateData = data[stateCode];
+      const districtData = stateData?.districts?.[district];
+      let n;
+      if (district) n = getTotalStatistic(districtData, statistic);
+      else n = getTotalStatistic(stateData, statistic);
+      const color = n === 0 ? '#ffffff00' : mapScale(n);
+      return color;
+    },
+    [data, mapScale, statistic]
+  );
+
+  const strokeColor = useCallback(() => {
+    return COLORS[statistic];
+  }, [statistic]);
+
+  const features = useMemo(() => {
+    if (!geoData) return null;
+    const featuresWrap =
+      mapView === MAP_VIEWS.STATES
+        ? topojson.feature(geoData, geoData.objects.states).features
+        : mapMeta.mapType === MAP_TYPES.COUNTRY && mapViz === MAP_VIZS.BUBBLES
+        ? [
+            ...topojson.feature(geoData, geoData.objects.states).features,
+            ...topojson.feature(geoData, geoData.objects.districts).features,
+          ]
+        : topojson.feature(geoData, geoData.objects.districts).features;
+
+    // Add id to each feature
+    return featuresWrap.map((feature) => {
+      const district = feature.properties.district;
+      const state = feature.properties.st_nm;
+      const obj = Object.assign({}, feature);
+      obj.id = `${mapCode}-${state}${district ? '-' + district : ''}`;
+      return obj;
+    });
+  }, [geoData, mapCode, mapView, mapViz, mapMeta]);
+
+  const populateTexts = useCallback(
+    (regionSelection) => {
+      regionSelection.select('title').text((d) => {
+        if (mapViz === MAP_VIZS.CHOROPLETH) {
+          const state = d.properties.st_nm;
+          const stateCode = STATE_CODES[state];
+          const district = d.properties.district;
+
+          const stateData = data[stateCode];
+          const districtData = stateData?.districts?.[district];
+          let n;
+          if (district) n = getTotalStatistic(districtData, statistic);
+          else n = getTotalStatistic(stateData, statistic);
+          return (
+            formatNumber(100 * (n / (statisticTotal || 0.001))) +
+            '% from ' +
+            capitalizeAll(district ? district : state)
+          );
+        }
+      });
+    },
+    [mapViz, data, statistic, statisticTotal]
+  );
+
+  // Reset on tapping outside map
+  useEffect(() => {
+    const svg = select(svgRef.current);
+
+    svg.attr('pointer-events', 'auto').on(
+      'click',
+      setRegionHighlighted.bind(this, {
+        stateCode: mapCode,
+        districtName: null,
+      })
+    );
+  }, [mapCode, setRegionHighlighted]);
+
+  // Choropleth
+  useEffect(() => {
+    if (!geoData) return;
+    const svg = select(svgRef.current);
+    const T = transition().duration(D3_TRANSITION_DURATION);
+
+    let onceTouchedRegion = null;
+
+    const regionSelection = svg
+      .select('.regions')
+      .selectAll('path')
+      .data(mapViz !== MAP_VIZS.BUBBLES ? features : [], (d) => d.id)
+      .join(
+        (enter) =>
+          enter
+            .append('path')
+            .attr('d', path)
+            .attr('stroke-width', 1.8)
+            .attr('stroke-opacity', 0)
+            .style('cursor', 'pointer')
+            .on('mouseenter', (d) => {
+              setRegionHighlighted({
+                stateCode: STATE_CODES[d.properties.st_nm],
+                districtName: d.properties.district,
+              });
+            })
+            .attr('fill', '#fff0')
+            .attr('stroke', '#fff0')
+            .call((enter) => {
+              enter.append('title');
+            }),
+        (update) => update,
+        (exit) =>
+          exit
+            .transition(T)
+            .attr('stroke', '#fff0')
+            .attr('fill', '#fff0')
+            .remove()
+      )
+      .attr('pointer-events', 'all')
+      .on('touchstart', (d) => {
+        if (onceTouchedRegion === d) onceTouchedRegion = null;
+        else onceTouchedRegion = d;
+      })
+      .on('click', (d) => {
+        event.stopPropagation();
+        const stateCode = STATE_CODES[d.properties.st_nm];
+        if (
+          onceTouchedRegion ||
+          mapMeta.mapType === MAP_TYPES.STATE ||
+          !data[stateCode]?.districts
+        )
+          return;
+        // Disable pointer events till the new map is rendered
+        svg.attr('pointer-events', 'none');
+        svg.select('.regions').selectAll('path').attr('pointer-events', 'none');
+        // Switch map
+        history.push(
+          `/state/${stateCode}${window.innerWidth < 769 ? '#MapExplorer' : ''}`
+        );
+      })
+      .call((sel) => {
+        sel.transition(T).attr('fill', fillColor).attr('stroke', strokeColor);
+      });
+
+    window.requestIdleCallback(() => {
+      populateTexts(regionSelection);
+    });
+  }, [
+    mapViz,
+    data,
+    features,
+    fillColor,
+    geoData,
+    history,
+    mapMeta.mapType,
+    path,
+    populateTexts,
+    setRegionHighlighted,
+    strokeColor,
+  ]);
+
+  // Bubble
+  useEffect(() => {
+    if (!features) return;
+
+    const svg = select(svgRef.current);
+    const T = transition().duration(D3_TRANSITION_DURATION);
+
+    let circlesData = [];
+
+    if (mapViz === MAP_VIZS.BUBBLES) {
+      circlesData = features
+        .map((feature) => {
+          const stateCode = STATE_CODES[feature.properties.st_nm];
+          const districtName = feature.properties.district;
+          const stateData = data[stateCode];
+
+          if (mapView === MAP_VIEWS.STATES) {
+            feature.value = getTotalStatistic(stateData, statistic);
+          } else if (mapView === MAP_VIEWS.DISTRICTS) {
+            const districtData = stateData?.districts?.[districtName];
+
+            if (districtName)
+              feature.value = getTotalStatistic(districtData, statistic);
+            else
+              feature.value = getTotalStatistic(
+                stateData?.districts?.[UNKNOWN_DISTRICT_KEY],
+                statistic
+              );
+          }
+
+          return feature;
+        })
+        .sort((featureA, featureB) => featureB.value - featureB.value);
+    }
+
+    let onceTouchedRegion = null;
+    svg
+      .select('.circles')
+      .selectAll('circle')
+      .data(circlesData, (feature) => feature.id)
+      .join(
+        (enter) =>
+          enter
+            .append('circle')
+            .attr(
+              'transform',
+              (feature) => `translate(${path.centroid(feature)})`
+            )
+            .attr('fill-opacity', 0.25)
+            .style('cursor', 'pointer')
+            .attr('pointer-events', 'all'),
+        (update) => update,
+        (exit) => exit.call((exit) => exit.transition(T).attr('r', 0).remove())
+      )
+      .on('mouseenter', (feature) => {
+        setRegionHighlighted({
+          stateCode: STATE_CODES[feature.properties.st_nm],
+          districtName:
+            mapView === MAP_VIEWS.STATES
+              ? null
+              : feature.properties.district || UNKNOWN_DISTRICT_KEY,
+        });
+      })
+      .on('touchstart', (feature) => {
+        if (onceTouchedRegion === feature) onceTouchedRegion = null;
+        else onceTouchedRegion = feature;
+      })
+      .on('click', (feature) => {
+        event.stopPropagation();
+        if (onceTouchedRegion || mapMeta.mapType === MAP_TYPES.STATE) return;
+        history.push(
+          `/state/${STATE_CODES[feature.properties.st_nm]}${
+            window.innerWidth < 769 ? '#MapExplorer' : ''
+          }`
+        );
+      })
+      .transition(T)
+      .attr('fill', COLORS[statistic] + '70')
+      .attr('stroke', COLORS[statistic] + '70')
+      .attr('r', (feature) => mapScale(feature.value));
+  }, [
+    mapMeta.mapType,
+    mapViz,
+    mapView,
+    data,
+    features,
+    history,
+    mapScale,
+    path,
+    setRegionHighlighted,
+    statistic,
+  ]);
+
+  const getBoundaryColor = useCallback(
+    (statistic) => {
+      return COLORS[statistic] + '40';
+
+      // eslint-disable-next-line
+      const faux = mapCode;
+    },
+    [mapCode]
+  );
+
+  // Boundaries
+  useEffect(() => {
+    if (!geoData) return;
+    const svg = select(svgRef.current);
+    const T = transition().duration(D3_TRANSITION_DURATION);
+
+    let meshStates = [];
+    let meshDistricts = [];
+
+    if (mapMeta.mapType === MAP_TYPES.COUNTRY) {
+      meshStates = [topojson.mesh(geoData, geoData.objects.states)];
+      meshStates[0].id = `${mapCode}-states`;
+    }
+
+    if (
+      mapMeta.mapType === MAP_TYPES.STATE ||
+      (mapView === MAP_VIEWS.DISTRICTS && mapViz === MAP_VIZS.CHOROPLETH)
+    ) {
+      // Add id to mesh
+      meshDistricts = [topojson.mesh(geoData, geoData.objects.districts)];
+      meshDistricts[0].id = `${mapCode}-districts`;
+    }
+
+    svg
+      .select('.state-borders')
+      .attr('fill', 'none')
+      .attr('stroke-width', 1.5)
+      .selectAll('path')
+      .data(meshStates, (d) => d.id)
+      .join(
+        (enter) => enter.append('path').attr('d', path).attr('stroke', '#fff0'),
+        (update) => update,
+        (exit) => exit.transition(T).attr('stroke', '#fff0').remove()
+      )
+      .transition(T)
+      .attr('stroke', getBoundaryColor.bind(this, statistic));
+
+    svg
+      .select('.district-borders')
+      .attr('fill', 'none')
+      .attr('stroke-width', 1.5)
+      .selectAll('path')
+      .data(meshDistricts, (d) => d.id)
+      .join(
+        (enter) =>
+          enter
+            .append('path')
+            .attr('d', path)
+            .attr('d', path)
+            .attr('stroke', '#fff0'),
+        (update) => update,
+        (exit) => exit.transition(T).attr('stroke', '#fff0').remove()
+      )
+      .transition(T)
+      .attr('stroke', getBoundaryColor.bind(this, statistic));
+  }, [
+    geoData,
+    mapMeta,
+    mapCode,
+    mapViz,
+    mapView,
+    statistic,
+    path,
+    getBoundaryColor,
+  ]);
+
+  // Highlight
+  useEffect(() => {
+    const stateName = STATE_NAMES[regionHighlighted.stateCode];
+    const district = regionHighlighted.districtName;
+
+    const svg = select(svgRef.current);
+
+    if (mapViz === MAP_VIZS.BUBBLES) {
+      svg
+        .select('.circles')
+        .selectAll('circle')
+        .attr('fill-opacity', (d) => {
+          const highlighted =
+            stateName === d.properties.st_nm &&
+            (!district ||
+              district === d.properties?.district ||
+              (district === UNKNOWN_DISTRICT_KEY && !d.properties.district));
+          return highlighted ? 1 : 0.25;
+        });
+    } else {
+      svg
+        .select('.regions')
+        .selectAll('path')
+        .each(function (d) {
+          const highlighted =
+            stateName === d.properties.st_nm &&
+            (mapView === MAP_VIEWS.STATES ||
+              district === d.properties?.district);
+          if (highlighted) this.parentNode.appendChild(this);
+          select(this).attr('stroke-opacity', highlighted ? 1 : 0);
+        });
+    }
+  }, [
+    geoData,
+    data,
+    mapView,
+    mapViz,
+    regionHighlighted.stateCode,
+    regionHighlighted.districtName,
+    statistic,
+  ]);
+
+  return (
+    <React.Fragment>
+      <div className="svg-parent">
+        <svg
+          id="chart"
+          viewBox={`0 0 ${width} ${height}`}
+          preserveAspectRatio="xMidYMid meet"
+          ref={svgRef}
+        >
+          <g className="regions" />
+          <g className="state-borders" />
+          <g className="district-borders" />
+          <g className="circles" />
+        </svg>
+        {mapMeta.mapType === MAP_TYPES.STATE &&
+          !!getTotalStatistic(
+            data[mapCode]?.districts?.[UNKNOWN_DISTRICT_KEY],
+            statistic
+          ) && (
+            <div className={classnames('disclaimer', `is-${statistic}`)}>
+              <Icon.AlertCircle />
+              <span>
+                {t('District-wise {{statistic}} numbers need reconciliation', {
+                  statistic: t(statistic),
+                })}
+              </span>
+            </div>
+          )}
+      </div>
+
+      {mapScale && <MapLegend {...{data, mapViz, mapScale, statistic}} />}
+
+      <svg style={{position: 'absolute', height: 0}}>
+        <defs>
+          <filter id="balance-color" colorInterpolationFilters="sRGB">
+            <feColorMatrix
+              type="matrix"
+              values="0.91372549  0           0            0  0.08627451
+                      0           0.91372549  0            0  0.08627451
+                      0           0           0.854901961  0  0.145098039
+                      0           0           0            1  0"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </React.Fragment>
+  );
+}
+
+export default MapVisualizer;
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index b001c209d1..98937cf613 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -14,7 +14,7 @@ const Timeline = ({setIsTimelineMode, setDate, dates}) => {
     dates.length,
     (i) => ({
       x: (index - i) * (480 / 3) + 480 / 2 - 35,
-      color: i === 0 ? '#6c757d' : '#6c757d99',
+      color: i === 0 ? '#ababab' : '#abababdd',
       opacity: i < 2 ? 1 : 0,
     }),
     config.stiff
diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index 714520959d..bc06e7565a 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -2,7 +2,7 @@ $blue: #007bff;
 $blue-light: #007bff10;
 $blue-hover: #007bff30;
 $blue-light-opaque: #eff7ff;
-$blue-mid: #007bff99;
+$blue-mid: #007bffdd;
 $pblue: #4c75f2;
 $pblue-light: #4c75f230;
 $pblue-hover: #4c75f250;
@@ -25,7 +25,7 @@ $orange-light-opaque: #ffefe2;
 $yellow: #ffc107;
 $yellow-light: #ffc10720;
 $yellow-hover: #ffc10730;
-$yellow-mid: #ffc10799;
+$yellow-mid: #ffc107dd;
 $yellow-light-opaque: #fff7e0;
 $green: #28a745;
 $green-light: #28a74520;
@@ -55,9 +55,11 @@ $pink-mid: #fb558199;
 $brown: #b6854d;
 $brown-light: #b6854d10;
 $brown-hover: #b6854d30;
-$brown-mid: #b6854d99;
+$brown-mid: #b6854ddd;
 $brick: #e23028;
 $brick-light: #e2302810;
+$gray-hover-darker-opaque: #1a1a1a20;
+$gray-hover-opaque: #edeeef20;
 
 $default-primary: var(--primary-color);
 
@@ -160,31 +162,31 @@ $default-primary: var(--primary-color);
     }
   }
 
-  .State {
-    .header {
-      .header-left {
-        h1 {
-          color: $brick;
-        }
+  .StateHeader {
+    .header-left {
+      h1 {
+        color: $brick;
+        max-width: 20rem;
+      }
 
-        h5 {
-          color: $gray;
-        }
+      h5 {
+        color: $gray;
       }
+    }
 
-      .header-right {
-        color: $purple-mid;
+    .header-right {
+      color: $purple-mid;
 
-        h2 {
-          color: $purple;
-        }
+      h2 {
+        color: $purple;
+        font-weight: 900;
+      }
 
-        a {
-          background: $purple-light;
+      a {
+        background: $purple-light;
 
-          &:hover {
-            background: $purple-hover;
-          }
+        &:hover {
+          background: $purple-hover;
         }
       }
     }
@@ -214,122 +216,131 @@ $default-primary: var(--primary-color);
       }
     }
 
-    &.confirmed {
-      background: $cherry-light;
-
-      h3,
-      h5,
-      svg,
-      p {
-        color: $cherry-mid;
+    .meta-item {
+      &.population {
+        h1,
+        h3 {
+          color: $gray;
+        }
       }
 
-      h1 {
-        color: $cherry;
-      }
-    }
+      &.confirmed {
+        background: $cherry-light;
 
-    &.active {
-      background: $blue-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $cherry-mid;
+        }
 
-      h3,
-      h5,
-      svg,
-      p {
-        color: $blue-mid;
+        h1 {
+          color: $cherry;
+        }
       }
 
-      h1 {
-        color: $blue;
-      }
-    }
+      &.active {
+        background: $blue-light;
 
-    &.recovery {
-      background: $green-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $blue-mid;
+        }
 
-      h3,
-      h5,
-      svg,
-      p {
-        color: $green-mid;
+        h1 {
+          color: $blue;
+        }
       }
 
-      h1 {
-        color: $green;
-      }
-    }
+      &.recovery {
+        background: $green-light;
 
-    &.mortality {
-      background: $gray-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $green-mid;
+        }
 
-      h3,
-      h5,
-      svg,
-      p {
-        color: $gray-mid;
+        h1 {
+          color: $green;
+        }
       }
 
-      h1 {
-        color: $gray;
-      }
-    }
+      &.mortality {
+        background: $gray-light;
 
-    &.cpm {
-      background: $yellow-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $gray-mid;
+        }
 
-      h3,
-      h5,
-      svg {
-        color: $orange-mid;
+        h1 {
+          color: $gray;
+        }
       }
 
-      h1 {
-        color: $orange;
-      }
-    }
+      &.cpm {
+        background: $yellow-light;
 
-    &.tpm {
-      background: $purple-light;
+        h3,
+        h5,
+        svg {
+          color: $orange-mid;
+        }
 
-      h3,
-      h5,
-      svg,
-      p {
-        color: $purple-mid;
+        h1 {
+          color: $orange;
+        }
       }
 
-      h1 {
-        color: $purple;
-      }
-    }
+      &.tpm {
+        background: $purple-light;
 
-    &.ptr {
-      background: $pink-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $purple-mid;
+        }
 
-      h3,
-      h5,
-      svg,
-      p {
-        color: $pink-mid;
+        h1 {
+          color: $purple;
+        }
       }
 
-      h1 {
-        color: $pink;
-      }
-    }
+      &.ptr {
+        background: $pink-light;
 
-    &.gr {
-      background: $brown-light;
+        h3,
+        h5,
+        svg,
+        p {
+          color: $pink-mid;
+        }
 
-      h3,
-      h5,
-      p,
-      svg {
-        color: $brown-mid;
+        h1 {
+          color: $pink;
+        }
       }
 
-      h1 {
-        color: $brown;
+      &.gr {
+        background: $brown-light;
+
+        h3,
+        h5,
+        p,
+        svg {
+          color: $brown-mid;
+        }
+
+        h1 {
+          color: $brown;
+        }
       }
     }
   }
@@ -662,20 +673,24 @@ $default-primary: var(--primary-color);
     }
   }
 
-  .map-switcher {
-    .highlight {
-      background: $cherry-light;
+  .MapSwitcher {
+    .clickable {
+      &:hover {
+        &.is-confirmed {
+          background: $cherry-light;
+        }
 
-      &.active {
-        background: $blue-light;
-      }
+        &.is-active {
+          background: $blue-light;
+        }
 
-      &.recovered {
-        background: $green-light;
-      }
+        &.is-recovered {
+          background: $green-light;
+        }
 
-      &.deceased {
-        background: $gray-light;
+        &.is-deceased {
+          background: #6c757d30;
+        }
       }
     }
   }
@@ -753,20 +768,125 @@ $default-primary: var(--primary-color);
   }
 
   .table {
-    .cell {
-      &:first-child {
-        background: var(--background-color) !important;
-      }
+    .table-wrapper {
+      .row {
+        &:nth-child(odd) {
+          .cell {
+            background: $gray-light;
+          }
+        }
 
-      &.heading {
-        background: var(--background-color) !important;
-      }
-    }
+        &.is-highlighted {
+          .cell {
+            background: $gray-hover-opaque !important;
+          }
+        }
 
-    .is-highlighted,
-    .is-total {
-      .cell {
-        background: var(--background-color) !important;
+        &.heading {
+          .cell {
+            cursor: pointer;
+            user-select: none;
+
+            &:hover {
+              background: $gray-hover-opaque !important;
+            }
+          }
+        }
+
+        &.is-total {
+          position: sticky;
+          top: 0;
+
+          .cell {
+            background: $gray-hover-opaque !important;
+          }
+        }
+
+        .cell {
+          color: $gray;
+
+          &:first-child {
+            background: $gray-hover-darker-opaque;
+          }
+
+          svg {
+            color: $gray-mid;
+          }
+
+          .sort-icon {
+            &.is-confirmed {
+              svg {
+                color: $cherry;
+              }
+            }
+
+            &.is-active {
+              svg {
+                color: $blue;
+              }
+            }
+
+            &.is-recovered {
+              svg {
+                color: $green;
+              }
+            }
+
+            &.is-deceased {
+              svg {
+                color: $gray;
+              }
+            }
+
+            &.is-tested {
+              svg {
+                color: $purple;
+              }
+            }
+          }
+
+          &.statistic {
+            .is-confirmed {
+              color: $cherry;
+            }
+
+            .is-recovered {
+              color: $green;
+            }
+
+            .is-deceased {
+              color: $gray;
+            }
+
+            .is-tested {
+              color: $purple;
+            }
+          }
+
+          &:not(:last-child) {
+            margin-right: 0.25rem;
+          }
+
+          &.heading {
+            background: $gray-light-opaque;
+            font-size: 13px;
+            font-weight: 900;
+            padding: 0.75rem 0.5rem;
+
+            &:hover {
+              background: $gray-hover-opaque !important;
+            }
+          }
+
+          .state-name,
+          .district-name {
+            font-size: 14px;
+            font-weight: 600;
+            margin-right: 0.25rem;
+            width: 6rem;
+            word-wrap: break-word;
+          }
+        }
       }
     }
   }
@@ -1164,12 +1284,12 @@ $default-primary: var(--primary-color);
 
   .tabs {
     .tab {
-      background: $gray-light;
+      background: $gray-hover;
 
       color: $gray-mid;
 
       &:hover {
-        background: $gray-hover;
+        background: $gray-dark;
       }
 
       &.focused {
@@ -1227,8 +1347,12 @@ $default-primary: var(--primary-color);
   .disabled {
     input {
       &.switch {
-        background: $gray-light !important;
-        border: $gray-light 2px solid !important;
+        background: $gray-dark !important;
+        border: $gray 2px solid !important;
+      }
+
+      &::after {
+        background: $gray !important;
       }
     }
   }
@@ -1236,14 +1360,14 @@ $default-primary: var(--primary-color);
   input {
     &.switch {
       background-color: #fff;
-      border: 2px solid #d9dadc;
+      border: 2px solid $gray-light;
 
       &::after {
-        background-color: $gray-mid;
+        background-color: var(--background-color);
       }
 
       &:checked {
-        background-color: $gray-light;
+        background-color: var(--primary-color);
 
         &::after {
           background-color: $light;
@@ -1265,7 +1389,7 @@ $default-primary: var(--primary-color);
     }
   }
 
-  .TimeSeries,
+  .Timeseries,
   .Minigraph {
     .stats {
       h2,
@@ -1467,6 +1591,38 @@ $default-primary: var(--primary-color);
     h5 {
       color: $gray;
     }
+
+    .github {
+      color: #00000050;
+
+      &:hover {
+        color: #000;
+      }
+    }
+
+    .twitter {
+      color: $blue-mid;
+
+      &:hover {
+        color: $blue;
+      }
+    }
+
+    .api {
+      color: $yellow-mid;
+
+      &:hover {
+        color: $yellow;
+      }
+    }
+
+    .mail {
+      color: $brown-mid;
+
+      &:hover {
+        color: $brown;
+      }
+    }
   }
 
   .Summary {
@@ -1481,7 +1637,7 @@ $default-primary: var(--primary-color);
     }
   }
 
-  .FAQ {
+  .faq {
     .question {
       color: #eee;
     }
@@ -2182,6 +2338,38 @@ $default-primary: var(--primary-color);
     }
   }
 
+  .table-top {
+    .option-toggle,
+    .info-toggle,
+    .million-toggle {
+      background: $gray-light;
+      color: $gray-mid;
+
+      &.is-highlighted {
+        background: $green-light;
+        color: $green;
+      }
+    }
+
+    .info-toggle {
+      &.is-highlighted {
+        background: $yellow-light;
+        color: $yellow;
+      }
+    }
+
+    .million-toggle {
+      &.is-highlighted {
+        background: $pink-light;
+        color: $pink;
+      }
+    }
+
+    .scroll-right-helper {
+      color: $gray-mid;
+    }
+  }
+
   @media (min-width: 769px) {
     .Navbar {
       background: $gray-light-opaque;

From d5bfc6d16cd8cd4b1cc29a39fdfc0d04c03f2834 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Fri, 3 Jul 2020 18:53:08 +0530
Subject: [PATCH 16/19] chore: Remove commented out styles

---
 src/dark-theme.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index bc06e7565a..84fa5e1800 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -109,8 +109,6 @@ $default-primary: var(--primary-color);
       color: $gray;
 
       & > * {
-        // border-bottom: 1px solid $gray-light;
-        // border-top: 1px solid $gray-light;
         border: 0;
 
         &:hover {

From 2a42f3b9ac07efd8918fe51a36240b86e3d7e208 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Mon, 6 Jul 2020 18:00:15 +0530
Subject: [PATCH 17/19] Fix: colors in table on:hover

---
 src/dark-theme.scss | 34 ++++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index ece197d70e..f7989185a9 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -800,13 +800,20 @@ $default-primary: var(--primary-color);
       .row {
         &:nth-child(odd) {
           .cell {
-            background: $gray-light;
+            background: var(--background-color);
           }
         }
 
         &.is-highlighted {
           .cell {
-            background: $gray-hover-opaque !important;
+            background: $gray-opaque !important;
+            color: var(--background-color);
+
+            .delta {
+              &.is-deceased {
+                color: #6c757d !important;
+              }
+            }
           }
         }
 
@@ -816,7 +823,20 @@ $default-primary: var(--primary-color);
             user-select: none;
 
             &:hover {
-              background: $gray-hover-opaque !important;
+              background: $gray-opaque !important;
+              color: var(--background-color);
+
+              .sort-icon {
+                svg {
+                  fill: var(--background-color);
+                }
+              }
+            }
+
+            .sort-icon {
+              svg {
+                fill: var(--primary-color);
+              }
             }
           }
         }
@@ -826,7 +846,8 @@ $default-primary: var(--primary-color);
           top: 0;
 
           .cell {
-            background: $gray-hover-opaque !important;
+            background: $gray-opaque !important;
+            color: var(--background-color);
           }
         }
 
@@ -834,7 +855,7 @@ $default-primary: var(--primary-color);
           color: $gray;
 
           &:first-child {
-            background: $gray-hover-darker-opaque;
+            background: var(--background-color);
           }
 
           svg {
@@ -902,7 +923,8 @@ $default-primary: var(--primary-color);
             padding: 0.75rem 0.5rem;
 
             &:hover {
-              background: $gray-hover-opaque !important;
+              background: $gray-opaque !important;
+              color: var(--background-color);
             }
           }
 

From 98351c2b154d0cdbd0538bdf55ba94b55844bad4 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Wed, 15 Jul 2020 17:13:04 +0530
Subject: [PATCH 18/19] Fix: Github icon hover color

---
 src/dark-theme.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/dark-theme.scss b/src/dark-theme.scss
index f7989185a9..fbe51bfaa3 100644
--- a/src/dark-theme.scss
+++ b/src/dark-theme.scss
@@ -684,11 +684,14 @@ $default-primary: var(--primary-color);
   }
 
   .github {
-    background: #000 !important;
     color: #fff !important;
 
     &:hover {
-      background: $gray-dark !important;
+      svg {
+        path {
+          stroke: $gray !important;
+        }
+      }
     }
   }
 

From 62526c3d979c825d292e1bf59b84c577d4f92840 Mon Sep 17 00:00:00 2001
From: Balraj Singh <37571874+balrajsingh9@users.noreply.github.com>
Date: Wed, 15 Jul 2020 17:15:58 +0530
Subject: [PATCH 19/19] fix: Fix accessibility issue and remove debug statement

---
 src/App.js                     | 2 +-
 src/components/themechooser.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index ffda12c58b..6efb26cc58 100644
--- a/src/App.js
+++ b/src/App.js
@@ -117,7 +117,7 @@ const App = () => {
           {...{pColor, bgColor}}
         />
       )}
-      <div className="App">
+      <div className="App" id="root-app">
         <Suspense fallback={<div />}>
           <LanguageSwitcher
             {...{showLanguageSwitcher, setShowLanguageSwitcher}}
diff --git a/src/components/themechooser.js b/src/components/themechooser.js
index 7752f1b061..991f441a85 100644
--- a/src/components/themechooser.js
+++ b/src/components/themechooser.js
@@ -19,6 +19,8 @@ const customStyles = {
   },
 };
 
+Modal.setAppElement(document.getElementById('root-app'));
+
 const ThemeChooser = ({
   isOpen,
   onClose,
@@ -54,7 +56,6 @@ const ThemeChooser = ({
               const isDefault = color === BACKGROUND_COLORS.DEFAULT.color;
               const isSelected = color === bgColor;
 
-              console.warn(color, isDefault);
               return (
                 <div
                   className="circle outlined"