From 0511e38a9e318aef0563a2c7a7d89abfb9e95ab9 Mon Sep 17 00:00:00 2001
From: Noel Chou <noel_chou@sil.org>
Date: Tue, 15 Oct 2024 14:40:18 -0400
Subject: [PATCH] BL-13988 revisions to unlisted button

---
 .../src/CustomizeLanguageButton.tsx           | 19 +++++++++++++++----
 .../src/LanguageChooser.tsx                   |  7 ++++---
 .../language-chooser-react-mui/src/colors.ts  |  1 +
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx
index 04cefe7..8cb11d2 100644
--- a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx
+++ b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx
@@ -20,28 +20,38 @@ export const CustomizeLanguageButton: React.FunctionComponent<
       variant="outlined"
       color="primary"
       css={css`
-        border: 1.5px solid ${COLORS.blues[2]};
+        border: 1.5px solid ${COLORS.greys[1]};
+        :hover {
+          border-color: ${COLORS.black};
+        }
+        background-color: ${COLORS.white};
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         text-transform: none;
-        padding: 5px 10px;
+        padding: 5px 7px;
       `}
       {...buttonProps}
     >
       <Typography
         css={css`
           text-transform: uppercase;
-          color: ${COLORS.blues[2]};
+          color: ${COLORS.black};
+          font-size: 0.75rem;
           font-weight: bold;
           display: flex; // for the icon
+          align-items: center;
         `}
       >
         {!showAsUnlistedLanguage && (
           <EditIcon
             css={css`
-              margin-right: 5px;
+              height: 0.75rem;
+              width: 0.75rem;
+              // for visual alignment
+              margin-right: 3px;
+              margin-bottom: 3px;
             `}
           />
         )}
@@ -51,6 +61,7 @@ export const CustomizeLanguageButton: React.FunctionComponent<
         id="custom-language-card-bottom"
         css={css`
           display: flex;
+          align-items: center;
           width: 100%;
           justify-content: space-between;
         `}
diff --git a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
index 88fd691..75af87a 100644
--- a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
+++ b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
@@ -131,7 +131,7 @@ export const LanguageChooser: React.FunctionComponent<{
           position: relative;
           margin-left: auto;
           margin-right: auto;
-          overflow: scroll;
+          overflow: auto;
         `}
       >
         <AppBar
@@ -177,7 +177,7 @@ export const LanguageChooser: React.FunctionComponent<{
               position: relative;
               display: flex; // to make the language list overflow scroll work
               flex-direction: column;
-              padding: 10px 20px 20px 20px;
+              padding: 10px 20px;
               background-color: ${COLORS.greys[0]};
             `}
           >
@@ -340,7 +340,7 @@ export const LanguageChooser: React.FunctionComponent<{
               flex-direction: column;
               justify-content: flex-end;
               background-color: white;
-              padding: 10px 20px 20px 20px;
+              padding: 10px 20px;
             `}
           >
             {lp.selectedLanguage && (
@@ -396,6 +396,7 @@ export const LanguageChooser: React.FunctionComponent<{
                 display: flex;
                 justify-content: flex-end;
                 padding-top: 15px;
+                padding-bottom: 5px;
               `}
             >
               <Button
diff --git a/components/language-chooser/react/language-chooser-react-mui/src/colors.ts b/components/language-chooser/react/language-chooser-react-mui/src/colors.ts
index fc67553..807df42 100644
--- a/components/language-chooser/react/language-chooser-react-mui/src/colors.ts
+++ b/components/language-chooser/react/language-chooser-react-mui/src/colors.ts
@@ -1,5 +1,6 @@
 export const COLORS = {
   white: "#FFFFFF",
+  black: "#000000",
   blues: ["#BFDFFC", "#E5F2FE", "#1F49A3"],
   greys: ["#F9F9F9", "#DADADA", "#B5B5B5", "#5E6366"],
 };