From 3fb0d8b7ebac531085768c684c110d43ca0a176e Mon Sep 17 00:00:00 2001
From: Mihaela Dumitru <mihdmt@gmail.com>
Date: Tue, 29 Aug 2023 15:30:22 +0300
Subject: [PATCH] fix(dial-pad) resize dial buttons based on screen height

---
 spot-client/src/common/css/_button.scss       |  2 +-
 .../src/common/css/_desktop-picker.scss       |  2 +-
 spot-client/src/common/css/_dial-pad.scss     | 96 ++++++++++++++++++-
 spot-client/src/common/css/_help-view.scss    |  4 +-
 spot-client/src/common/css/_home-view.scss    | 10 +-
 .../src/common/css/_media-queries.scss        | 38 +++++---
 .../src/common/css/_meeting-name-entry.scss   |  8 +-
 spot-client/src/common/css/_modal.scss        |  2 +-
 spot-client/src/common/css/_screenshare.scss  |  2 +-
 spot-client/src/common/css/nav/_nav.scss      |  2 +-
 .../css/page-layouts/_feedback-view.scss      |  4 +-
 .../css/page-layouts/_join-code-view.scss     |  8 +-
 .../css/page-layouts/_waiting-view.scss       |  8 +-
 13 files changed, 146 insertions(+), 40 deletions(-)

diff --git a/spot-client/src/common/css/_button.scss b/spot-client/src/common/css/_button.scss
index f678d21ae..727fd6f53 100644
--- a/spot-client/src/common/css/_button.scss
+++ b/spot-client/src/common/css/_button.scss
@@ -60,7 +60,7 @@
         font-size: 1em;
         height: 36px;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             height: 48px;
         }
     }
diff --git a/spot-client/src/common/css/_desktop-picker.scss b/spot-client/src/common/css/_desktop-picker.scss
index a0da0e140..397eebff0 100644
--- a/spot-client/src/common/css/_desktop-picker.scss
+++ b/spot-client/src/common/css/_desktop-picker.scss
@@ -9,7 +9,7 @@
     .desktop-picker {
         width: 100%;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             width: 50vw;
         }
     }
diff --git a/spot-client/src/common/css/_dial-pad.scss b/spot-client/src/common/css/_dial-pad.scss
index 8cc403258..b8949d8a3 100644
--- a/spot-client/src/common/css/_dial-pad.scss
+++ b/spot-client/src/common/css/_dial-pad.scss
@@ -27,10 +27,67 @@
         padding: 0;
         width: 72px;
 
+        @media #{$mqh-xxsmall} {
+            height: 50px;
+            margin: 4px 6px;
+            width: 50px;
+        }
+
+        @media #{$mqh-mobile-s} {
+            height: 65px;
+            margin: 8px 12px;
+            width: 65px;
+        }
+
+        @media #{$mqh-laptop} {
+            height: 80px;
+            width: 80px;
+        }
+
+        @media #{$mqh-mobile-l} {
+            height: 90px;
+            width: 90px;
+        }
+
+        @media #{$mqh-tablet} {
+            height: 100px;
+            width: 100px;
+        }
+
+        @media #{$mqh-laptop-l} {
+            height: 120px;
+            width: 120px;
+        }
+
+        @media #{$mqh-4k} {
+            width: 200px;
+            height: 200px;
+        }
+
         .main {
             display: block;
             font-size: 32px;
             font-weight: 600;
+
+            @media #{$mqh-xxsmall} {
+                font-size: 22px;
+                line-height: 20px;
+            }
+
+            @media #{$mqh-mobile-s} {
+                font-size: 32px;
+                line-height: 32px;
+            }
+    
+            @media #{$mqh-laptop-l} {
+                font-size: 45px;
+                line-height: 45px;
+            }
+    
+            @media #{$mqh-4k} {
+                font-size: 65px;
+                line-height: 65px;
+            }      
         }
 
         .sub {
@@ -38,6 +95,25 @@
             font-size: 10px;
             font-weight: bold;
             line-height: 14px;
+
+            @media #{$mqh-xxsmall} {
+                line-height: 8px;
+            }
+
+            @media #{$mqh-mobile-s} {
+                font-size: 10px;
+                line-height: 14px;
+            }
+
+            @media #{$mqh-laptop-l} {
+                font-size: 20px;
+                line-height: 18px;
+            }
+    
+            @media #{$mqh-4k} {
+                font-size: 25px;
+                line-height: 20px;
+            }  
         }
 
         .sub:empty:before {
@@ -110,6 +186,16 @@
             font-size: 32px;
             line-height: 44px;
             text-align: center;
+
+            @media #{$mqh-xxsmall} {
+                font-size: 22px;
+                line-height: 34px;
+            }
+
+            @media #{$mqh-mobile-l} {
+                font-size: 32px;
+                line-height: 44px;
+            }
         }
 
         input::placeholder {
@@ -220,12 +306,20 @@
         border: 1px solid rgba(255, 255, 255, 0.25);
         color: white;
         display: flex;
-        font-size: 13px;
+        font-size: 25px;
         padding: 4px 8px;
 
         .country-search-trigger-name {
             margin: 0 6px;
         }
+
+        @media #{$mqh-xxsmall} {
+            font-size: 20px;
+        }
+
+        @media #{$mqh-mobile-l} {
+            font-size: 25px;
+        }
     }
 }
 
diff --git a/spot-client/src/common/css/_help-view.scss b/spot-client/src/common/css/_help-view.scss
index d98600207..c752fc476 100644
--- a/spot-client/src/common/css/_help-view.scss
+++ b/spot-client/src/common/css/_help-view.scss
@@ -18,11 +18,11 @@
     padding: 32px 16px;
     text-align: center;
 
-    @media #{$mq-xxsmall} {
+    @media #{$mqw-xxsmall} {
       width: 95%;
     }
 
-    @media #{$mq-tablet} {
+    @media #{$mqw-tablet} {
       width: 60%;
     }
 
diff --git a/spot-client/src/common/css/_home-view.scss b/spot-client/src/common/css/_home-view.scss
index c7883e8cf..f9b271ea8 100644
--- a/spot-client/src/common/css/_home-view.scss
+++ b/spot-client/src/common/css/_home-view.scss
@@ -2,23 +2,23 @@
     background-color: var(--container-bg-color);
     border-radius: 5px;
 
-    @media #{$mq-mobile-s} {
+    @media #{$mqw-mobile-s} {
         width: 80%;
     }
 
-    @media #{$mq-tablet} {
+    @media #{$mqw-tablet} {
         width: 50%;
     }
 
-    @media #{$mq-laptop} {
+    @media #{$mqw-laptop} {
         width: 50%;
     }
 
-    @media #{$mq-laptop-l} {
+    @media #{$mqw-laptop-l} {
         width: 47%;
     }
 
-    @media #{$mq-4k} {
+    @media #{$mqw-4k} {
         width: 47%;
     }
 
diff --git a/spot-client/src/common/css/_media-queries.scss b/spot-client/src/common/css/_media-queries.scss
index 0d003859e..90610f2f6 100644
--- a/spot-client/src/common/css/_media-queries.scss
+++ b/spot-client/src/common/css/_media-queries.scss
@@ -2,13 +2,25 @@
  * The various screen-width breakpoints to use to determine when styles should
  * adjust.
  */
-$mq-xxsmall: '(min-width: 0em)'; // catch-all
-$mq-mobile-s: '(min-width: 320px)';
-$mq-mobile-l: '(min-width: 425px)';
-$mq-tablet: '(min-width: 768px)';
-$mq-laptop: '(min-width: 1024px)';
-$mq-laptop-l: '(min-width: 1440px)';
-$mq-4k: '(min-width: 2460px)';
+$mqw-xxsmall: '(min-width: 0em)'; // catch-all
+$mqw-mobile-s: '(min-width: 320px)';
+$mqw-mobile-l: '(min-width: 425px)';
+$mqw-tablet: '(min-width: 768px)';
+$mqw-laptop: '(min-width: 1024px)';
+$mqw-laptop-l: '(min-width: 1440px)';
+$mqw-4k: '(min-width: 2460px)';
+
+/**
+ * The various screen-height breakpoints to use to determine when styles should
+ * adjust.
+ */
+$mqh-xxsmall: '(min-height: 0em)'; // catch-all
+$mqh-mobile-s: '(min-height: 667px)';
+$mqh-mobile-l: '(min-height: 812px)';
+$mqh-tablet: '(min-height: 1024px)';
+$mqh-laptop: '(min-height: 768px)';
+$mqh-laptop-l: '(min-height: 1080px)';
+$mqh-4k: '(min-height: 2160px)';
 
 /**
  * The font size from which all other font sizes should inherit.
@@ -24,31 +36,31 @@ body {
     font-size: $base-font-size;
     line-height: $base-line-height;
 
-    @media #{$mq-xxsmall} {
+    @media #{$mqw-xxsmall} {
         font-size: $base-font-size * 0.7;
         line-height: $base-line-height * 0.7;
     }
 
-    @media #{$mq-mobile-s} {
+    @media #{$mqw-mobile-s} {
       font-size: $base-font-size * 0.7;
       line-height: $base-line-height * 0.7;
     }
 
-    @media #{$mq-tablet} {
+    @media #{$mqw-tablet} {
         font-size: $base-font-size * 0.9;
         line-height: $base-line-height * 0.9;
     }
 
-    @media #{$mq-laptop} {
+    @media #{$mqw-laptop} {
         font-size: $base-font-size;
         line-height: $base-line-height;
     }
 
-    @media #{$mq-laptop-l} {
+    @media #{$mqw-laptop-l} {
         font-size: $base-font-size * 1.3;
     }
 
-    @media #{$mq-4k} {
+    @media #{$mqw-4k} {
         font-size: $base-font-size * 1.5;
     }
 }
diff --git a/spot-client/src/common/css/_meeting-name-entry.scss b/spot-client/src/common/css/_meeting-name-entry.scss
index 7ab5b967f..bad897e2a 100644
--- a/spot-client/src/common/css/_meeting-name-entry.scss
+++ b/spot-client/src/common/css/_meeting-name-entry.scss
@@ -4,11 +4,11 @@
     padding: 20px;
     width: 80%;
 
-    @media #{$mq-laptop} {
+    @media #{$mqw-laptop} {
         width: 70%;
     }
 
-    @media #{$mq-laptop-l} {
+    @media #{$mqw-laptop-l} {
         width: 60%;
     }
 
@@ -32,7 +32,7 @@
     .input-with-default-domain {
         display: block;
 
-        @media #{$mq-mobile-l} {
+        @media #{$mqw-mobile-l} {
             display: flex;
         }
 
@@ -47,7 +47,7 @@
             overflow: hidden;
 
 
-            @media #{$mq-mobile-l} {
+            @media #{$mqw-mobile-l} {
                 flex-direction: row;
             }
         }
diff --git a/spot-client/src/common/css/_modal.scss b/spot-client/src/common/css/_modal.scss
index 58a22a3ea..d846ff164 100644
--- a/spot-client/src/common/css/_modal.scss
+++ b/spot-client/src/common/css/_modal.scss
@@ -26,7 +26,7 @@
         position: relative;
 
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             background-color: var(--container-bg-color);
             height: auto;
             margin: 50px;
diff --git a/spot-client/src/common/css/_screenshare.scss b/spot-client/src/common/css/_screenshare.scss
index 3f8e6b054..b2947675d 100644
--- a/spot-client/src/common/css/_screenshare.scss
+++ b/spot-client/src/common/css/_screenshare.scss
@@ -10,7 +10,7 @@
     text-align: center;
     width: 100%;
 
-    @media #{$mq-tablet} {
+    @media #{$mqw-tablet} {
         width: 500px;
     }
 
diff --git a/spot-client/src/common/css/nav/_nav.scss b/spot-client/src/common/css/nav/_nav.scss
index 175e79f2f..fee9f8524 100644
--- a/spot-client/src/common/css/nav/_nav.scss
+++ b/spot-client/src/common/css/nav/_nav.scss
@@ -8,7 +8,7 @@
         text-align: center;
         width: 200px;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             display: flex;
             flex: 1;
             flex-wrap: nowrap;
diff --git a/spot-client/src/common/css/page-layouts/_feedback-view.scss b/spot-client/src/common/css/page-layouts/_feedback-view.scss
index 37d01f435..764241736 100644
--- a/spot-client/src/common/css/page-layouts/_feedback-view.scss
+++ b/spot-client/src/common/css/page-layouts/_feedback-view.scss
@@ -38,11 +38,11 @@
         padding: 32px 16px; 
         text-align: center;
 
-        @media #{$mq-xxsmall} {
+        @media #{$mqw-xxsmall} {
             width: 100%;
         }
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             width: 50%;
         }
 
diff --git a/spot-client/src/common/css/page-layouts/_join-code-view.scss b/spot-client/src/common/css/page-layouts/_join-code-view.scss
index 074ccac5d..248f549fa 100644
--- a/spot-client/src/common/css/page-layouts/_join-code-view.scss
+++ b/spot-client/src/common/css/page-layouts/_join-code-view.scss
@@ -25,7 +25,7 @@
             display: grid;
             grid-template-columns: 1fr 1fr 1fr 1fr;
 
-            @media #{$mq-tablet} {
+            @media #{$mqw-tablet} {
                 display: flex;
             }
         }
@@ -33,7 +33,7 @@
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
 
-            @media #{$mq-tablet} {
+            @media #{$mqw-tablet} {
                 display: flex;
             }
         }
@@ -59,11 +59,11 @@
         position: absolute;
         left: 5px;
 
-        @media #{$mq-xxsmall} {
+        @media #{$mqw-xxsmall} {
             font-size: 3.5em;
         }
 
-        @media #{$mq-laptop} {
+        @media #{$mqw-laptop} {
             font-size: 2em;
         }
     }
diff --git a/spot-client/src/common/css/page-layouts/_waiting-view.scss b/spot-client/src/common/css/page-layouts/_waiting-view.scss
index 1037b4d05..04f953a5f 100644
--- a/spot-client/src/common/css/page-layouts/_waiting-view.scss
+++ b/spot-client/src/common/css/page-layouts/_waiting-view.scss
@@ -28,11 +28,11 @@
             padding: .8em 1.2em;
             width: 80%;
 
-            @media #{$mq-laptop} {
+            @media #{$mqw-laptop} {
                 width: 70%;
             }
         
-            @media #{$mq-laptop-l} {
+            @media #{$mqw-laptop-l} {
                 width: 60%;
             }
         }
@@ -61,11 +61,11 @@
         padding: 0;
         width: 100%;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             width: 450px;
         }
     
-        @media #{$mq-laptop-l} {
+        @media #{$mqw-laptop-l} {
             width: 500px;
         }
     }