UI fixes

css/main.css

@@ -521,64 +521,6 @@ h3 {
   cursor: pointer;
 }
 
-textarea {
-  color: inherit;
-  width: 100%;
-  font-size: 1em;
-  display: flex;
-  background-color: transparent;
-  padding: 1em;
-  border-radius: 0.3rem;
-  border: none;
-  font-family: inherit;
-  transition: box-shadow 0.2s;
-  outline: none;
-  caret-color: var(--accent-color, teal);
-  resize: none;
-  line-height: 1.6;
-}
-
-.textarea {
-  display: grid;
-  width: 100%;
-  align-self: flex-start;
-  position: relative;
-  border-radius: 0.3rem;
-  padding: 1rem 0.8rem;
-  background-color: rgba(var(--text-color), 0.06);
-  transition: box-shadow 0.2s;
-}
-.textarea > * {
-  padding: 0;
-  grid-area: 1/1/2/2;
-}
-.textarea .label {
-  align-self: flex-start;
-  pointer-events: none;
-  opacity: 0.6;
-  transition: transform 0.2s, color 0.2s;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  transform-origin: left;
-  will-change: transform;
-}
-.textarea.label-active .label {
-  opacity: 1;
-  transform: translateY(-60%) scale(0.8);
-  color: var(--accent-color);
-}
-.textarea.label-active textarea {
-  transform: translateY(0.5rem);
-}
-.textarea:focus-within {
-  box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-}
-.textarea:focus-within > * {
-  box-shadow: none;
-}
-
 #show_character_count {
   font-size: 0.8rem;
   margin-left: auto;

css/main.scss

@@ -487,62 +487,6 @@ h3 {
   cursor: pointer;
 }
 
-textarea {
-  color: inherit;
-  width: 100%;
-  font-size: 1em;
-  display: flex;
-  background-color: transparent;
-  padding: 1em;
-  border-radius: 0.3rem;
-  border: none;
-  font-family: inherit;
-  transition: box-shadow 0.2s;
-  outline: none;
-  caret-color: var(--accent-color, teal);
-  resize: none;
-  line-height: 1.6;
-}
-.textarea {
-  display: grid;
-  width: 100%;
-  align-self: flex-start;
-  position: relative;
-  border-radius: 0.3rem;
-  padding: 1rem 0.8rem;
-  background-color: rgba(var(--text-color), 0.06);
-  transition: box-shadow 0.2s;
-  & > * {
-    padding: 0;
-    grid-area: 1/1/2/2;
-  }
-  .label {
-    align-self: flex-start;
-    pointer-events: none;
-    opacity: 0.6;
-    transition: transform 0.2s, color 0.2s;
-    user-select: none;
-    transform-origin: left;
-    will-change: transform;
-  }
-  &.label-active {
-    .label {
-      opacity: 1;
-      transform: translateY(-60%) scale(0.8);
-      color: var(--accent-color);
-    }
-    textarea {
-      transform: translateY(0.5rem);
-    }
-  }
-  &:focus-within {
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-    & > * {
-      box-shadow: none;
-    }
-  }
-}
-
 #show_character_count {
   font-size: 0.8rem;
   margin-left: auto;

index.html

@@ -536,8 +536,8 @@
                     <h5>Recovered FLO ID</h5>
                     <sm-copy id="recovered_flo_id"></sm-copy>
                 </div>
-                <sm-input id="retrieve_flo_id_field" class="password-field" type="password"
+                <sm-input id="retrieve_flo_id_field" type="password" error-text="Invalid private key"
-                    error-text="Invalid private key" placeholder="Private key" required autofocus>
+                    placeholder="Private key" class="password-field" required autofocus>
                     <label slot="right" class="interact">
                         <input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
                         <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -606,7 +606,7 @@
             </svg>
             <h4>Enter sender's private key</h4>
             <sm-form>
-                <sm-input id="get_private_key_field" type="password" required autofocus>
+                <sm-input id="get_private_key_field" class="password-field " type="password" required autofocus>
                     <label slot="right" class="interact">
                         <input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
                         <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -1221,7 +1221,8 @@
         function handleMobileChange(e) {
             isMobileView = e.matches
         }
-        mobileQuery.addListener(handleMobileChange)
+        mobileQuery.addEventListener('change', handleMobileChange)
+
         handleMobileChange(mobileQuery)
     </script>
     <script>