Make panels reponsive

Author: PrinceSumberia

src/App.css

@@ -30,4 +30,8 @@
      justify-content: space-around;
      align-items: center;
    }
+
+   .mainContent {
+     padding: 0;
+   }
  }

src/styles/CovidAppStyles.js

@@ -17,16 +17,25 @@ export default {
       color: colors.purple,
       marginRight: "1rem",
     },
+
+    [sizes.down("md")]: {
+      fontSize: "2.8rem",
+      padding: "3rem",
+    },
   },
 
   content: {
     backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
     borderRadius: "2rem",
     marginTop: "3rem",
     display: "flex",
-    padding: "4rem",
     flexDirection: "column",
     justifyContent: "center",
+
+    [sizes.down("md")]: {
+      marginTop: "2.5rem",
+      padding: "1.5rem",
+    },
   },
 
   contentArea: {
@@ -47,6 +56,11 @@ export default {
   tableContainer: {
     padding: "2rem",
     margin: "5rem 0",
+
+    [sizes.down("md")]: {
+      margin: "3.5rem 0",
+      padding: "1.5rem",
+    },
   },
 
   tableHeading: {
@@ -58,6 +72,10 @@ export default {
       fontSize: "2.5rem",
       marginTop: "1.5rem",
     },
+
+    [sizes.down("md")]: {
+      marginTop: ".5rem",
+    },
   },
 
   tinyChartArea: {
@@ -91,6 +109,10 @@ export default {
     animationDuration: "1s",
     animationTimingFunction: "linear",
     animationIterationCount: "infinite",
+
+    [sizes.down("md")]: {
+      fontSize: "3rem",
+    },
   },
 
   loadingIcon: {
@@ -110,6 +132,9 @@ export default {
   },
 
   button: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     border: "none",
     backgroundColor: colors.purple,
     padding: "1.5rem 3rem",
@@ -122,6 +147,13 @@ export default {
     boxShadow: "0 .5rem 1rem rgba(0,0,0,.2)",
     position: "relative",
 
+    [sizes.down("md")]: {
+      fontSize: "1.5rem",
+      borderRadius: "100px",
+      marginLeft: 0,
+      padding: "1rem",
+    },
+
     "&:hover": {
       backgroundColor: colors.darkPurple,
       boxShadow: "0 .25rem .5rem rgba(0,0,0,.2)",

src/styles/DarkModeButton.css

@@ -63,4 +63,10 @@ input:checked+.slider:before {
 
 .slider.round:before {
   border-radius: 50%;
+}
+
+@media(max-width:991.98px) {
+  .darkModeButton {
+    margin-right: 2rem;
+  }
 }

src/styles/DisplayPanelsStyles.js

@@ -23,13 +23,21 @@ export default {
       marginBottom: ".5rem",
       marginTop: "2.5rem",
     },
+
+    [sizes.down("md")]: {
+      marginBottom: ".5rem",
+      marginTop: "1.5rem",
+    },
   },
 
   heading: {
     fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "2rem"),
     [sizes.down("lg")]: {
       fontSize: (props) => (props.isMiniPanel ? "1.2rem" : "1.7rem"),
     },
+    [sizes.down("md")]: {
+      fontSize: (props) => (props.isMiniPanel ? "1rem" : "1.5rem"),
+    },
   },
 
   number: {
@@ -50,9 +58,14 @@ export default {
     fontSize: (props) => (props.isMiniPanel ? "2.2rem" : "3.5rem"),
     paddingTop: ".5rem",
     paddingBottom: ".5rem",
+
     [sizes.down("lg")]: {
       fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "3rem"),
     },
+
+    [sizes.down("md")]: {
+      fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "2rem"),
+    },
   },
 
   dataChange: {

src/styles/NavbarStyles.js

@@ -9,13 +9,15 @@ export default {
       width: "100%",
     },
   },
+
   navItems: {
     listStyle: "none",
     [sizes.down("md")]: {
       display: "flex",
       justifyContent: "space-evenly",
     },
   },
+
   navItem: {
     marginBottom: "5rem",
     fontWeight: "500",
@@ -26,10 +28,12 @@ export default {
       marginBottom: "2.5rem",
     },
   },
+
   navLinks: {
     textDecoration: "none",
     color: "inherit",
   },
+
   iconBox: {
     display: "flex",
     zIndex: "50",
@@ -42,6 +46,7 @@ export default {
       zIndex: "50",
     },
   },
+
   icons: {
     fontSize: "2.5rem",
     zIndex: "50",

src/styles/OverviewStyles.js

@@ -1,3 +1,5 @@
+import sizes from "./sizes";
+
 export default {
   root: {
     textAlign: "center",
@@ -6,9 +8,16 @@ export default {
     display: "flex",
     justifyContent: "space-evenly",
     alignItems: "center",
+
+    [sizes.down("sm")]: {
+      flexWrap: "wrap",
+      padding: "0 1rem",
+    },
   },
   panelContainer: {
     width: "20%",
-    // padding: ''
+    [sizes.down("sm")]: {
+      width: "40%",
+    },
   },
 };