more requested changes

src/components/modals/Modal.vue

@@ -12,6 +12,13 @@
         <font-awesome-icon
           @click="isMaximized = !isMaximized"
           class="maximize-toggle"
+          v-if="isMaximized"
+          icon="window-minimize"
+        />
+        <font-awesome-icon
+          @click="isMaximized = !isMaximized"
+          class="maximize-toggle"
+          v-if="!isMaximized"
           icon="window-maximize"
         />
         <font-awesome-icon @click="close" class="close" icon="times-circle" />
@@ -57,7 +64,13 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
+  max-width: 60%;
+
+  .vote-history &,
+  .night-reference &,
+  .characters & {
     overflow-y: auto;
+  }
 
   ul {
     list-style-type: none;
@@ -80,9 +93,10 @@ export default {
       color: red;
     }
   }
-  .maximize-toggle {
+  > .maximize-toggle {
+    z-index: 100;
     position: absolute;
-    right: 55px;
+    right: 52px;
     top: 20px;
     cursor: pointer;
     &:hover {
@@ -91,6 +105,11 @@ export default {
   }
 }
 
+.not-maximized {
+  max-height: 80%;
+  max-width: 80%;
+}
+
 .maximized {
   background: rgba(0, 0, 0, 0.95);
   padding: 0;
@@ -98,14 +117,9 @@ export default {
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-}
+  display: flex;
-.not-maximized {
+  align-content: center;
-  background: rgba(0, 0, 0, 0.8);
+  //justify-content: center;
-  padding: 10px 20px;
-  height: revert;
-  width: revert;
-  max-width: 80%;
-  max-height: 80%;
 }
 
 .modal-fade-enter,

src/components/modals/NightOrderModal.vue

@@ -165,7 +165,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 40px;
   svg {
     vertical-align: middle;
   }

src/components/modals/ReferenceModal.vue

@@ -103,7 +103,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 40px;
   svg {
     vertical-align: middle;
   }

src/components/modals/VoteHistoryModal.vue

@@ -99,7 +99,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 90px 0 10px;
   svg {
     vertical-align: middle;
   }
@@ -107,7 +107,6 @@ h3 {
 
 table {
   border-spacing: 10px 0;
-  padding: 10px 0px 0px 0px;
 }
 
 thead td {

src/main.js

@@ -46,7 +46,8 @@ const faIcons = [
   "VolumeUp",
   "VolumeMute",
   "VoteYea",
-  "WindowMaximize"
+  "WindowMaximize",
+  "WindowMinimize"
 ];
 const fabIcons = ["Github", "Discord"];
 library.add(