From 9f0cd93dd7fa93eff03f877265c04c75d6d939c1 Mon Sep 17 00:00:00 2001
From: Daniel <dds2130@rit.edu>
Date: Fri, 5 Nov 2021 18:51:23 -0400
Subject: [PATCH] banished styles to legacy

---
 index.html            | 22 ++++++----------------
 public/css/legacy.css | 17 +++++++++++++++++
 src/components/app.js | 11 ++++++++++-
 3 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 2070e5e..da1b282 100644
--- a/index.html
+++ b/index.html
@@ -5,25 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Chaotic Backup">
     <link rel="stylesheet" type="text/css" href="/public/css/legacy.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
     <style>
-      html, body, div, span, a, p, ul, li, h1 {
-        margin: 0;
-        border: 0;
-        padding: 0;
-        /*box-sizing: inherit;*/
-/*        font: inherit;*/
-        /*text-decoration: inherit;*/
-        /*text-align: inherit;*/
-        /*color: inherit;*/
-        /*background: transparent;*/
-      }
-      a {
-        color: inherit;
-        text-decoration: inherit;
-      }
       /*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
       html, body { height: 100%; }
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: "Roboto", sans-serif;
+      }
       html { 
         background-color:#1F1F1F; 
         color: grey;
diff --git a/public/css/legacy.css b/public/css/legacy.css
index f8d5857..f4d5eeb 100644
--- a/public/css/legacy.css
+++ b/public/css/legacy.css
@@ -1,3 +1,20 @@
+html, body, div, span, a, p, ul, li, h1 {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  /*box-sizing: inherit;*/
+/*        font: inherit;*/
+  /*text-decoration: inherit;*/
+  /*text-align: inherit;*/
+  /*color: inherit;*/
+  /*background: transparent;*/
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
 @media only screen and (max-width: 975px) {
   .legacy.content {
     margin-top: 36px;
diff --git a/src/components/app.js b/src/components/app.js
index 4f9ef1a..b3d9e6e 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import loadable from '@loadable/component';
 
@@ -35,6 +35,15 @@ const MobileCollection = loadable(
 export default function App() {
   const isMobile = useCheckMobileScreen();
 
+  useEffect(() => {
+    console.log(document.styleSheets);
+    if (isMobile) {
+      document.styleSheets[0].disabled = true;
+    } else {
+      document.styleSheets[0].disabled = false;
+    }
+  }, [isMobile]);
+
   return (
     <Router>
       <Switch>