Fix layout issues

justinsmid · Aug 18, 2020 · 7b586a5 · 7b586a5
1 parent dc4a857
commit 7b586a5
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 142 deletions.
diff --git a/desktop/public/electron.js b/desktop/public/electron.js
@@ -67,7 +67,7 @@ function onAppReady() {
         mainWindow = null
     });
 
-    mainWindow.webContents.openDevTools();
+    // mainWindow.webContents.openDevTools();
 
     global.mainWindow = mainWindow;
 

diff --git a/desktop/src/components/navBar/menu.sass b/desktop/src/components/navBar/menu.sass
@@ -4,7 +4,7 @@
     position: sticky
     top: 0
     z-index: 2000
-    width: 100vw
+    width: 100%
     height: $navigation-bar-height
     min-height: $navigation-bar-height
     color: white

diff --git a/desktop/src/entry/App.js b/desktop/src/entry/App.js
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import './App.sass';
-import {BrowserRouter as Router, Switch, Route, Redirect, useLocation} from 'react-router-dom';
+import {BrowserRouter as Router, Switch, Route, useLocation} from 'react-router-dom';
 import routes from '../routes';
 import NavigationBar from '../components/navBar/NavigationBar';
 
@@ -17,7 +17,6 @@ function App() {
         <LocationListener onChange={onLocationChange} />
         <NavigationBar currentPath={currentPath} />
         <Switch className="switch">
-          <Route exact path="/" render={() => <Redirect to="/twitch" />} />
           {routes.map(route => (
             <Route key={route.title} exact path={route.path} component={route.component} />
           ))}

diff --git a/desktop/src/entry/App.sass b/desktop/src/entry/App.sass
@@ -1,7 +1,9 @@
 @import "../util/sass-variables";
 
 .app
+    position: relative
     width: 100vw
+    min-width: $app-min-width
     height: 100vh
     background-color: $app-background-color
     color: $app-text-color

diff --git a/desktop/src/pages/twitch/TwitchPage.js b/desktop/src/pages/twitch/TwitchPage.js
diff --git a/desktop/src/pages/twitch/TwitchPage.sass b/desktop/src/pages/twitch/TwitchPage.sass
@@ -2,7 +2,12 @@
 $table-cell-width: 100px
 
 .page
-    padding: 10px
+    width: 100%
+    min-width: $app-min-width
+    background-color: $app-background-color
+
+    .page-content
+        padding: 10px
 
 .authenticated-actions
     button
@@ -65,7 +70,7 @@ $table-cell-width: 100px
 
 .modal
     position: relative
-    width: 600px
+    width: 550px
     min-height: 300px
     max-height: 600px
     overflow-x: hidden

diff --git a/desktop/src/util/sass-variables.sass b/desktop/src/util/sass-variables.sass
@@ -2,4 +2,5 @@ $navigation-bar-color: #688f68
 $navigation-bar-height: 50px
 
 $app-background-color: #282c34
-$app-text-color: #8Ea368
+$app-text-color: #8Ea368
+$app-min-width: 700px