From c66add33d2ef9e08a3efbfa9866da9b2c3f2482c Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Tue, 17 Aug 2021 22:20:27 +0100
Subject: [PATCH] fix: modal transition and about tooltips

---
 package.json                                          | 6 +++---
 src/components/helpers/tooltip/tooltip.scss           | 2 +-
 src/components/modals/main/scss/index.scss            | 3 ---
 src/components/modals/main/settings/sections/Time.jsx | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index fc772ea1..e60ebeb4 100644
--- a/package.json
+++ b/package.json
@@ -44,12 +44,12 @@
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.2.0",
-    "sass": "^1.37.5",
+    "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
     "webpack": "^5.50.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.0.0-rc.0"
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0-rc.1"
   },
   "scripts": {
     "start": "webpack serve",
diff --git a/src/components/helpers/tooltip/tooltip.scss b/src/components/helpers/tooltip/tooltip.scss
index b0078b53..cdc1c2f9 100644
--- a/src/components/helpers/tooltip/tooltip.scss
+++ b/src/components/helpers/tooltip/tooltip.scss
@@ -4,7 +4,7 @@
   display: inline-block;
 
   .tooltipTitle {
-    width: 60px;
+    min-width: 60px;
     background-color: rgba(255, 255, 255, 0.89);
     color: #000000;
     text-align: center;
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 45122bea..b2e15d25 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -89,14 +89,11 @@
 }
 
 .ReactModal__Content {
-  //min-height: calc(100vh - 30vh);
-  //max-height: calc(100vh - 10vh);
   box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
   overflow-y: auto;
   position: relative;
 
   // animation
-  opacity: 0;
   transform: scale(0);
   transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
 }
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index b123f4af..a5e079eb 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -78,8 +78,8 @@ export default class TimeSettings extends PureComponent {
         </Dropdown>
         <br/><br/>
         <Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
-          <option value='dots'>{time.date.short_separator.dots}</option>
           <option value='dash'>{time.date.short_separator.dash}</option>
+          <option value='dots'>{time.date.short_separator.dots}</option>
           <option value='gaps'>{time.date.short_separator.gaps}</option>
           <option value='slashes'>{time.date.short_separator.slashes}</option>
        </Dropdown>