feat: add undo/redo buttons & tweak footer (#3832)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/excalidraw-app/components/LanguageList.tsx

@@ -1,23 +1,18 @@
 import React from "react";
-import clsx from "clsx";
 import * as i18n from "../../i18n";
 
 export const LanguageList = ({
   onChange,
   languages = i18n.languages,
   currentLangCode = i18n.getLanguage().code,
-  floating,
 }: {
   languages?: { code: string; label: string }[];
   onChange: (langCode: i18n.Language["code"]) => void;
   currentLangCode?: i18n.Language["code"];
-  floating?: boolean;
 }) => (
   <React.Fragment>
     <select
-      className={clsx("dropdown-select dropdown-select__language", {
-        "dropdown-select--floating": floating,
-      })}
+      className="dropdown-select dropdown-select__language"
       onChange={({ target }) => onChange(target.value)}
       value={currentLangCode}
       aria-label={i18n.t("buttons.selectLanguage")}

src/excalidraw-app/index.scss

@@ -2,12 +2,18 @@
   .layer-ui__wrapper__footer-center {
     display: flex;
     justify-content: space-between;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-inline-start: auto;
   }
 
   .encrypted-icon {
     border-radius: var(--space-factor);
     color: var(--icon-green-fill-color);
-    margin-top: 13px;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-inline-start: auto;
+    margin-inline-end: 0.6em;
 
     svg {
       width: 1.2rem;

src/excalidraw-app/index.tsx

@@ -348,11 +348,8 @@ const ExcalidrawWrapper = () => {
 
       const renderLanguageList = () => (
         <LanguageList
-          onChange={(langCode) => {
-            setLangCode(langCode);
-          }}
+          onChange={(langCode) => setLangCode(langCode)}
           languages={languages}
-          floating={!isMobile}
           currentLangCode={langCode}
         />
       );