UI changes

css/bg.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#a579cc;opacity:0.2;}</style></defs><title>bg</title><path class="a" d="M623,1159c-87.68-165.38-129.16-438.77-9-634,37.72-61.28,92.93-117.41,455-293C1411,66.13,1582-16.8,1697-36c82.8-13.83,576.06-96.19,867,204,292.32,301.61,256.84,861.93,14,1172C2127.64,1915.05,909.4,1699.22,623,1159Z"/><path class="a" d="M810,1133c-49.8-128.47-45-298.39,23-435,76.63-154,210-218.3,429-320,274.53-127.47,576.8-267.83,916-172,85.07,24,231.42,67.54,340,204,122.67,154.17,121.49,331.91,121,406-1.57,237.61-115.25,473.71-277,614C1914.69,1818,981.6,1575.63,810,1133Z"/><path class="a" d="M1181,1142c-62.16-209.22,55-403,70-427,156.87-251,473.31-278.8,578-288,74.9-6.58,251.61-19.83,441,75,89.21,44.67,290.7,145.55,328,349,31.94,174.23-75.8,318.54-109,363-83.65,112-184,158.9-317,219-227.94,103-404.87,183-602,115-188.59-65-300.7-232.66-334-288C1217.51,1229.26,1196.3,1193.48,1181,1142Z"/><path class="a" d="M1455,1182c-53.36-145,46.26-302.52,130-380,107.31-99.3,235.1-110.22,291-115,82.39-7,247.07-21.12,360,100,83.24,89.28,112.47,224.24,77,337-76.11,242-411.58,259.25-432,260C1861.81,1384.71,1532.47,1392.52,1455,1182Z"/><path class="a" d="M1729,1156c-47.23-69.45-12.64-170.65,43-225,67.27-65.71,193.24-90.22,259-23,66.79,68.27,41.95,201-37,265C1916,1236.27,1782.44,1234.58,1729,1156Z"/></svg>

css/emojipanel.css

@@ -1 +0,0 @@
-.EmojiPanel__header,.EmojiPanel__footer{padding:10px;background:#FCFCFC}.EmojiPanel__header{border-bottom:1px solid #F9F9F9;border-radius:3px 3px 0 0}.EmojiPanel__header input{width:100%;padding:5px 14px;border:1px solid #EEE;border-radius:30px;outline:none;font-size:14px;font-weight:inherit}.EmojiPanel__header input:focus{border-color:#d5d5d5}.EmojiPanel__categories{display:flex;flex-wrap:wrap;margin:0 0 10px}.EmojiPanel__categories button{flex:1;min-width:30px;max-width:30px}@media (min-width: 290px){.EmojiPanel__categories button{min-width:30px;max-width:inherit}}.EmojiPanel__footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F9F9F9;border-radius:0 0 3px 3px}.EmojiPanel__brand{margin:0;font-size:14px;text-decoration:none;color:#9d9d9d;transition:color 0.2s}.EmojiPanel__brand:hover,.EmojiPanel__brand:focus{color:#777}.EmojiPanel__btnModifierToggle{font-size:24px}.EmojiPanel__btnModifierToggle.active{display:none}.EmojiPanel__modifierDropdown{display:none;height:30px}.EmojiPanel__modifierDropdown.active{display:block}.EmojiPanel__results{overflow-y:auto;height:300px;padding:0 10px 10px}.EmojiPanel__results .emoji{background:#FFF}.EmojiPanel__noResults{display:none;width:100%;padding:100px 0;text-align:center;color:#777}.EmojiPanel__category{margin:15px 0 5px;padding:0 0 5px;border-bottom:1px solid #EEE;color:#777}.EmojiPanel__tooltip{display:none}.EmojiPanel{width:100%;border-radius:3px;background:#fff;text-align:left}@media (min-width: 290px){.EmojiPanel{width:290px}}.EmojiPanel--trigger{visibility:hidden;pointer-events:none}.EmojiPanel--open{visibility:visible;pointer-events:inherit}.EmojiPanel button{padding:0;border:none;outline:none;background:none;cursor:pointer}.EmojiPanel .emoji{width:30px;height:30px;border:5px solid transparent;border-radius:3px;font-size:20px;line-height:1.1;cursor:pointer;transition:all 0.2s}.EmojiPanel .emoji:hover,.EmojiPanel .emoji:focus{background:#F1F1F1;border-color:#F1F1F1}.EmojiPanel .temp{flex:initial;width:20px;min-width:initial;height:20px;margin:5px;border-radius:3px;background:#EEE}

css/main.css

@@ -9,7 +9,7 @@
 
 :root {
   scroll-behavior: smooth;
-  font-size: clamp(16px, 1.2vmax, 36px);
+  font-size: clamp(16px, 1vmax, 18px);
 }
 
 html, body {
@@ -338,9 +338,8 @@ sm-button[variant=primary] .icon {
   display: flex;
 }
 #sign_in .title-font {
-  font-kerning: normal;
-  line-height: 1.2;
   text-transform: capitalize;
+  line-height: 1.2;
   font-weight: 700;
   font-size: 2.5rem;
 }
@@ -833,6 +832,7 @@ sm-button[variant=primary] .icon {
 #chat footer sm-textarea::part(textarea) {
   background: rgba(var(--text-color), 0.1);
   padding-right: 3rem;
+  border-radius: 2rem;
 }
 #chat #send_message_button {
   position: absolute;
@@ -1098,7 +1098,7 @@ sm-tab-header {
 
   .logo-section {
     padding: 2rem 3rem;
-    margin: 0;
+    margin: 0.5rem 0 1rem 0;
   }
 
   #sign_in {

css/main.scss

@@ -8,7 +8,7 @@
 } 
 :root{
     scroll-behavior: smooth;
-    font-size: clamp(16px, 1.2vmax, 36px);
+    font-size: clamp(16px, 1vmax, 18px);
 }
 html, body{
     height: 100%;
@@ -296,9 +296,8 @@ sm-button[variant="primary"]{
         display: flex;
     }
     .title-font{
-        font-kerning: normal;
-        line-height: 1.2;
         text-transform: capitalize;
+        line-height: 1.2;
         font-weight: 700;
         font-size: 2.5rem;
     }
@@ -774,6 +773,7 @@ sm-button[variant="primary"]{
         sm-textarea::part(textarea){
             background: rgba(var(--text-color), 0.1);
             padding-right: 3rem;
+            border-radius: 2rem;
         }
     }
     #send_message_button{
@@ -1029,7 +1029,7 @@ sm-tab-header{
     }
     .logo-section{
         padding: 2rem 3rem;
-        margin: 0;
+        margin: .5rem 0 1rem 0;
     }
     #sign_in{
         align-items: center;

index.html

@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FLO Messenger</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/main.min.css">
 </head>