Merge pull request #6794 from weseek/fix/modals-style

fix: Modal styles and Enable Lato font

packages/app/src/components/Page/CopyDropdown.jsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
 } from 'reactstrap';
 
+import styles from './CopyDropdown.module.scss';
 
 const { encodeSpaces } = pagePathUtils;
 
@@ -109,7 +110,7 @@ const CopyDropdown = (props) => {
 
   return (
     <>
-      <Dropdown className="grw-copy-dropdown" isOpen={dropdownOpen} toggle={toggleDropdown}>
+      <Dropdown className={`${styles['grw-copy-dropdown']} grw-copy-dropdown`} isOpen={dropdownOpen} toggle={toggleDropdown}>
         <DropdownToggle
           caret
           className={dropdownToggleClassName}

packages/app/src/styles/molecules/copy-dropdown.scss → packages/app/src/components/Page/CopyDropdown.module.scss

@@ -1,4 +1,4 @@
-.grw-copy-dropdown {
+.grw-copy-dropdown :global {
   .dropdown-menu {
     min-width: 310px;
 

packages/app/src/components/RevisionComparer/RevisionComparer.module.scss

@@ -11,4 +11,26 @@
   .d2h-file-header {
     display: none;
   }
+
+  .grw-copy-dropdown {
+    .dropdown-menu {
+      min-width: 310px;
+
+      .dropdown-header {
+        margin-bottom: 0.5em;
+        font-size: 1.1em;
+      }
+
+      // unset active styles
+      .dropdown-item:active {
+        color: unset;
+        background-color: unset;
+      }
+
+      .well {
+        font-size: 0.7em;
+        word-break: break-all;
+      }
+    }
+  }
 }

packages/app/src/pages/_document.page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/google-font-display */
 import React from 'react';
 
 import Document, {

packages/app/src/styles/_layout.scss

@@ -30,7 +30,6 @@ body.not-found-page .grw-container-convertible {
 }
 
 .grw-modal-head {
-  font-size: 1em;
   border-bottom: 1px solid transparent;
 }